Google launched Lighthouse 3.0 last year in May, which is a revised version of the tool used to test website page speed and quality.
Lighthouse 3.0 introduces new features in its reports, but Google has fundamentally changed the way it monitors and audits website page speed and performance. These changes include tools such as First Contentful Paint (FCP).
What is First Contentful Paint?
According to GTmetrix.com FCP is ‘triggered when any content is painted – i.e. something defined in the DOM (Document Object Model). This could be text, an image or canvas render. This timing aims to be more representative of your user’s experience, as it flags when actual content has been loaded in the page, and not just any change.’
‘Because the focus is on content, the idea is that this metric gives you an idea of when your user receives consumable information (text, visuals, etc) – much more useful for user experience assessment than when a background has changed or a style has been applied.’
The important thing to note when it comes to Google’s algorithms is that they are in a constant state of change and regular updates. So, it would be a smart move to keep up to date with all the changes to maximize the performance of your website.
Ben Givon has 4 tips for website optimization to help you hit the Google page speed benchmarks.
Get working on page speed optimization as soon as possible
Since its launch in 2018 Lighthouse 3.0 has been updated multiple times. Google has recently disclosed plans for Platform Packs’ that will give users tips on how to boost page speeds based on the site’s code libraries and content management system (CMS).
On November 4th, 2016, Google introduced mobile-first indexing.
Since Google’s introduction of mobile-first indexing in November 2016 page speed has become a key component when it comes to ranking highly on search engine results pages (SERPs), so it makes sense to familiarize yourself with these metrics.
Google prides itself on its continued efforts to improve its search results to meet the demands of its users. In a post entitled ‘Rigorous Testing’ Google wrote: ‘We rely on extensive testing and have a rigorous evaluation process to analyze metrics and decide whether to implement a proposed change. Data from these evaluations and experiments go through a thorough review by experienced engineers and search analysts, as well as other legal and privacy experts, who then determine if the change is approved to launch. In 2018, we ran over 654,680 experiments, with trained external Search Raters and live tests, resulting in more than 3234 improvements to Search.’
According to a report by the Statista Research Department, the percentage of users who browse the internet on mobile devices has grown from 48.8 percent in 2014 to 63.4 percent this year. With this statistic in mind, it is clear to see the growing influence and importance of mobile-first indexing when it comes to optimizing your site speed to conform to Google’s criteria. As the percentage of mobile internet users is increasing, we can expect Google to concentrate a larger chunk of its time on updating its algorithms that specifically target mobile-first indexing.
Remove needless plugins
A website that is run by a content management system such as WordPress or any other similar platform could be slowing down your loading speeds and damaging your Lighthouse 3.0 results. WordPress depends on plugins to improve overall functionality and introduce additional features; however, these plugins could be responsible for making the responsiveness of your site sluggish.
Where some plugins play a vital part in running a website some may simply be redundant. Certain plugins use data from third-party servers which could be weighing down on the overall loading speed and performance of your site.
In a Torquemag.io article entitled WordPress Plugins: How Many is Too Many?Brad Smith observes that ‘the problems caused by plugins will vary depending on which plugins that you have installed, how they’re coded, which ones are actually active, and more.’
‘The largest problem with having too many plugins is that some can slow down your site.’
‘Since 40% of visitors will exit a website if it takes longer than three seconds to load, watching the number of plugins you install is beneficial to your website’s success.’
Too many plugins can become overkill when it comes to page speed and responsiveness. Taking the time and effort to get rid of unnecessary plugins that could be costing you precious seconds on your site’s speed, could be the difference between a good and bad Lighthouse score.
Use lazy loading and next-gen image formatting
High-resolution images are often responsible for slow website loading speeds. Instead of removing all high-res images to improve your site’s loading time you could simply use lazy loading.
What is lazy loading?
Lazy loading or on-demand loading is a way of optimizing online content. Rather than loading all the images and content at the same time, lazy loading breaks it down into segments depending on where the user is on the site. So, as the user scrolls down your website the images and content are rendered accordingly. This way you improve your site’s loading time by only loading content that is in demand. Consequently, this then decreases the total time needed to meet Google’s benchmarks including First Content Paint and First Meaningful Paint, which are Lighthouse’s metrics that calculate and rank a website’s loading time and performance.
What are next-gen image formats?
According to Google, next-generation formats include ‘JPEG 2000, JPEG XR, and WebP’; these formats are good for improving loading speeds because they have ‘superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data. WebP is supported in Chrome and Opera and provides better lossy and lossless compression for images on the web.’
Next-gen formats make images compact and condensed without compromising the overall quality of the images.
Implement a CDN (content delivery network)
In other words, a CDN is a cluster of servers that are scattered around the globe and cooperate to distribute content to your audience. The responsiveness of a CDN can be attributed to the fact that the server that is closest to the user’s geographical location is the one that delivers the content to their browser.
CDNs also take advantage of compression techniques including file compression and minification which make content transfers faster and minimizes disruptions during bouts of heavy site traffic.
Discard needless CSS rules
What are CSS rules? According to jenkov.com ‘A CSS rule is a grouping of one or more CSS properties which are to be applied to one or more target HTML elements.’
‘A CSS rule consists of a CSS selector and a set of CSS properties. The CSS selector determines what HTML elements to target with the CSS rule. The CSS properties specifies what to style of the targeted HTML elements.’
For your site to reach the Lighthouse metric known as First Contentful Paint, the browser must process the site’s entire CSS rules so it can understand how the content is supposed to be displayed.
With this in mind, every unnecessary CSS rule plays a part in slowing down the loading speed of your site. The browser has to access and then download all existing CSS files before it can render the content for your audience.
Tapering your CSS files can work wonders at optimizing your Lighthouse 3.0 results and Google rankings by cutting down anything that causes drag on site speed and performance.
Follow in Google’s footsteps…
Optimizing your website to meet Google’s standards can be tricky especially as it updates its algorithms regularly. However, don’t be disheartened, simply by following these simple tips of removing unnecessary baggage in the form of CSS files and plugins, and by adopting techniques such as lazy loading and CDNs you can really cut precious seconds to your loading times. The less time it takes for your site to load the higher your Lighthouse score and Google ranking will be.
So, it’s worth spending that extra time and effort to mold your website so that it conforms to Google’s speed criteria.