ウェブサイトの速度テストの実行方法(2025チュートリアル)

公開: 2025-02-14

私たちは即座の満足協会に住んでいます。人々は、ウェブサイトに着陸し、自分が望むものを手に入れ、先に進むことを期待しています。遅いウェブサイトは、欲求不満、放棄、失われた機会につながる可能性があります。誰もウェブサイトがロードされるのを待つことはありません。彼らは彼らが速く欲しいものを見つけたいと思っています。この投稿では、なぜ高速なWebサイトが非常に重要であるかを説明し、Webサイトの速度テストを実行することを導きます。

始めましょう。

目次
  • 1なぜウェブサイトの速度を気にする必要があるのか
    • 1.1遅いウェブサイトはあなたの評判に損害を与えます
  • Webサイト速度テストを実施するための2つのツール
    • 2.1 Google PagesSpeed Insights
    • 2.2 gtmetrix
    • 2.3ピンダム
    • 2.4 Webサイトグレーダー
  • 3ウェブサイトの速度テストを実施する方法
  • 4結果を理解する
    • 4.1全体のパフォーマンススコア
  • 5 Speedのために構築されたWordPressテーマを選択します
    • 5.1 Diviは、高速ウェブサイトを構築するのに最適な選択肢です
  • 6あなたのウェブサイトをスピードアップする準備はできましたか?今日Diviを発見してください

なぜウェブサイトの速度を気にするべきなのか

ウェブサイトの速度は、ポジティブなユーザーエクスペリエンス(UX)の基礎であり、ウェブサイトの成功の大きな要因です。あなたのウェブサイトがどれだけ速く読み込まれ、訪問者がどれだけ満足しているかとの間には直接的なリンクがあります。負荷時間の遅い時間は、フラストレーションと、最終的には放棄につながります。今日のデジタルの世界では、人々はロードするのに時間がかかりすぎるウェブサイトに対する耐性がほとんどありません。バックボタンをクリックして、競合他社のサイトに向かいます。この直帰率 - 1つのページのみを表示した後にサイトを離れる訪問者の割合は、サイトがロードするのにかかる秒ごとに劇的に増加します。

ウェブサイトの速度は、検索エンジンのランキング(SERP)でも重要な役割を果たします。 Googleのような検索エンジンは、Webサイトのスピードをハイランク要素と見なします。ユーザーが好むことを知っているため、ファーストロードのウェブサイトに優先順位を付けます。遅いウェブサイトは、その可視性に悪影響を与える可能性があり、潜在的な顧客があなたを見つけるのが難しくなります。このように考えてみてください。2つのWebサイトが同様の製品またはサービスを提供する場合、より高速なWebサイトが上位にランク付けされる可能性があります。

ウェブサイトの速度は、変換率にも直接リンクされています。あなたの目標がリードを生成したり、販売を促進したり、ニュースレターのサインアップを奨励することであっても、高速のウェブサイトは結果を改善できます。サイトが予想通りロードされると、訪問者はそれを探索し、そのコンテンツに関与し、最終的に顧客に変換できます。

遅いウェブサイトはあなたの評判に損害を与えます

遅いウェブサイトには他の欠点があります。それはあなたのブランドのイメージと信頼性に影響を与える可能性があります。ロードに永遠にかかるWebサイトは、ビジネスを非専門的、時代遅れ、または信頼できないように見せることができます。それは否定的な第一印象を生み出し、潜在的な顧客との信頼をより難しくすることができます。ユーザーは、サイトのパフォーマンスを細部や投資不足に注意して、ブランドの評判を損なうこともできます。

信じられないかもしれませんが、遅いウェブサイトはモバイルユーザーにも影響を与える可能性があります。ほとんどのインターネットユーザーが携帯電話でWebサイトにアクセスしているため、これまで以上に高速でロードされるWebサイトを提供することが重要です。モバイルユーザーは、デスクトップ上のものよりもインターネット接続が遅いことがよくあります。迅速なサイトがなければ、より多くの視聴者を失い、デバイスに関係なく、すべての人にポジティブなユーザーエクスペリエンスを提供するリスクがあります。

Webサイト速度テストを実施するためのツール

ウェブサイトの速度を評価し、改善の領域を特定するのに役立ついくつかのツール(無料および有料)が利用可能です。それらはすべて、UIに対する異なるアプローチを持つ同じメトリックを持っています。彼らが提供するものを見て、いくつかを見てみましょう。

Google PagesSpeed Insights

Google PagesSpeed Insights

Googleを搭載したPageSpeed Insightsは、Webサイトの速度とユーザーエクスペリエンスを分析する無料のツールです。制御された現実世界のユーザーエクスペリエンスに基づいて、ラボとフィールドのデータを提供します。改善のための実用的な推奨事項を提供し、潜在的な影響に基づいて優先順位を付けます。これにより、Googleがサイトの速度をどのように認識し、コアWebバイタルを改善できる領域を特定する方法を確認できます(詳細については後で詳しく説明します)。

