速さは正義！サイト速度を知るための計測ツールたち
こんにちは。
サイト速度改善大好きなエンジニアです！
この記事では、僕が普段使用しているサイト速度計測ツールを紹介します！😆
7月に「Google Speed Update」も行われるほど、SEOにおいて速さが重要なものとなっています。何はともあれ己を知ることから。
どれも使うのは簡単なので試してみてください！
PageSpeed Insights
Google製のサイト速度計測ツールです。
サイトURLを入れるだけの簡単仕様です。
他のサイトよりも若干緩めの評価な気がしますが、Google製ということで有力なデータとなります。
得られるデータは主に↓
- サイト速度におけるモバイルとPCの評価
- 最適化についての提案
「最適化についての提案」はあまり詳しくありませんが、ここで提案される点をひとつひとつ修正していくことは良いことです。
また、 Chrome ユーザー エクスペリエンス レポート にデータが溜まっていくと、サイト全体の速度感も教えてくれるようになります。
モバイルサイトの読み込み速度とパフォーマンスをテストする - Google
モバイルサイトの読み込み速度とパフォーマンスをテストする - Google
こちらもGoogle製です。
特にモバイルでのサイト速度計測に注力している様です。
しかし1つ目の「PageSpeed Insights」と比べると、UIが良いくらいしか違いが思いつきません。
「無料レポートを取得する」をクリックすると、メールが送られてきますがこれも「PageSpeed Insights」で提供される「最適化についての提案」とほとんど同じです。
GTmetrix
GTmetrix | Website Speed and Performance Optimization
いよいよ本格的なツールとなります。
GTmetrixは最近知って、まだ積極利用はしていませんが、どうやら（ログインすれば）サイト速度のモニタリングとかもしてくれるらしいです。
ログインせずとも、今までのツールと同じくURLを入力するだけで計測が可能です。
一部有料なところがありますが、今までの2つとは比べ物にならないほど情報量が多いです。
UI/情報整理も良くされているため、マーケターやフロントエンドエンジニアなどでもとっつきやすいかもしれません。
WebPageTest
WebPagetest - Website Performance and Optimization Test
僕が一番好きなツールです。
情報量がとても多く、エンジニアであればこれだけ使えばある程度の問題は洗い出せます。
使い方はサイトのURLを入力し、テストをする場所を選択するだけです。
得られる情報は多岐に渡ります。
ざっくりとしたサイト速度評価
ロードやレンダリングにかかる時間がわかります。
Waterfall
各リソースのダウンロードにどれだけ時間がかかるか、容量が大きいかを教えてくれます。
画像・・・画像がでかい・・・
Waterfallは上部の「Detail」からさらに詳細が見れます。
情報量が多すぎですが、「Start Render」までに何が読み込まれて、何が行われているのかを把握するとボトルネックが見えてきます。
高速化のためのチェック表
「Performance Review」から、あなたのサイトの各リソースでどれだけ高速化の最適化が出来ているかを表にしてくれます。
僕のサイトはCDNを使っていないので、❌が付いていたり、HTMLのgzip配信が出来ていないと言われていますね😅
まとめ
サイト速度を測る4つのツールを紹介しました。
SEOやユーザー体験においてサイト速度はとても重要な要素です。
ぜひ皆さんも、これらのツールを使ってまずは己のサイトを見つめてみてください。
現状を知ったら改善ですが、基本は以下のようになります。
- サイズを小さくする
- レスポンスを速くする
- 読み込みを遅らせる
これはまた記事に書こうと思います！😆
この記事内のスクショは全て僕が運営しているwebサービスです。
「自分のサイトも速度改善したい！」とお考えの方はぜひご連絡くださいね！
