Academy on Air – Mobile Speed

// By Dillon Kavanagh

Building on a previous Google Academy on Air session titled “Design”, we have taken the primary talking points and distilled them into this piece, so you can get everything you need to know on what’s necessary about ‘mobile speed’ in one easy to read location.

 

The live stream was presented by Dominik Heyberg and Dennis Raspotnig, both work as Mobile UX Managers at Google. Outlined early in the discussion was the diverse formats media is now distributed through including; video, gif, powerpoint, pdf, HTML amongst others. Many bandwidth providers struggle to handle the required request and response times that your device demands across these mediums, which presents a challenge in your user experience. One core purpose of the discussion is to dig into what ‘you’ can do as a non-developer to rectify and debug speed and performance related issues as efficiently and effectively as possible to ensure users can get on with enjoying your site.

Slow Mobile Speed

 

Common Misconception: Many believe you must be a developer to spot or report site issues in relation to speed and performance. This perception is, however, simply not true, there are many tools available that allow everybody to check for some of the most common problems

 

Agenda

  • Importance of site speed
  • Tools to identify site speed

Picture this, you are considering purchasing something in a store, and you encounter this queue streaming out the door and around the corner, ask yourself this – would you stand in this queue?, perhaps this may sound dramatic but we don’t derive this example from nowhere, at Viralbamboo we’ve made a habit of basing our opinions on facts. During the live stream, Google outlined that 53% of people abandon a website that takes more than 3-seconds to load. The concept is simple, a faster site directly correlates to more business or at minimum more traffic. Nobody wants to be kept waiting, we’ll show you how to ensure your users avoid the wait.

Diving into some statistics, Google has found there was a substantial impact when analyzing the impact of every 1-second delay on a website’s load time. Primarily that a 1-second delay will lead to:

  • 8.3 % Increase in bounce rate
  • 3.5% Decrease in conversion rate
  • 2.1% Decrease in cart size
  • 9.4% Decrease in pageview

Can you afford to have these key metrics be driven down by something that is very tangibly avoidable, by simply ensuring your site is up to best practices? The conclusion summarised within the session was that speed and performance are not simply nice to have with regards to the performance of your KPI’s but essential components of a website or app based on Google’s own statistical findings. The knock on impact is that you will lose customers if your site is not sufficiently performing.

The Correlation Between Speed & Bounce

The graph below looks at the impact that site speed has on bounce rate alongside associated conversion rates. The obvious taking from the below graphic is that you can lose the possibility to reach your users effectively purely on the basis your site or app is too slow, the effect on your sales can be incredibly worrying if not managed correctly. Mobile pages that load 1-second faster see up to 27% increase in your conversion rate. The term long-hanging fruit certainly applies, ensuring that your page load speed and performance are optimised to best practice is another area which you can firmly control to ensure that users who you get to your site, don’t bounce away simply because the site isn’t able to handle them. 

 

Tip: While testing, keep in mind that the Google experts suggest a “Sweet spot” of between 2 – 3-seconds in load time from the time the request was made.
Good news: there a few quick fixes for most sites that can knock off 30-50% of your site’s load time. The goal of this article is to outline a few tools to audit your mobile site in real time and send suggestions right to your developer.

Tools on how to identify site speed issues

Test My Site: uses Google’s best practices to identify areas of improvement. Use this tool as a first step in your conversation with your developers. You can get a free report, that outlines the primary areas of concern and identifies where improvements can be made to ensure your site is following best practice. The tool also contains other features such as vertical comparison that runs performance tests against benchmark competitors.

Tip: Reiterated from a previous post-Google uses http://www.webpagetest.org/ to test it’s web applications. Most users operate off the 3G connection and it’s important when testing you take this into account.

Webpagetest is another free speed testing tool. Webpagetest runs a free web test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.

When building a site that loads fast and serves perfectly within the sweet-spot of 2-3 seconds, there are a couple of key considerations that you should take account of to make that sure that users are having the best possible experience on your site.

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get free insights for code optimization.

Common Speed Issues

When building a site that loads fast and serves perfectly within the sweet-spot of 2-3 seconds, there are a couple of key considerations that you should take account of to make that sure that users are having the best possible experience on your site.

 

Give a Good First Impressions

Goal: <5-Seconds

Customers want to see visible content that is “above-the-fold” as soon as possible. Load important content first and make sure the site is usable in the first 5-seconds.

 

Reduce Number of Requests

Goal: <75 requests

Requests = Number of resources the browser needs to request from the server.

 

Lower Page Weight

Goal: <1MB

Page Weight = the number of bytes your page loads, Each asset on your page has weight. Lighter pages load more quickly.

 

When analyzing the above metric’s, it’s important to take them with a pinch of salt, dependent on your company’s vertical the metric should adjust accordingly. An example is that a complex e-commerce site with many high-quality photos will have many requests and data-heavy objects which means requests may need to be doubled etc but it’s important that within your vertical you are striving to ensure you are reducing your load time while not sacrificing the essence of what makes your brand.

Keep Reading

All Projects