gtmetrix

gtmetrix

GTMetrixは、Google PagesPeed Insightsと同等のパフォーマンス分析ツールからのデータを組み合わせて、Webサイトの速度の概要を提供します。パフォーマンススコア、ウォーターフォールチャート(リソースの負荷の視覚化)、最適化の推奨事項など、詳細なレポートを提供します。 GTMetrixを使用すると、時間の経過とともにWebサイトのパフォーマンスを監視し、影響を追跡できます。また、さまざまな場所からテストすることができ、世界中のユーザーに洞察を与えることができます。

pingdom

Pingdom Webサイト速度テスト

Pingdomは、さまざまな場所やブラウザからサイトの速度をテストできるWebサイト監視サービスです。詳細なウォーターフォールチャートとパフォーマンスメトリックが提供されます。これは、サイトの速度の粒状を把握したい場合に役立ちます。パフォーマンスの推奨事項やページサイズからロード時間やHTTPSリクエストまで、すべてに関するデータがあります。したがって、詳細な速度テストが必要な場合は、Pingdomが良い選択肢です。

ウェブサイトのグレーダー

Hubspot Webサイトグレーダー

Hubspotの無料ツールであるWebサイトGraderは、Webサイトをチェックアウトし、パフォーマンス、SEO、モバイルフレンドリー、セキュリティでどのように行っているかについてのレポートを提供します。あなたのサイトがうまくやっていること、そしてそれがどこに向かっているのかを見るのに最適な方法です。 Hubspot Academyで無料のレッスンを提供しています。ただし、アクセスにサインアップする必要があることに注意する必要があります。

ウェブサイトの速度テストを実施する方法

テスト自体にはあまりありませんが、結果を理解することは別の話です。 Google PageSpeed Insightsを使用して、Webサイトの速度テストを実施しましょう。テストを実施するには、Diviで利用可能なDiviクイックサイトの例を使用します。サイトにプラグインを追加して、物事を清潔に保つことを避けます。

テストするWebサイトのURLを入力し、 [分析]ボタンをクリックします。

ウェブサイトの速度テスト

Googleは、サイトをテストする手順に従い、最初に実際のユーザーが着地したときに経験するものを発見し、次にパフォーマンスの問題を診断します。パフォーマンス、アクセシビリティ、ベストプラクティス、SEOのモバイルデバイスとデスクトップデバイスに4つのメトリックを提供します。私たちのテストサイトにはSEOがないため、結果はそれを反映します。ただし、SEO最適化コードのおかげで、WordPressは検索エンジンに優しいです。

Googleページ速度テスト結果

結果を理解する

ウェブサイトの速度テスト結果を手にすると、特に初心者である場合、理解するのが難しいかもしれない多くのメトリックが表示されます。それはあなたを速めるためにそれぞれを歩き回るので大丈夫です。

全体的なパフォーマンススコア

Googleパフォーマンスメトリック

テストを実行すると、全体的なパフォーマンススコアが96であることがわかります。これは非常に良いことです。当社のウェブサイトが迅速にロードされ、優れたユーザーエクスペリエンスが提供されることを示しています。スコアの範囲は0から100の範囲で、より高いスコアの方が優れています。また、スコアの基礎となるいくつかのメトリックもあります。これらはGoogleのCore Web Vitalsと呼ばれ、その調査結果はあなたのサイトが検索結果でどれだけうまく機能するかに直接影響します。

コアWebバイタル

Googleは、全体的なスコアに影響を与えるいくつかの重要なパフォーマンスメトリックに基づいてサイトを評価します。それらは、最初のコンテンツ型塗料(FCP)、最大のコンテンツ型塗料(LCP)、総ブロッキング時間(TBT)、累積レイアウトシフト(CLS)、および速度指数です。それぞれの意味について簡単に触れましょう。

  • 最初のコンテンツペイント:これにより、ブラウザがページ上の最初のコンテンツ(テキスト、画像など)をどれだけ速くレンダリングするかを測定します。 0.6は非常に優れたFCPです。つまり、ユーザーは画面上に何かをすばやく見ます。
  • 最大のコンテンツペイント:これは、最大のコンテンツ要素(ヒーローイメージ、メイン見出しなど)がビューポート内で表示されるまでの時間を測定します(ユーザーの目のビュー)。 1.1は優れたLCPであり、サイトのメインコンテンツがすぐにロードされています。
  • 合計ブロッキング時間:これにより、メインスレッド(Webブラウザーのレンダリングエンジン内のプライマリワーカー)がブロックされる時間の総量を測定し、ページがユーザー入力に応答することを妨げます。 120ミリ秒はまともなTBTですが、より低い方が常に優れています。
  • 累積レイアウトシフト:これにより、ページの視覚的安定性が測定されます。 CLSスコアが低いということは、ページ上の要素がページが読み込まれると予期せずにシフトしないことを意味します。これはユーザーにとって迷惑になる可能性があります。 0.011は優れたスコアです。
  • 速度インデックス:これは、ページのコンテンツが視覚的に表示される速さを示します。ページ全体が0.8秒で読み込まれましたが、これは素晴らしいことです。

