The Author
Rachel Costello

Rachel Costello is a Technical SEO Executive at DeepCrawl. You'll most often find her writing and speaking about all things SEO.

Read more from Rachel Costello

Webinar Recap: The Increasing Importance of Site Speed with Jon Henshaw & Jon Myers

Site speed doesn’t just apply to SEOs; it applies to everyone with a website that wants users to convert. If your site takes 5 seconds to load, your bounce rate rockets to 90%! The best way to keep users on a site and get them to convert is to make sure it loads quickly.

Google's study on page load time and bounce rate

To unpick the topic of site speed, we brought in Jon Henshaw, Senior SEO Analyst at CBS Interactive and founder of Coywolf, to chat to our Chief Growth Officer, Jon Myers. Jon is an expert on speed, having spoken extensively about the topic all over the world, so we were keen to get his insights.

A big thank you to the two Jons for the fascinating discussion, as well as to those of you who listened in on the webinar. We’ve written up all of the key takeaways from the session which includes the webinar recording and Jon’s slides, so you won’t miss out on anything that was covered.

Here’s the full recording of the webinar:

You can also take a look at Jon’s slides that he talked us through:

The Key Goal for Speed

Jon explained that the aim of his presentation was to help us get our sites to perform better and to actually be able to outperform our competitors with regard to speed. He also set us a key goal to aim for with our site speed optimisation, and that is to have 80% of above the fold content loaded, in about 2-3 seconds.

John Henshaw's slide on above-the-fold content

Why is Speed so Important?

Speed is a ranking factor and is becoming more important on mobile, considering Google’s upcoming Speed Update. However, there is another even more important factor that speed has an impact on: user experience. Google is focusing more and more on user experience and so should we.

A great way to start making websites better for users is to make them load quickly. You want to make sure you have a fast site so people actually stay on it and don’t bounce. Faster-loading sites make more money and see increases in return visitors due to the positive user experience they provide. All of this is on top of influencing search visibility, so speed really is crucial.

The Most Common Misconception About Speed

One of the most common misconceptions that Jon sees around speed is that people think they need to get the whole site to load as quickly as possible, which isn’t the case at all. In fact, you need to be more tactical with your optimisation tactics and focus on these two metrics and all that’s associated with them:

  1. First Meaningful Paint (FMP) – This metric marks the time when the biggest above-the-fold change has happened in a page’s layout. You need to narrow your focus to what content is immediately visible in a user’s viewport, as well as how quickly it appears.
  2. Time To Interactive (TTI) – This metric measures the time it takes for a page to be able to respond to user actions or input. It’s one thing to display content quickly, but the user also needs to be able to engage with the page, so make sure you’re thinking about interactivity rather than visual experience. Jon believes that TTI could start to appear in how Google assesses your site for speed.

How to Optimise Above-the-fold, Priority Content

Focus on the critical rendering path. When this is optimised, this creates the best experience because the user doesn’t sit there with a blank screen before things pop up. Psychologically it’s better because the user can see things happening in their viewport, even if it’s not technically that much faster.

Jon Henshaw's slide on the critical rendering path

There are two things you need to look at first when optimising your site for the critical rendering path, FMP and making sure above-the-fold content is served quickly, as these are the two biggest factors for slow rendering:

CSS

In the past it was considered bad practice to inline CSS, but now we’ve moved back to inlining critical CSS so you’re not linking to those files externally. Inlining means that the CSS is there immediately rather than having to be accessed and loaded.

For all CSS you don’t need for the page to actually function, use async loading, which means it will load after the other elements of the page. Here’s how to async load non-critical CSS:

Code for async loading CSS

JavaScript

Identify JavaScript that is critical for FMP and make this inline if possible (if there’s not too much code).

Then you’ll need to use async loading for any non-critical JavaScript that doesn’t contribute to FMP. Here’s how you’d async non-critical and render-blocking JavaScript:

Code for async loading JavaScript

It’s important to bear in mind that you need more than async JavaScript loading; this method doesn’t always work because browsers still try to load as much JS as possible and can ignore this. Try using defer.js to specify the non-critical scripts you want to load afterwards.

With or without async loading or defer.js, you need to make sure non-critical CSS and JavaScript are placed after the page content within the code rather than before it. This is simple best practice.

How to Future-proof Your Site Speed Optimisation Work

Jon is a big fan of future-proofing his work by analysing what Google are working on and where they seem to be heading in terms of focus. He recommends testing out the new tools and features they’re launching, such as Chrome’s upcoming feature, Priority Hints, which will soon be supported in Chrome beta.

Priority Hints comes with an ‘importance’ attribute which lets you specify how important an element is to the page. This is a feature Jon plans to implement on his own sites as soon as he can.

Chrome Priority Hints 'importance' attribute

The Key Impacts on Speed & How to Optimise Them

These are the key elements that Jon listed which he’s seen impact speed the most, for better or worse:

  1. A/B Testing: Implement server-side processing for A/B testing because running this client-side really slows down your site. Optimizely and Google Experiments both support server-side testing so look into this as a solution.
  2. Web Fonts: These can get really big especially when a font uses a lot of styles, which really slows people’s ability to download and view your site, especially on mobile. Use the new technique of ‘font-display’ within your CSS e.g. ‘font-display:swap’ (use ‘swap’ for when a font MUST be used) and ‘font-display:optional’ (use ‘optional’ if font isn’t critical for UX).
  3. Images: Use the WebP format as this is 26% smaller than PNG but still isn’t widely supported. A way around this and to serve WebP is to use fallback code (e.g. ‘<source srcset=”cat.webp” type=image/webp”>’). An even easier way to do this is with Cloudflare in the ‘Polish’ section which can automatically convert and serve WebP images for you.
  4. Resource Hints: Speed is also about the experience a user has when they’re on your site and moving to the next steps. Use ‘link rel=prefetch’ to serve particular elements quickly and load these in the background before the user gets to them. You might use this for the checkout process on an ecommerce site or for the next chapter in a series of pages for an online course, for example.
  5. HTTP/2: This makes a real different for site speed and if you have an SSL then you should try turning on HTTP/2. Cloudflare also supports HTTP/2 and can serve it automatically. Bear in mind that Googlebot still only crawls with HTTP/1.1, so switching to HTTP/2 is mainly for user experience as Google doesn’t support this yet, but the wins for speed are huge.

Jon’s Recommended Site Speed Tools & Resources

Jon mainly uses Google tools due to their level of detail. Here’s what he recommended using:

  • Chrome Developer Tools – This is built into browser and can specify the connection type and device, as well as showing waterfall view of your site’s load performance. Take a look at the ‘Performance’ view for great insights.
  • RAIL – This is Google’s user-centric performance model which stands for Response, Animation, Idle, Load. This is a great Google resource which shows you how you should be putting your site together.

See Jon’s Answers to All of Your Questions in Our Q&A Post

Jon managed to answer a few of the great questions that were submitted during the webinar, but there were so many that we had to send the rest to him to answer afterwards! We’ve compiled all of his answers in our site speed Q&A recap post, so be sure to give it a read to learn even more valuable insights on performance.

Read Our Latest White Paper on Site Speed & Performance

During the webinar, we also treated attendees to exclusive access to our latest white paper: DeepCrawl’s Ultimate Guide to Site Speed & Performance! It includes everything from explaining what the different speed metrics mean and measure, as well as advice on key areas to look into for performance optimisation and methods on how to make your site faster for users. Be sure to grab your copy!

Download Your Free Site Speed Guide