WPBeginner でページの読み込み速度を向上させる方法 (6 つのヒントを明らかに)

まだ気づいていない方のために付け加えておきますが、Google は、Google Core Web Vitals と呼ばれる Web サイトのパフォーマンス指標に重要な変更を加えました。

Core Web Vitals は、Web サイトの読み込み速度、Web サイトが表示されるまでの速度、ユーザーが Web サイトを利用できるようになるまでの時間を測定するのに役立ちます。

Google は、Interaction to Next Paint (INP) が安定した Core Web Vital メトリクスとなり、First Input Delay (FID) を正式に置き換えたと発表しました。

多くの読者から、これらの変更にどのように対処し、WPBeginner で可能な限り最高のページ読み込み速度を実現することができたのかを尋ねられました。

私たちはすべての標準的な WordPress パフォーマンス最適化のベストプラクティスを使用します。ただし、WPBeginner は大量のトラフィックを受け取るため、最高のユーザー エクスペリエンスを確保するためにいくつかの追加の手順も講じています。

この記事では、WPBeginner のページ読み込み速度を上げるために使用する追加のヒントを公開します。それらのほとんどは、最小限の労力でどの Web サイトでも使用できます。

注: この記事は WPBeginner Insider シリーズの一部であり、ビジネスの成長に使用する専門知識、ヒント、ツールを共有します。 WPBeginner Insider は隔週木曜日に発行されます。

この記事で説明するすべての項目の概要を次に示します。

ページの読み込み速度が重要な理由

ページの読み込み速度は、ユーザーが Web サイトへのリンクをクリックしたときに Web サイトが表示される速度です。

Web サイトの読み込みが高速化すると、必要な情報をすぐに入手できるため、ユーザーは満足します。一方で、Web サイトの読み込みが遅いと、ユーザーが離脱せざるを得なくなる可能性があります。

読み込みに 3 秒かかる場合、ユーザーは Web サイトから離れる (直帰する) 可能性が 36% 高くなります。また、読み込みに 5 秒以上かかる Web サイトから離れる可能性が 90% 高くなります。

ページの読み込み速度が非常に重要である理由は他にもいくつかあります。

  • ユーザー エンゲージメントの強化: ウェブサイトの読み込みが速いため、訪問者の関心が維持され、情報にすばやくアクセスできるようになります。ユーザーがサイトで過ごす時間が長くなると、お金を費やすかコンバージョンに至る可能性が高くなります。

  • 検索エンジンのランキングの向上: ユーザー エクスペリエンスが向上するため、検索エンジンは読み込みの速いウェブサイトを優先して上位にランク付けします。

  • モバイル ユーザーにとって重要: モバイル ブラウジングでは速度が特に重要です。モバイル ユーザーは、デスクトップ ユーザーに比べて、遅い Web サイトから離れる可能性が 2 倍あります。

  • 信頼と権威の構築: 読み込みが早いサイトは、より信頼性が高くプロフェッショナルであるように見え、ユーザーにあなたのビジネスから購入するよう説得するのに役立ちます。

要約すると、ページの読み込み速度により、顧客満足度とエンゲージメントが向上し、全体的なユーザー エクスペリエンスが向上します。

WPBeginner のページ読み込み速度を改善する方法

WordPress のパフォーマンスと速度の最適化ハンドブックにある標準的なベスト プラクティスをすべて適用します。

さらに、WPBeginner での WordPress のパフォーマンスをさらに向上させるために、いくつかの追加の手順も実行しました。

これは、テクニックを実装する前後のパフォーマンス最適化の最近のスクリーンショットです。

ウェブサイトに対して同様のテストを実行して、Google Core Web Vitals スコアを確認したい場合は、PageSpeed Insights ツールを使用してください。テストしたい URL を入力し、「分析」ボタンをクリックするだけです。

このツールは Web ページを数秒間分析し、テスト結果を表示します。

次に、このパフォーマンス スコアを達成するために行った手順を見てみましょう。

1. より高速なホスティング プラットフォーム

WordPress ベースのビジネスを運営してきた長年の経験から、私たちは最適な WordPress ホスティングを選択することの重要性を学びました。

小規模な Web サイトの場合は、Bluehost や Hostinger などのトップ ホスティング会社から始めることができます。

ただし、WPBeginner はトラフィック量が多い大規模な Web サイトです。この規模では、共有または VPS ホスティング プランは制限が多すぎます。

そのため、WPBeginner は、Google Cloud Platform 上で実行される SiteGround の Enterprise Cloud Infrastructure でホストされています。

