「信用できるSEOツールでWEBサイトを評価してもらいたい」
「Google公式のSEOツールの使い方を知りたい」
この記事ではこのような悩みを持つ方に、Googleも公式ツール「Lighthouse（ライトハウス）」の翻訳と解説をしていきます。
SEOツールはWEBサイトやページを指標に基づいて評価してくれるサービスです。SEOはさまざまなアプローチがありますが、WEBサイト制作者様はチェックツールを使ってWEBサイトの状況を客観的に把握したり、指標に基づいたコーディングをしたいと思われていると思います。
さまざまなSEOツールがありますが、Googleが公式ツール「Lighthouse（ライトハウス）」をリリースしていますので、こちらを使うのがオススメです。ブラウザ「Chrome」の拡張機能で、インストールすれば誰でも無料で使えます。
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja
ブラウザに拡張機能を入れたら、レポートをみたいURLを開いて「Lighthouse（ライトハウス）」のアイコンをクリックするとレポートが自動生成されます。ページがブラウザですべて読み込まれるまでにかかる時間や、モバイルフレンドリーになっているか、ユーザーが使いやすい設定になっているかなど、総合的にチェック可能です。
ただ、日本語化されていないので少し使いづらい印象です。そこで今回はGoogle公式のSEOツール「Lighthouse（ライトハウス）」の”Performance”に関する項目を翻訳しながら、それぞれのチェック内容を解説します。
１．［Performance］Metrics（指標）でチェックできる6項目
WEBサイトのパフォーマンスが評価され、100点満点中の数値が出ます。
速度、データ量に関わる項目が多いです。表示速度というのは実際にアクセスするユーザー様の端末や通信環境にも左右されますが、Googleは1つの指標として参考にするようにと発表しています。
スコアの構成内容はヘルプページ：Lighthouse performance scoringに掲載されていますが、各項目5%〜25%まで重要度が振られています。重要な項目ほど大きく評価されます。
○First Contentful Paint（重要度：15%）
訪問者がWEBページにアクセスしていちばん最初の文字or画像が表示されるまでの秒数です。読み込みが遅いと評価が下がります。
○Speed Index（重要度：15%）
訪問者の目でみて、WEBページが読み込まれるまでにかかる時間です。ページ表示までに待ってもらっている時間、といえます。
○Largest Contentful Paint（重要度：25%）
WEBページ内にある最大のWEBコンテンツ（メインコンテンツ）がユーザーに表示されるまでの時間を計測しています。
○Time to Interactive（重要度：15%）
訪問者がWEBページで何らかの操作、入力ができるようになるまでの時間が計られています。訪問者の体感速度となるので、遅ければ離脱にもつながります。
○Total Blocking Time（重要度：25%）
「First Contentful Paint」と「Time to Interactive」の間に生じる、訪問者が何らかのアクション（マウスクリック、画面タップ、キーボード入力）をしてから処理されるまでの時間を合計したもの。同時タップ防止や連打防止などのために必要な時間ですが、長すぎると好ましくないと評価されます。
○Cumulative Layout Shift（重要度：5%）
ページの視覚的な安定性を評価する項目です。警告なしにテキストが移動したり、ボタンやリンクがずれたりなど目でみて煩わしさがないかどうかがチェックされます。レイアウトの不安定さは訪問者が誤選択するなどデメリットとなる可能性があるため、訪問者を驚かせたり間違った操作をさせたりしないよう工夫が必要です。
２．［Performance］Opportunities
この項目はスコアには直接影響していないようですが、パフォーマンス向上のために改善の余地があるとされる項目のチェックができます。問題のある項目がピックアップされます。問題が少なければ、リストアップされる項目は減ります。
○Eliminate render-blocking resources
ページの表示（レンダリング）を阻害するものがないかどうか。表示に影響しているURLはどこなのかも一覧で確認できます。レンダリングを阻害するようなJavaScriptやCSSが見つかるので改善すべき箇所がわかります。
○Serve images in next-gen formats
より画像圧縮率の高い、高画質なJPEGなどの画像フォーマットを使っているかどうか。同じデータ量でよりきれいな表示ができるので高圧縮率の画像が推奨されています。
○Reduce initial server response time
WEBページの最初の読み込みまでのサーバー応答時間をチェックします。WEBページの読み込みに時間がかかると訪問者に不利益なので短縮するようにと指針が出ています。
○Efficiently encode images
適切なサイズの画像が配信されているかどうか。画像のリサイズや圧縮をして、データ量を適切な量に落とし、読み込み時間を早くすることが求められています。
○Remove unused JavaScript
使用していないJavaScriptをチェックし、削除するようにと要請されています。Googleデベロッパーツールを使って、CSSやJSのコードの中から使われていない量を確認し、修正、改善することとされています。
○Properly size images
適切なサイズの画像が使用されているか。読み込み速度改善のため、画像サイズを節約しなさいと喚起されています。改善策として、画像を複数使う「レスポンシブ画像」の手法を用い、HTMLまたはCSSで使用するバージョンを指定することが提示されています。
○Defer offscreen images
非表示（表示対象外）の画像を遅延読み込み処理させているか。遅延読み込み処理とはサイズのごく小さいダミー画像を先に読み込ませておき、訪問者の画面に表示される段階になってはじめてJavaScriptで実際の画像を表示させる方法のこと。小さなサイズの画像と、JavaScriptプログラムを用意すれば対応できます。
○Preload key requests
WEBページに読み込ませる要素の順番をブラウザに指示する機能のこと。何の要素を優先して表示さえればよいか、Googleから公式なフィードバックが出ていて詳しく読むことができますのでご参考ください。
○Remove unused CSS
使っていないCSSを削除するよう指示が出ます。使っていないCSSがあるスタイルシートが一覧で表示されるので適宜削除してデータを軽くしていきます。
○Enable text compression
合計のダウンロードサイズを抑えるため、JavascriptやCSSの中のテキストも圧縮することが推奨されています。圧縮されていないファイルが一覧になるので、テキスト圧縮処理をします。
２．［Performance］Diagnostics
設定についての診断が受けられる項目です。
不備がある箇所がピックアップされ、問題のない項目は【Passed audits】として表示されます。
それぞれの項目が意味するところは以下のとおりです。
○Ensure text remains visible during webfont load
WEBフォントのローディング中もテキストが表示されるかどうか。WEBフォントは読み込みまでに時間がかかるので、その間もテキストが表示されたままであるように設定することが推奨されています。
○Reduce the impact of third-party code
サードパーティ（第三者）のコードはパフォーマンスに大きな影響を与えるので、WEBページのロードが完了した後でサードパーティのコードをロードするように求められています。この項目ではサードパーティのコードがメインコンテンツの読み込みを何秒ブロックしたかの数値化と、どのコードがサードパーティに当たるかピックアップされます。サードパーティのコードはWEB広告やマーケティングツール、WordPressのプラグインなどが当てはまります。YouTubeの動画共有タグもこれに当たり、非常にWEBサイトの読み込みを阻害するので注意が出ます。
○Does not use passive listeners to improve scrolling performance
スクロール時に詰まったような遅延が発生しないよう、Passive Listenerのオプション指定することが求められています。利用していないと、この項目が上がってきます。
○Serve static assets with an efficient cache policy
フォント、画像、メディアファイル、スクリプト、スタイルシートなどキャッシュ可能なリソースはすべてキャッシュすること。キャッシュされていない要素がすべてピックアップされ表示されます。
○Minimize main-thread work
JavaScriptの解析、実行にかかる時間を最低限に抑えること。JavaScriptの必要なコードだけを読み込んで実行させる、JavaScriptのコードを圧縮する、未使用のコードをは削除することなどを検討するよう求められています。
○Avoid enormous network payloads
訪問者に読み込ませるデータ量を減らすよう指示された項目です。訪問者が3G回線であることも考慮し、通信料の負担をかけないようにと呼びかけられています。大きなサイズの画像などがピックアップされますので圧縮するなどの方法で回避します。
○Reduce JavaScript execution time
JavaScriptの実行時間の短縮が求められています。2秒以上が警告、3.5秒以上は失敗と見なされます。
○Avoid chaining critical requests
重要な要素のリクエストが続かないようにすることと、重要な要素を減らし、バイト数の最適化を図ることが推奨されています。この項目を最適化するために使えるコードは公開されています。
○User Timing marks and measures
JavaScriptコードの実行時間をUser Timing APIを使用して計測した結果が表示されています。何に時間が費やされているのか可視化できます。
○Keep request counts low and transfer sizes small
ページのサイズやどの項目が重くなっているのかがわかりますので、そのサイズデータを指標にし、できるだけリクエストの数やサイズデータを減らすよう工夫してほしいと求められています。
○Largest Contentful Paint element
そのページの中でいちばん大きな要素がどれかチェックされます。
○Avoid large layout shifts
レイアウトのズレ（不安定さ）をなくすために、そのズレが確認された部分がピックアップされます。
○Minify CSS
CSSファイルの圧縮がされているかどうかの確認です。
○Minify JavaScript
JavaScriptが圧縮されているかどうかの確認です。
○Enable text compression
合計のダウンロードサイズを抑えるため、JavascriptやCSSの中のテキストも圧縮することが推奨されています。圧縮されていないファイルが一覧になるので、テキスト圧縮処理をします。
○Preconnect to required origins
サードパーティ（第三者）にリクエストを送るときにpreconnectの機能を利用しているか。例えば、のような形になっているかどうかがチェックされます。
6．まとめ
ここまでがPerformanceのチェック項目に当たる部分です。項目については2020年5月末現在のものです。
この記事を書くにあたり、さまざまなWEBサイトのレポートを「Lighthouse（ライトハウス）」でチェックしましたが、このPerformance項目の評価が低いWEBサイトが非常に多かったです。
Googleがチェックする項目も日々アップデートされているようなので、制作時は最新のレポートをLighthouse（ライトハウス）」で確認し、最大のパフォーマンスが出るようなコーディング、画像やJavaScriptのデータ圧縮等をご実施ください。
ご自身が制作していないページもブラウザに表示されているページについてはすべてレポートが作れますので、WEBサイト制作時の提案書等に盛り込むなどの使い方が考えられます。数値もはっきり出ますから、リニューアル検討材料としても最適だと思います。
引き続き、Performance以外のAccessibility、BestPractice、SEO項目についても解説していきます。