Lighthouse 3.0, an improved version of Google’s open source tool for inspecting the quality and speed of web pages, was released in May 2018. Lighthouse 3.0 introduces new report output options as well as a number of changes to the way it measures site speed and performance, including the addition of First Contentful Paint as a performance and speed metric and new performance audit weightings.
And since May of this year? Even more changes have been made by Google. That’s why we’re going to show you five ways to improve your site right now.
Let’s get this party started.
Why optimize your site speed now?
Since the release of version 3.0, Lighthouse has continued to evolve. Google recently announced that it is working on “Platform Packs” for Lighthouse, which will allow testers to get speed optimization tips tailored to their CMS and code libraries.
If you’re using Angular JavaScript with WordPress, for example, you’re in luck, but more Platform Packs variants are already in the works, thanks to the GitHub community’s help.
Since the introduction of the mobile-first index in 2016, Google has gradually increased the importance of site speed as a search ranking criterion, so it’s important to keep an eye on these metrics and trends. In 2018, Google released approximately 62 algorithm tweak updates in the course of a typical week, making ensuring that you rank well a more dynamic practise. Given the mobile-first index’s relative newness, as well as its disproportionate impact on website traffic, it’s understandable that the majority of algorithm refinements would be focused on mobile.
The fact that this is the first time Google has built a self-service speed measurement tool that attempts to replicate the lag times experienced by real site visitors, rather than bots, is perhaps the most compelling reason to keep an eye on Lighthouse.
During an Office Hours Hangout Q&A session in February, Webmaster Trends Analyst John Mueller explained, “A lot of these metrics that you’re looking at from Lighthouse are primarily presented to you with regards to the user-facing side of things.” “From a search standpoint, we combine a variety of these metrics to determine how we should view this site in terms of speed.”
With this in mind, we’ve compiled a list of five tips to help you please the Google gods when it comes to site speed.
1. Implement lazy loading
High-resolution images can significantly slow down your website’s loading time while also increasing memory usage and page weight. You could remove them entirely from your site, but you might need or want to keep them. Lazy loading is a technique for reducing page load time without sacrificing any of your resource-intensive content.
Only a portion of the web page is loaded at a time with lazy loading—the section that the visitor is looking at at the time—so you won’t load the next part until the visitor scrolls down to it. This cuts down on the time it takes to reach metrics like First Meaningful Paint and First Content Paint, which are two of Lighthouse’s site speed and performance metrics.
If you’ve implemented “infinite scrolling,” which is popular with content-heavy sites, lazy loading is a must, but it can help on any website. In fact, the Duda web design platform discovered that after implementing lazy loading on Duda-powered sites, those properties saw an average of a ten-point increase in Lighthouse score—not bad.
2. Make the most of next-gen image formats
Your images are one of the most common causes of long First Contentful Paint times. The problem is that a picture really is worth a thousand words when it comes to marketing and sales, so you’d be right to resist getting rid of those designs that favour large hero images. Next-generation image formats, in addition to lazy loading, offer a solution.
JPEG 2000, JPEG XR, and WebP are examples of next-generation formats. These formats compress and convert images to make them much smaller than traditional PNGs and JPGs, but they have no impact on image quality. You can drastically reduce page load times by using next-gen formats, even for visuals with larger pixel dimensions, without sacrificing image quality. Take a look at the following graph from Insane Lab, which shows how much smaller WebP files are than PNG files:
Webmasters are encouraged to use Google’s new WebP formatting, which is supported by Chrome and Opera browsers. WebP images are 26 percent smaller than PNG images and 25-35 percent smaller than JPG images.
3. Use a content delivery network
A content delivery network, or CDN, is a great way to speed up your page loads, which are the second most important metric in Lighthouse 3.0 for getting a good performance rating.
A content delivery network (CDN) is a collection of servers located all over the world that work together to deliver your content. Because a CDN’s servers are geographically distributed, there is always one closest to almost every user, reducing the time it takes for your content to reach their browser.
Advanced compression techniques, such as minification and file compression, are frequently used by CDNs to help your content assets transfer faster, providing better content availability and redundancy, and ensuring that heavy traffic does not disrupt your website’s performance. In the event of a hardware failure, CDNs are less likely to go down. CDNs are used by major content-heavy websites that rely on lightning-fast loading times, such as Netflix, Facebook, and Amazon.
4. Get rid of unnecessary plugins
If you have a WordPress or similar platform site with plugins for extra functionality, those plugins may be reducing your site’s responsiveness, affecting its interactivity metrics, and lowering your Lighthouse 3.0 performance scores.
Some plugins, such as your payment processor, are critical to your site’s success, while others may be obsolete. Many plugins rely on third-party servers for data, which can slow things down even more. In a recent DigWP survey, over 900 WordPress professionals were asked to indicate the number of plugins that they consider to be “too many,” with 75 percent agreeing that 25 is the limit. Over a third of respondents suggested a limit of ten.
Extra plugins can cause database bloat, which increases the weight of your site and makes it much slower to load, so the fewer the better.
5. Remove CSS rules that you don’t use
The main.css file contains the CSS rules for your website. Because it’s stored separately from the site’s HTML, it’s also known as the external stylesheet. The browser must first retrieve, parse, and process every CSS stylesheet to determine how the content will be displayed in order for your site to load First Contentful Paint, which has a high impact on performance according to the new Lighthouse version.
As a result, every additional CSS file will inevitably slow down page load time and have a negative impact on performance. The browser must first access and download each file before rendering the page.
While using a plugin like Fast Velocity Minify to minify your CSS files can help a lot with your Lighthouse scores, there’s more you can do to ensure CSS load times don’t hold you back. Removing all unused CSS definitions speeds up your website even more and streamlines its performance for improved Google rankings.
Following Google’s speed criteria improves performance
The launch of Lighthouse 3.0, as well as its ongoing development, should serve as yet another reminder of the importance of optimizing your site to meet Google’s most recent speed criteria. You can streamline your site, reduce the page load time, and improve performance by removing unnecessary CSS rules and plugins, utilizing CDNs and next-generation image formats, and utilizing lazy loading to stay in Google’s good books.
Need help with getting your business found online? Stridec is a top SEO agency in Singapore that can help you achieve your objectives with a structured and effective SEO programme that will get your more customers and sales. Contact us for a discussion now.