Introduction to SEO with Google Lighthouse [New Guide: 2021]
Google phased out the algorithm that Google PageSpeed Insights uses, and in turn introduced it’s new comprehensive web performance and Search Engine Optimization (SEO) auditing tool – Google Lighthouse. Aimed at combining the analytical features of PageSpeed Insights and SEO, the tool provides countless useful features for web developers and SEO experts alike. As well as the usual site speed auditing, this new tool also offers great features such as auditing site structure, User Interface, and much more. And lets not forget the Google page experience update which is more or less part of Googles algorithm.
Google Lighthouse not only operates as a tool, it also acts as the new algorithm for Google to determine page speed scoring on the PageSpeed Insights tool. Lighthouse has introduced a new scoring system for webpages with new criteria, in an effort to more accurately judge a website’s performance.
In this blog post we will explain what’s new to PageSpeed Insights, how the Lighthouse algorithm works, and how to make the most out of the tool.
What’s new to PageSpeed Insights?
If you’ve logged in to PageSpeed Insights recently, you may have noticed that the interface has been completely overhauled. The new Lighthouse algorithm analyses your website’s desktop and mobile performance, in the following categories:
- Field Data
- Lab Data
- Opportunities
- Diagnostics
Field Data
The first metric that PageSpeed Insights now provides is Field Data. Field Data is performance data collected from real page loads that users are experiencing in real-world scenarios. Field Data is aimed at representing a true user experience, and as such correlates to business key performance indicators (KPIs). The restrictions of this is that it doesn’t provide as much metrics as Lab Data and comes with limited debugging capabilities. Field Data gives the following information about your website:
First Contentful Paint (FCP) – this measures the time from when the user navigates to the website, to when their browser renders the first bit of content. As such this is meant to accurately represent when the page actually loads.
First Input Delay (FID) – this measures the time from when a user first interacts with the site (such as clicking a link or a button), to the time when the browser actually responds to this interaction. This is meant to represent an accurate metric of input delay to the website.
Lab Data
The second analysis given is the Lab Data analysis. Lab Data is intended to give an analysis of the website’s performance in a more controlled environment with predefined device and network settings. This is aimed to offer more detailed metrics with more debugging capabilities for you to use to identify performance issues. One of the drawbacks of lab data is that it can miss some real-world issues or bottlenecks and it also cannot correlated against real world KPIs.
Lab Data provides the following metrics:
First Contentful Paint (FCP) – this is defined as the same as in Field Data
First Meaningful Paint – this is essentially the speed at which the primary page content appears to the user
Speed Index – this is another speed metric showing how quickly the contents of the page appears to the user visually, rather than at a code level
First CPU Idle – this basically measures when a page is minimally interactive, where most UI elements on the screen are interactive
Time to Interactive – this is how long it takes for a page to become fully interactive, where useful content is displayed along with first contentful paint
Estimated Input Latency – this is the estimated time that the website takes to respond to user information after interacting with their browser
Opportunities
The Opportunities section of PSI provides recommendations of opportunities that you have to optimise your website’s speed and page load. In this section you’ll be provided a breakdown of any opportunities that you can take advantage of, as well as how much quicker your page will load when the optimisation has been made, and finally on which page or URL this optimisation should be made on.
Diagnostics
Diagnostics is another section where, similar to the Opportunities section, you’ll be provided a list of optimisations you can make to even further optimise your website’s load speed. Following these tips will also ensure that your pages are adhering to the best practices for web development.
Google Lighthouse Tool
Google Lighthouse tool is the latest addition to Google’s page analytics roster. Aimed at providing a more accurate level of performance metrics to give a better picture of your website’s speed, the recently introduced tool offers a range of new tools to help you determine how you can speed up your website. Google Lighthouse is a free, open-source auditing tool which you can install easily, with simple tools and an easy to use interface. As well as traditional website performance metrics, Google Lighthouse brings in new features such as SEO audits to help identify how to better optimise your website for Google.
Google Lighthouse provides a breakdown of your website into the following metrics:
- Performance
- Accessibility
- Best Practices
- SEO
- Progressive Web App
We’re now going to break down exactly what each one of these includes.
Performance
Performance is widely considered to be the most useful metric provided by the Google Lighthouse tool. Similar to the PageSpeed Insights, the Performance section of the Lighthouse report contains several useful metrics you can use to optimise your website to climb Google’s rankings. In fact, the Performance section of the Lighthouse report combines the Lab Data, Field Data, Opportunities and Diagnostics metrics of the PageSpeed Insights tool.
This consolidated view of performance metrics provides an accurate and useful analysis of your website’s performance and any changes you should make to increase your website’s performance. Following the recommended optimisations will not only give you a better chance of ranking higher in the Search Engine Results Pages (SERPs), you’ll also be following the best web development practices.
Accessibility
The first of the new areas of Google Lighthouse is the Accessibility metric. Essentially what this metric does is highlight possible opportunities to improve the accessibility and user experience of your web based app or website. Following the accessibility recommendation will ensure that your users can easily navigate and use your website, as well as ensuring that you have the best chance of ranking better on search engines.
While Lighthouse doesn’t cover all accessibility tests, it does cover a range of real-world tests such as:
- Colour Contrast – ensuring that your content is readible and legible
- Element Structure – ensuring that your HTML content is well structured
- Element Descriptions – ensuring that assistive technology can read your content easily
- Element Naming – ensuring that your elements are properly, relevantly named
As well as providing a detailed list of accessibility recommendations, the tool will also tell you which audits you’ve passed, which audits are not applicable, and most importantly – which additional accessibility checks you should make:
Best Practices
Another section new to Google’s analysis tools is the Best Practices metric. While this area of the Lighthouse report doesn’t strictly provide performance related information, it will give you recommendations which can improve both your performance and user experience, especially for mobile websites.
SEO
The newest and most progressive of the features in Google’s Lighthouse tool is the SEO metric. PageSpeed Insights doesn’t offer this tool so many web developers and SEO experts will tell you to instead use Google Lighthouse to check your website. The SEO metric provides basic tools for analysing your page’s optimisation for search engine results rankings. While there are many many more factors which Lighthouse doesn’t consider or measure, the most basic points are covered, so make sure that you’re not missing any of these – as it will heavily impact the performance of your website!
Progressive Web App
The Progressive Web App section is another one of Google’s newest performance metrics included in it’s Lighthouse tool. While the definition of a Progressive Web App (PWA) hasn’t been particularly clear, Google’s documentation states that there are several key factors which make a website a PWA:
- Site is served over HTTPS
- Pages are responsive on tablets & mobile devices
- All app URLs load while offline
- Metadata provided for Add to Home screen
- First load fast even on 3G
- Site works cross-browser
- Page transitions don’t feel like they block on the network
- Each page has a URL
Google states however that these are the basic qualifications that a website must meet to be a PWA. For the full list of factors (many of which Lighthouse doesn’t check for), see their official checklist.
As per the other areas of the Lighthouse report, the Progressive
So now that we’ve gone over how Lighthouse works and what you can do with it, you are probably wondering – how can I install it?
How to install and use Google Lighthouse
Google Chrome
One of the most straightforward ways of running Google Lighthouse is straight through the Google Chrome application, without downloading or installing anything extra.
To use Lighthouse on Google Chrome, just follow these simple steps:
- Go to the website or web page you wish to run the audit on
- Click ‘Inspect’ anywhere on the page, or just hit the F12 key to open Chrome Developer Tools.
- Navigate to the Audits tab and select the relevant audits you wish to run.
- Click ‘Run audits’ to run the Lighthouse audits report.
Lighthouse will now display the results of the audit report.
Google Chrome Extension
A convenient and easy way of running the Lighthouse tool is as a Chrome Extension from the Google Chrome Web Store. The extension allows you to quickly run the Lighthouse tool on a page without having to open a separate tab or open the developer tools – you just need to click the Lighthouse button on the toolbar.
To use the Lighthouse extension on Google Chrome just follow the following steps:
- Download the Lighthouse extension from the Google Chrome Web Store and add it to your Google Chrome browser
- Navigate to the website or web page you wish to audit
- hit the Lighthouse Chrome extension icon on your browser’s toolbar, and let the Lighthouse tool run.
After the tool has finished running, it will display the audit results for your website on a new Google Chrome window.
Node Command Line Interface (CLI)
The Lighthouse tool can also be run on the Node.js command line. This is a much more technical installation and is aimed at people who might want to automate lighthouse, and isn’t really necessary otherwise.
To run Lighthouse in Node.js CLI you need to:
- Download and install the Google Chrome web browser.
- Install a current and stable version of Node.js (this needs to be version 6 or higher, ideally the latest version).
- Run the following command line to download and install the global Lighthouse npm package to Node.js:
npm install -g lighthouse
Once installed, you can run the Lighthouse tool by typing the following command into the CLI:
lighthouse https://airhorner.com/
You can also use a number of CLI options (also known as flags) to customise your reports. A list of options can be found on the Lighthouse Github.
Running the node CLI by default will save a HTML version of the report which can be saved and shared.
