4月に開催されたBrightonSEOのレポート第二弾です。前回はECサイトのCVRを向上させる方法についてご紹介しました。
ECサイトの購入率（CVR）を上げる8つの方法 | Brighton SEOより
今回はLighthouseのスコアで100（満点）を獲得する方法についてご紹介します。
※冒頭の写真は会場のあるブライトンのビーチを早朝に散歩したときに撮った一枚です。
Lighthouseとは
LighthouseはGoogleが提供しているウェブサイトのパフォーマンスを計測して品質を改善するためのツールです。Googleのブログには、下記のように説明があります。
Lighthouse は、ウェブページの品質向上に役立つよう開発された、オープンソースの自動化されたツールです。サイトのパフォーマンス、アクセシビリティ、プログレッシブ ウェブアプリ（PWA）対応状況などについての確認でき、サイトの品質を向上させるための具体的な対策を提示します。デベロッパーの皆様が「暗礁に乗り上げないようにする」ことを目的としているため、「Lighthouse（灯台）」と名付けられました。ーLighthouse Chrome 拡張機能に追加された SEO カテゴリのご紹介
Lighthouseでは、
・パフォーマンス
・アクセシビリティ
・プログレッシブWebアプリ
・ベストプラクティス（改善案）
・SEOスコア
を計測し自身のウェブサイトの改善に役立てられます。
Page Speed Insight（PSI）の機能として提供されています
今回のセッションでは下記の方法が紹介されていました。
- HTTP2で通信する
- 画像の品質（WebPとその他）
- 最新のJSを使い、重いライブラリは使わない
- リソースを小さな塊に分け、必要なものだけを読み込む
- JS、CSSへの重要なアプローチ
HTTP2で通信する
様々な通信の仕方を決めているプロトコルの中でも、WEBでは代表的なHTTP。HTTPにはHTTP/1とHTTP/2のバージョンが存在します。
これまで標準的に使われてきたHTTP/1では、ウェブサーバーに対して原則1つずつしかリクエストを送ることができませんでした。例えば、ページ内に画像が2枚ある場合、HTTP/1で通信しているとまず最初の画像を読み込んでから、もう1枚の画像を読み込み始める仕様です。大きなファイルや画像の場合、リクエストを一つ一つ処理するので非常に時間がかかっていました。
それに対してHTTP/2では、複数のリクエストを同時に処理でき、HTTP/1で1枚1枚読み込んでいた画像を同時に読み込むことができるので、通信の効率化を実現し、読み込み速度の改善に繋がります。
画像の品質（WebPとその他）
ウェブサイトの容量の多くを占める画像も改善のポイントは多く、かつ効果の高いポイントです。
#1 Deferring offscreen images
オフスクリーン画像を遅延読込する
スクロールしないで閲覧できるウェブページの領域を、Above the fold（アバブ・ザ・フォールド）と言いますが、逆に、スクロースしなければ見れない領域は、Below the fold（ビロウ・ザ・フォールド）と呼ばれます（あんまり使わないけど）。そして、そのBelow the foldにしか出現しない画像のことを、offscreenと言います。
offscreenは基本的に遅延読み込みをしたほうが余計なリソースを必要としないので、スコアは高まります。もちろんユーザーが速くファーストビューを閲覧できるので、ユーザー目線で見てもおすすめです。
#2 Serving up images in next-gen formats
次世代フォーマットの画像を提供する
WebPなどの新しい画像形式は、PNGやJPEGよりも優れた圧縮を提供可能です。ダウンロードの高速化とデータの消費量の削減に繋がり、サイトの高速化へ繋がります。
WebP形式の詳細についてはこのブログでも以前紹介させていただきました。実際に計測をして画像容量の削減を実現しています。
次世代の画像フォーマット「WebP」でサイト表示速度の改善に取り組もう
#3 Using properly sized images
適切なサイズの画像を使用する
「アダプティブイメージサイズ」と呼ばれるアプローチを採用します。通常1つしか用意しない画像を、ブラウザ幅に応じてそれぞれ画像を用意し、‘src sets’を使って切り分ける手法です。現時点ではDOM構造が大幅に拡張され、実装工数も比較的必要になりますが、適切なサイズの画像のみを読み込むことができるためスコア改善に繋がります。
#4 Using lazy load
レイジーロード（遅延読み込み）を使う
ご存知、画像の遅延読み込みライブラリ「レイジーロード」。最近多くのサイトで実装されているレイジーロードは、画像がユーザーのビューポートに入ったときにだけロードし、それ以前にはロードしないようにします。ECサイトの商品詳細ページでは画像を大量に配置がしたりする場合は読み込み速度の改善に効果的な方法です。
最新のJSを使い、重いライブラリは使わない
パフォーマンス改善で重要なのは、最新のJSライブラリを利用することです。最新のJSファイルサイズは20％軽量で、最新のブラウザがサポートしています。古いブラウザとの互換性のために必要なレガシーコードが含まれていないためです。
古いライブラリを利用しているWebサイトでは、JSファイルのロードに133ミリ秒かかるのに対し、最新のJSファイルのロードは41ミリ秒で大きく差があります。
リソースを小さな塊に分け、必要なものだけを読み込む
1つの大きなCSSまたはJSファイルを用意する代わりに、Webサイト上の各論理ブロックごとに、すべてのCSSとJSを小さな塊（または小さなファイル）に分割し読み込みさせます。（講演では、フォーム、ヘッダー、フッターなどの役割ごとに分割した例が紹介されてました。）
このアプローチはHTTP/2を使うことで、各ファイルを同時にロードできるため、素早く待ち時間なしでロード可能です。
JS、CSSへの重要なアプローチ
通常、ウェブブラウザは全てのリソースを読み込んで解析が完了するまで、ページのレンダリングを開始しません。正確には、HTMLをロードし、それを解析後に、外部リソース（JS、CSS）を見つけ、それらをダウンロードし、さらに解析し評価してからページをレンダリングします。
問題は単体のJSおよびCSSファイルがWEBサイトのパフォーマンスが依存していることです。
基本的に解析と評価のプロセスには長い時間がかかります。またコンテンツのロードが開始される前に、JS,CSSの解析が終了するまでユーザーは待機する必要があります。もちろんJS,CSSにはこれらのファイルにはユーザーにとって意味のあるコンテンツは含まれていません。
それらの解決法としては、ページに必要なリソース（JS,CSS）をheadタグ内のhtmlにマークアップをしてインライン化してしまいます。そうすればブラウザはhtmlを受け取った後、必要なすべてのリソースを取得し、解析します。これにより、ブラウザはほとんど瞬時にページコンテンツをユーザに表示できます。
最後に
話の最後に、「今日スコアが100であっても、明日が同じだとは限らない」と言われていたのが印象的でした。またスコアの改善によってランキングの改善も見られたようです。
サイトによって事情があるので全ての方法を100%実施するのは難しいかもしれませんが、ぜひ試してみて下さい。
（おまけ）
会場にはGoogleのウェブトレンドアナリスト、ジョンミューラーの姿も。「ジョンミューラーと座って話そう」って日本じゃまず見れない光景でした。
