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

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

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

Lighthouseとは?

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

オープンソースの自動化されたツールでウェブアプリの品質向上に役立ちます。 このツールは Chrome 拡張機能として実行するか、コマンドラインから実行できます。 Lighthouse に監査したい URL を指定して実行すると、ページに対する集中的なテストを実行してパフォーマンスに関するレポートを生成できます。 今後は弱点を検出するテストを利用して、アプリの品質改善の指針を得られるようになります。

引用元:
Tools For Web Developers

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

使い方は以下の二つ

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

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

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

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

アドオン
矢印のボタンをクリックするだけで追加完了。

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

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

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

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

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

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

Performance

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

First Contentful Paint/First Meaningful Paint/Speed Index

これらは「最初にユーザーに何かしらが表示されるまでの時間」と「最初にユーザーに意味のある情報が表示されるまでの時間」「ファーストビューが表示されるまでの時間」です。
前二つの違いはちょっと難しいのですが、
以下の画像を見つつ説明すると
Googleの説明ページの画像
First Contentful Paintは、「とにかく何でもいいので表示されるまで(それこそ一文字テキストで「あ」とか表示されるまででも良い。)」
First Meaningful Paintは、「意味のある要素が表示されるまで」となっている。
「意味のある要素」の定義は、ページを読んだ限りだとページ最上部に表示される主要コンテンツであったり、
ユーザーにとって便利な情報であったりするようである。

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

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

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

サーバー側のレスポンスを高速にする
多くのページはサーバー側から何か情報を受け取って表示します。
なので、この受け取る処理を早くしてあげるというわけです。
MySQLを使っているならクエリチューニングや、Redis等の爆速KVSを使えないかの検討
何らかの複雑なアルゴリズムを使っているなら高速化出来ないか専門化に相談してみても良いかもしれません。
非常に手間と知識が必要ですが、キャッシュサーバーとかを使っても良いかも。

ファーストビューだけ先に読み込む。
ユーザーが最初に目を通す部分だけ表示してしまって後ろの方は非同期で読み込んでいく方式です。
これならサーバー側も最低限の情報だけ返せば良く、
最初の読み込みも最低限だけでいいのでかなり早くなります。
ただ、これもある程度知識が必要になってきます。

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

First CPU Idle / Time to Interactive/ Estimated Input Latency

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

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

要らない機能は削る
割とよくあるのが、jQueryの実装や、ライブラリを沢山いれて色々出来るけど色々ありすぎて全部は使い切れない!というサイト
使われていない機能が読み込みに時間がかかっていたら勿体ない!
ということで、Google Analyticsなどを活用して、使われていない機能は削ってシンプルなページにしてしまいましょう。
一番楽でしかも効果は抜群です。
jQueryを使わない・便利だからってライブラリに依存しない
jQueryは便利です。でも遅いです。なるべくネイティブjsで書くか、cssで出来ることはcssでやるか。
ちなみにライブラリはなるべく使わない方が良いです。
lazysizes等優秀なものならいいのですが、自分で書いた方が良いぞとなるようなライブラリも多いです。
しかもライブラリって読み込みが必要なのでまたそこで読み込みという処理が発生して遅くなります。
自分で書いてminifyして一つのファイルに全部ぶち込むビルド環境を作るのが理想です。

lighthouseのアドバイスに従う

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

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

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

まとめ

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