SiteGround を使用する理由

  • SiteGround のエンタープライズ グレードのホスティング インフラストラクチャには複数の冗長層があり、最大の稼働時間を保証します。

  • Google Cloud Platform 上で動作し、Google の最先端のネットワークに接続されており、世界中のあらゆる地点から最速の速度を保証します。

  • これにより、個々の専用ホスティング サーバーの管理にかかるコストと困難さが軽減されます。

  • 超高速 PHP、高速 MySQL、Brotli 圧縮などの SiteGround の社内機能強化により、パフォーマンスがさらに向上します。

  • 私たちは SiteGround サポート チームと協力した直接の経験があります。同社のエンジニアの専門知識、応答時間の短縮、全体的な親切さには常に感銘を受けています。

詳細については、WPBeginner が SiteGround ホスティングに切り替えた理由に関する記事をご覧ください。

最も重要な点は、SiteGround のこれらすべての利点が企業顧客だけに限定されないことです。 SiteGround のすべての共有ホスティング アカウントも Google Cloud Platform でホストされます。

現在、無料のドメイン名を持つ WPBeginner ユーザーに大幅な割引も提供しています。月額 2.99 ドルから始まりますが、提供されるテクノロジーとサービスのレベルを考慮すると、非常に手頃な価格です。

→ この独占的な SiteGround 取引を申請するにはここをクリックしてください ←

2.クラウドフレアDNS

以前の WPBeginner Insider 記事では、Sucuri から Cloudflare への切り替えのケーススタディを共有しました。

セキュリティとは別に、Cloudflare DNS を使用すると、WPBeginner のパフォーマンスが大幅に向上します。

DNS (Domain Name System) は、Web サイトの電話帳のようなものです。

Web サイトのアドレスをブラウザに入力するか、リンクをクリックすると、DNS サービスがドメイン名を検索し、Web サイトをその特定の Web サイトの IP アドレスに誘導します。

通常、Web サイトはホスティング会社のネームサーバーを使用して DNS を管理します。これらは、世界中の 310 以上の都市にまたがる各データセンターのネットワーク エッジで DNS 解決を可能にする Cloudflare ほど高速ではありません。

Cloudflare DNS を使用する理由

  • 最速の DNS 解決 - Cloudflare のグローバル ネットワークにより、ユーザーに最も近い場所で DNS を解決できます。

  • 組み込みセキュリティ - すべてのトラフィックが Cloudflare DNS を通過するため、Web アプリケーション ファイアウォール (WAF) は、DDoS 攻撃、スパム、不要なボット、SQL インジェクション、ハッキングの試みなどを迅速に軽減しブロックできます。 。

  • CDN 配信 - ネットワークは静的アセットを自動的にキャッシュし、グローバル ネットワークを通じて提供するため、ウェブサイトの読み込みが速くなります。これは DNS レベルで行われるため、CDN アセット用に別のサブドメインを用意する必要はありません。

私たちはエンタープライズプランを使用していますが、小規模なWebサイトの場合、Cloudflareは無料のCDNとDNSを提供しており、基本的に機能は少なくても同じことを行います。

3. WP Rocketを使用したパフォーマンスの最適化

さらにパフォーマンスを最適化するために、市場で最高の WordPress キャッシュ プラグインの 1 つである WP Rocket を使用します。これは、Web サイトのコピーを保存して、再訪問者がページをより速く読み込めるようにすることを意味します。

WP Rocket で最も気に入っている点は、これが最も包括的な WordPress パフォーマンス最適化プラグインであるため、1 つのツールだけでさまざまなタスクを処理できることです。

WP Rocket を使用する理由

  • キャッシュの事前読み込み - 通常、キャッシュ プラグインは、ユーザーがページにアクセスしてページのキャッシュされたコピーを作成するまで待機します。 WP Rocket はキャッシュを自動的に準備できる状態に保つため、ページの読み込み時間に大きな違いが生じます。

  • ブラウザ キャッシュ - 画像、JavaScript、CSS などの静的アセットをブラウザ キャッシュに保存すると、後続のページ ビューの読み込みが速くなります。

  • ファイルの最適化 - WP Rocket は、JavaScript やスタイルシートなどの静的ファイルの配信を縮小し、最適化するのに役立ちます。これらのファイルを小さくすると、ページ全体の読み込み時間が大幅に短縮されます。

WP Rocket レビューでは、このプラグインに関する詳細な経験を賛否両論含めて共有しました。

WP Rocket ではどの設定を使用しますか?

次の WP Rocket 設定がオンになっています。

  • フルページキャッシュ

  • ファイルの最適化 (JS および CSS ファイルを縮小し、重要な CSS を配信)

  • JavaScript の遅延 (JS の読み込みを遅延させるため、レンダリング ブロックの問題の解決に役立ちます)

  • 画像とメディア ファイルの遅延読み込み

サイトでこれらの設定を使用する際にサポートが必要ですか?最良の結果を達成するための WP Rocket のセットアップに関するステップバイステップのガイドがあります。

4. JavaScript と CSS のエンキュー

