Perceived Instant Mobile Web Experience
Amanda Ducrou and Jason Corbett showed us how the Expedia team managed that instant load feel.
This is part of a series of notes from from YOW! Connected conference where leading experts presents their thoughts on all things mobile and IoT.
Fast site speed is essential for a good UX and can drive more traffic and increase conversion to your product. This is especially important on mobile devices where users are spending more time on and where network speeds can exacerbate load speed issues.
Survey reveals 85% of Expedia users expect mobile to load as fast/faster than the desktop counterpart.
Usability studies have shown that response times over 1 second make the user feel like they’re waiting. The Expedia team focused on achieving a perceived instant experience (note: perceived means NOT actual performance).
As always, mobile first.
Test and learn so that you have a good benchmark to start with, using Google Analytics to measure bounce rate. Mobile SEO pages with fast page load will see lower bounce rate. Google PageSpeed Insights has a strong focus on mobile performance and generates two separate reports for mobile and desktop. The report is quite detailed and serves a a good guide on what could be improved. Anything above 85 is considered a good score.
Tools used by the team:
ngrok — If working in dev environment, you will need to use ngrok to create introspectable tunnels to your localhost.
PageSpeed Insights command line tool — which can be added to test or build process. Having PSI as a command line tool allows the team to test when deploy to test or production environment
The team use the PageSpeed Insights report card to form conversations/strategy around areas to improve on and refined their:
1. Build process
Gulp or grunt for optimise i.e minify, compress or concat. Less http request and smaller filesize
2. Structuring the page
Everything above the fold inlined css to be percieved instant. Use criticalCSS to automate the task. It’s one of the metric Google PageSpedd Insights specifically looks at.
Prevent JS render blocking, move JS to bottom of the page, add async attribute (be careful with load order)
3. Server side configuration
Set cache control max age
Set header content encoding gzip
Move all static assets to CDN like amazon s3
Following the process above, The Expedia team achieved a Google PageSpeed Insights score of 92 on mobile devices and this has positive impact on users’ perceived load times and traffic.