Ateam Finergy Inc. Advent Calendar 2021の22日目は、Webデザイナーの @masaki632d が担当いたします。
はじめに
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スコア 指標別の改善実例
Performance
指摘内容
次世代フォーマットで画像を提供する
WebPやAVIFなどの画像形式は、多くの場合、PNGやJPEGよりも優れた圧縮を提供します。
これは、ダウンロードが高速でデータ消費が少ないことを意味します。
改善策
指摘されている画像を、PNG や JPEG ではなく、次世代フォーマット で提供すれば改善できます。
WebP などでの提供が難しい場合でも、画像圧縮により多少スコアを改善できます。
Accessibility
指摘内容
背景色と前景色には十分なコントラスト比がありません。
低コントラストのテキストは、多くのユーザーが読むのが難しいか不可能です。
改善策
背景色 や 前景色 を適切なコントラストに変更すれば改善できます。
具体的な色のコントラスト については、こちらのサイトが参考になりました。
Best Practices
指摘内容
クロスオリジンの宛先へのリンクは安全ではありません
パフォーマンスを向上させ、セキュリティの脆弱性を防ぐために、外部リンクに `rel =" noopener "`または `rel =" noreferrer "`を追加します。
改善策
外部リンクの aタグ に rel="noopener" または rel="noreferrer" を追加することで改善できます。
SEO
指摘内容
画像要素には[alt]属性がありません
有益な要素は、短くて説明的な代替テキストを目指す必要があります。空のalt属性を使用すると、装飾要素を無視できます。
改善策
画像に alt を入れることで解消できます。
Progressive Web App
（今回、Progressive Web App 指標に対する実例は省略させていただきます。）
まとめ
以上、いかがだったでしょうか？
私たちのWebサービスでも、まだLighthouseスコアでオール100点を取れておりませんが、一つ一つ指摘内容を確認して改善していくことで、より良いWebサービスにしていきたいと思っています。
UX改善 による Core Web Vitals の向上は、検索ランキング や ユーザーの離脱率の低下にも関わってきますので、Lighthouse などのツールを活用し、早めにできるだけ改善を進めていきましょう！