WP Rocket を使用して JavaScript および CSS ファイルの配信を最適化しますが、その前に、Web サイトがページに必要な JavaScript および CSS ファイルのみを読み込んでいることを確認します。

これを行う最も簡単な方法は、WordPress コーディングのベスト プラクティスに従った WordPress プラグインとテーマを使用することです。これらの開発者は、必要な場合にのみスクリプトを読み込みます。

ただし、プラグインまたはテーマの開発者がこの決定を下すことができない場合があります。ユーザーエクスペリエンスを向上させるために、スクリプトをグローバルにロードする場合があります。

WPBeginner では、この問題を検討する社内開発者を抱えています。不要なスクリプトと CSS をデキューし、必要に応じてエンキューします。

⚠️注: コーディング スキルのない初心者レベルのユーザーにとってこれを達成するのは困難です。これを試みると、サイトが破損したり、予期しない動作が発生したりする可能性があります。

ただし、WordPress コーディングの基本を理解しているユーザーは、次の手順に従ってこれを行うことができます。

まず、不要なスクリプトを見つける必要があります。どのスクリプトとスタイル シートがロードされているかを確認する最も簡単な方法は、Query Monitor プラグインを使用することです。

ページにロードされている JavaScript ファイルと CSS ファイルが表示され、どれが不要かを判断できます。

スクリプトをデキューするには、クエリ モニターに示されているようにスクリプト ハンドルを使用する必要があります。その後、次のコードを使用してそれをデキューできます。

function prefix_remove_scripts() {
	if ( is_front_page() ) {
		wp_dequeue_script( 'plugin-script-handle' );
	}
}
add_action( 'wp_print_scripts', 'prefix_remove_scripts', 100 );

同様に、不要なスタイルシートを削除するには、次のコードを使用できます。

/**
 * Remove unnecessary stylesheets 
 */
function prefix_remove_styles() {
	if ( is_front_page() ) {
	wp_dequeue_style( 'stylesheet-handle' );
	}
}
add_action( 'wp_enqueue_scripts', 'prefix_remove_styles', 100 );

詳細については、WordPress に JavaScript と CSS を適切に追加する方法に関するチュートリアルを参照してください。

5. ブロック エディター スタイルのアンロード

WPBeginner ではデフォルトの WordPress ブロック エディターを使用します。非常に高速であり、コアの WordPress 開発チームはパフォーマンスの向上に多くの時間とリソースを費やしています。

パフォーマンスをさらに向上させるために、WPBeginner で使用していないブロック エディター スタイルの一部をアンロードします。

これにより、DOM サイズが削減され、ブラウザーが要求されたページをより迅速に処理できるようになります。

ブラウザの用語では、DOM はページ上の要素とサブ要素 (見出し、テキスト、画像、スタイルシート、スクリプトなど) のマップのようなものです。

DOM が大きくなると、ブラウザが DOM を処理するのに少し時間がかかることになります。小さい DOM はすぐに処理されます。

ただし、これによるパフォーマンスの向上はそれほど大きくないため、小規模な WordPress Web サイトを使用するほとんどのユーザーにはお勧めしません。

6. その他のパフォーマンスの強化

上記のヒントとは別に、ページの読み込み速度を向上させるためのベスト プラクティスも用意されています。

Web サイトに簡単に実装できるものをいくつか紹介します。

  • 最適化された画像 - 私たちのチームは、アップロードするスクリーンショット、画像、メディアがファイル サイズを削減するために高度に最適化されていることを確認します。 WordPress 用に画像を最適化する方法についてはガイドをご覧ください。

  • Cron ジョブの最適化 - Cron ジョブは、更新の確認、スケジュールされた投稿の公開などを行うためにバックグラウンドで実行されるスケジュールされた WordPress タスクです。 WordPress プラグインは、独自のバックグラウンド プロセスを追加することもできます。 cron ジョブを最適化すると、サーバーの負荷が軽減され、パフォーマンスが向上します。

  • 外部 HTTP リクエストを減らす - 使用するプラグインやツールによっては、外部ドメインからファイルを読み込む必要がある場合があります。これらのリクエストが多すぎると、ページの読み込み時間が長くなる可能性があります。これを修正するには、プラグインの CSS ファイルと JavaScript を無効にする方法に関するチュートリアルをご覧ください。

これらの方法やページの読み込み時間を改善するためのその他の戦略の詳細については、WordPress の速度とパフォーマンスに関する完全なガイドに従ってください。

この記事が、ご自身の Web サイトでのページの読み込み速度を向上させる方法についての洞察をお届けできれば幸いです。また、当社がどのようにメールリストを増やしているかを確認したり、オーガニックトラフィックを増やすための WordPress SEO ガイドを参照したりすることもできます。

この記事が気に入っていただけましたら、WordPress ビデオ チュートリアルの YouTube チャンネルに登録してください。 Twitter や Facebook でもご覧いただけます。