How to use Lighthouse for SEO
What is Lighthouse? Metrics you can see with Lighthouse. How to use Lighthouse. Analyzing Lighthouse result items.
Apr 24, 2023
β What is Lighthouse?
Lighthouse is an open-source, automated tool for improving the quality of web pages, developed by Google. You can use it on any web page (whether it's public or requires authorization).
Lighthouse is an open-source, automated tool for improving the quality of web pages.
π Metrics you can see with Lighthouse
Lighthouse uses the following metrics to measure its performance.
(There are additional things, but we won't describe them in detail. You can check them out at the following links.)
- First Contentful Paint
- FCP
- The time it takes for the browser to render the first DOM content when a user navigates to a specific web page.
- Speed Index
- When a web page is loaded, how long it takes for the content to be visually displayed.
- Time To Interactive
- The time it takes for a web page to be fully interactive.
- Max Potential First Input Delay
- FID
- The longest time it takes from when a user first interacts with the website (clicks a button) until the browser is actually able to respond to that interaction.
- (i.e., measuring the worst case)
- Total Blocking Time
- TBT
- Total time the web page was blocked from responding to user input.
- = the amount of time the main thread was interrupted for a long enough period of time during loading that it was unable to receive a response
- Largest Contentful Paint
- LCP
- The time it takes for the largest content element in the viewport to be rendered to the screen.
- Cumulative Layout Shift
- CLS
- A measure of how much the layout of a web page changes due to slow loading of images/ads, asynchronous behavior, dynamic DOM changes, etc.
- A metric that checks for visual instability that can cause users to make incorrect clicks.
π‘ How to use Lighthouse
1. npm
$ npm install -g lighthouse $ lighthouse https://www.example.com --view
2. Chrome Extension
3. Chrome DevTool
Since the release of Lighthouse version 6.0 on May 19, 2020, Lighthouse has been available in the developer tools inside the Chrome web browser.
Option. Lighthouse-CI
Lighthouse provides a CI. With CI, you run tests to measure your website's performance. It also runs a Node.js server that allows you to upload test results as well as visualize those results in a dashboard.
See the links below for more information.
π Let's take a look at the Lighthouse Report
// web.dev $ lighthouse https://web.dev/ --view --preset experimental // daum $ lighthouse https://www.daum.net/ --view --preset experimental
π Analyzing Lighthouse result items
1. Performance
Lighthouse is more focused on how quickly content appears on the screen and how quickly users perceive that content, regardless of what the actual speed is.
2. Accessibility
Lighthouse checks the accessibility of web applications. Check items such as whether the
<img> tag has an alt attribute, the <html> tag has a lang attribute, and whether there is enough contrast between the background color and the foreground color.3. Best Practices
Lighthouse checks that your web pages follow standard best practices for the web. It checks for things like no errors are printed to the console when you run the web application, you're not calling deprecated APIs, and the page is accessible over HTTPS.
4. SEO
Lighthouse ensures that web pages have optimized ranking results for search engines. It checks for some SEO best practices, such as using a font size that each user can read the content when they access the web page using their device, making sure the web page's robots.txt file is valid, and using the correct status code.
See: Webmaster Guidelines
5. Progressive Web App
Lighthouse checks web pages against a set of criteria that define a Progressive Web App. This check does not assign a score by measuring whether the web page follows the items. It checks for things like whether the web redirects HTTP to HTTPS, whether the response code is clear, and whether it loads quickly, even on a 3G network, and assigns a pass or fail.
π Friendly Lighthouse
If you're interested in improving your website's performance, you have to take a look at web.dev regularly. To keep up with the rapidly changing web ecosystem, Lighthouse regularly discusses and revises how we measure website performance. They document not only the changes, but also the metrics they use to measure them, and any changes in the weighting of each metric. They also provide guidance on how to use their new Lighthouse update to improve the performance of each website.
Not only that, but Lighthouse itself is a very user-friendly tool. This is immediately apparent in the reports. If a particular metric shows poor performance, it'll tell you why and offer suggestions on how to fix it. With
Learn more. , we can find more in-depth documentation.As handy and friendly as it is, Lighthouse is hidden in a corner of Chrome's developer tools, which is why we are here today to explain how to use it and how to analyze the website performance measurement reports you can get from it.
Why don't you stop being a stranger and use the easiest and fastest of the three methods described above to check the performance score of your own website?
Of course, the results might be more disastrous than you think, too
But fear not. If the goal was to be stuck with a website that performs horribly and stay there forever, and if that was the right path, then Lighthouse wouldn't exist, and even if it did, I wouldn't be here to show you how to use it. (It's a waste of resources to spend time explaining things that aren't necessary to everyone.)
We already know that performance is important when developing. We know that delivering high-performance applications to our users is the right way to go, but developing with performance in mind is awkward and difficult. It involves a lot of careful work. So maybe you've been getting it in your head, but your fingers have been avoiding writing code to improve performance.
As a result, many developers become casual about performance improvement and don't pay attention to each and every element for high performance. What if we add chaos to the thinking of a developer who is trying to stay calm in that situation? For example, a service development deadline is approaching...
It's almost impossible for the average human brain, even under time pressure, to keep track of every single thing that could hurt the program's performance, and if that happens, you're really left with the mentality of "let's just make it work, let it run, and fix it later" (not fix it).
Humans are creatures that rely on tools, so don't try to do everything with your brain alone, use the handy, friendly tools that other smart humans have created. While you may be in a hurry to deploy, you may not be paying attention to performance, but it's not that hard to get a performance measurement report from Lighthouse and make some improvements before you finally deploy your application to production. Isn't it?
It may feel uncomfortable at first, but try to make it a habit. Embrace the unfamiliar and keep learning to make it familiar. It's not like you're asking me to rewrite a core section using web assembly language to optimize performance. Start with the easy stuff and work your way up, and one day you'll find yourself greedily learning yet another piece of knowledge to make the little guy a little better.
Share article
Join the Inblog newsletter today!