Site performance in the mobile age.
The mobile revolution has seen a dramatic change in the way the average user consumes web content. The proliferation of smartphones and mobile-friendly sites has allowed users to access articles, social media, and even e-commerce on their phones and tablets, and the shift in behaviour that this represents is immense. In 2017 it is more important than ever to ensure that your site performs well across the mind-boggling current variety of hardware devices and screen sizes.
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.
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.