デザイナーでも出来る！Lighthouseスコア改善
背景
Google は様々な要因によって 検索ランキング を決定していますが、
2021年6月中旬頃から Core Web Vitals (コアウェブバイタル) の各指標が、
要因の一部として影響することになりました。
今回、その Core Web Vitals の改善に役立つツールとして Lighthouse (ライトハウス) を利用し、
指標別の 簡単な改善実例 をご紹介できればと思います。
Core Web Vitals のおさらい
Core Web Vitalsとは、 Webサイトの健全性を示す重要指標 のことです。
これらの重要指標を改善するためには、Googleが提供しているツールなどを使用し、UXを改善する必要があります。
Core Web Vitals の 重要指標は以下の3つです。
1. LCP（Largest Contentful Paint）
ページ内で、記事ページであれば アイキャッチ画像 など、
最重要の要素が読み込まれるまでの待機時間 を示します。
2. FID（First Input Delay）
ページ内で、クリック / キー押下 / マウス押下 / タッチ操作など、
ユーザーが行動を起こせるまでの待機時間 を示します。
3. CLS（Cumulative Layout Shift）
ページ内で、読み込みに応じて発生する予期せぬレイアウトのズレなど、
視覚的な安定性を測定する指標 を示します。
Lighthouse とは
Googleは、Core Web Vitals の重要指標である LCP / FID / CLS を測定するツールを複数提供しており、その中の一つが Lighthouse というツールです。
Lighthouse はオープンソースの自動化されたツールでウェブアプリの品質向上に役立ちます。 このツールは Chrome 拡張機能として実行するか、コマンドラインから実行できます。 Lighthouse に監査したい URL を指定して実行すると、ページに対する集中的なテストを実行してパフォーマンスに関するレポートを生成できます。 今後は弱点を検出するテストを利用して、アプリの品質改善の指針を得られるようになります。
Lighthouse の指標
Lighthouseでは、以下の5つの指標が計測できます。
1. Performance
ページの読み込みや、ユーザーの操作で発生するレスポンスの速さなど、
ページスピードに関する評価を示します。
2. Accessibility
テキストや背景色が適切なコントラストか、HTML構造が正しく設定されているかなど、
ユーザー / 検索エンジンのロボットに対して、最適な作りになっているかの評価を示します。
3. Best Practices
ページの安全性や、非推奨な技術を使っていないかなど、
モバイルに対応したサイトの品質に関する評価を示します。
4. SEO
モバイルフレンドリーかどうか、検索エンジンがコンテンツを理解できるかなど、
基本的なSEOに関する評価を示します。
5. Progressive Web App
サイトを PWA化 する上で必要なチェックリストを基にした対応項目を示します。
→ （PWA化 しない場合は計測不要）
Lighthouse の使い方
今回は、 Chromeブラウザ の デベロッパーツール から使用します。
→ （拡張機能 / コマンドラインからも使用可能）
該当のページで デベロッパーツール を開き、 「Lighthouse」タブ があるので選択します。
→ （余計な影響が無いよう、シークレットモードで実行します）
「Categories」 から、 計測したい指標 のみを選択します。
→ （計測したい指標 のみに絞ることで、計測時間を短縮できます）
「Device」 から、 SP版 を計測したいので 「Mobile」 を選択します。
→ （PC版 を計測したいときは 「Desktop」 を選択します）
「Generate Report」 をクリックすると、すぐに計測が始まります。
計測が終わると、スコアと共に、改善項目の詳細が英文で表示されます。
→ （改善するヒントとして、記載の英文や「Lean more」のリンク先を参照し、指摘内容を理解して改善していきます）
Lighthouseスコア 指標別の改善実例
1. Performance
指摘内容
次世代フォーマットで画像を提供する
WebP や AVIF などの画像形式は、多くの場合、PNG や JPEG よりも優れた圧縮を提供します。
これは、ダウンロードが高速でデータ消費が少ないことを意味します。
改善策
指摘されている画像を、PNG や JPEG ではなく、次世代フォーマット で提供すれば改善できます。
WebP などでの提供が難しい場合でも、画像圧縮により多少スコアを改善できます。
2. Accessibility
指摘内容
背景色と前景色には十分なコントラスト比がありません。
低コントラストのテキストは、多くのユーザーが読むのが難しいか不可能です。
改善策
背景色 や 前景色 を適切なコントラストに変更すれば改善できます。
具体的な色のコントラスト については、こちらのサイトが参考になりました。
3. Best Practices
指摘内容
クロスオリジンの宛先へのリンクは安全ではありません
パフォーマンスを向上させ、セキュリティの脆弱性を防ぐために、外部リンクに `rel =" noopener "`または `rel =" noreferrer "`を追加します。
改善策
外部リンクの aタグ に rel="noopener" または rel="noreferrer" を追加することで改善できます。
4. SEO
指摘内容
画像要素には[alt]属性がありません
有益な要素は、短くて説明的な代替テキストを目指す必要があります。空のalt属性を使用すると、装飾要素を無視できます。
改善策
画像に alt を入れることで解消できます。
5. Progressive Web App
（今回、Progressive Web App 指標に対する実例は省略させていただきます。）
まとめ
以上、いかがだったでしょうか？
全てのLighthouse指標でスコア100点（オールグリーン）を取ることは難しいですが、一つ一つ指摘内容を確認して改善していくことで、より良いWebサービスにしていくことができます。
また、UX改善 による Core Web Vitals の向上は、検索ランキング や ユーザーの離脱率の低下にも関わってきますので、今回のLighthouse などのツールを活用し、早めにできるだけ改善を進めていきましょう！
Discussion