Pixel Pixel use Cookies.

We use cookies to enable essential services and functionality and to collect data on how visitors interact with our site. By clicking Accept Cookies, you agree to our use of all relevant cookies.

Certain cookies are unfortunately fundamental to the operation of the site and are thus required - you can find out more by viewing our Cookie Policy.

You can manage your preferences at any time via our Cookie Preferences manager.

Manage Preferences

Manage Cookie Preferences for Pixel Pixel

You can find out more about by checking out our Cookie Policy

  • Essential

    Unfortunately certain cookies are essential to the operation of our site and are a condition of its use.

  • Performance

    Collects anonymous data about how visitors use our site and how it performs.

  • Support

    These cookies assist us in providing a great service every time. They may include CRM or feedback tools.

Get in touch
Featured image for Site performance in the mobile age.

Site performance in the mobile age.

Posted on 30th January 2017 at 10:15am by Chris Snowden in Accessibility, Design, Mobile, Optimisation, Web Design

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:

  1. Avoid unnecessary external scripts and http requests. Even scripts like Google Analytics can be damaging if not implemented correctly. Asynchronicity is your friend!
  2. Optimise and compress images, and make use of font-based icons.
  3. Stick to 2 or 3 fonts at the most. This also helps to de-clutter a page.
  4. Minify css & js. Use a task-runner like Gulp or Grunt to automate development & production builds.
  5. 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.
  6. If on WordPress etc. avoid too many plugins… In addition to being horrible security risks, poorly-maintained plugins can be a nightmare for performance.
  7. 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:

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.

We love what we do! You will too. Speak to us