Lighthouse is a Google open source tool that analyzes web page performance. Although its websites are web applications and mobile websites, it still provides a lot of useful information and recommendations that can improve any website.
When you optimize a website with mobile in mind, you almost always improve its overall performance in a desktop web browser as well. And mobile optimization can benefit all website developers.
Google and Website optimization
While Google has always been the main focus, for many years they have also been building tools to help website owners increase performance and indexing from their sites.
If you haven’t taken advantage of any of those resources, do yourself a favor and take a look. But be prepared for many recommendations for improvement.
The amount of information you can get from the equipment can be overwhelming. But if you tackle one issue at a time, you will eventually scale the website performance.
Every time I load a Google developer tool, I spend an hour (or two, or three) making changes to the site. Maybe I don’t want to spend that time on things that most of my website visitors will never see, but I always feel better knowing that the performance of my site has been improved.
And it helps to know that I’m gaining a competitive edge over websites that don’t work to increase performance.
Another tool I’ve mentioned in a previous article is PageSpeed Insights. Today, we’re going to focus on the tool that powers PageSpeed Insights: Lighthouse.
What Is Google Lighthouse?
Lighthouse is an application that carries out a number of tests called “exploration.” This analyzes information on a web application or web application. It then creates a report on how well the app or page performed.
The audit involves loading the page over a weak, fake 3G connection when viewed on a slow device. It also simulates packet or data loss, network charging and CPU.
Basically, it looks at the page the way it might seem to someone on an older phone with a less-than-amazing connection.
That might seem like stacking the deck against the page. Even the largest, fastest, most optimized page in the world would suffer under such conditions.
The idea is to improve speed. And if you can improve the speed under page-highlighting conditions, performance goes to and to tell the truth improve on a fast device connected to a fast network.
When looking at page search results, good results score 90-100. The average is 50-89, and poor is 0-49. According to Google, any score above 90 ranks you in the top 5% of well-functioning websites.
What Does Lighthouse Experience?
The perception speed is just as important as actual speed. For that reason, the Lighthouse report focuses on a number of things related to displaying content on screen as quickly as possible. It also tests users’ ability to interact with the content.
The Performance section of the report includes:
- First Content Paint is a measure of how long it takes for content of any kind to appear on screen.
- First Meaningful Paint is how long it takes for the first meaningful content to appear on screen. The lower the score, the faster that page appears.
- Speed Index is a site speed test that shows how fast a page’s content can be viewed. The index is based on a load time of under 1.25 seconds.
- First CPU idle is the time when the device is no longer working to make the page.
- Time for Interactive measures when a page is interactive. This means that most of the user interface elements are interactive and the screen responds to user input.
- Estimated Input Latency measures how long it takes for a page to respond to user input. The lower the latency, the faster the page will feel. The target for input latency is less than 50 milliseconds.
The Accessibility section of the report includes page heading checks. It also includes whether background and foreground colors have sufficient contrast, document title tag, link names, and whether the watch is scalable viewer.
The Lighthouse Accessibility section also provides a list of “Additional items to check manually.” This is because it is not possible to automate a check of all relevant benchmarks.
Lighthouse comes from Google, so you know it will include some SEO information and recommendations.
It’s a pretty basic test, though. It looks for page tags and status codes, so don’t rely on Lighthouse as a strict SEO tool. However, Google has indicated that they plan to expand the SEO checks that Lighthouse performs.
The Lighthouse SEO section also provides a list of “Additional items to check manually.” At the time of this post, just include the check link to the Structured Data Testing Tool.
Progressive Web App
When you conduct a lighthouse inspection on a regular web page most of these results do not apply.
But there are a few useful checks.
- Whether the page load is fast enough on mobile networks.
- Check that the content is correctly sized for the watch.
- Whether the page has a meta name = “viewport” tag with initial width or scale.
Use of Lighthouse
Now that you know what it can do, you’re probably eager to try Lighthouse.
If you use the Google Chrome browser you already have access to the Lighthouse (look for the Explore tab in DevTools). If you find the Chrome DevTools a bit of a maze (because they are!), You can install Chrome Lighthouse extension.
If you do not want to install the Chrome browser, you can still use Lighthouse. The Node command line version if you’re into that sort of thing or you can access most of the Lighthouse equipment by visiting the PageSpeed Insights website.
So a single page audit can tell you a lot.
But if you have very different sections on your site, such as a blog or forum along with static pages, you should test each section individually. In those cases, optimization steps will almost always apply to one part of the site but not to another.
Performing a page audit with the Lighthouse couldn’t be easier.
Using the Chrome Extension
Lighthouse will conduct its inspections and open a new tab with the report.
Opening Lighthouse at Chrome DevTools
- Upload the page you want to explore in the Chrome browser.
- Open Chrome DevTools.
- Windows: F12 key, or Control + Shift + I.
- Mac: Command + Option + I.
- From the main Chrome menu: Click “Customize and control Google Chrome” in the top right corner, then select More Tools> Developer Tools.
- Click the Audits tab.
- Click the “Run audits” button.
Lighthouse will conduct its inspections and display the report in the quarry or DevTools window.
Automatic Competitive Advantage is Caring for Performance
As you have realized by now, you can run Lighthouse on any web page. Which means you can go beyond your own pages.
Not long ago, I ran a Lighthouse on a number of high profile websites thinking I could learn a thing or two from the way the “big guys” do things. I was surprised instead to see how many things most of the big guys are doing wrong.
High profile websites have other advantages over the rest of us. And most of us are not in direct competition with them. But it’s fun to see how your website or rankings stack up against multi-million dollar corporations.
It’s also valuable to see how you stack up against those sites in direct competitors. If you can make your website outperform them, you can gain a technical advantage.
If you are not selling a product or you are not just the competitive type, you may not think that there is any such thing as competition with another website. But Google search results in a kind of competition. If you want your site to be found in those results, you are competing with thousands of similar websites to see.
Use Lighthouse to Improve Performance
When you care about performance and are actively working to improve it, you already have an advantage. Fortunately Google gives us access to many tools that can make that job much easier.
A lighthouse is one of those tools.
If you are ready to devote the time and effort necessary to continue improving your websites, the sky is the limit.