Google公式の監査アドオン、SEO対策はlighthouseを使おう！Performance編

SEO対策はとても大変です。
Webの高速化は知識が必要ですし、HTML構造の最適化も知識が必要です。
古いサイトはjQueryをヘッダーで読み込んでいて、外すとサイトのコンテンツの大部分が動かなくなることもあります。
意図せずディープWebを作ってしまっているサイトもあります。
そんなSEO対策ですが、監査だけならGoogleが提供しているアドオン「lighthouse」を使うとかなり楽になるので、紹介していきます。

Lighthouseとは？

Lighthouseとは・・・Googleによると以下のようなものになります。

ざっくりまとめると、
Googleが想定している「ユーザーにとって使いやすいサイト」かどうか自動で判定してスコアを出してくれるものです。
Google公式のものなので、非常に信ぴょう性の高いスコアになっています。
※ただし、Googleのモバイルファーストの方針のためか、計測対象はモバイルサイトのみとなっています。
レスポンシブデザインであれば問題ないですが、PC・モバイル間でレイアウトや情報を変更しているサイトは気を付けましょう。

使い方は以下の二つ

• Chromeのアドオンとして追加して起き、対象のページにアクセスして「Generate Report」を押す。
• コマンドラインでインストールして来て実行する。

コマンドラインで実行する方法もあり、
というか定期実行するなら絶対コマンドラインの方が良い（自動化が非常に容易）ですが、
今回は使ってみようということでChromeのアドオンを使用します。

まずはこのサイトで使ってみる。

早速アドオンを追加します。
まずはChrome ウェブストアのLighthouseにアクセス。

「Chromeに追加」ボタンを押すと、ブラウザの右上にこのようなアイコンが表示される。

スコアを計測したいサイトに移動して、このアイコンをクリックし、
「Generate Reports」ボタンを押すだけでスコアの計測が始まる。(やや時間がかかるので注意。)

そして、このサイトのTopで実行してみた結果が以下になります。

SEOの項目は気を付けているので、当然満点！(ドヤ顔)
パフォーマンス(ページの速さ)も意識して画像サイズを小さくしたり、テーマも軽量のものを選んでいるので中々ですね・・・！
緑色になりたいですが、それにはまだまだPHPの知識が足りない。
そのほか、Progressive Web App、 Accessibility, Best Practiceという項目がありますが、
Progressive Web App意外は50以上を取れています！

それでは、それぞれどういう項目なのか、何を見てどう改善すれば良いかを解説していきます。

それぞれどういう項目で、どう改善していくのか？

Performance、Progressive Web App、Accessibility、Best Practice、SEOの5項目を順番に解説していきます。

Performance

パフォーマンス、ザックリいうとページの速さです。パフォーマンスでも以下のさらに細分化した項目があります。

First Contentful Paint/First Meaningful Paint/Speed Index

これらは「最初にユーザーに何かしらが表示されるまでの時間」と「最初にユーザーに意味のある情報が表示されるまでの時間」「ファーストビューが表示されるまでの時間」です。
前二つの違いはちょっと難しいのですが、
以下の画像を見つつ説明すると

First Contentful Paintは、「とにかく何でもいいので表示されるまで(それこそ一文字テキストで「あ」とか表示されるまででも良い。)」
First Meaningful Paintは、「意味のある要素が表示されるまで」となっている。
「意味のある要素」の定義は、ページを読んだ限りだとページ最上部に表示される主要コンテンツであったり、
ユーザーにとって便利な情報であったりするようである。

多くのページは、ページレイアウトなどの情報を読み取って組み立てて完成させてから表示させるため、
情報量が多ければ多いほど遅くなります。(レンダリングブロックとか色々用語があるのですが、ややこしくなるのでここでは割愛)

ただ、経験がある人も多いと思いますが、5秒くらい白いページのままだと、
「読み込みが失敗してるのかな」とか「これパケット通信料凄いことになってるんじゃ」とか「遅すぎてイライラする！」
と思ってそのページは諦めて閉じるユーザーが多いのです。
そのため、Googleはここの項目は、「1秒以内に表示するのがベスト」と言っていますし、実際早いページはSEOで上位に来ます。

ではどうすれば早くなるのか？
それには以下の2つのポイントがあります。

一番大事な部分ですがぶっちゃけ一番面倒です・・・。

First CPU Idle / Time to Interactive/ Estimated Input Latency

これらは、ザックリまとめると「ユーザーの操作に関する時間」についての項目です。
前から順に、「ページが最低限の操作可能な状態になる時間」「ユーザーが画面を操作できるようになるまでの時間」「操作に対して、レスポンスにどれくらい時間がかかるか」になります。
前二つの違いが難しいのですが、
First CPU Idleは、最低限インタラクティブ(つまりユーザーの操作を受け付ける)状態なので、
例えば一番上のフォームが操作可能だけど、下の方の要素はまだ読み込み中です。みたいな状態になればOKということ。
(Googleの説明だとほとんどの要素が操作可能となっているので、もしかしたら一つだけだと駄目かもしれない・・・。)
Time to Interactiveは、ユーザーが画面を操作できるようになるまでの時間なので、完全にすべての要素を操作できればOKというイメージで良いかと思います。

つまり、フォーム入力などをなるはやで受け付けるようにした方が良いというイメージ。
ここを早くする方法以下の2点

lighthouseのアドバイスに従う

色々書きましたが、難しいことを考えるより、lighthouseのアドバイスに従うというのが楽で効果があるかもしれません。
例えば今回の自分のサイトの結果には以下のようなアドバイスがあります。

例えば、1. Serve images in next-gen formats.
これは、画像サイズがもうちょい小さくできるぜというアドバイスです。
下矢印をクリックすると、より詳細が出てくるのですが、
要はpngファイルをwebPとかjpeg2000にするといいよ！というようなことが書かれています。
WebPはChromeしか対応してないから！！！やりたくても出来ないんだよ！！！！！
と言いたい所ですが・・・。
画像サイズが大きいのは事実なので、ちょっと圧縮してみたり色々工夫が出来そうです。

そんな感じで、アドバイスに従って色々と修正していくのが地道ではありますが、
比較的知識が必要なく、堅実な方法かもしれません。

まとめ

一旦Performance編ということでまとめてみました。
lighthouseを使えば、SEO対策に自信のあるシニアエンジニアなどがいなくても良質なコンテンツを作ることが出来ます。
（高速化にシニアエンジニアの腕が必要な時もあるでしょうが・・・）
とはいえ、非エンジニアでも出来そうなアドバイスをしてくれているので、
それを読んで、Googleのドキュメントを読んで、少しずつ対応していくだけでも随分良くなるのではないでしょうか。