LighthouseはGoogleが提供しているウェブサイトのパフォーマンスやアクセシビリティなどの指標を計測するためのツールですが、スコアという形で明確に数値として評価されます。このスコアが高いとパフォーマンスがよく一定のアクセシビリティも満たせており、SEOにも良いとされているのですが、実際に検証すると思いのほかスコアが伸びなかったり、さまざまな改善案が出たりすることもあります。そこで今回は実際に検証してみてLighthouseでのスコア改善に向けた対策についてまとめてみたいと思います。Lighthouseについては過去記事「Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする」でも紹介しております。   以前にもサイトのパフォーマンスについての対策について過去記事「ウェブサイト表示高速化の施策で快適なサイト閲覧を目指す」でもいくつか紹介しておりました。これらの施策はサイト表示を高速化させる上で効果的で、今回のLighthouseでのスコア改善に向けた具体的な施策の一つと言えます。   また、弊社ウェブサイトも以前はWordPressサイトで運用しており、当時はLighthouseのスコアもあまり伸びなかったのですが、WordPressをヘッドレスCMSの構成にして、Nuxt.jsを使った静的サイトにリニューアルしたところ、大幅にスコアの改善が見られました。（過去記事「WordPressから静的サイトジェネレーターに移行後のサイトパフォーマンスの変化をチェックしてみる」）さらにウェブサイトをPWAに対応させるなどの対応も行いました。（過去記事「PWAに対応したウェブサイトをNuxt.jsで作成してUXを向上させる」）   こういった施策をおこなっていながらも、まだ改善の余地が見られ、その際に対応した対策について下記の種別ごとに発生した問題とその際に実施した対策をまとめてみたいと思います。    

パフォーマンス

この指標ではサイトの表示速度など快適に閲覧できるかどうかをチェックします。サイトが高速であればスコアが高くなります。この指標についてはGoogleが提供している「PageSpeed Insights」の結果にも深く関わってきます。（過去記事「オンラインツールでウェブサイトのページ表示速度をチェック」）ウェブサイト表示高速化の施策が効果的です。

Image elements do not have explicit width and height
（画像要素に明示的な幅と高さがありません）

対策：img要素のwidth属性とheight属性で幅および高さの値を明示しておく  

Ensure text remains visible during webfont load
（Webフォントの読み込み中でもテキストが表示されたままにする）

対策：@font-faceのウェブフォント指定で「font-display: swap;」を追加  

Eliminate render-blocking resources
（レンダリングをブロックするリソースを排除する）

対策：headで読み込むCSSやJavaScriptを非同期で読み込む、あるいはhead内にインラインで記述  

Defer offscreen images
（ビューポートに含まれない画像は読み込みを遅延させる）

対策：lazyloadなどビューポート表示外の画像は遅延読み込みさせる  

Properly size image
（適切なサイズの画像を用意する）

対策：表示領域に合わせてソースファイルである画像を適切にリサイズする  

Serve static assets with an efficient cache policy
（効率的なキャッシュポリシーを使用して静的アセットを提供する）

対策：画像、CSS、スクリプトファイルなど静的リソースにキャッシュを設定（1年以上）  

Minimize main-thread work 
（メインスレッドの作業を最小限に抑える）

対策：JSやCSSのminify化、アニメーション要素にwill-changeプロパティの適用など    

アクセシビリティ

この指標ではウェブサイトの利便性を測ったり、ユーザー補助に問題がないかをみていきます。ユーザビリティはもちろんのこと、視覚障害者にも親切なサイトの作りが求められる中で、どれだけ要件に満たしているかがポイントになります。見た目の部分以外にもスクリーンリーダー使用時のことも配慮する必要があります。コントラストや文字サイズなども適切かどうか注意したいですね。  

Background and foreground colors do not have a sufficient contrast ratio
（背景色と前景色のコントラスト比が十分でない）

対策：背景色と描画色や文字色のコントラストを上げる  

Links do not have a discernible name
（リンクには識別可能な名前をつける）

対策：a要素は空にせずフォーカスできるようにテキストを入れる、あるいはaria-label属性などでテキストを設定する  

Form elements do not have associated labels
（フォーム要素にラベルを関連付ける）

対策：form内の要素にaria-label属性を指定    

ベストプラクティス

この指標では主に実装面での不備がないかや、適切な技術を使ってサイトが構築されているかどうかをチェックします。コンソールのエラーやSSL対応、適切なプログラムコードが書かれているかなどを押さえておく必要があります。  

Uses deprecated APIs 
（非推奨のAPIが使用されている）

対策：推奨されていないAPIを使用しているがソースコード側で心当たりがない場合、Google Chromeの拡張機能が影響している場合もあり  

Issues were logged in the Issues panel in Chrome Devtools
（Chrome Devtoolsのコンソールパネルに問題が記録されている）

対策：デベロッパーツールで検出されているissueを解決しておく    

SEO

この指標ではグーグルの検索エンジンが正しくクロールできるかどうかの最適化を測るものになります。SEO対策としてはいろんな側面がありますが、まずはこれらの問題をクリアすることがSEO対策として重要となります。  

Links are not crawlable
（リンクがクロールできない）

対策：href属性が空となっているのが原因なのでhref属性を入れる  

Links do not have descriptive text
（リンクに説明用途のテキストを含める）

対策：リンクテキストの説明が不十分なので「More」や「詳しく」などの表現を避ける  

Image elements do not have [alt] attributes
（画像要素にalt属性がない）

対策：img要素には必ずalt属性を入れておく    

PWA

この指標ではPWAに関する問題をチェックすることができます。適切な設定がなされているかを調べながら、問題がある場合には随時対応をしていきます。

Web app manifest or service worker do not meet the installability requirements
（WebアプリのマニフェストまたはService Workerがインストール可能性の要件を満たしていない）

対策：適宜失敗している理由に合わせて対応  

Manifest doesn't have a maskable icon
（マニフェストにはマスク可能なアイコンがない）

対策：manifest.jsonのiconsキーで設定しているアイコン画像の設定で"purpose": "maskable"を追加   上記以外にもさまざまな解決すべき項目などがありますが、それぞれ指摘箇所を対応することでここまでスコアを上げることができました。モバイルについてはもう少し改善の余地がありますが、、デスクトップについてはほぼ満点ということで十分合格ラインを達成できたのではないでしょうか。  

---

  近年ではモバイル端末の普及やブラウザの進化などで、ウェブサイト側にもより高品質なものが求められるようになってきました。見た目が良ければいい、機能していればOKという基準では時代遅れになるのかもしれませんね。サイト制作時にはこういった指標も意識しながら作成していきたいですね。