2021年5月から、Core Web Vitalsの各指標が、Google検索のランキング要因になると言われています。
それに向けて、事前準備が必要ですが、実際に自分のページのどこに問題があるのかを
ツールを使って調査する必要があります。
簡単なもので思いつくのは、Chromeの開発ツールにある「Lighthouse」ですね。
それ以外にも速度を計測ツールが色々とあるのでこちらで紹介したいと思います。
PageSpeed Insights
Googleが提供しているツールで、「Webサイト 速度計測」等で検索すると1つめに出てきます。
Lighthouseと見た目、結果表示等はほぼ同じですが、実行環境としてローカルからのアクセスか
PageSpeed Insightsからのアクセスかで異なる為、結果としては少しことなるかなと思います。
実際に、PageSpeed Insightsのページ自体を、PageSpeed InsightsとLighthouseで実行してみた結果です。
![Webサイトの表示速度を計測するツールについて](https://res.cloudinary.com/dz7ruywxa/images/w_1024,h_578,c_scale/f_auto,q_auto/v1616077291/a31e87c26f43a82fad7845af682b4f0d/a31e87c26f43a82fad7845af682b4f0d.png?_i=AA 1024w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_169,c_scale/f_auto,q_auto/v1616077291/a31e87c26f43a82fad7845af682b4f0d/a31e87c26f43a82fad7845af682b4f0d.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_433,c_scale/f_auto,q_auto/v1616077291/a31e87c26f43a82fad7845af682b4f0d/a31e87c26f43a82fad7845af682b4f0d.png?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/w_1536,h_866,c_scale/f_auto,q_auto/v1616077291/a31e87c26f43a82fad7845af682b4f0d/a31e87c26f43a82fad7845af682b4f0d.png?_i=AA 1536w, https://res.cloudinary.com/dz7ruywxa/images/w_2048,h_1155,c_scale/f_auto,q_auto/v1616077291/a31e87c26f43a82fad7845af682b4f0d/a31e87c26f43a82fad7845af682b4f0d.png?_i=AA 2048w)
![Webサイトの表示速度を計測するツールについて](https://res.cloudinary.com/dz7ruywxa/images/w_1024,h_591,c_scale/f_auto,q_auto/v1616077287/1c3e28667abf3a08f41a8806647f7f2f/1c3e28667abf3a08f41a8806647f7f2f.png?_i=AA 1024w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_173,c_scale/f_auto,q_auto/v1616077287/1c3e28667abf3a08f41a8806647f7f2f/1c3e28667abf3a08f41a8806647f7f2f.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_443,c_scale/f_auto,q_auto/v1616077287/1c3e28667abf3a08f41a8806647f7f2f/1c3e28667abf3a08f41a8806647f7f2f.png?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1616077287/1c3e28667abf3a08f41a8806647f7f2f/1c3e28667abf3a08f41a8806647f7f2f.png?_i=AA 1518w)
100になってないのを見て少し安心しました。
Measure
こちらは、裏では、Lighthouseを利用しているツールになります。
![Webサイトの表示速度を計測するツールについて](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1616077283/87773629fbacdaf1a226cf007f615566/87773629fbacdaf1a226cf007f615566.png?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_177,c_scale/f_auto,q_auto/v1616077283/87773629fbacdaf1a226cf007f615566/87773629fbacdaf1a226cf007f615566.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_452,c_scale/f_auto,q_auto/v1616077283/87773629fbacdaf1a226cf007f615566/87773629fbacdaf1a226cf007f615566.png?_i=AA 768w)
WEBPAGETEST
こちらは、どこから?やどのブラウザでを選択して計測することができます。
![Webサイトの表示速度を計測するツールについて](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1616077278/013bdf268ac15a6d29418a620c322f01/013bdf268ac15a6d29418a620c322f01.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_135,c_scale/f_auto,q_auto/v1616077278/013bdf268ac15a6d29418a620c322f01/013bdf268ac15a6d29418a620c322f01.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_346,c_scale/f_auto,q_auto/v1616077278/013bdf268ac15a6d29418a620c322f01/013bdf268ac15a6d29418a620c322f01.jpg?_i=AA 768w)
以下が、実行結果
![Webサイトの表示速度を計測するツールについて](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1616077274/333cc72ef38fc1d8a867eceb0126e58b/333cc72ef38fc1d8a867eceb0126e58b.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_169,c_scale/f_auto,q_auto/v1616077274/333cc72ef38fc1d8a867eceb0126e58b/333cc72ef38fc1d8a867eceb0126e58b.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_433,c_scale/f_auto,q_auto/v1616077274/333cc72ef38fc1d8a867eceb0126e58b/333cc72ef38fc1d8a867eceb0126e58b.jpg?_i=AA 768w)
速度だけでなく、セキュリティチェックなどもしてくれます。
また、結果のURLが生成されるので、結果を他の人にシェアできるのでチーム開発時等は重宝します。
Pingdom Website Speed Test
黄色とかわいいフォントで記憶に残ります。
![Webサイトの表示速度を計測するツールについて](https://res.cloudinary.com/dz7ruywxa/images/w_1024,h_300,c_scale/f_auto,q_auto/v1616077269/3c70beecb1def25fd2fa6ae785dad9a9/3c70beecb1def25fd2fa6ae785dad9a9.png?_i=AA 1024w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_88,c_scale/f_auto,q_auto/v1616077269/3c70beecb1def25fd2fa6ae785dad9a9/3c70beecb1def25fd2fa6ae785dad9a9.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_225,c_scale/f_auto,q_auto/v1616077269/3c70beecb1def25fd2fa6ae785dad9a9/3c70beecb1def25fd2fa6ae785dad9a9.png?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/w_1536,h_450,c_scale/f_auto,q_auto/v1616077269/3c70beecb1def25fd2fa6ae785dad9a9/3c70beecb1def25fd2fa6ae785dad9a9.png?_i=AA 1536w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1616077269/3c70beecb1def25fd2fa6ae785dad9a9/3c70beecb1def25fd2fa6ae785dad9a9.png?_i=AA 2026w)
こちらも、どこからという指定ができます。選択できる都市は、WEBPAGETESTより少ないです。
結果は、以下のように細かく指摘してくれます。
![Webサイトの表示速度を計測するツールについて](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1616077265/398433c0d112a3fd6782704ada04a44e/398433c0d112a3fd6782704ada04a44e.png?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_189,c_scale/f_auto,q_auto/v1616077265/398433c0d112a3fd6782704ada04a44e/398433c0d112a3fd6782704ada04a44e.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_483,c_scale/f_auto,q_auto/v1616077265/398433c0d112a3fd6782704ada04a44e/398433c0d112a3fd6782704ada04a44e.png?_i=AA 768w)
![Webサイトの表示速度を計測するツールについて](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1616077260/3a58a476d3fe715bb4ff5a18424c6187/3a58a476d3fe715bb4ff5a18424c6187.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_189,c_scale/f_auto,q_auto/v1616077260/3a58a476d3fe715bb4ff5a18424c6187/3a58a476d3fe715bb4ff5a18424c6187.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_485,c_scale/f_auto,q_auto/v1616077260/3a58a476d3fe715bb4ff5a18424c6187/3a58a476d3fe715bb4ff5a18424c6187.jpg?_i=AA 768w)
GTmetrix
こちらは、Vancouver, Canada using Chrome (Desktop)からのテストとなり、ログインすると変更ができるようです。
![Webサイトの表示速度を計測するツールについて](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1616077256/4f67ecb591e78ac93408f65a3f8116f7/4f67ecb591e78ac93408f65a3f8116f7.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_152,c_scale/f_auto,q_auto/v1616077256/4f67ecb591e78ac93408f65a3f8116f7/4f67ecb591e78ac93408f65a3f8116f7.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_390,c_scale/f_auto,q_auto/v1616077256/4f67ecb591e78ac93408f65a3f8116f7/4f67ecb591e78ac93408f65a3f8116f7.jpg?_i=AA 768w)
以下が結果画面です。
![Webサイトの表示速度を計測するツールについて](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1616077251/ba39c3134b9b4eb557c0cbbb9e447282/ba39c3134b9b4eb557c0cbbb9e447282.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_174,c_scale/f_auto,q_auto/v1616077251/ba39c3134b9b4eb557c0cbbb9e447282/ba39c3134b9b4eb557c0cbbb9e447282.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_445,c_scale/f_auto,q_auto/v1616077251/ba39c3134b9b4eb557c0cbbb9e447282/ba39c3134b9b4eb557c0cbbb9e447282.jpg?_i=AA 768w)
履歴が見れるところも特徴かもしれません。
![Webサイトの表示速度を計測するツールについて](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1616077248/50dd43e8cd07955b87603e7dfe654254/50dd43e8cd07955b87603e7dfe654254.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_147,c_scale/f_auto,q_auto/v1616077248/50dd43e8cd07955b87603e7dfe654254/50dd43e8cd07955b87603e7dfe654254.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_376,c_scale/f_auto,q_auto/v1616077248/50dd43e8cd07955b87603e7dfe654254/50dd43e8cd07955b87603e7dfe654254.jpg?_i=AA 768w)
もちろんテストをしていないサイトについては、履歴はでません。定期的に実行するなどしましょう。
![Webサイトの表示速度を計測するツールについて](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1616077245/ff3bc662b9d04ab3b509b656a0b4f592/ff3bc662b9d04ab3b509b656a0b4f592.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_124,c_scale/f_auto,q_auto/v1616077245/ff3bc662b9d04ab3b509b656a0b4f592/ff3bc662b9d04ab3b509b656a0b4f592.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_317,c_scale/f_auto,q_auto/v1616077245/ff3bc662b9d04ab3b509b656a0b4f592/ff3bc662b9d04ab3b509b656a0b4f592.jpg?_i=AA 768w)
まとめ
正直どれ使えばいいかわかりません。
最終的にすべてのツールで、スコアがよくなるのがいいのでしょうが、費用対効果を見てどれか1つに絞って
スコアの向上をはかるのがいいのではないでしょうか。
ちなみに、以下のページでは、Pingdom vs GTmetrix vs WebPagetest どう違うのかを解説しています。
- 一般的なテスト:Pingdom、GTmetrix、WebPagetest
- 履歴テスト:GTmetrixおよびWebPagetest
- 包括的なテスト:GTmetrixおよびWebPageTest
- ロケーションテスト:Pingdom、GTmetrix、WebPageTest
- 高度な使用:GTmetrixおよびWebPagetest
自分にあったツールを使って、高速化、サイト改善をはかっていきましょう。