Google Lighthouse is an automated audit tool initiated by Google and available for free to test the performance, accessibility and SEO of a website. The tool is able to quickly analyze any URL and produce a satisfactory analysis report with a list of relevant suggestions to improve the performance of the audited site
In addition to the billions of queries it processes per day, Google also offers a suite of tools available to its users to optimize certain tasks on their site
These include Google Analytics, Search Console, Google Ads and many others. But what we hear less about is the Google Lighthouse
- What is it in concrete terms?
- How does it work?
- And how can you use it on your own site?
Find out absolutely everything about this tool in this article about Google Lighthouse
Chapter 1: What is Google Lighthouse?
In this first chapter, we will discuss the main points that can help us to give more details about this tool.
1.1. Definition and evolution of Lighthouse
Google Lighthouse is an open source tool with which you can clearly evaluate the technical quality and user experience of each page
It is a kind of audit tool that you can use to diagnose your pages and deduce the overall state of your site
To do this, Lighthouse produces in-depth, but sufficiently understandable, analysis reports.
In its audit reports, we can see for example that the tool assigns a score rated on a 100-point ceiling to evaluate certain metrics such as
- The site’s performance
- Its level of accessibility
- The good practices applied on the site
- The level of SEO optimization.
If you are an SEO enthusiast, you may find some similarities between Google Lighthouse and other tools like PageSpeed Insights, Mobile Friendly Test or Structured Data Testing Tool
Unlike these tools that focus their analysis report on one aspect, Google Lighthouse goes far beyond
Although the tool is also primarily focused on performance, it also allows you to examine each web page from multiple angles.
It must be said that the first Google Lighthouse 1.0 version, released in June 2016, was initially developed as a monitoring tool for progressive web applications (PWAs)
It didn’t cause much of a stir in the SEO world, as the user interface as well as the functionality was very limited
With version 2.0, it was still possible to generate analysis reports like the previous version, but in a slightly more advanced way.
Then came the third version, 3.0 of Lighthouse, released in early 2018
This version offers a new layout of the tool and is directly integrated into the development tools of Google Chrome and Firefox browsers
1.2 How does Google Lighthouse work?
As explained earlier, with Google Lighthouse, you can generate an analysis report of your website and this with just a few clicks. The tool is installed as an extension in your Chrome browser for ease of use
On each report provided, Lighthouse suggests some solutions to correct and improve some aspects that could be described as weak points of the site
Among these aspects we have
1.2.1. Site performance
Site performance is a core aspect of any SEO audit. It takes into account, for example, the speed of page loading which is one of the most essential measures not only for users, but also for search engines.
Here, Lighthouse diagnoses all the problems that are related to the performance of your site and finds opportunities for improvement in a precise process.
To cover all important aspects related to site performance, Lighthouse analyzes the following indices
First Contentful Paint (FCP): This is a performance metric that tracks how long it takes for the first text-based or image-based element to appear in the visitor’s browser.
Source gtmetrix
It provides information about the loading of the page and represents a weighting of 15% of your overall performance score.
Generally, the best sites run at 1.5 seconds, but when your FCP is below 2 seconds, you are still considered fast.
Speed Index (SI): The speed index is a performance metric that shows how quickly elements of a web page become visible.
Source gtmetrix.com
This metric also has a weighting of 15% when calculating the performance score.
Ideally, the Speed Index should be less than 4.3 seconds, which corresponds more or less to a Speed Index score of 75.
Time to Interactive (TTI): Google defines it as ”The time between when the page begins to load and when it is visually rendered, its initial scripts (if any) have loaded and it is able to reliably respond to user input quickly”.
Source blog.dareboost
The goal here is to minimize the time between FCP and TTI. This metric is weighted at 15% in the overall performance score.
A good level to aim for here is to be under 3.8 seconds, which is considered fast by Google
Total Blocking Time (TBT): This metric quantifies how responsive your page is to user input.
Source gtmetrix
It can be used to replace your FID (First Input Delay) score in your lab data. But by improving TBT, you are usually improving FID, which is a Vital Web Core
Total Blocking Time is another crucial component of the performance score with a 25% weighting.
Cumulative Layout Shift (CLS) This is the final metric that measures the visual stability of a page by quantifying how often users may encounter unexpected layout changes.
Source marfeel.anticipa
This is the least important metric, with a weighting of only 5% in the overall performance score scheme.
1.2.2. Site Accessibility
Basically, this metric presents potential chances to improve the availability and customer experience of your mobile app or website.
Tracking the accessibility improvement report will ensure that your customers can explore and use your site effortlessly.
As well as ensuring that you have the most obvious opportunity to rank higher on web search engines.
While Lighthouse does not cover all accessibility tests, it does cover a range of important tests such as
- Element structure for well-organized HTML content;
- Shading contrast for readable and easily decipherable content;
- Element naming for appropriately and relevantly named components
This part of the test checks whether a website can be freely accessed and used by everyone, including users of devices other than personal computers such as:
- Phones,
- Tablets,
- And smart TVs
To further extend the notion of accessibility, Lighthouse checks if your site is visible to people with disabilities such as those with visual impairments.
A little further, Lighthouse also checks if:
- All images have alt attributes
- The lang attribute in the ”html” tag is correct,
- The title tag is present
It even makes sure that the contrast between the background and the foreground of the site is not too low, so that the content is easily readable and the interface is easy to use.
1.2.3. Progressive Web Applications
Progressive Web Apps (PWAs) are the hybrid of mobile apps and web pages. They use much less storage space on the phone, as there is no download process.
That said, a user can embed them directly from the browser by clicking an ”Add to Home Screen” button
PWAs come with features such as
- Push notifications
- Full screen loading;
- Offline working;
- Operation in all network conditions
They facilitate fast content loading and feel like a mobile application, offering the best browsing experience
PWAs are served via the https protocol which allows secure communication between the website and the user. The encrypted connection between the browser and the server does not affect the content.
Since PWAs fall under one of the five key categories used by Lighthouse to measure website performance, the tool provides expert information on PWAs
To review and evaluate a web application, Lighthouse considers factors such as
- Speed;
- Security; and
- Responsive design;
- Offline performance;
- Indexing;
- Push notification;
- Caching;
- User experience.
In its performance score report, Lighthouse presents a list of tests that your PWA failed and solutions to fix those problems. Then it shows the remaining parts of the test that your PWA passed.
The Lighthouse audit takes a lot of the guesswork out of web application development and performance. With detailed reports, you will better detect which aspects of your PWA are already working and which ones need improvement
All of Lighthouse’s suggestions help you get the most out of your PWA. With this tool, you can take a different and substantial approach to developing outstanding PWAs.
1.2.4. Best practices for SEO
One of the important aspects that Lighthouse also takes into account when analyzing websites is to check if the best practices have been followed on the site
For my Twaino site, Lighthouse gives a score of 93 for the “Best Practices” metric. That’s a pretty good score.
And as always, the tool also provides suggestions that you can take into account to improve your site
1.2.5. SEO
SEO is the most dynamic and important metric of the factors analyzed by Lighthouse.
PageSpeed Insights does not touch this specific aspect of your site. This is why most web designers and SEO specialists prefer to use Google Lighthouse to analyze a website.
The SEO metric provides fundamental elements to examine the streamlining of your page for its ranking in search engine results.
Here, Lighthouse basically checks if:
- The page’s indexing is not blocked ;
- Do the links have descriptive text?
- Are there any unwanted plugins?
- Does the document have a title component;
- The document has a valid hreflang ;
- Does the document have a meta description?
- Does the document have a valid ”rel = canonical”;
- Does the document use readable font sizes.
In addition, the tool offers additional checks performed physically that take into account the Google Mobile friendly test and the structured data test tool.
1.3. The benefits of Google Lighthouse
The Google Lighthouse report covers the same criteria that Google considers when ranking a page in its search results
It is from this test report that Google Lighthouse suggests solutions to the various imbalances observed on your website.
But apart from these suggestions, the tool has several other interesting advantages
1.3.1. Anyone can use it
Lighthouse simplifies SEO auditing and makes the power of an audit available to anyone in need. In the past, a technical SEO audit could really only be done by an SEO professional. While this is still a reality today, with the Google Lighthouse tool, you can get a useful overview of the areas you need to improve on your site.
It certainly won’t cover all the angles of a specialized SEO audit, but it still gives you some good guidelines to follow.
1.3.2. Other benefits
Here are some other reasons why you might want to use Lighthouse in your site testing routine:
- Suggesting actionable items: When Lighthouse identifies a problem, it will give you important items to address to improve your pages.
- Often the reports will point to explicit segments and even lines of code that can be fixed or improved.
- Frequent Lighthouse updates: Lighthouse is constantly updated by Google engineers to ensure that the latest web metrics are incorporated.
- Lighthouse is easy to use and you can review your site with one click.
Simply put, with Lighthouse, you can improve mobile functionality, website speed, and accessibility levels.
Chapter 2: How to use Google Lighthouse?
To audit your website with the Lighthouse tool, you have two options, either you use the Lighthouse extension (on Chrome or Firefox ) or on web dev.
2.1. Google Lighthouse on Chrome
You can audit your site simply by clicking on the button ”Generate a report” which is accessible after installing the extension Lighthouse Chrome extension or Lighthouse Firefox extension. You can choose what you want to test by clicking on the gear button.
The Lighthouse Chrome tool will then run the audit and automatically generate a report within seconds. It will be available to you in a newly opened tab, like this:
Which is very useful and in addition to the raw information, you get a report that provides useful tips, including performance budgets, so you can start working on upgrades.
2.2. Lighthouse on Web dev
At web dev you simply enter the URL of the site you want to analyze and you will be presented with an analysis report.
Once the audit is complete, it will show you a report that looks like this:
You have to make sure to click on the ”View Report” button to drill down on each metric and get the information you need
Web.dev does not provide two different reports for mobile or desktop, you only get one analysis report.
Chapter 3: How to improve Lighthouse metrics of a website?
When the Lighthouse tool sends an analytics report, it is your duty to take into account the flaws to correct the shortcomings.
Now we will find out how you can improve Lighthouse metrics, mainly performance, accessibility and SEO techniques.
3.1. how to improve your website’s performance?
According to statisticswhen your website takes even one second longer to load, it can result in disadvantages such as
- 11% decrease in page views;
- A 16% decrease in customer satisfaction
- And a 7% drop in return rate.
It is essential to make website performance a priority, as poor performance often leads to poor user experiences. To that end, here are some ways to make improvements.
3.1.1. Reduce the HTTP request
HTTP (s) is a request/response method used by a web browser to import files from the web server.
For each page a user visits on your site, his browser sends a request to your website. The accumulation of these requests can cause a slowdown in the loading speed of your site.
You can speed up your website by simplifying the design and coding elements. Here are some techniques:
- Use image spriting: Image spriting combines multiple images into a single image file. It uses the positioning of the background to display the required part of the image.
- Connect CSS and JavaScript: The concatenation of CSS and JavaScript codes is crucial. It is always better to create one master file rather than having multiple files to perform different tasks.
- Don’t rely too much on JavaScript: Using too much JavaScript can lead to HTTP overload and will make your website harder to maintain. It is best to use JavaScript only when necessary.
3.1.2. Using a CDN service
A content delivery network (CDN) is a geographically distributed network that delivers websites and other web content to the end user.
Basically, it delivers static website content such as HTML, CSS, images and JavaScript via web servers near a user’s physical location.
For example, if an origin server is located in France and a user opens the website from Singapore, the website will take longer to load because it must physically channel its information further away.
A CDN has many data servers in different parts of the world. This will allow you to open the website from Singapore and load the website from the Singapore data center instead of France. This reduces the loading time considerably.
3.2.3. Reduce the size of the images
According to a report from Hubspot32% of marketers say that images and infographics are considered the most successful form of content for businesses
They grab the user’s attention and when strategically placed, your site is more appealing.
However, using too many large images or photos can slow down the loading speed of your website.
To optimize, you can:
- Use brand new photo formats, such as WebP or JPeg XR, to reduce the image size by 20-50% without compromising the original quality ;
- Save the photo in PNG or JPEG format;
- Reduce the total size of the image in any editor such as PhotoShop ;
- Use a plugin to quickly compress images, such as WP Smush.
3.2. how to make a website accessible?
To make your website accessible to all users and search engines, here is what you need to do
3.2.1. Choose a CMS that will help you create an accessible website
When it comes to content management systems and frameworks, you literally have a multitude of options.
While open source systems are evolving rapidly, designers and developers around the world are making sure to meet accessibility requirements from the start
WordPress is a CMS that is best suited to support your site’s accessibility. However, there are other platforms like Drupal or Joomla that also have excellent accessibility features.
Let’s see how these three different platforms compare in terms of accessibility.
WordPress: Most WP developers make accessibility a major concern. This is easy for them because of a large number of new themes and plugins that make online content accessible and enjoyable for everyone
WordPress also has an accessibility team that helps developers with major updates to ensure that new features will be in line with current accessibility guidelines.
Joomla : The undisputed king of content management systems before WP, this platform is also well positioned when it comes to accessibility. It’s easy to implement accessible code for theme optimization and fine-tuning essential elements. The only thing you need to do is to make sure that the template core you are using is compatible with such changes.
Drupal: While Drupal developers generally cater to the more tech-savvy, they also take the topic of accessibility seriously
Their building application is fully compliant with WCAG 2.0 guidelines and offers excellent documentation to help designers implement these standards
Also the latest major update to Drupal 8 has also added significant improvements to ARIA and HTML5 tags.
3.2.2. Use semantic tags to increase accessibility
Readability should always be a major concern, especially when writing or delivering content for a wider audience
You need to make sure that the text flow is optimal and easy to understand. The same rule of thumb also applies to annotations
That’s why it’s essential to structure your content well and make it understandable to users.
HTML 5, for example, provides developers with almost all the functionality required to optimize object labels.
Here are some examples of how key semantic markup elements can make your content more readable
: Allows you to define new sections in your content. Very often, this starts with a new title. : Means a new independent piece of content that you can consume separately from the rest of the web application. : Shows a new header. : Indicates a table in the content.
3.2.3. Manage colors as well as possible
When creating an accessible layout is your main goal, you should see the accessibility guidelines defined and choose layout colors accordingly instead of relying solely on your personal preferences.
To meet the needs of the majority, be sure to use colors that are not too distracting, but also use other indicators like question marks and asterisks
Also, don’t forget to use spaces to distinguish between different content blocks.
Here are some things to keep in mind:
- Bright colors, for example, may be too intense for those with higher photosensitivity;
- It is also highly recommended to keep the contrast lines clear, so people with vision problems will have an easier time understanding the content of your website.
- Make sure that the essential corners of the website are not lost in the color. For example, the ”toggle” button should be a clear feature without any color associated with other key components of your site.
- Fortunately, most CMS platforms allow you to fine-tune your color schemes, so solving this problem shouldn’t be so problematic if you use them.
3.3. how to improve your SEO techniques?
SEO strategies and practices are numerous and cover different aspects of a website, from HTML structure to link management.
In concrete terms, SEO activity is mainly structured in two main areas:
- On-Page SEO
- Off-page SEO
3.3.1. On-Page SEO
The term On-Page SEO refers to all optimization strategies implemented on the pages of the site to be positioned in search results.
It takes into account the SEO optimization of the HTML code and the optimization of the site content.
3.3.1.1. Choice of keywords
To do SEO in the right way, it is necessary to start from a first strategic phase, focused on the analysis and the choice of the best keywords to use.
In order to get a good ranking on Google it is advisable to avoid keywords that are too generic with a high search volume and strong competition. These keywords have little chance of success especially for small sites
According to the long tail theory, it is better to choose many specific keywords, with less search volume, but also less competition
It is proven that these terms offer the best conversion rates.
These keywords will be used strategically in certain elements, such as
- Title tags;
- The meta description ;
- The title tags
- And the alternative text of images.
The title tag is the code that specifies the title of a particular page to the search engine and, for it to be optimized, it must be concise and include the main keyword
The meta description, the introductory sentence that appears on the SERPs under each web address ranked by the search engine, must be clear and captivating, as well as consistent with the content it refers to.
Within a page, it is advisable to use the Heading tags, i.e., titles and subtitles, H1, H2, H3, which help clarify the content of the page to users and search engines.
Since browsers still cannot understand the content of an image so easily, it is also important to add alternative text, i.e. a descriptive text of the image that can explain its content.
3.3.1.2. Optimizing the content of a website
Another determining aspect for the good positioning of a website is the optimization of the content. In general, your content must be :
- Unique and original, i.e. not copied from other sites;
- Useful and interesting;
- Regularly edited and updated;
- Contain naturally the targeted keywords.
3.3.2. Off-page SEO
Off-page strategies and practices also contribute to the good positioning of a site. Here, we refer specifically to the management of inbound links.
Google believes that the most linked web pages are the most deserving and important
However, this belief is not limited to a simple numerical aspect. The search engine actually also takes into consideration the authority of the pages from which the links originate.
Getting links to your web page in a natural way and therefore complies with Google’s rules, but we must admit that it is not easy. The secret is to produce quality content, appreciated by users.
3.3.3. Optimize your website for mobile devices
Almost 60% of all online searches are done on a mobile device
Google too, recognizes that most users access websites via a mobile device. The search engine has therefore introduced mobile-first indexing
This means that Google now uses the mobile version of a page’s content for indexing and ranking purposes.
And since it’s not possible to create a separate site index for mobile, your site must work just as well on mobile as it does on a desktop computer.
One of Google’s criteria for evaluating a website is now its readiness for mobile-first indexing, a clear indication that Google insists you have a responsive web design and put your mobile customers first.
Whether your site is truly responsive or simply mobile-friendly, make sure your mobile load time is fast and its appearance is consistent
Also, make sure your title and header tags are designed to display properly on mobile devices.
Conclusion
With Lighthouse, you can improve mobile functionality, website speed and accessibility while making adjustments to ensure your site is user-friendly
Additionally, heeding Lighthouse analytics reports is good, but preventing the problems this tool may discover on your site is even better.
In this article, you not only have everything you need to know about Google Lighthouse, but also, the best ways to improve the performance of your web pages.
If you liked this article, please let us know in the comments.
Thanks and see you soon!
