Below is a roundup of Polly Pospelova’s BrightonSEO talk which was focused on website speed optimisation and how to achieve a 100% Lighthouse performance score. We will cover a variety of tools and tactics mentioned by Polly to improve the performance of your website.
Overview
-
- Speaker: Polly Pospelova
- Job role and company: Head of Search at Delete Agency
- Website: https://www.deleteagency.com/
- Twitter profile: @polly_p
- LinkedIn profile: https://uk.linkedin.com/in/pollypospelova
- Link to the slides:
Improve the performance of your website and achieve a 100% lighthouse score
In this talk, Polly showed us how even global brands aren’t doing all they could to improve website performance. 18 months ago, Delete’s website had achieved a perfect 100/100 score but in SEO, the landscape changes quickly and Delete had dropped to 56. Polly used a variety of tactics to rectify this.
What is Lighthouse?
Lighthouse is an automated tool used by SEOs to run audits that analyse a page’s:
- Accessibility
- Performance
- Search optimisation
- Speed
It’s an open source tool and can often help highlight any areas for improvement within a website. Lighthouse will pull through a number of optimisation recommendations s to improve the performance of your website.
It’s also worth noting that Lighthouse has a handy browser extension.
Switching to HTTP/2
If lighthouse can’t find any areas for improvement in terms of site speed and performance, you have a pretty well-optimised website. The first technique used by Polly to regain the 100% (and potentially the most impactful) was to switch to HTTP/2.
HTTP is the connection between client computer and web server (the sending/receiving of HTTP requests and responses). HTTP/2 was actually developed by Google to reduce latency and improve page speed, which is a pretty good reason for using it.
Most sites use HTTP/1 which only allows a browser to send 6 requests to a server at once with each of these requests needing a unique connection. With HTTP/2 the browser can establish just one connection and send all requests through this. It’s designed for speed.
Improving images
Images are usually the #1 problem when it comes to poor site speed. Luckily, Polly outlined a number of ways to reduce load times using properly optimised images. Here is a breakdown:
- Deferring offscreen images – Responsive websites will often use less imagery on small screen sizes but load all images viewable on a desktop in the background. Deferring the hidden images can result in strong time savings.
- Use next-gen image formats – New image formats such as WebP can provide better compression when compared to PNG or JPEG while retaining plenty of image quality.
- Use correct image sizes – Polly actually used a technique called ‘adaptive image size’ for this issue. This gives browsers a choice of images dimensions to use to fit different screen sizes.
- Lazy loading – Another tactic used was to only load images as they become visible to a user, instead of loading everything all at once. As a user scrolls through a page, images load when needed.
Technical stuff
Another great technique to improve page speed is to split your code into chunks. So, instead of using one large JavaScript or CSS file, the site uses bitesize files for each content block on the website. This works extremely well for websites using HTTP/2 as you are essentially loading lots of small resources within one connection.
Fave quote
“It’s time for SEOs to unite with developers”.
Potential impact on the industry
It’s clear that even the best SEOs in the industry are struggling, or perhaps overlooking, site speed and performance. Making a real effort to optimise site performance could offer a competitive advantage in the SERPs and help you to outrank the organic competition.
HTTP/2 has been a big topic in SEO for a few years now and if you haven’t migrated yet, now is the time to consider taking action. Establishing a good relationship with your dev team is also becoming more and more important as most SEOs can’t (and shouldn’t) make these changes alone.
Key takeaways
- Lighthouse report offers recommendations for site speed upgrades.
- Big names in the industry aren’t achieving 100% lighthouse scores, this is potentially a competitive advantage.
- HTTP/2 allows a browser to establish just one connection and send all requests through this. It’s designed for speed.
- Responsive websites often use less imagery on small screen sizes but load all images viewable on a desktop in the background. Deferring the hidden images can result in strong time savings.
- New image formats such as WebP can provide better compression when compared to PNG or JPEG.
- Using ‘adaptive image size’ for (gives browsers a choice of images dimensions to use to fit different screen sizes) can result in strong speed improvements.
- Only load images as they become visible to a user, instead of loading everything all at once. As a user scrolls through a page, images load when needed.