Pingdomスピードテストツール–Pingdomスコアを改善する方法

読み込みの速いウェブサイトは、読み込みの遅いウェブサイトに比べて常にトラフィックが多く、ランキングとパフォーマンスに影響します。 この記事では、サイト内のパフォーマンスの問題を理解するのに役立つPingdom SpeedTestツールについて説明します。 目標は、サイトがどれだけ高速で、どのように高速化できるかを理解することです。

多くの場合、ユーザーはPingdom Speed Testツールのデータを誤って解釈し、Webサイトの速度を悪化させます。 すべてのツールは100％正確ではないため、ガイド付きの使用として常に使用することを忘れないでください。

Pingdom Speed Test Toolとは何ですか？また、それは何を提供しますか？

Pingdomは、人気のある無料のWeb速度テストツールであり、Webサイト、アプリケーション、およびサーバーの監視ソリューションです。 稼働時間だけでなく、読み込みパフォーマンスも監視するため、訪問者がサイトをどのように体験しているかを確認できます。 Pingdomは、稼働時間の監視、ページ速度の監視、トランザクションの監視、サーバーの監視、訪問者の洞察（RUM）などのサービスを提供します。

なぜそんなに人気があるのですか？ まあ、それはおそらくウェブサイトの速度とページのパフォーマンスを監視するための最も簡単なツールです。 すべてのユーザーがパフォーマンスの専門家になることはできないため、平均的なWordPressユーザーに適しています。

Pingdomでテストを実行する方法を見てみましょう。 Pingdom Speed Testツールの使用は大したことではありません。Pingdomサイトにアクセスし、 URLを入力して、訪問者の場所に応じて場所を選択するだけです。 次に、[テストの開始]ボタンをクリックします。

Pingdom Speed Testツールを使用すると、世界中の7つの異なるテスト場所（5大陸）でWebサイトをテストできます。

• アジア–日本–東京
• ヨーロッパ–ドイツ–フランクフルト
• ヨーロッパ–イギリス–ロンドン
• 北米–米国–ワシントンDC
• 北米–米国–サンフランシスコ
• 太平洋–オーストラリア–シドニー
• 南アメリカ–ブラジル–サンパウロ

では、どのPingdom Webサイトの速度テストの場所がテストに最適でしょうか？ それはあなたのサイトの訪問者に依存します。 必ず訪問者に近い場所を選択してください。 サイトのオーディエンスがヨーロッパに拠点を置いている場合は、 （ヨーロッパ–ドイツ–フランクフルト）または（ヨーロッパ–イギリス–ロンドン）の2つのオプションから選択できます。 サイトに世界中の訪問者がいる場合は、さまざまな場所でサイトをテストし、改善のための適切な手順を実行します。

Pingdom SpeedTestツールを使用したウォーターフォール分析の理解

Webページは通常、 HTML、CSS、JavaScript、およびメディアファイルの組み合わせであり、これらのそれぞれがサーバー上でレンダリングする要求を生成します。 より多くのリクエストがサイトの速度が遅い理由である可能性があります。 Pingdom Speed Testツールには、スコアリングと改善のための提案を示す複数のセクションがあります。 Pingdom SpeedTestツールのセクションは次のとおりです。

• Pingdomの概要
• ページのパフォーマンスを向上させる
• 応答コード
• コンテンツサイズとコンテンツタイプ別のリクエスト
• ドメイン別のコンテンツサイズとリクエスト
• ウォーターフォールチャート

このセクションでは、ウォーターフォール分析を行う方法を説明し、各Pingdomセクションを分類して、より詳細に説明します。

Pingdomの概要

Pingdomを介してWordPressWebサイトを実行すると、パフォーマンスグレード、ページサイズ、読み込み時間、およびリクエストに基づいて結果が生成されます。

サイトを複数回テストすると、テストごとにサイトの読み込み時間が変化しますが、他の結果（パフォーマンスグレード、ページサイズ、リクエスト）は同じままです。 この読み込み時間の差異の理由は、 DNSキャッシュ、CDNキャッシュ、WordPressキャッシュ、および外部APIです。

改善されたPingdomスコアは、Webアプリケーションとサーバー構成によって異なります。 特にeコマースWebサイトを運営している場合は、常に100％のスコアを取得できるとは限りませんが、常に改善の余地があります。

ページのパフォーマンスを向上させる

[ページパフォーマンスの向上]セクションには、ページパフォーマンスの向上に関する提案を含む総合的なパフォーマンスグレードが含まれています。これらの提案はすべてのWebサイトに適用できるわけではありませんが、改善の可能性が高くなります。

