This article is an introduction to SEO using Google Lighthouse, with a complete guide on using the new interface and detailed analyses on the new metrics Google uses for determining website speed.

1. Introduction to SEO with Google Lighthouse
[New Guide: 2019]
Recently Google has phased out the algorithmthat 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 combiningthe 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 sitespeed auditing,this new tool also offers new features such as auditingsitestructure,User
Interface, and much more.
Google Lighthouse not only operates as a tool, italso acts as thenew algorithmfor Google to
determine page speed scoringon the PageSpeed Insights tool.Lighthouse has introduced a new
scoringsystemfor webpages with new criteria,in an effort to more accurately judgea website’s
performance.
In this blog postwe will explain what’s new to PageSpeed Insights,howthe 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 interfacehas been
completely overhauled. The new Lighthouse algorithmanalysesyour website’s desktop and mobile
performance, in the followingcategories:
 Field Data
 Lab Data
 Opportunities
 Diagnostics

2. Field Data
The firstmetric that PageSpeed Insights nowprovides is Field Data.Field Data is performance data
collected from real page loads thatusers areexperiencing 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 thatitdoesn’t provideas much metrics as Lab Data and comes with
limited debugging capabilities.Field Data gives the followinginformation aboutyour website:
First Contentful Paint (FCP) - this measures the time from when the user navigates to the website, to
when their browser renders the firstbitof 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 firstinteracts with the site(such as
clickinga link or a button), to the time when the browser actually respondsto this interaction.This is
meant to represent an accuratemetric of input delay to the website.
Lab Data
The second analysisgiven is the Lab Data analysis.Lab Data is intended to give an analysisof 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 thatit can miss some real -world
issues or bottlenecks and it also cannotcorrelated againstreal world KPIs.
Lab Data provides the followingmetrics:
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 showinghow quickly the contents of the page appears to
the user visually,rather than ata code level
First CPU Idle - this basically measures when a page is minimally interactive,where most UI elements
on the screen are interactive

3. Time to Interactive - this is how longit takes for a page to become fully interactive,where useful
content is displayed alongwith firstcontentful paint
Estimated Input Latency - this is the estimated time that the website takes to respond to user
information after interactingwith their browser
Opportunities
The Opportunities section of PSI provides recommendations of opportunities that you have to
optimiseyour website’s speed and page load.In this section you’ll be provided a breakdown of any
opportunities that you can take advantageof, as well as how much quicker your page will load when
the optimisation has been made, and finally on which pageor URL this optimisation should bemade
on.
Diagnostics
Diagnostics isanother section where, similar to the Opportunities section,you’ll be provided a listof
optimisations you can make to even further optimiseyour website’s load speed. Followingthese tips
will also ensurethat your pages are adheringto the best practices for web development.
Google Lighthouse Tool
Google Lighthouse tool is the latestaddition to Google’s page analyticsroster.Aimed at providinga
more accuratelevel of performance metrics to give a better pictureof 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 auditingtool which you can install easily,with
simpletools and an easy to use interface. As well as traditional websiteperformance metrics, Google
Lighthouse brings in new features such as SEO audits to help identify how to better optimiseyour
website for Google.
Google Lighthouse provides a breakdown of your website into the followingmetrics:
 Performance
 Accessibility

4.  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 optimiseyour 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 accurateand useful analysisof your
website's performance and any changes you should make to increaseyour website's performance.
Followingthe recommended optimisations will notonly give you a better chance of rankinghigher in
the Search Engine Results Pages (SERPs), you'll also befollowingthe best web development practices.
Accessibility
The firstof the new areas of Google Lighthouse is the Accessibility metric.Essentially whatthis metric
does is highlightpossibleopportunities to improve the accessibility and user experience of your web
based app or website. Followingthe accessibility recommendation will ensurethat your users can
easily navigateand useyour website, as well as ensuringthatyou have the best chanceof ranking
better on search engines.
WhileLighthouse doesn't cover all accessibility tests,itdoes cover a range of real-world tests such as:
 Colour Contrast - ensuringthat your content is readibleand legible
 Element Structure - ensuringthat your HTML content is well structured
 Element Descriptions - ensuringthat assistivetechnology can read your content easily
 Element Naming - ensuringthat your elements are properly,relevantly named

5. As well as providinga detailed listof accessibility recommendations,the tool will also tell you which
audits you've passed,which audits arenot applicable,and most importantly - which additional
accessibility checks you should make:
Best Practices
Another section new to Google's analysistools is theBest Practices metric.Whilethis area of the
Lighthouse report doesn't strictly provideperformance related information,it will giveyou
recommendations which can improve both your performance and user experience, especially for
mobilewebsites.
SEO
The newest and most progressiveof the features in Google's Lighthouse tool is the SEO metric.
PageSpeed Insights doesn'toffer 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 toolsfor
analysingyour page's optimisation for search engineresults rankings.Whilethere aremany many
more factors which Lighthouse doesn't consider or measure, the most basic points arecovered, so
make surethat you're not missingany of these - as itwill heavily impacttheperformance of your
website!
Progressive Web App
The ProgressiveWeb App section is another one of Google's newest performance metrics included in
it's Lighthouse tool. Whilethe definition of a ProgressiveWeb App (PWA) hasn'tbeen 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

6.  Page transitions don't feel like they block on the network
 Each page has a URL
Google states however that these arethe basic qualificationsthata website must meet to be a PWA.
For the full listof 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 runningGoogle Lighthouse is straightthrough the Google
Chrome application,withoutdownloadingor installinganythingextra.
To useLighthouse on Google Chrome, justfollowthese simplesteps:
1. Go to the website or web page you wish to run the auditon
2. Click 'Inspect' anywhere on the page, or justhitthe F12 key to open Chrome Developer Tools.
3. Navigate to the Audits tab and select the relevant audits you wish to run.
4. Click 'Run audits' to run the Lighthouse audits report.
Lighthouse will now display the results of the auditreport.
Google Chrome Extension
A convenient and easy way of runningthe 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

7. havingto open a separate tab or open the developer tools - you justneed to click theLighthouse
button on the toolbar.
To usethe Lighthouse extension on Google Chrome justfollowthe followingsteps:
5. Download the Lighthouse extension from the Google Chrome Web Store and add it to your
Google Chrome browser
6. Navigate to the website or web page you wish to audit
7. hit the Lighthouse Chrome extension icon on your browser's toolbar,and let the Lighthouse tool
run.
After the tool has finished running,itwill display the auditresults 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'treally necessary
otherwise.
To run Lighthouse in Node.js CLI you need to:
8. Download and install theGoogle Chrome web browser.
9. Install a currentand stableversion of Node.js (this needs to be version 6 or higher, ideally the
latestversion).
10. Run the followingcommand lineto download and install theglobal Lighthousenpm package to
Node.js:
npm install -glighthouse
Once installed,you can run the Lighthouse tool by typing the followingcommand into the CLI:
lighthousehttps://airhorner.com/

8. You can also usea number of CLI options (also known as flags) to customiseyour reports. A listof
options can be found on the Lighthouse Github.
Running the node CLI by defaultwill savea HTML version of the report which can be saved and
shared.