診断

PagesSpeed Insights Diagnostics

PageSpeed Insightsは、Webサイトをより速くロードするための具体的なヒントを提供します。サイトのさまざまな部分をチェックし、何を修正するかを教えてくれます。これらの改善分野のそれぞれを見て、それらが何を意味するかを説明しましょう。

  • 次世代形式で画像を提供する:これは、Webサイトが、より新しい、より効率的な形式(WebPなど)を使用できる古い画像形式(JPEGやPNGなど)を使用していることを示しています。これらの形式に切り替えると、画像ファイルのサイズが削減され、ロードがスピードアップされます。
  • 適切にサイズの画像: Webサイトは、表示サイズに必要以上の画像を使用している可能性があります。画像のサイズを変更すると、表示寸法がファイルサイズを縮小し、負荷時間が改善されます。
  • オフスクリーンの画像を延期する:これは、折り目の下の画像(ページが読み込まれたときにすぐには見えない)を怠zy-loadedにすることを意味します。怠zyなロードは、これらの画像がビューポートで見えるようになったときにのみロードされ、初期ページの負荷が改善されることを意味します。
  • Legacy JavaScriptを最新のブラウザに提供することは避けてください。これは、サイトがレガシーJavaScriptを提供していないことを示唆しています。 Legacy JavaScriptは、最新のブラウザ向けに記述されたコードよりも大きく、効率が低いことがよくあります。
  • 未使用のCSSの削減:ウェブサイトには、現在のページでは使用されていないCSSコードがあります。この未使用のコードを削除すると、CSSファイルのサイズが削減され、解析がスピードアップされます。
  • 未使用のJavaScriptを減らす:未使用のCSSと同様に、サイトには使用されていないJavaScriptがあります。削除すると、ファイルのサイズが縮小し、負荷時間が改善されます。

アクセシビリティ

ウェブサイトの速度テスト

Google PagesSpeed Insightsは、パフォーマンスに加えてWebサイトのアクセシビリティを評価します。アクセシビリティスコアが低いことは、視覚的またはその他の障害を持つユーザーの障壁を示しています。私たちのテストにより、いくつかの領域が改善が必要であることが明らかになりました。幸いなことに、UserwayやDivi Marketplaceのアクセシビリティバンドル(DIVIユーザー向け)などのツールは、Webサイトのアクセシビリティを最適化するプロセスを簡素化できます。

それらを掘り下げましょう。

  • ボタンにはアクセス可能な名前がありません。適切なアクセス可能な名前のないボタンは、スクリーンリーダーが解釈するのが難しく、視覚障害のあるユーザーにとって使用できません。これは通常、ボタン要素内のAria-Label属性またはALTテキストが欠落または不十分であることを意味します。
  • リンクには識別可能な名前がありません:ボタンと同様に、リンクは説明的なテキストまたはアクセス可能な名前が必要なので、スクリーンリーダーはユーザーに目的を伝えることができます。これは、多くの場合、リンクテキストがあいまいであるか、 Aria-Labelが欠落していることを意味します。
  • ユーザースケーラブルはNOに設定されています。これは、特にモバイルユーザーにとって潜在的な使いやすさの問題を示しています。ユーザースクロールを無効にすると、視力が低い人がズームインしてコンテンツを見ることが困難になる可能性があります。これはベストプラクティスの下でフラグが立てられていますが、アクセシビリティの影響もあります。
  • 見出し要素は順次順序付けではありません。これは、ウェブサイトの見出し構造(H1、H2、H3など)が論理的ではないことを意味します。スクリーンリーダーのユーザーは、ページ構造を理解するために見出しに依存しており、間違った順序が混乱する可能性があります。たとえば、中央にH3なしでH2からH4に移動すると、ここでフラグが付けられます。

これまで見てきたように、よく構築されたウェブサイトでさえ、改善の領域を持つことができます。画像を最適化する一方で、CSS、およびJavaScriptが重要ですが、ウェブサイトの速度の基礎は選択されたテーマにあります。コード化されていないテーマは、最も積極的な最適化の取り組みを否定することができます。そのため、速度向けに設計されたWordPressテーマを選択することが重要です。

Speedのために構築されたWordPressテーマを選択します

