Googleは、Google Core Web Vitalsと呼ばれるサイトパフォーマンス指標に重要な変更を加えた。
コアウェブバイタルは、ファーストインプットディレイ(FID)に代わり、安定したインタラクション・トゥ・ネクストペイント(INP)を含むようになった。
多くの読者から、WPBeginnerの高速ロード時間をどのように維持しているかという質問を受けました。私たちは標準的な最適化を実践していますが、高いトラフィックを処理するために追加のステップを踏んでいます。
この投稿では、ページの読み込み速度を上げるためのヒントをご紹介します。
注：この投稿は、WPBeginner Insiderシリーズの一部です。WPBeginner Insiderシリーズでは、私たちがビジネスを成長させるために使用している専門知識、ヒント、ツールを共有しています。
この投稿で取り上げるすべての項目を簡単に紹介しよう：
なぜページの読み込み速度が重要なのか？
ページ読み込み速度とは、ユーザーがリンクをクリックしたときに、サイトが表示される速度のことです。
私たちの目標は、ユーザーが必要な情報を素早く得られるようにすることです。読み込みが速いサイトは、ユーザーが探している情報をすぐに入手できるため、ユーザーに喜ばれます。
その一方で、読み込みの遅いサイトは閲覧者を離脱させる可能性がある。これは、すべてのサイトで避けたいことです。ユーザーがサイトに長く滞在してくれれば、購読者やカスタマイザーになる可能性が高くなります。
ユーザーは、サイトの読み込みに3秒かかると、そのサイトから離脱（バウンス）する可能性が36％高くなります。また、読み込みに5秒以上かかるサイトからは90％の確率で離脱します。
Source: ThinkWithGoogle
ページの読み込み速度が重要である理由は、他にもいくつかあります：
- ユーザーの関心を高めます：読み込みの速いサイトは訪問者の興味を引きつけ、素早く情報にアクセスすることができます。サイトでの滞在時間が長いユーザーほど、購入やコンバージョンにつながる可能性が高くなります。
- 検索エンジンランキングの向上：ユーザーエクスペリエンスが向上するため、検索エンジンは読み込みの速いサイトを高く評価します。
- モバイルユーザーにとって重要：モバイルブラウジングにおいて、スピードは特に重要です。モバイルユーザーはデスクトップユーザーよりも遅いサイトから離脱する可能性が2倍高いと言われています。
- 信頼と投稿者の構築：読み込みの速いサイトは信頼性が高く、プロフェッショナルに見える。
要約すると、ページの読み込み速度は、顧客満足度とエンゲージメントを高め、全体的なユーザーエクスペリエンスを向上させます。
WPBeginnerのページ読み込み速度を改善する方法
WordPressのパフォーマンスとスピードの最適化ハンドブックにある標準的なベストプラクティスをすべて適用します。
さらに、WPBeginnerのWordPressのパフォーマンスをさらに高めるために、いくつかの追加措置を講じました。
これは、私たちが実施したテクニックの前と後のパフォーマンス最適化の最近のスクリーンショットです。
あなたのサイトに同様のテストを行い、Google Core Web Vitalsのスコアを確認したい場合は、PageSpeed Insightsツールを使用します。
テストしたいURLを入力し、「分析」ボタンをクリックするだけです。
このツールは数秒間ウェブページを分析し、テスト結果を表示します。
では、このパフォーマンススコアを達成するために私たちがとったステップを見てみよう。
1.ホスティングサービス・プラットフォームの高速化
WordPressベースのビジネスを長年運営してきた経験から、私たちは最高のWordPressホスティングサービスを選択することの重要性を学びました。
小規模サイトの場合は、Bluehostや ホスティングサービスのようなトップホスティング会社のいずれかで開始することができます。
しかし、WPBeginnerは大量のトラフィックを持つ大規模なサイトです。共有またはVPSホスティングプランは、その規模ではあまりにも限られています。
そのため、WPBeginnerはGoogle Cloud Platform上で動作するSiteGroundのエンタープライズクラウドインフラストラクチャでホスティングサービスを提供しています。
SiteGroundを利用する理由
- SiteGroundのエンタープライズグレードのホスティングサービスは、何重もの冗長性を備えており、最大限のアップタイムを保証します。
- Google Cloud Platform上で動作し、Googleの最先端ネットワークに接続されているため、世界中のどこからでも最速の通信速度が保証される。
- 個々の専用ホスティングサーバーの管理にかかるコストと難易度を軽減します。
- 超高速PHP、高速MySQL、Brotli圧縮など、SiteGroundが独自に強化した機能により、パフォーマンスがさらに向上します。
- 私たちは、SiteGroundのサポートチームと実際に仕事をした経験があります。エンジニアの専門知識、レスポンシブの速さ、そして全体的な親切さには、いつも感心させられます。
詳細は、WPBeginnerがSiteGroundホスティングサービスに切り替えた理由の投稿をご覧ください。
現在、WPBeginnerユーザーには、無料ドメイン名付きの寛大な割引も提供している。月額2.99ドルからで、提供される技術やサービスのレベルを考えれば、かなりお手頃だ。
最大の利点は、SiteGroundのメリットは企業のお客様に限定されないことです。SiteGround の共有ホスティングサービスは、すべて Google Cloud Platform でホスティングされています。
2.クラウドフレアDNS
以前のWPBeginner Insiderの投稿で、SucuriからCloudflareに乗り換えた事例を紹介しました。
セキュリティ以外にも、Cloudflare DNSを使用することで、WPBeginnerはパフォーマンスにおいて大きなアドバンテージを得ることができます。
DNS（ドメイン・ネーム・システム）はサイトの電話帳のようなものだ。
ブラウザーにウェブサイトのアドレスを入力したり、リンクをクリックしたりすると、DNSサービスがドメイン名を検索し、その特定のウェブサイトのIPアドレスにウェブサイトを誘導します。
通常、サイトはホスティングサービス会社のネームサーバーを使用してDNSを管理します。これらはCloudflareほど高速ではなく、世界310以上の都市にまたがるデータセンターのネットワークエッジでDNS解決を行う権限がありません。
Cloudflare DNSを使用する理由
- 最速のDNS解決： Cloudflareのグローバルネットワークにより、どのユーザーにも最も近い場所でDNSを解決することができます。
- ビルトインセキュリティ：すべてのトラフィックはCloudflare DNSを経由するため、同社のウェブアプリケーションファイアウォール（WAF）は、DDoS攻撃、スパム、不要なボット、SQLインジェクション、ハッキングの試みなどを迅速に軽減し、ブロックすることができます。
- CDN配信– CDNのネットワークは、静的アセットを自動的にキャッシュし、グローバルネットワークを通じて配信するため、サイトの読み込みが速くなります。また、これはDNSレベルで行われるため、CDNアセット用に区切られたサブドメインを持つ必要はありません。
私たちはEnterpriseプランを利用していますが、Cloudflareは小規模サイト向けに無料のCDNとDNSを提供しており、実質的には機能は少ないものの同じことができます。
3.WP Rocketを使ったパフォーマンスの最適化
さらなるパフォーマンス最適化のために、私たちは市場で最高のWordPressパフォーマンスプラグインの一つであるWP Rocketを使用しています。特に、キャッシングを処理します。つまり、あなたのウェブサイトのコピーを保存し、リピーターがより速くページを読み込めるようにします。
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ロケットを設定するためのステップバイステップガイドを持っています。
4.JavaScriptとCSSのエンキューイング
WP RocketでJavaScriptとCSSファイルの配信を最適化しますが、その前に、サイトがページに必要なJavaScriptと CSSファイルだけを読み込むようにしています。
最も簡単な方法は、WordPressコーディングのベストプラクティスに従っているWordPressプラグインやテーマを使用することです。これらの開発者は、必要なときだけスクリプトを読み込みます。
しかし、プラグインやテーマの開発者がこの決定を下せないこともある。より良いユーザーエクスペリエンスのために、スクリプトをグローバルにロードすることもあります。
WPBeginnerでは、社内の開発者がこの問題を調査しています。不要なスクリプトやCSSをデキューし、必要なところにエンキューします。
⚠️注意：コーディングスキルのない初心者レベルのユーザーにとって、これを実現するのは難しいでしょう。これを行おうとすると、サイトが壊れてしまったり、予期せぬ動作を引き起こす可能性があります。
しかし、WordPressのコーディングの基本を理解しているユーザーであれば、以下の手順でこれを行うことができる。
まず、不要なスクリプトを見つける必要があります。どのスクリプトやスタイルシートが読み込まれているかを調べる最も簡単な方法は、クエリーモニター・プラグインを使うことです。
ページに読み込まれている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は素早く処理されます。
しかし、これによるパフォーマンスの向上はそれほど大きくなく、小規模なWordPressサイトを持つほとんどのユーザーにはお勧めできません。
6.その他のパフォーマンス向上
上記のヒントとは別に、ページの読み込み速度を向上させるためのベストプラクティスも用意しています。
あなたのサイトに簡単に導入できるものをいくつか紹介しよう：
- 最適化された画像– 私たちのチームは、アップロードするスクリーンショット、画像、メディアを高度に最適化し、ファイルサイズを小さくすることを保証します。WordPressの画像を最適化する方法については、こちらのガイドをご覧ください。
- Cronジョブの最適化– Cronジョブは、更新のチェックやスケジュールされた投稿の公開などのためにバックグラウンドで実行されるスケジュールされたWordPressタスクです。WordPressプラグインは独自のバックグラウンドプロセスを追加することもできます。クーロンジョブを最適化することで、サーバーの負荷を軽減し、パフォーマンスを向上させることができます。
- 外部HTTPリクエストの削減– 使用しているプラグインやツールの中には、外部ドメインからファイルを読み込む必要があるものがあります。これらのリクエストが多すぎると、ページの読み込み時間が長くなります。これを解決するには、プラグインのCSSファイルとJavaScriptを無効化する方法のチュートリアルをご覧ください。
WordPressのスピードとパフォーマンスに関する完全ガイドでは、これらの方法やページの読み込み時間を改善するためのその他の戦略について詳しく説明しています。
この投稿で、あなたのサイトのページ読み込み速度を上げる方法についてご理解いただけたでしょうか。また、私たちのメールリストの増やし方や、オーガニックなトラフィックを増やすためのWordPress SEOガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
ご質問やご提案がおありですか？ディスカッションを始めるためにコメントを残してください。