こんにちは、フロントエンドチームの谷（@high_g_engineer）です。
今週のフロントエンド定例の内容を記載します。
フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。
以下、今週の内容です。
Lighthouseのスコアを上げる為に取り組んだこと
今週は、作成中のLPについて、Lighthouseのスコアを上げる対応を行っていました。
その対応の中でも主に、パフォーマンススコア改善とアクセシビリティスコア改善について紹介しようと思います。
パフォーマンススコア改善について
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）に関しては、バックエンドが絡んでくるので、CakePHPの様な同期的にデータを取得する作りの場合、改善が難しいです。
SPAの様に非同期的にデータを取得する様な作りやSSGの様に事前にデータを取得して静的ビルドする様な作りになっていれば、TBTのスコアの改善がしやすいです。
アクセシビリティスコア改善について
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にも密接な関係があるので、昨今のフロントエンド界隈では注目が高まっています。
対応に慣れていないと難しく感じるかもしれませんが、ひとつひとつの対応は簡単なものが多いです。
ただ、簡単だからといって後回しにしていると、塵も積もれば・・・状態になるので、当たり前のレベルで対応できるように、地道に取り組むことが大切になってきます。
ランサーズでは、まだまだこれらの対応が出来ていないページが多く存在しているので、一つ一つ丁寧に対応していければと思っております。
次回の更新予定は、 9/2（金）になります！
前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。