Ofcom reported that in the beginning of 2016, 61% of adults in the UK used their mobile device to access the internet. In the US, the average time spent online in 2015 showed mobile in its ascendancy – with 51% mobile vs 42% desktop usage.
This is a huge market to lose, and so the onus is on you to provide a responsive and high-performant experience. The competition is fierce, so do not lose out from neglect – design responsively from the ground up with mobile in mind, and try to allow functionality to degrade elegantly. Consider tailoring the experience to the platform – E-Commerce in particular requires detailed thought to be put into providing a seamless, intuitive user journey when the screen real estate is so restricted.
Google recently tested bounce vs conversion rate models by comparing two mobile experiences – one which had been streamlined for web, the other not. The more cluttered and inefficient the page, the slower the DOM was loaded for the user and the bounce rate soared. DOM-ready load times were on average 55% longer for the bounced sessions.
Performance is key here as the patience of users is limited, and this particular hurdle is magnified on a mobile device. The initial pageload must be kept as low as possible – on average if a page takes more than just 3 seconds to load, then users will abandon your site for greener pastures. Be sure to tweak your site’s performance to hit the magic sweet spot of 2.4 seconds or less:
- Avoid unnecessary external scripts and http requests. Even scripts like Google Analytics can be damaging if not implemented correctly. Asynchronicity is your friend!
- Optimise and compress images, and make use of font-based icons.
- Stick to 2 or 3 fonts at the most. This also helps to de-clutter a page.
- Minify css & js. Use a task-runner like Gulp or Grunt to automate development & production builds.
- Avoid render-blocking css and js. Build your page from an agile perspective, so that at least some content is displayed early, and is progressively enhanced once the page is fully loaded.
- If on WordPress etc. avoid too many plugins… In addition to being horrible security risks, poorly-maintained plugins can be a nightmare for performance.
- Try and avoid too many redirects, particularly on landing pages. This also damages your SEO.
Initiatives from market leaders have been driving mobile-specific performance technologies in recent years. For instance, Google’s AMP project sets to completely change the approach we currently take to mobile-centric design by requiring us to provide a second html file for any pages we wish to be AMP-observant. Google aims to provide an extremely pared-down mobile experience for users by providing the ‘AMP HTML Framework’, which uses a slightly tweaked API, and by restricting all the ingredients which tend to damage pagespeed – we’re talking javascript/images/plugins. Page-speed is hugely improved, and it does provide a particularly nice viewing experience for articles linked on social media for instance.
Sounds good, but it does unfortunately require duplicate html pages to be designed and created which could rather fragment the experience of a typical user. It also creates difficulties with Analytics tools, as the link from an AMP article page to a non-AMP homepage will not be viewed in the same way as a standard internal lead. You may see bounce rates shoot up alongside hit rates as a result. Similarly, SEO is always inextricably linked to performance. Google rates high-performant websites higher in the search rankings than lower-performant pages, and with the announcement of Mobile-first ranking to be implemented very soon, now is the time to modernise.
Useful resources for tips to improved page speed include:
- Google PageSpeed
- Varvy Pagespeed
- Mozilla’s dev blog & Google’s dev blog
- Browser extensions to measure page-load
Mobile web performance can be a real minefield, so we hope you found this at least a little interesting. Contact us if you need any help with your site’s performance, design or SEO.
