Blogブログ

2021/12/16 WEB, 分析

Lighthouseを使ってコーディングの改善点を見つけよう

イメージ

以前は「PageSpeed Insights」を使ってコーディングの改善点などを調査していたのですが、最近はもっぱらGoogle Chromeのデベロッパーツール内にある「Lighthouse(※リンク先は拡張機能版)」を使用しています。

とある特設ページの評価点は以下になりました。

画像:点数画像

それぞれの意味は以下の通りです。

100点満点にするのが望ましいですが、インターネットの速度、処理しているデバイス/ブラウザの性能、WordPressやCMSの影響といった諸般の理由によりなかなか難しいのが現実ですので、システム化前の初期構築の時点で80点以上ならまぁよかろう…という感覚でやっています。

チェック以前にしていること

システム化の予定のない、数ページ程度の小規模サイトや特設ページであれば、時間の許す限り改善点に従って対処を行っていますが、それ以前のチェック前までの作業で主に気を付けている事といえば…

といったコーディング超初心者がやるようなことをメインに行なっています。ただやはりいくら気を付けても漏れは出てしまうので、Lighthouseのアドバイス(※英語)を参照して時間的に処理が可能なら改善を行います。

改善してみよう!

ちょうど「Best Practices」内のアドバイスがされているので、改善して点数が変わるのか試してみましょう。

画像:点数画像

Links to cross-origin destinations are unsafe
Add `rel=”noopener”` or `rel=”noreferrer”` to any external links to improve performance and prevent security vulnerabilities.

クロスオリジンへのリンクは安全ではありません
外部へのリンクには、パフォーマンスの向上とセキュリティの脆弱性を防ぐために、`rel=”noopener”`または`rel=”noreferrer”`を追加してください。

クロスオリジンに関する説明は主題から外れるので省略。要するに何が起こるかというと…

新規ウィンドウのリンクを開いた時に、リンク先から元のウィンドウ内で別のサイトにリダイレクトされる可能性があります。なのでリンク先でリダイレクト命令が記述されてても不許可(noopener)の記述をしてください(またはnoreferrerで足跡は残さないように処置してください)…というアドバイスがされてあります(参考)。
※ 制作サイトのブランクリンクに関しては信頼性のサイトにリンクされてあるので問題ないと判断しています

というわけでブランクリンクにrel=”noopenerを設置した結果…

画像:点数画像

まさかのPerformance以外は100点満点になりました。

いかがでしたでしょうか。コーディングの評価基軸はなかなか数字として出せないので、とても助かっています。