これらの提案を見てみましょう。

1）コンテンツ配信ネットワーク（CDN）を使用する

WordPress Webサイトで使用する最も重要なものは、 CDN（コンテンツ配信ネットワーク）です。 CDNは、インターネットコンテンツの高速配信を提供する、地理的に分散したサーバーのグループを指します。 これらは、世界中にあるサーバーのネットワークです。 CDNを使用すると、Webコンテンツをユーザーのいる場所に近づけることで、Webコンテンツをすばやく転送できます。

Cloudwaysユーザーの場合は、CloudwaysCDNを利用できます。 すべてのCloudwaysホスティングプランにはCloudwaysCDNが組み込まれており、数回クリックするだけで有効にできます。 詳細については、CloudwaysのWordPressCDNブログをご覧ください。

いくつかのサードパーティのCDNプロバイダーを見てみましょう。

1. KeyCDN
2. CloudFlare CDN
3. Amazon CloudFront
4. CDN77

ここでは、広く使用されている3つの人気のあるCDNプロバイダーのWordPressCDNベンチマークを見ることができます。

2）HTTP 404（見つかりません）エラーを回避します

リクエストを正常に完了できなかった場合、Avoid HTTP（404）エラーがPingdom SpeedTestツールの提案に表示されます。 ページ内の削除された画像へのリンクを手動で添付する場合など、リンクが壊れていると、404エラーが発生します。

存在しなくなったアセットに対してリクエストが生成されないことを常に確認してください。

3）リダイレクトを最小限に抑える

Pingdom Speed Testツールからの最も一般的な提案は、「リダイレクトを最小限に抑える」です。 リダイレクトは、サイトの1つのページが別のページをロードするときに発生します。 これらは、 HTTPをHTTPSにリダイレクトし、 wwwをwww以外にリダイレクトし、更新された投稿のURLが変更された場合に発生する可能性があります。

サイトのリダイレクトが多すぎないようにするためにできることは次のとおりです。

1. すでにリダイレクトされているページにリンクしないでください。複数のリダイレクトが発生する可能性があります。
2. 不要なリダイレクトが発生する可能性のある非アクティブ化/未使用のプラグインを必ず削除してください。
3. サイトにリンクを作成するときは、適切なプレフィックスHTTPまたはHTTPSを使用して、それがwwwか非wwwかを確認してください。

リダイレクトについて詳しく知りたい場合は、WP301リダイレクトに関するCloudwaysの記事を確認してください。

4）有効期限ヘッダーを追加します

すべてのWordPressWebサイトのファイルは、初めての訪問者のために1つずつ読み込まれます。 Webブラウザとサーバー間で生成されたリクエストにより、Webサイトの読み込み時間が長くなります。 ブラウザキャッシュはWebサイトファイルを訪問者のコンピュータに保存するため、訪問者がWebサイトに再度アクセスすると、サーバーではなくブラウザキャッシュからWebサイトが読み込まれ、Webサイトの速度が向上します。

しかし、ブラウザはどのファイルを保存し、どのファイルをサーバーからロードするか、そしてそれらをどのくらいの期間保持するかをどのように知るのでしょうか？ そこで、Expiresヘッダーが登場します。これらは、訪問者のブラウザキャッシュからWebページリソースをロードするか、サーバーからWebページリソースをロードするかをWebブラウザに指示するルールです。

それでは、実際のハウツーパートに取り掛かりましょう。 2つの異なる方法を使用してExpiresヘッダーを追加する方法を紹介します。

プラグインを使用して期限切れヘッダーを追加する

W3 TotalCacheプラグインをインストールします。 インストールしてアクティブ化したら、 [WordPressダッシュボード]> [パフォーマンス]> [ブラウザキャッシュ]に移動し、[有効期限ヘッダーを設定]オプションを有効にして、変更を保存します。

W3 Total Cacheプラグインについて詳しく知りたい場合は、より高速なWebサイトにWordPress W3 TotalCacheプラグインを使用する方法に関するCloudwaysの記事を参照してください。

コードを使用して期限切れヘッダーを追加する

コードを使用してExpiresヘッダーを追加することもできます。 このために、WebサイトがApacheサーバーとNginxサーバーのどちらを使用しているかを確認します。 これを行うには、ブラウザでWebサイトを実行し、 Ctrl + Shift + Iを押してサイトのネットワークに移動し（サイトを1回更新する必要がある場合があります）、上部のドメイン名をクリックして、ヘッダーに移動します。セクション。 そこに、サーバー名があります。

