Lighthouseのスコアを上げる為に取り組んだこと
今週は、作成中のページについて、Lighthouseのスコアを上げる対応を行っていました。
その対応の中でも主に、パフォーマンススコア改善とアクセシビリティスコア改善について紹介しようと思います。
前提
- PHPフレームワーク（CakePHP）のView + Sass + JSといった作りのLPです
- ゴリゴリJSが書いてある様な動きのあるページではありません
- 一部PHPで、データ読み込みの処理やfor文が記述されている箇所があります
- 画像は、34ファイルほどあり、人物が写っている様な画像ファイルそのうち6つほどです
パフォーマンススコア改善について
Lighthouseのパフォーマンススコアを上げる為には、主に以下の改善を行います。
- FCP - First Contentful Paint（いずれかの要素が画面上に描画されるまでの経過時間）
- LCP - Largest Contentful Paint（最も大きなコンテンツが表示されるまでの経過時間）
- TTI - Time to Interactive（クリック等のインタラクティブな操作が可能になるまでの経過時間）
- CLS - Cumulative Layout Shift（画像やfontの適用遅延によるカクツキ発生の指標）
この様なパフォーマンススコアを上げる活動をパフォーマンスチューニングと呼びます。
パフォーマンスチューニングの基本は、「削る、圧縮する、遅延する、キャッシュする」です。
具体的には、以下の様なことを行いました。
- 不要なJS・CSSは、読み込まない、書かない
- CakePHPのLayoutで利用しているベーステンプレートのメンテナンスがされておらず、ネックになっていたので、LP用にテンプレートの再作成する
- reset cssが10年近くメンテナンスされていなかったり、LP用に見直し、最小限のreset cssを適用する
- common.jsという共通して読み込まれているJSファイルが存在していたが、メンテナンスされておらず、必要のないコードがたくさん存在していた為、LPでは適用しないようにした
- jQueryは利用せずに、素のJSを記述するようにした
- DOMを軽くする為に、無駄にHTMLを記述しない
- scriptタグには、deferを記述し、遅延読み込みをする（deferを記述するだけでスコアが10位異なる場合もある）
- heroエリア以外のimgタグには、loading="lazy"を記述する
- 画像はすべて圧縮する、または、すべてwebpにする（今回はすべてwebpを適用）
- レイアウトシフト防止の為、imgタグにwidth, heightを記述する（値はPC閲覧時の画像サイズでok）
これでスコアがかなり改善できますが、TBT（Total Blocking Time）に関しては、バックエンドが絡んでくるので、PHPフレームワークの様な同期的にデータを取得する作りの場合、改善が難しいです。
SPAで非同期的にデータを取得する様な作りやSSGで事前にデータを取得して静的ビルドする様な作りになっていれば、このスコアの改善がしやすいです。
アクセシビリティスコア改善について
Lighthouseのスコアを上げる為には、パフォーマンスだけでなく、アクセシビリティにも向き合う必要があります。
アクセシビリティの計測に関しては、どこに問題があるのかが、Lighthouseだと分かりにくいので、以下のツールを利用しています。
アクセシビリティスコアを上げる為には、具体的には、以下の様なことを行いました。
- imgタグにalt属性を必ずつける（本来の意味とは逸れるが、ツールの解釈的には、空文字でも良い。※分かりやすいテキストが設定できるのが絶対的に良い）
- aタグで画像を囲っている場合などは、aタグに対してarea-label属性を付与し、テキストを追加する
- カラーコントラスト比が十分でないと怒られるので、デザインシステムで定義しているデザイントークンのカラー適用を徹底する
- 各々の要素は、ランドマークと呼ばれるheader要素、nav要素、main要素、footer要素、aside要素などで囲う（div + role属性でもあり）
- h2, h3, h4の適用順は、囲っている要素内では順番に適用していく
これらで、Critical issueとWCAGのAAレベルの警告をなくすことができ、アクセシビリティのスコアが改善しました。
まとめ
Lighthouseのスコア改善は、UXだけでなくSEOにも密接な関係があるので、昨今のフロントエンド界隈では注目が高まっています。
対応に慣れていないと難しく感じるかもしれませんが、ひとつひとつの対応は簡単なものが多いです。
ただ、簡単だからといって後回しにしていると、塵も積もれば・・・状態になるので、当たり前のレベルで対応できるように、地道に取り組むことが大切になってきます。
良きLighthouseライフをおくりましょう！
Discussion