Google released Lighthouse 3.0, an updated version of their open-source tool for auditing the quality and speed of web pages, in May 2018. Lighthouse 3.0 introduces new report output options, as well as changes to the way it measures site speed and performance, such as the addition of First Contentful Paint as a performance and speed metric and new weightings for performance audits.
And since May of this year? Google has made even more changes. That’s why we’re going to show you five ways you can optimize your site right now.
Let’s get this party started.
Why should you optimize your site’s speed right now?
Since the release of 3.0, Lighthouse has continued to evolve. Google recently announced that it was developing “Platform Packs” for Lighthouse, which will allow testers to receive speed optimization tips tailored to the CMS and code libraries used on their sites.
If you’re using Angular JavaScript with WordPress, for example, you’re in luck, but more Platform Pack variants are already in the works, thanks to contributions from the GitHub community.
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 an average week, indicating that ranking well is becoming an increasingly dynamic practice. Given the mobile-first index’s relative newness, as well as its disproportionate influence on website traffic, it stands to reason that the majority of algorithm refinements would focus 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.
“A lot of these metrics that you’re looking at from Lighthouse are primarily presented to you in terms of the user-facing side of things,” explained Webmaster Trends Analyst John Mueller during an Office Hours Hangout Q&A session in February. “From a search standpoint, we take a variety of these metrics together to figure out how we should be seeing 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 with your site speed.
Make use of lazy loading
High-resolution images can significantly slow down your website’s loading time while also increasing memory 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 removing any of your resource-heavy content.
Lazy loading loads only a portion of the web page at a time—the section that the viewer is looking at at the time, so you’ll delay loading the next section until the visitor scrolls down to it. This shortens the time it takes to reach metrics like First Meaningful Paint and First Content Paint, which Lighthouse uses to measure site speed and performance.
Lazy loading is required if you’ve implemented “infinite scrolling,” which is popular on content-heavy websites, but it can benefit all types of websites. Indeed, the Duda web design platform discovered that after implementing lazy loading on Duda-powered sites, those properties saw an average of ten points in Lighthouse score lift—nothing to shake a stick at.
Take advantage of next-generation image formats
Your images are a major cause of slow First Contentful Paint times. The problem is that, when it comes to marketing and sales, a picture truly is worth a thousand words, so you’d be wise to resist removing designs that feature large hero images. Next-generation image formats, in conjunction with lazy loading, provide 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 effect on image quality. Using next-generation formats, you can significantly reduce page load times, even for visuals with larger pixel dimensions, without sacrificing image quality. Take a look at this data from Insane Lab, which shows how much smaller WebP files are than PNG files:
Google encourages webmasters to use its new WebP format, which is supported by Chrome and Opera browsers. WebP images are 26% smaller than PNG images and 25-35 percent smaller than JPG images.
Make use of a content delivery network.
A content delivery network, or CDN, is an excellent solution for improving page load times, which are the second most important metric for achieving a good performance rating in Lighthouse 3.0.
A CDN is essentially a network of servers that are distributed all over the world and collaborate to deliver your content. Because CDN servers are geographically distributed, there is always one close to almost every user, reducing the time it takes for your content to reach their browser.
CDNs frequently employ advanced compression techniques, such as minification and file compression, to help your content assets transfer more quickly, 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.
Remove any unnecessary plugins.
If you have a WordPress or similar platform-based site that relies on 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, may be critical to your site’s success, while others may have outlived their usefulness. Many plugins query third-party servers for information, which may slow things down even more. In a recent DigWP survey, over 900 WordPress professionals indicated the number of plugins that they usually see as “too many,” with 75 percent agreeing that 25 is the limit. Over one-third of those polled suggested a limit of ten.
Extra plugins can cause database bloat, increasing the weight of your site and making it much slower to load; therefore, the fewer you have, the better.
Remove any CSS rules that you aren’t using.
The main.css file defines the CSS rules for your website. It’s also known as the external stylesheet because it’s stored independently of the site’s HTML. According to the new Lighthouse version, in order for your site to load First Contentful Paint, which has a high impact on performance, the browser must first retrieve, parse, and process every CSS stylesheet to determine how the content will be displayed.
As a result, it’s unavoidable that each additional CSS file slows down page load time and degrades performance slightly more. The browser must access and download each file before rendering the page.
Minifying your CSS files with a plugin like Fast Velocity Minify can help a lot with your Lighthouse scores, but there’s more you can do to ensure CSS load times don’t slow you down. Removing all unused CSS definitions speeds up the process even more and streamlines your website performance for improved Google rankings.
Adhering to Google’s speed guidelines improves performance.
The release and ongoing development of Lighthouse 3.0 should serve as a reminder of the importance of optimizing your site in accordance with Google’s most recent speed criteria. By removing unnecessary CSS rules and plugins, utilizing CDNs and next-generation image formats, and taking advantage of lazy loading, you can streamline your site, reduce the page load time, and improve performance in order to remain in Google’s good graces.
