JS memo

お洒落にJavaScript。

2019年6月16日13:20

Lighthouseでスコア改善をした話。

メインビジュアル

Lighthouseでスコア改善をした話。

lighthouseのスコア結果

Chromeの拡張昨日「Lighthouse report」を使ってPerfomance、Accessibility、Best Practices、SEOの全項目でできる限り満点に近い点数をとってみました。

目次

  1. Lighthouseとは
  2. Lighthouseの使い方
  3. Lighthouseでスコア改善のためにしたこと
  4. まとめ

Lighthouseとは

Lighthouseとは主にWebサイトのパフォーマンスや質、SEOを評価してくれるchromeの拡張機能です。
主に4つの指標を評価してくれます。
Lighthouse(灯台)と名付けられたのは「Webディベロッパーが暗闇の中で迷わないように」という意味が込められているそうです。

Performance

サーバーからの応答時間や外部ファイルのJavaScriptやCSSの読み込みがページの読み込みを止めていないかなどWebサイトのスピードを評価します。

Accessibility

例えばボタンが押しやすいサイズか、タイトルは書かれているかなどユーザーにとってどれだけ使いやすい構造になっているのかを評価します。

Best Practices

例えばサイトのSSL化はできているか、エラーや警告が出ていないかなどサイトのパフォーマンスを下げる可能性のある要因をチェックしてくれます。

SEO

robot.txtやCanonicalタグなどSEOの指標となるものがきちんと対策されているか評価します。

Lighthouseの使い方

Lighthouseの使い方は簡単です。

1. Lighthouseをインストールする

以下のサイトからLighthouseをインストールするとブラウザの右上にLighthouseのアイコンが表示されます。

Lighthouse Chrome 拡張機能

2. 評価したいサイトでLighthouseを使う

評価するサイトにアクセスし、先ほどのLighthouseのアイコンをクリックします。

Lighthouseでスコア改善のためにしたこと

それでは本題に入りたいと思います。

今回このサイトのトップページにおいて4つの評価をほぼ満点にするためにやったことをお教えします。

4つの項目別で対策方法をまとめたいところですが、評価対象が被っているものもあるのでやったことを全体でまとめました。

Lighthouseの測定環境

MacOS Mojave

Chrome バージョン73

Lighthouseのスコア改善前にしていたこと

https / Http2 / head内タグの整理

Lighthouseのスコア改善でしたこと

1. 外部cssファイルのインライン化

linkタグを使って外部のCSSファイルを読み込むと「CSSファイルがページの読み込み自体を妨げているよ!」とGoogleさんに低評価をつけられてしまいます。
そのためページの読み込みを阻害しないためCSSをインライン化しました。

2. 画像の遅延読み込み

サイトに使っている画像の容量が多く、ページの最初の表示速度を遅くしてしまっていたので、JavaScriptのIntersection Observerを利用して画像の遅延読み込みを実装しました。
他の対策としては画像を圧縮して容量を小さくすることも可能ですが、そもそもGoogleが提示してくる最適な画像容量にするまで画像を圧縮すると画質が荒くなってしまうので、画像遅延をおすすめします。

3. htmlファイルの圧縮

htmlファイルを圧縮しました。これは一番評価に効果があったのではないかと思います。

4. 背景と文字のコントラストの明確化

例えばグレーに白文字は読みにくくなっている部分がいくつかあったので、背景色に対して使用する文字はコントラストがはっきりした色を使用するようにしました。

5. aタグにaria-label属性を追加

文字なしでfontawesomeや画像を使用しているaタグに関してはaria-label属性を追加することによって、googlebotがどのようなサイトにリンクしているのか認識できるようにしました。

fontawesomeのアイコンにtwitterのURLを設置した場合

<a href="twitterのURL" aria-label="twitterのアカウント"><i class="fab fa-twitter"></i></a>

6. imgタグにalt属性の追加

imgタグにalt属性を追加することで画像が読み込まれなかった時に画像の代わりにaltタグで書いたテキストが表示されます。
またgooglebotはまだ完全に画像を認識できないので、画像の内容はalt属性を見て判断している可能性が高いです。

<img src="js.jpg" alt="javaScriptについて">

改善できなかったこと

lighthouseのスコア結果

画像をみてわかるようにBest Practicesだけ100点満点が取れませんでした。
最近Chromeが出している以下の警告が原因です。

chrome.loadTimes() is deprecated, instead use standardized API: nextHopProtocol in Navigation Timing 2

chrome.loadTimes()よりもNavigation Timing 2を使ってね!というお知らせなのと自分で実装したJavaScriptではなかったので、今回は目を瞑ることにしました。

まとめ

そもそもサイトの規模が小さいこともありますが、そんなに難しいことをせずにlighthouseのスコア改善をすることができました!