Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする
今回はChromeの拡張機能であるLighthouseというツールを使って、ウェブサイトのパフォーマンスをトータルで確認していきたいと思います。これまでにもウェブサイトのパフォーマンスについてはいろんなツールを使ってみていきましたが、今回登場するLighthouseはGoogleの公式ということもあり、ウェブサイトの設計指針やSEOなどの観点からも、重要な指標になるのではないでしょうか。
LighthouseはChromeの拡張機能ですので、アドオンで追加するか、デベロッパーツールにも標準で搭載されているのですぐに利用することができます。
アドオンから利用する場合は、アドオンを追加し有効化されている状態で、ウィンドウ右上にある灯台のマークをクリックします。そうすると、Lighthouseのダイアログが表示されるので「Generate report」をクリックします。
間も無くWebページのデバッグが始まります。デバッグが終わると解析結果が表示されますので、しばらく待機しましょう。
ちなみにデベロッパーツールからLighthouseを利用する場合ですが、デベロッパーツールの「Audits」タブを選択し、中央に表示されている「Perform an audit...」のボタンをクリックします。
同じく、Webページの解析が始まりますので、結果が出るまでしばらく待ちましょう。
少し時間が経過するとLighthouseの解析結果がレポートとして表示されます。上部に大きく5つのスコアが表示されています。右から「Performance」「Progressive Web App」「Accessibility」「Best Practice」「SEO」となっています。満点が100点となっており、点数のレベルで緑から黄色、最低は赤と色分けで表示されています。
評価に対しての具体的なチェックポイントと対策についてはこのように表示されています。（英語で書かれているので翻訳が必要ですね、、）
この数値が高ければ、次世代のWEBサイトの仕様であり、アプリに近いものであると言えますね。ただし、専門的な知識が必要になってくるのでこのスコアを上げるのはハードルが高いでしょう。
この数値が高いということは、それだけユーザーの視点に合わせた構成で、クローラーへの対策も行われているということになります。
この項目は多岐に渡るのですが、ひとつずつ確実にクリアしていきたいですね。
このスコアを上げることが内部SEO対策の効果的な方法であると言えますね。
今回は当サイトをチェックしてみましたが、まだまだ改善の余地はありそうですね。。とりあえず表示されていればウェブサイトとしての機能を果たしているかもしれませんが、将来のことを考えると、こういった細かい部分での完成度を高めていくことが、サイトの価値を上げる手段でもあるのではないでしょうか。 また後日、別記事にてこれらのスコアを上げるための施策をまとめていきたいと思います。
間も無くWebページのデバッグが始まります。デバッグが終わると解析結果が表示されますので、しばらく待機しましょう。
ちなみにデベロッパーツールからLighthouseを利用する場合ですが、デベロッパーツールの「Audits」タブを選択し、中央に表示されている「Perform an audit...」のボタンをクリックします。
同じく、Webページの解析が始まりますので、結果が出るまでしばらく待ちましょう。
少し時間が経過するとLighthouseの解析結果がレポートとして表示されます。上部に大きく5つのスコアが表示されています。右から「Performance」「Progressive Web App」「Accessibility」「Best Practice」「SEO」となっています。満点が100点となっており、点数のレベルで緑から黄色、最低は赤と色分けで表示されています。
WEBサイトのスピードを示す「Performance」
まずは、WEBサイト高速化のためには重要な指標となる「Performance」の項目です。ここでは表示速度の改善に向けたポイントがチェックされます。この数字がいいということはそれだけWEBサイトが高速であるということが言えます。
評価に対しての具体的なチェックポイントと対策についてはこのように表示されています。（英語で書かれているので翻訳が必要ですね、、）
ウェブアプリの仕組みがあるかを見る「Progressive Web App」
これからのWEBサイトは、ブラウザの進化とともに、より機能が充実してくると予想されています。その中で推奨されているのが「Progressive Web App」です。つまり、WEBサイトにどれだけアプリに近い要素や仕組みが組み込まれているかというところをチェックします。
この数値が高ければ、次世代のWEBサイトの仕様であり、アプリに近いものであると言えますね。ただし、専門的な知識が必要になってくるのでこのスコアを上げるのはハードルが高いでしょう。
ユーザーに親切な設計であるかを見る「Accessibility」
次は、デザイン的な観点も含まれるのですが、WEBサイトの情報やコンテンツがいかにユーザーへ伝わりやすいかをチェックされます。例えばコンテンツ内の要素のカラーコントラストなどが挙げられます。ですので、UIに関する知識が必要になってきます。また、ユーザーだけでなくクローラーに対しても情報が伝わりやすいかどうかもチェックの対象となります。タグの記述も厳密にする必要があります。
この数値が高いということは、それだけユーザーの視点に合わせた構成で、クローラーへの対策も行われているということになります。
グーグルが推奨している指針をまとめた「Best Practice」
この項目ではグーグルが推奨しているWEBサイトの設計指針をまとめた内容になります。たとえばHTTP/2に対応しているかどうかや、不正なスクリプトを使用しないという基本的なところから、コンソールにエラーが無いなどもみられます。
この項目は多岐に渡るのですが、ひとつずつ確実にクリアしていきたいですね。
内部SEO対策のチェック項目が並ぶ「SEO」
最後の項目では、SEOの観点から正しくウェブサイトが設計されているかをチェックしていきます。メタタグを揃えるところから、インデックスされる仕組みがあるか、また、モバイルフレンドリーであるかどうかも重要なポイントになります。
このスコアを上げることが内部SEO対策の効果的な方法であると言えますね。
今回は当サイトをチェックしてみましたが、まだまだ改善の余地はありそうですね。。とりあえず表示されていればウェブサイトとしての機能を果たしているかもしれませんが、将来のことを考えると、こういった細かい部分での完成度を高めていくことが、サイトの価値を上げる手段でもあるのではないでしょうか。 また後日、別記事にてこれらのスコアを上げるための施策をまとめていきたいと思います。
