I hope you have all had a lovely Easter weekend and have some chocolate leftover to enjoy for “Tea Time SEO” this week. Last Thursday, we had two great speakers, Rachel and Roxana share their tips on how to improve the performance of your site and make it as fast as possible. You can access all of the slides here and they have also expanded on their key points below, enjoy!
How to impact your load time
Rachel Costello says that site speed optimisation should never be a one-size-fits-all approach. There are many different ways that we can analyse the specific browsing environments of our users, and tailor the performance of our sites accordingly.
The user’s perception of speed is everything
Prioritise the loading of above-the-fold content, as the user’s perception of speed is influenced by what they can see and interact with immediately within their viewport.
Focus on how quickly above-the-fold content appears on the screen (FMP), and how long it takes for hero content and key elements for onward user journeys to become interactive (TTI).
Critical rendering path optimisation is useful here for identifying render-blocking resources that prevent important pixels from being painted to the screen.
How can you tailor site performance to users?
1. Optimising for different devices
Leverage the ‘Audience’ tab in Google Analytics to get an understanding of the different device types and browsers accessing your site. Also, use progressive enhancement to optimise for the lowest quality CPU and device type to ensure they can still access crucial content.
2. Optimising for different journeys
Use resource hints like preload, prefetch and preconnect to fetch key links and resources more quickly, and help the browser to prioritise the most important assets on a page which need to be loaded first.
Guess.js can also be used to model user journeys and prefetch the pages a user is most likely to visit next, so the next page loads immediately.
3. Optimising for different connection types
Use the Network Information API to monitor the user’s connectivity and serve lower file size content accordingly. For example, if the user is on 4G, a video can be served, but if they are on 2G you can serve a static image instead. The user won’t know that they’re missing out on anything. They’re just seeing content, fast.
Useful resources for improving your site’s speed and the performance:
I have shared five sites I recommend using to help improve your site’s speed:
How to speed up your pages
Roxana Stingu expands on her tips on improving the speed of your site:
Leverage the browser to speed up your pages
Header directives such as Cache-Control and Keep-Alive are somewhat neglected by SEOs but they can help speed up your pages. Alongside these, native lazy loading is another excellent way of letting the browser do the hard work.
This header directive is great for speeding up your website for repeat visits as it stores a copy of the cached resource on the users’ machine and tells the browser to download it from there and not from your server if the file has not changed.
Because the directive is added to the resource header, all pages that use the resource will benefit.
You can check your resources’ current headers by either running your pages through some page speed checking tools (such as GTMetrix for example) or by using the browser dev tools (such as Chrome’s Developer Tool Network tab).
To optimise your caching strategy, even though every website is different, you can consider:
- Adding longer caching times to images (especially logos and social icons);
- Using URL Fingerprinting (versioning) for CSS, JS and any other files that might get updated more often.
This enables an instruction that allows a single TCP connection to remain open for multiple HTTP requests and responses.
It helps with performance by:
- Reducing the usage of network resources;
- Reducing the number of roundtrips needed for each secure connection;
- Reducing both CPU and memory usage on your server.
You can use a header checker tool for your pages or investigate the HTML file header using your browser’s dev tools to see if Keep-Alive is enabled.
You can optimise it by:
- Adjusting the number of requests that the connection stays on for; this should ideally cover all the resources needed to show useful content on the page for the user. Although the number can vary from website to website, you can start with 50 and adjust from there.
- Experimenting with the Timeout value; you can set it anywhere between 5 to 10 seconds and adjust it from there.
Native lazy loading
It works just like lazy-loading but, instead of you having to use some custom code or install a separate JS library, you can just tell the browser to postpone loading of some of your images until the user is further down the page.
The newest versions of most major browsers have already adopted this, and you can check how much of your own website’s traffic would benefit from this on the caniuse.com website.
Implementing it only requires adding an attribute loading=”lazy” to the <imp> tag of the images you want lazy loaded. To avoid reflows, you should add image height and width attributes.
The attribute doesn’t only work with the <img> tag but also with the <picture> tag too if you’re website is serving responsive images. On top of this, it also works for lazy loading iframes.
Native lazy-loading has been added to the WordPress core in the April 8th release and it can now be switched on and off from the CMS itself rather than needing a plug-in.
What a great session that was, thank you for all of the insights you shared and questions you answered! If you missed the show, view it below or watch all the sessions on YouTube. See you at 4:00pm for another Tea Time SEO. Have a look here for the full agenda for the week.
Photo credit: https://unsplash.com/@sabrituzcu