Google ChromeのLighthouseを使ってWebサイトの評価を確認する

やりたいこと

こんにちは。オザサです。

自社サイトを最適化してユーザーのエクスペリエンスを向上させたい。

ので、まずはどこを改善すればいいかを確認したい。

Lighthouseとは

Chrome DevTools に統合されているオープンソースのサイト分析ツールです。

https://github.com/GoogleChrome/lighthouse

開発者ツールを立ち上げましょう。

最初は「Elements」が表示されていますが、「Lighthouse」タブを選択します。

下記のことを設定します。

Categories：どの指標で評価をするか。
Device: どのデバイスでの評価を受けるか。
Publisher Ads: コンテンツ内の広告に関する評価をするか。こちらはまだβ版の様子。

「Generate report」を押下すると処理が始まりますので、待ちましょう。

レポートが出来上がると、下記のような画面になります。

簡素なサイトなのでもっと評価高いかと思っていたのですが、まだまだでした・・・

SEO は100点なので嬉しい！ですが、コンテンツはほとんどないので効果は薄いです・・・

それぞれの項目をクリックすると詳細な評価を確認することができます。評価は減点方式な感じで行われるのであまり褒めてはいただけません。

試しにReduce the impact of third-party codeをみてみると、
FontAwesome CDN / Google Tag Managerなどの第三者サイトから取得しているものが最適化の余地がありそうです。

Third-party code can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading.

上記のようなアドバイスも表示されていました。
・そもそも不要なものは呼び出さない
・今はhead内で当該リソースを呼び出しているので、例えばbody直下に置くとか
などの対応をすることでこの項目は改善できそうな気がします。

サイト改善には地道な作業が必要そうですが、実直に対応したいと思います。

サイトリニューアルの予定があるので、今のサイトに対しては何もしないとしても！

こちらからは以上です。