ExpiresヘッダーをApacheサーバーに追加するには、FTPサーバー（Filezilla）と.htaccessファイルの先頭にある指定されたコードを使用して.htaccessファイルにアクセスします。

 ##ヘッダーキャッシュが期限切れになります##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image / jpg「アクセス1年」
ExpiresByType image / jpeg「アクセス1年」
ExpiresByType image / gif "access 1 year"
ExpiresByType image / png「アクセス1年」
ExpiresByType image / svg "アクセス1年"
ExpiresByType text / css "アクセス1か月"
ExpiresByType application / pdf「アクセス1か月」
ExpiresByTypeアプリケーション/ javascript「アクセス1か月」
ExpiresByType application / x-javascript "アクセス1か月"
ExpiresByType application / x-shockwave-flash "access 1 month"
ExpiresByType image / x-icon「アクセス1年」
ExpiresDefault「アクセス3日」
</ IfModule>
##ヘッダーキャッシュが期限切れになります##

Cloudwaysでは、Nginxレベルで変更を加えることはできませんが、Apacheルールを使用して、アプリケーションの.htaccessファイルにExpiresヘッダーを追加することはできます。 詳細については、Cloudwaysの記事「WordPressでブラウザキャッシュを活用してページの読み込み時間を最適化する」をご覧ください。

5）HTTPリクエストを減らす

Webサイトをロードするたびに、HTTPリクエストなど、多くの技術的なものがユーザーの画面にコンテンツを配信します。 では、HTTPリクエストとは何ですか？ ユーザーエクスペリエンスにどのように影響しますか？ そして、あなたはあなたのウェブサイトのHTTPリクエストを減らすために何ができるでしょうか？

誰かがあなたのウェブサイトのページにアクセスすると、その人のウェブブラウザがあなたのウェブサーバーにリクエストを送信します。 サーバーは、サイトで表示しようとしているWebページをホストします。 Webブラウザーは、ファイルごとに個別のHTTP要求を行う必要があるため、Webサイトにあるファイルが多いほど、ブラウザーから生成されるHTTP要求が多くなります。 より多くのHTTPリクエストは、Webサイトのユーザーエクスペリエンスに影響を与える可能性があります。

HTTPリクエストを減らすための幅広い戦略は次のとおりです。

• プラグインは通常、独自のCSSとJavaScriptをロードするため、サイトに価値を付加しない不要なプラグインを削除して、HTTPリクエストを削除します。
• 複数のCSSファイルを1つのCSSファイルにマージしてHTTPリクエストを結合します。 ブラウザが行う必要のあるリクエストが少ないため、Webサイトの読み込みが速くなります。
• より良い戦略の1つは、重いプラグインをより軽いプラグインに置き換えることです。
• 画像はサイトをより魅力的にし、サイトに付加価値を与えますが、不要な画像を削除し、常に最適化された画像を使用します（ShortPixelとWP Compressを使用して画像を最適化できます）。
• 画像や動画には遅延読み込みを使用します。

これらのポイントを使用して、WordPressサイトを高速化し、パフォーマンスを向上させます。

6）GZIPでコンポーネントを圧縮する

GZIP圧縮は、データファイルを圧縮することでファイルのダウンロード時間を短縮するテクノロジーです。 最新のブラウザはすべて、ブラウザが圧縮データを受信すると、圧縮ファイルを自動的に解凍します。 最新のブラウザ、サーバーソフトウェア、およびすべての最高のWordPressホスティングは、GZIP圧縮をサポートしています。 GZIP圧縮により、ファイルサイズを最大70％削減できます。

CloudwaysにはBreezeプラグインがインストールされているため、Breeze WordPressキャッシュプラグインをインストールしてアクティブ化するだけで、GZIP圧縮を実現できます。

GZIP圧縮に推奨されるプラグインは次のとおりです。

• WPロケットを使用したGZIP
• WPスーパーキャッシュを備えたGZIP
• W3トータルキャッシュを備えたGZIP

W3 Total Cacheは、無料バージョンのキャッシュプラグインです。 プラグインをインストールしてアクティブ化するだけで、GZIP圧縮がWebサイトで自動的に有効になります。 [パフォーマンス]> [一般設定]に移動し、 [ブラウザキャッシュ]を有効にします。 変更を加えたら、[すべての変更を保存]ボタンをクリックします。

7）空のSrcまたはHrefを避けます

値が設定されていない（引用符で囲まれた情報がない）HTML属性は、 「空」属性と呼ばれます。 ソース（src）とリンク（href）の空の属性は、URI（Uniform Resource Identifier）値がない場合でも、ブラウザーが接続することを強調します。

HTMLおよびJavaScriptのソース（src）およびリンク（href）の空のタグの例を次に示します。

