🛠️

デザイナーでも出来る Lighthouseスコア改善

2022/10/09に公開約3,700字

背景

Google は様々な要因によって 検索ランキング を決定していますが、
2021年6月中旬頃から Core Web Vitals (コアウェブバイタル) の各指標が、
要因の一部として影響することになりました。

https://developers.google.com/search/blog/2021/04/more-details-page-experience

今回、その 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 を指定して実行すると、ページに対する集中的なテストを実行してパフォーマンスに関するレポートを生成できます。 今後は弱点を検出するテストを利用して、アプリの品質改善の指針を得られるようになります。

https://developers.google.com/web/tools/lighthouse/?hl=ja

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

指摘内容

背景色と前景色には十分なコントラスト比がありません。

低コントラストのテキストは、多くのユーザーが読むのが難しいか不可能です。
改善策

背景色 や 前景色 を適切なコントラストに変更すれば改善できます。
具体的な色のコントラスト については、こちらのサイトが参考になりました。
https://lab.syncer.jp/Tool/Color-Contrast-Checker/

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

ログインするとコメントできます