恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

Webサイトの速度を計測・採点する方法(計測ツール)

投稿日:

今回は、Webサイトの速度を計測する方法をいくつか紹介します。

ページの速度を高速化するには、計測と検証を繰り返していく必要があります。

計測しなくては、サイトを正しく最適化することはできません。

GTmetrix

GTmetrix | Website Speed and Performance Optimization

こちらは無料で利用できる計測ツールです。。

サイトの速度を計測し採点、ボトルネックとなっている箇所を見つけることができます。

お、高得点です。

このように、A~Fで評価されます。

Yslowが90%になっているのは、CDNを利用していないのが原因みたいです…。

↓↓これだけたくさんの項目でチェックしてくれます。これでもまだ一部です。

英語なので分かりづらいですが、ググれば大体の改善方法が見つかります。

PageSpeed insights

PageSpeed Insights

Googleが提供しているツールです。

実際の速度を計測するというより、改善点はどこかを洗い出すために使用します。

例えば、サイズが大きい画像を使用している・CSSやJavaScriptを圧縮していないなど、サイトを重くする原因があると減点されていく減点方式になっています。

採点だけでなく改善方法も提案してくれるのが特徴です。

↓↓高得点を取る方法は、こちらの記事で解説しています。

【WordPress高速化】PageSpeed Insightsで99点(実質満点)を取るための施策 | Tech dig
※プラグインを入れたため、現在は99点ではありませんが…。

今回モバイルが83点、PCが96点でした。

このツールの凄い点は、最適化済みのデータが自動的に生成されて、それをダウンロードできる点です。

計測結果の一番下の方にリンクが表示されます。

素晴らしいですね。

実は、Google Analyticsから全ページの採点結果をまとめて見ることができます。

「行動」→「サイトの速度」→「速度についての提案」に行くと見れます。

一つ一つページを採点する必要がないので、めちゃくちゃ便利な機能です。

Developer Tools(Google Chrome)

Google ChromeのDeveloper Toolsを使えば、かなり細かい所まで計測や分析をすることができます。

右クリック→検証」か「Ctrl + Shift + C」(MacはControl + Option + C)で起動します。

起動したら、「Performance」をクリックしてください。

お次に「Ctrl + Shift + E」を押して計測スタートです。

これを見ると、Webサイトを表示するまでに「Loading」「Scripting」「Rendering」「Painting」という大きく4つの処理が行われているのが分かります。

処理のどの部分が表示を遅くしているのかを調べることができます。

もう一つ便利なのが「Network」です。

そのままだとブラウザのキャッシュが原因で画像などのダウンロード時間が計測できない場合があるので、「Disable cache」にチェックを入れて下さい。

そして「Ctrl + R」でリロードしてください。

これで、画像やCSS、JavaScriptなどのファイルのダウンロードにどれくらい時間がかかっているか計測することができます。

ダウンロードに時間がかかっているファイルがあれば、圧縮するなどして最適化してください。

高速化のコツ

基本的に、PageSpeed insightsで計測をして、減点された点を改善していきます。

これだけでかなり改善できます。

PageSpeed insightsで高得点が出るようになったら、次はDeveloper Toolsを使って細かい点を改善していきます。

例えば、JavaScriptのコードを改善して、処理速度を高めるなどです。JavaScriptのコードの良しあしは、PageSpeed insightsで計測することができません。

Developer Toolsなら、JavaScriptで実行されている関数の処理速度まで計測することができます。

細かいところまで気にしすぎない

サイトの高速化は奥が深く、細かい所まで気にしてもキリがありません。

例えば、0.01秒くらいしか変化がない施策のために、サイトの更新が面倒になるようでは意味がありません。

メンテナンス性と速度を天秤にかけながら、進めていくようにしましょう。

まとめ

サイト高速化を始めるには、まず計測することが重要です。

まずは、これらのツールを使いこなせるようになって下さい。

GoogleはSEOにおいて、サイトの表示速度を重要視するようになっています。

サイトを検索上位に表示させるためにも、サイトの高速化は必須となっています。

Related Entries

この記事を書いた人

TAC

TAC

Webデザイナー、フロントエンドエンジニア。 Webデザイン、HTML/CSS、JavaScript、PHP、SEOが専門です。