HTML：

 <img src =””>
<a href=””>

JavaScript：

 var img = new Image（）;
img.src = "";

Webサイトに空白のHTMLタグとJavaScriptタグがないことを確認してください。 ある場合は、それらを削除し、すべてのリンクを適切に維持します。 次に、空のタグの問題は画像に関係しているため、アップロードおよび使用中は常に画像のリンクを確認してください。

8）JavaScriptを一番下に置く

これは、JavaScriptの前に他のページコンテンツをロードすることを意味します。したがって、インターネット接続が遅いユーザーは、JavaScriptがロードされるのを待つ必要はありません。 JavaScriptが一番上に配置されると、JavaScriptは最初にロードを開始し、ページコンテンツの残りの部分を遅くすることで、ユーザーエクスペリエンスに影響を与えます。

JavaScriptファイルを.js拡張子（my-amazing-script.js）で保存し、そのJSファイルをテーマディレクトリに配置します（JavaScriptのディレクトリ、つまりpublic_html / wp-content / themes / your-theme / assetsを作成できます）。 / js）。 JavaScriptファイルを配置した後、テーマのfunctions.phpファイルを編集し、次のコードを追加します。

 関数wpb_adding_scripts（）{
wp_register_script（ 'my-amazing-script'、get_template_directory_uri（）。 '/ js / my-amazing-script.js'、 ''、 '1.1'、true）;
wp_enqueue_script（ 'my-amazing-script'）;
}
add_action（ 'wp_enqueue_scripts'、 'wpb_adding_scripts'）;

使用される関数wp_register_script（）には、次のものが含まれます。

 <？php
wp_register_script（$ handle、$ src、$ deps、$ ver、$ in_footer）;
？>

$ in_footerパラメーターをtrueに設定して、WordPressページのフッターまたは下部にスクリプトを追加します。

応答コード

Pingdom速度テストツールの次のセクションは、HTTPステータスコードとも呼ばれる応答コードです。 このセクションでは、ページにロードしているすべてのリソースで何が起こっているかを説明します。 一般的なものは次のとおりです。

• 200 –すべてOK
  301 –要求されたリソースは永続的に移動されました
  404 –要求されたリソースが見つかりませんでした

通常、200〜300の範囲の応答コードで問題ありませんが、400〜500の範囲のコードは通常、エラーと呼ばれ、修正する必要があります。

コンテンツサイズとコンテンツタイプ別のリクエスト

これは、Webページのリソースを確認するのに役立ちます。 表は、コンテンツの配布とリクエストに関する情報です。

コンテンツタイプ別のコンテンツサイズは、コンテンツタイプ別にグループ化されたすべてのWebサイトアセットのリストを提供します。 この情報は、エラーを取り除くのに役立ちます。 コンテンツタイプごとのコンテンツサイズが予想よりも大きいことに気付いた場合はいつでも、コンテンツのその部分で作業してパフォーマンスを向上させることができます。

ドメイン別のコンテンツサイズとリクエスト

コンテンツサイズとドメイン別のリクエストセクションでは、内部サービスと外部サービスを中央値で確認できます。 このセクションには、ドメインによって生成されたリクエストが表示されます。 各外部サービスは独自のレイテンシーを導入するため、外部リクエストを少なくすることをお勧めします。

一般に、リクエストの数を最小限に抑え、アセットをWebサーバーまたはCDNに移動するなどして、アセットを1か所でホストするのが最善です。 FontAwesomeまたはBootStrapを例として考えることができます。 FontAwesomeまたはBootStrapのスクリプトを外部からリンクしている場合は、それをダウンロードして直接提供します。

ウォーターフォールチャート

最後に、ウォーターフォールチャートを生成するPingdom速度テストツールリクエストセクションがあります。 各リクエストを分析して、パフォーマンスの問題を確認できます。 このセクションには、詳細な色分けされたウォーターフォールチャートがあります。

Pingdomのウォーターフォール分析は、サイト上のすべてのHTTPリクエストを表示し、開発者がサイトの読み込みを視覚的に理解してボトルネックを特定するために使用します。 接続サイズに焦点を当てる–長い接続と長いバーは​​、サイトの迅速な読み込みをブロックします。

概要

ウェブサイトの速度テストツールに関しては、市場には多くのツールがあります。 ご覧のとおり、Pingdom Speed Testツールは、詳細な説明と提案を使用してWebサイトのパフォーマンスを調査するのに適しています。

製品に関する詳細情報をお伝えしました。 今度は、このツールを使用してWebサイトのパフォーマンスを向上させる番です。