WordPressのテーマは、Webサイト全体のフレームワークとして機能します。コンテンツの表示方法、サイトがどのように機能するか、どれだけ速くロードされるかを決定します。肥大化したまたは効率的にコーディングされたテーマは、他の要素をどれだけうまく最適化するかに関係なく、サイトのパフォーマンスに影響を与える可能性があります。

テーマを選択するときは、次の機能を探してください。

  • 軽量コード:最速のテーマでは、最小限のコードを使用して、荷重時間を遅くすることができる不必要な膨満感を避けます。
  • コアWebバイタル用に最適化: GoogleのCore Web Vitalsのしきい値を満たすかそれを超えるテーマを選択します。
  • モバイルファーストアプローチ:ユーザーエクスペリエンスとSEOにはモバイル速度が不可欠であるため、常に応答性の高いテーマを選択してください。
  • 恒星のサポート:開発者によって積極的に更新およびサポートされているテーマを選択します。

Diviは、高速のWebサイトを構築するのに最適な選択肢です

Divi 5

当社のウェブサイト速度テストはDIVI 4で構築されたサイトで実施されましたが、DIVI 5で導入されているパフォーマンスの改善に注目する価値があります。Diviは常に視覚ビルダーとデザインの柔軟性に人気のある選択肢でしたが、かなり多くありますが、かなり多くあります。 Divi 4とDivi 5の違い。エレガントなテーマ開発者は、コードベースを合理化し、CSSを最適化し、JavaScriptの実行を改善するのに苦労しており、その結果、著しく高速でより効率的なテーマになります。 Visual Builderにも大規模な変更があり、よりユーザーフレンドリーで合理化されたルックアンドフィールを提供します。 Diviに精通している場合は、Divi 5にアップグレードすることで、Webサイトのパフォーマンスを向上させることができます。ただし、Diviを初めて検討している場合は、今が飛躍するのに最適な時期です。

Diviは、世界で最もカスタマイズ可能なテーマです。 Visual Builderを使用してWebサイトをゼロから作成したり、Divi AIでWebサイトを生成したり、Diviクイックサイトで創造性をジャンプしたりできます。 Diviはフルサイトの編集も提供しているため、テーマビルダーを使用してサイトのすべてのコーナーを設計できます。ヘッダー、フッター、投稿、アーカイブページ、およびWooCommerceページを構築できます。

Diviは将来の証拠です

今すぐDIVIを購入すると、Diviの将来のバージョンに無料でアップグレードできます。つまり、Divi 5の速度改善のおかげで、これまで以上に早くウェブサイトを構築できることを意味します。ここでは、最新のDivi 5アルファで利用可能なパフォーマンスエンハンスメントのいくつかを紹介します。

  • 改善されたフロントエンドページの負荷速度: ETは、昨日のWordPressのレガシーショートコード構造から離れることにより、Diviのフレームワークを完全に書き直しました。これにより、処理時間が短縮され、ページの負荷速度が高くなります。
  • 効率のためのモジュラーコードベース: DIVI 5はモジュラーアーキテクチャで構築されており、より軽量でスケーラブルになります。
  • アニメーションフリーUI: Divi 5のインターフェイスにより、ビルダーの過剰なアニメーションが削除され、よりスムーズで速い建物エクスペリエンスが発生しました。

Diviの未来は明るいです。速度の強化、新しいフレームワーク、およびより高速な建物エクスペリエンスにより、Flying ColorsでWebサイトの速度テストに合格するWebサイトを構築できます。

今日Diviを入手してください

あなたのウェブサイトをスピードアップする準備はできましたか?今日Diviを発見してください

高速ロードのウェブサイトはもはや贅沢ではなく、必要性です。遅いウェブサイトは、イライラしたユーザー、変換の喪失、およびブランドの評判の破損につながる可能性があります。この投稿では、画像の最適化、効率的なコード、および適切に選択されたテーマがすべて、ウェブサイトのパフォーマンスで役割を果たしていることがわかりました。 Google PagesSpeed Insightsなどのツールを使用すると、Webサイトの速度テストを簡単に実施し、改善のための領域に貴重なヒントを提供できます。

個々の要素を最適化することが重要ですが、高速なWebサイトの基礎は、パフォーマンスのために構築されたテーマを選択しています。 Diviは、継続的な開発とパフォーマンスの向上へのコミットメントにより、優れた選択として際立っています。 DIVI 5の速度強化 - 改良されたフレームワーク、合理化されたコードベース、およびより速い建物エクスペリエンス - は、パフォーマンスの大きな跳躍を表しています。

あなたがベテランのDiviユーザーであろうと、プラットフォームを初めて使用しているかどうかにかかわらず、今はそのパワーを活用して、見栄えが良くて速くロードされるウェブサイトを構築するのに最適な時期です。