ウェブサイトのスピードはその成功にとって重要な要素であると言えるでしょう。 コンテンツ配信ネットワークガイドで説明したように、読み込みの速いウェブサイトは、SEOランキングの上昇、コンバージョン率の上昇、バウンス率の低下、サイトでの訪問者の滞在時間の延長、全体的なユーザー体験の向上、エンゲージメントなどの恩恵を受けることができます。 そのため、最適なパフォーマンスを実現するために、無料で利用できる多くのウェブサイトスピードテストツールを活用することが重要です。 Google は、あなたのサイトが 1 秒未満で読み込まれることを望んでいます。
- ウェブサイトの速度テストは、何を分析するのに役立ちますか？
- Website speed concepts
- レンダー ブロックの JavaScript と CSS
- JavaScript
- CSS
- Minification of resources
- List of Web Speed Test Tools
- Google PageSpeed Insights
- Pingdom Speed Test
- GTmetrix
- WebPageTest
- Varvy PageSpeed Optimization
- Uptrends
- dotcom-monitor
- PageScoring
- Yellow Lab Tools
- Google Chrome DevTools
- Sucuri Load Time Tester
- Pagelocity
- YSlow
- PerfTool
- Website speed test with Chrome extensions
- Mobile website speed test
- Summary
ウェブサイトの速度テストは、何を分析するのに役立ちますか？
以下は、Web サイトの速度テスト ツールが使用される一般的な方法のほんの一部です。
- Pinpointing scripts, fonts, and plugins causing load time issues (HTML, JavaScript, CSS)
- Checking minification of your scripts
- Finding large images resulting in bottlenecks
- Determining if you have render-blocking JavaScript or CSS
- Testing Time to First Byte (TTFB)
- Analyzing total load times, page sizes, and # of requests
- Checking performance from different geographical locations
- Checking rendering speed in different browsers
- Analyzing HTTP Headers
- Measuring performance of your content delivery network
- Verifying that assets are loading correctly from your CDN
Website speed concepts
Before running a website speed test it is important to understand a few concepts behind how these tools work so that you can better analyze the data and then optimize your site accordingly.
Time to first byte (TTFB)
Time to first byte (TTFB) は、Web サーバーの応答性を測定するものです。 基本的には、ブラウザがサーバーに情報を要求してから受信を開始するまでにかかる時間です。
最初のバイトまでの時間と最後のバイトまでの時間の詳細については、こちらを参照してください。
レンダー ブロックの JavaScript と CSS
レンダー ブロックとは、ページをできるだけ速く読み込まないようにしている JavaScript と CSS を指します。
JavaScript
Googleは、Webページのコンテンツ読み込みを妨害する JavaScript を削除または遅延することを推奨しています。 Here is a great tutorial on how to properly defer JavaScript loading.
Example of deferring JavaScript by placing it just before your </body> tag.
function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element);}if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false);else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload);else window.onload = downloadJSAtOnload;CSS
You will then also want to optimize your CSS delivery to keep it from causing delays on page load. Here are a few ways to fix this:
- Properly call your CSS files
- Lessen the amount of CSS files
- Use less CSS overall
Here is a great article on render-blocking CSS by Ilya Grigorik, a web performance engineer at Google.
CSS is a render blocking resource, get it down to the client as soon and as quickly as possible to optimize the time to first render!
Minification of resources
Minification of resources means removing unnecessary characters from your HTML, JavaScript, and CSS that are not required to load, such as:
- 空白文字
- 改行文字
- ブロック区切り
これにより、サーバーから要求されるコードの量が減るため、読み込み時間が短縮されます。 Dan’s CSS and JavaScript Minify のようなツールを使用して、不要な文字をすべて削除することができます。
HTTPリクエスト
ブラウザがサーバーからデータを取得するときは、HTTP (Hypertext Transfer Protocol) を使用して行われます。 これは、クライアントとホスト間のリクエスト/レスポンスです。 一般に、Web ページがより多くの HTTP リクエストを行うほど、読み込みは遅くなります。
要求の数を減らすには、次のような多くの方法があります。
- CSS と JavaScript のファイルを結合する
- JavaScript をインライン化する (非常に小さい場合のみ)
- CSS スプライトを使用する
- 外部からの要求を大量に行う第三者のプラグインなどの資産を減らす
List of Web Speed Test Tools
さて、上記の Web パフォーマンス概念の基本理解ができたので、次は、ウェブサイトの速度をテストする以下の 15 の無料のツールをチェックしてみてください。
これらのツールを実行するとき、初回の DNS ルックアップは通常より遅くなることを認識することも重要です。
KeyCDN Web サイト速度テスト
KeyCDN は、Web サイトのパフォーマンスに関する詳細な洞察を得るために使用できる、高速で軽量の Web サイト速度テスト ツールを構築しました。 もし、世界中の中から選択する14の場所を提供し、あなたのテスト結果をプライベートまたはパブリックにするオプションがあります。 テストには、ウォーターフォールの内訳と、下部にある視覚的なウェブサイトのプレビューが含まれています。
また、PageSpeed以外のツールでは唯一、レスポンシブでモバイルデバイスに最適なツールの1つです。
Google PageSpeed Insights
Google PageSpeed Insightsは1 – 100スケールでのウェブサイトのグレード、ウェブサイトのスピード-テスト-ツールであり、あなたのウェブサイト。 数値が高いほど、あなたのサイトがより良く最適化されています。 85以上のものは、あなたのウェブサイトがうまく実行されていることを示します。 PageSpeedは、あなたのサイトのデスクトップとモバイルの両方のバージョンのレポートを提供します。
PageSpeed Insights は、ページがそのパフォーマンスをどのように改善できるかを測定します:
- Time to above-the-fold load: ユーザーが新しいページを要求した瞬間から、ブラウザによって Above-the-fold コンテンツがレンダリングされるまでの経過時間。
モバイル レポートには、サイトのスコアリングに含まれる「ユーザー エクスペリエンス」という追加カテゴリがあります。
The PageSpeed Insights チームは最近 Google と共同で新しいウェブサイト速度テストツールを開始しましたが、これはチェックアウトしたくなるようなツールです。 そのため、このような弊順の嶄で、弊順の嶄で、弊順の嶄で、弊順の嶄で、弊順の嶄で、弊順の嶄で、弊順の?
Pingdom Speed Test
Pingdom はおそらくより有名なウェブサイトの速度テストツールの 1 つです。
ページ分析では、サイズ分析、ドメインごとのサイズ（CDN 資産サイズとドメインを簡単に比較できます）、ドメインごとのリクエスト数、どのタイプのコンテンツに最もリクエストが多いかなどの追加情報とともに、素晴らしい概要を提供します。
Pingdomのスピードテストツールでは、以下の4つの主要な場所からウェブサイトの速度をテストすることもできます。
- 米国テキサス州ダラス
- オーストラリアメルボルン
- 米国カリフォルニア州サンノゼ
- スウェーデンストックホルム
Pingdom スピードテストの結果では、Google PagesSpeed Insightsに似たパフォーマンスインサイトを提供しており、どこで改善できるかの概要を知ることができます。 また、コンテンツタイプ別のページサイズ、ドメイン別のページサイズ、コンテンツタイプ別のリクエスト、ドメイン別のリクエストの内訳を確認できます。
GTmetrix
GTmetrix では Page Speed と YSlow 両方の測定基準を詳細にチェックし、F から A のグレードであなたのサイトに割り当てることができるのだそうです。
無料登録で、7ヶ所からテストができます。 また、ブラウザもChromeとFirefoxから選ぶことができます。 また、さまざまな接続タイプ (ケーブルとダイヤルアップなど) に対して Web サイトのパフォーマンスをテストおよび比較し、ページ読み込みにどのように影響するかを確認することができます。 その他の高度な機能としては、ボトルネックが発生している場所を分析するためのビデオ再生や、Adblock plusを実行する機能があります。 広告を無効にすることで、サイトの読み込みにどのような影響を与えるかを確認できます。 上記のようなオプションが追加されるので、無料アカウントを作成することをお勧めします。
WebPageTest
WebPageTest は前に述べたいくつかのツールに非常に似ていますが、40 以上の場所から選択でき 25 以上のブラウザ（モバイルも含みます） を備えています。 FTTB、圧縮、キャッシュ、CDNの効果的な使用など、さまざまなパフォーマンステストに基づいて、FからAまでのグレードを割り当ててくれます。 レポートは、要約、詳細、パフォーマンス レビュー、コンテンツの内訳、およびスクリーンショットを含む 6 つのセクションに分かれています。
また、このテストでは独自のアプローチも提供しています。
また、このテストはユニークなアプローチを提供します。 これは、前述のように、初回の DNS ルックアップの遅延である可能性があるものを診断するのに役立ちます。 WebPageTest には、ビデオ キャプチャ、JavaScript の無効化、SSL 証明書の無視、およびユーザー エージェント文字列の偽装など、より高度な機能もあります。
Varvy PageSpeed Optimization
Varvy ページスピード最適化は Patrick Sexton によって開発および保守されているツールであり、また GetListed.Web を作成した人物でもあります。
レポートは、リソース図、CSS の配信、JavaScript の使用、見つかったページ速度の問題、および使用したサービスなど、5 つのセクションに分かれています。
パトリックは、サイトをさらに最適化する方法について、重要なレンダー パス、ブラウザ キャッシュの活用、JavaScript の読み込み遅延などに関するチュートリアルを含む、素晴らしい仕事をしました。
Uptrends
Uptrends はかなり基本的ですが、スピード テストでは 35 以上の場所から選択することを提供しています。 そのため、このようなことが起こるのです。 ドメイングループは、異なるソースにリソースを分類するように、ユニークな視点を提供しています。 1stパーティ、統計、CDN、ソーシャル、広告、1stパーティ全体、3rdパーティ全体に分類されます。
dotcom-monitor
dotcom-monitor には 23 種類の場所と 7 つのブラウザでウェブサイトのスピードテストを実行することができます。 そのユニークな特徴は、すべての地理的なテストを同時に実行することができるということです。 これは、あなたが個別に場所ごとにそれらを実行する必要があるすべての他のツールとして、あなたに多くの時間を節約することができます。
そのレポートは、要約、パフォーマンス、ウォーターフォール図（内訳）、ホスト、およびエラーを含む 5 つの異なるセクションに分割されています。
PageScoring
PageScoring is all about offering a simple and easy to understand performance report with a minimalist design. They show your overall load time and then the following pieces of information:
- Domain lookups
- Connection Time
- Redirection Time
- Page Size
- Download Time
You can then see your assets and how long it took for each to load. If you are looking for a quick and easy website speed test tool, this works pretty good.
Yellow Lab Tools
Yellow Lab Tools is a newer web performance and frontend quality testing tool developed by Gaël Métais. This tool gives you a lot of information and some unique features not seen in other tools such as a view of when JavaScript interactions with the DOM during the loading of the page and other code validation issues. Get a global score based on the following qualifiers.
- Page weight
- Requests
- DOM
- Bad JavaScript
- Bad CSS
- Server Config
The JavaScript timeline shows you exactly how the DOM interacts during the loading of the page.
Google Chrome DevTools
And of course we can’t forget Google Chrome DevTools. It is a very easy to use tool (with advanced features) and you can quickly launch it at anytime in your Chrome broswer using the following shortcut keys.
- Windows:
F12or alsoCtrl + Shift + I - Mac:
Cmd + Opt + I
最新の開発者ツールの更新で、ウォーターフォール タイムラインに集約された詳細パネルが追加されました。 これにより、最も時間がかかっているものをより簡単に確認でき、ドメイン、サブドメインなどで分解することができます。 これを実行するには、「タイムライン」パネルをクリックし、Ctrl + RCmd + R) を押してページを更新してください。 その後、「概要」パネルと「集計」詳細パネルにクリックできます。
DOM をブロックするものとそれを修正する方法についての素晴らしい投稿もあります。 開発者ツールでは、DOMContentLoaded 時間と総ロード時間を正確に確認できます。 これを実行するには、「ネットワーク」パネルをクリックし、「概要を表示」オプションをクリックし、Ctrl + RCmd + R) を押してページを更新してください。 DOMContentLoadedは青い線、総ロード時間は赤い線が表示されます。 通常、青い線の左側にあるもの、または青い線に触れているものはすべて、DOM をブロックしている資産、またはレンダー ブロック リソースとも呼ばれるものです。
Sucuri Load Time Tester
Sucuri Load Time Tester では世界中からサイトのパフォーマンスを迅速かつ容易にテストすることが可能です。 このテストでは、サイトに接続し、1つのページが完全にロードされるまでにかかる時間を測定します。 注目すべき非常に重要な値は、「time to first byte」です。これは、ページの処理を開始するためにコンテンツがブラウザに送り返されるまでにかかった時間を示しています。
Pagelocity
Pagelocity toolはウェブサイトの速度テストに関して別の独特の方法を提案します。 このツールは、ソーシャル、SEO、リソース、コードなどの要素からなる、100点満点の合計スコアを提供します。 このツールはまた、あなたの競争相手を追跡する機能を提供しています。 無料アカウントにサインアップすると、追加機能の恩恵を受けることができます。
リソースビューも非常に興味深いもので、どの資産がページの総重量を構成しているかをすぐに確認することができます。 テストでは、画像が外部スクリプトの 4 倍以上であることがおわかりいただけると思います。
YSlow
YSlow はオープン ソースのプロジェクトおよびツールで、ウェブ ページを分析し、ハイパフォーマンス ウェブサイトに関する Yahoo! のルールに基づいて遅い理由を突き止めるのに役立つものです。 現在、WebPageTestプロジェクトにも関わっているMarcel Duranによってメンテナンスされています。
- YSlow は DOM をクロールして、すべてのコンポーネント (画像、スクリプトなど) を見つけます。)
- YSlow はデータを取り、各ルールに対して評点を生成し、その結果、総合評点が得られます。
YSlow には、CDN の使用や DNS 検索の低減など、ウェブサイトを評点するために実行する 23 の異なるルールがあります。 GTmetrixでは、YSlowのスコアをチェックするためのオンライン分析ツールを提供しています。
PerfTool
PerfTool は GitHub でホストされているオープンソースのクライアントサイド パフォーマンス ツールのプロジェクトです。 Webサイトに関するさまざまな情報を収集し、レポートページでわかりやすく表示します。 PageSpeed Insights、devperf、W3CJSの3つのデータソースを1つにまとめています。
PerfToolの大きな利点は、Google PageSpeed Insightsのレポートに対して、同時に複数のページのテストを実行できることです。 その後、以前のテストからウェブサイトのパフォーマンス結果を比較し、スコアのしきい値を設定し、あなたのテストについての詳細なレポートを取得します。 This can actually save you a lot of time if you are benchmarking your entire site’s web performance, as you don’t have to test your pages one by one.
Website speed test with Chrome extensions
There are quite a few free Chrome extensions in which you can analyze website speed. Here are a couple of them. You can easily launch them from right within your browser.
- Page Load Time
- app.telemetry Page Speed Monitor
- Performance-Analyser
- LoadFocus Load Testing
Mobile website speed test
If you are needing to run a mobile website speed test a couple of the tools we mentioned above do include this:
- WebPageTest
- GTmetrix
- dotcom-monitor
Another way to simulate a speed test on a mobile device is to use Chrome developer tools in device mode. デバイス モードにするには、Chrome DevTools の小さな電話アイコンをクリックするか、Ctrl + Shift + MCmd + Shift + M) を押すことができます。 すると、エミュレートしたいデバイスや向き、解像度まで選択できるようになります。
次に、「ネットワーク」タブとウォーターフォール分解を使用して、速度テストを実行できます。
Summary
見てわかるように、ウェブサイト速度テスト ツールには多くのものがあり、選択可能になっています。 それらの各々は、上記で強調したように、それぞれ独自の機能を持っています。
一度、ボトルネックがどこにあるのかがわかれば、それを修正し始めることができます。 上記のツールのほとんどすべては、推奨事項を記載しています。 Some of the most common fixes include:
- Compressing your images and files
- Picking a fast web host
- Optimizing your code and scripts
- Using a content delivery network
- Caching
- Reducing the number of HTTP requests