An “Unlighthouse” tool that can collectively measure the performance of different pages on a site – GIGAZINE

「Lighthouse“is a tool created by Google that collectively checks the loading speed and accessibility of pages and logs them. It’s a tool that willwithout a beacon“He is.

Unlighthouse – Google’s sitewide beacon · Unlighthouse
https://unlighthouse.dev/

Node.js must be installed to use Unlighthouse. From the URL below, select the installation method that matches your environment.

Install Node.js using package manager | Node. js
https://nodejs.org/ja/download/package-manager

In order to use Ubuntu this time, I installed Node.js with the following code.

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

Unlighthouse can be started with one code below.

npx unlighthouse --site [スキャンしたいサイト]

You will be asked if you want to install the Unlighthouse package, so press Enter to install it.

The Unlighthouse screen will be displayed in your browser and scanning will begin. It is said to scan all pages on the site, but similar pages are sampled, and scanning was completed in about 2 minutes even with a GIGAZINE level content count. The scanned site, the overall score, and the number of pages scanned are displayed at the top left, and the scanned position is displayed at the top right. The scanned page and the result are lined up below. The scan mode is fixed in “Emulated Mobile” and there are no other modes.

Click on the “Result” column in the results.

Then the original beacon result screen was displayed. If you want to see single page results carefully, you should look at this screen. It does not have a close button, but you can close it by clicking off the screen.

You can also switch between tabs at the top of the results list screen. If you click on “Performance”,Biggest fee guaranteed」「Shift in cumulative planning」「The first input delayAnd other performance indicators are now on screen where you can check them all at once.

Similarly, on the Accessibility tab, List of Contents with Insufficient Contrast, Are the H-Tags Arranged in Order?ARIAIt is used appropriately.”

The Best Practices tab displays the number of console errors andproblemThey can be listed on every page.

In the SEO tab, you can check if the page is indexable, the number of internal and external links, the percentage of items large enough to be clicked on, and so on.

Also, it was possible to re-scan the entire site by clicking “Re-scan site” from the three-dot sign at the top right.