Lighthouseとは、Googleが提供しているChromeの拡張機能で、指定したURLのパフォーマンスに関する採点とレポートを生成してくれるツールです。スコアは一つの基準なので、高ければ良い、低ければ悪いとまでは思いませんが、パフォーマンス項目はページの読み込み速度に、アクセシビリティ項目は扱いやすさに影響しますので、ユーザーの操作・体感に関わる部分は対応しておくべきだと思います。
似たサービスのPageSpeed InsightsはPerformanceだけを分析してくれますが、LighthouseはPerformance、Accessibility、Best Practices、SEO、Progressive Web Appの項目に分かれて採点してくれます。また、問題点は全て明示してくれて、例えばAccessibilityであれば、実際のコードを指定した上で「Background and foreground colors do not have a sufficient contrast ratio.（背景色と文字色のコントラストが十分ではありません）」という風に指摘してくれます。一つ一つ見ていけば簡単に対応できるものも少なくないので、まずはできるところから着手していくと効率的です。
ここでは、弊社がECサイトのLighthouseのスコア改善に取り組んだ施策を紹介したいと思います。方法をまとめると「きちんとしたHTML/CSSをかいて、外部サイトのファイルは読み込まず、画像は軽量化させて、jQueryは使わずJavaScriptでかく」です。これで各項目90〜100のスコアにすることができました。以下が実際に取り組んだスコア改善方法になります。
Lighthouseのスコア改善で行った対策
- jQueryをやめる
- 外部サイトファイルの読み込み対策
- YouTube動画は後から読み込む
- WebフォントやGAトラッキングコードは？
- 画像の軽量化
- 画像の遅延読み込み
- 画像形式の変更
- img要素にalt属性を入れる
- フォームにaria-label属性
- 隣接しているリンク
- 色のコントラスト調整
- robots.txtの設置
- html要素にlang属性を指定
- meta description 適用
- ファイルの軽量化
- document.write はやめる
- HTML調整
- CSS調整
jQueryをやめる
jQueryはとても便利なライブラリです。企業サイトなど、UIが変化するようなタイプでなければ、今でもjQueryはよく使われていると思います。プラグインも豊富ですので、自分でコードを書かなくても色んな機能を実装することができます。ただ、体感的にはそこまで重たいと感じなくても、Performanceのスコアにはあまり良い影響を与えていませんでした。jQueryとプラグインを多用していたサイトのスクリプトを全て素のJavaScriptで書き直したところ、Performanceは十数点向上しました（元となるサイトの構造次第でそこまでの向上は見られないかもしれません）。
多くの企業サイトやECサイトで使われるのは「スライドショー（カルーセル）」「アコーディオン」「ポップアップ」などが多いと思います。これらはそこまで複雑な構造ではないので、DOM操作に慣れれば、素のJavaScriptで書き直すことは難しくないので、取り組むべきポイントだと思います。
外部サイトファイルの読み込み対策
外部サイトからファイルを読み込むことはPerformanceに悪影響を与えます。例えばYouTube動画、Google マップ、SNSウィジェットやボタンなどがよく読み込まれているかと思います。代替できる部分はリンクに置き換えるなどで対応しましょう。
YouTube動画は後から読み込む
外部サイトのファイルは後から読み込むようにするのも一つの方法です。特にYouTube動画は負担が大きいので、遅延読み込みにして対応しました。こういった時にプラグインや慣れたjQueryでかけないのは少々ネックではありますが、iframeのsrcではなくdata-srcにYouTubeのURLをいれて、代替画像を設置、それをクリックするとdata-srcの中身をsrcに入れる、という処理で対応できます。
WebフォントやGAトラッキングコードは？
各ベンダーのWebフォントを利用する際は外部サイトのJSファイルを読み込みことになりますが、これもパフォーマンスに影響します。Google アナリティクスのトラッキングコードも同様です。ただ、パフォーマンス改善のためにこれらを外すことは難しいので、これらは許容するしかなさそうです。
画像の軽量化
どれだけ他の対策をしたとしても、1ページ内に重たい画像が複数あるとパフォーマンス（読み込み速度）は下がります。そのため、画像軽量化は必須対応となります。画質を保ったまま、できる限り軽量化しましょう。Photoshopで個別に最適化するか、TinyPNGなどのツールで一括で軽量化する方法があります。メインビジュアルの大事な画像は画質が劣化しないようにPhotoshopで個別に調整、他画像は一括で、という組み分けが良さそうです。
画像の遅延読み込み
軽量化といっても限界がありますので、パフォーマンス改善のために画像は後で読み込むという方法があります。実装は上記のYouTube動画の遅延読み込みと同様の考え方です。imgのsrcではなくdata-srcに画像パスを記載して、classに「lazyload」を指定して、JavaScriptで遅延読み込み処理を行います。
var lzld = document.getElementsByClassName("lazyload");
for (var i = 0; i < lzld.length; i++) {
lzld[i].setAttribute('src', lzld[i].getAttribute('data-src'));
}ただ、このままだとJavaScriptが適用されない環境だと画像が表示されないので、遅延読み込みの扱いは注意が必要です。
画像形式の変更
軽量化とは別に像形式を変える手法もあります。JPEG 2000、JPEG XR、WebPなどの画像形式を推奨されます。弊社が対策した案件だと、画像形式を変更することが難しかったので対応しませんでしたが、少しでもスコアを上げたいのであれば、検討すべき事案だと思います。
img要素にalt属性を入れる
これはWeb制作者なら当たり前の行為なのですが、長くWebサイトを運用していると、入れ忘れている箇所が見つかることは珍しくありません。。特にPHPやJavaScrirptからimgを出力する際にalt属性を書き漏れがちです。画像が表示されない環境やスクリーンリーダーを使用している方のためにも、適切なalt属性を指定しましょう。
フォームにaria-label属性
Accessibilityの項目で「Form elements do not have associated labels」という警告がでることがあります。フォームにラベルをつけてとのことなので、select要素やinput要素などにはラベル付けする文字をaria-label属性で入れると回避できます。
隣接しているリンク
リンク要素が小さくて隣接しすぎる場合に警告が出ます。アイコンリンクの小さいボタン同士や、テキストリンクが並ぶ箇所などで発生しがちです。十分な大きさか、スペースを確保して回避しましょう。
色のコントラスト調整
背景色と要素の色のコントラストが十分でない時に警告がでます。少々厳格だなという印象ですが、見づらい人がいるというアラートなので、視認性向上のために調整すべき箇所です。
その他の細かい警告
以下は更に細かい部分での警告とその対応になります。
robots.txtの設置
robots.txtを設置していない時に警告がでることがあります（設置していなくて警告がでない場合の方が多いのですが原因はまだ把握できていません）。特にrobots.txtを使う必要がなくても警告が出る時は、空のrobots.txtファイルを設置すると回避できます。
html要素にlang属性を指定
html要素にlang属性が指定されていないと警告がでます。日本語で書かれたWebサイトであれば「ja」を指定しておきましょう。
meta description 適用
個人的には主要ページに最適なmeta description が入っていれば、全ページにまでは不要かなと思っていますが、気になるようなら全ページに適用しましょう。
ファイルの軽量化
CSSファイルやJavaScriptファイルの軽量化を推奨されることもあります。すでにサイトで使われていない不要な部分があれば削除やMinify処理を行うことで対応できます。
document.write はやめる
JavaScriptでdocument.write()メソッドは避けましょう。
HTML調整
ul要素の中にli要素があるか、h1要素の直後にh3要素がきてないか、などHTHLをきちんと書いていない場合に警告がでます。これはスコア改善関係なく修正しましょう。
CSS調整
ベンダープレフィックスや CSSでのグラデーションを多用しているとPerformanceのスコアに影響がでることがあります。対応ブラウザ次第で前者は控えてよさそうです。
まとめ
他にも相当警告がありますが、よく見かけるものは大体上記の通りかと思います。ここでは書ききれませんでしたが、過度なDOMサイズの対応、キャッシュ対応やJavaScriptの非同期読み込みなど対策できる箇所もあります。スコア100を目指す場合は一つ一つ警告を見て対応していけばよいかと思います。
Lighthouseのスコアを向上させるというより、ユーザーの操作・体感に関わる部分を改善する施策と考えれば、できる限り取り組むべきかと思います。特にページ読み込み速度はユーザー体験に大きく影響しますので、スコアより実際の体感速度を気にしながら対応していくのが良いかと思いました。
