この記事はAhrefs公式ブログの日本語訳です。
原文：How to Speed Up Your WordPress Website in 20 Minutes
（著者：Joshua Hardwick / 原文の最終更新日：October 22, 2020）
※フルスピード註：この記事は2020年10月22日時点の記載をもとに翻訳しています。Ahrefs公式ブログの記事は今後追記・再公開されることがありますことをご了承ください。
ページスピードが重要であることは誰もが知っています。デスクトップでもモバイルでもGoogleのランキング要因であることが確認されており、ユーザーエクスペリエンスに影響を与え、収益に直接影響を与えます。
しかし、ワードプレスのウェブサイトが遅いというのはよくある問題です。
これは、PageSpeed Insightsの私のページのモバイルスコアです。
最適化前
サイト全体をAhrefsのサイト監査にかけると、全ページの読み込み時間が表示されます。
平均読み込み時間は570msで、どのページも非常に遅いです。
最適化前
ページスピードの最適化を20分ほど行った後の同じページがこちら：
最適化後
サイト監査の残りのページ：
最適化後
その違いは時間を問わず存在します。PageSpeed Insightsのスコアはほぼ完璧で、全てのページが非常に高速に読み込まれます。
このガイドでは、いくつかの簡単でシンプルなステップを通じて、私がどのようにこれを実現したかを具体的に紹介します。
重要
以下の推奨される最適化の多くは、WordPressウェブサイトを高速化するための有料プラグイン、WPRocketを使用しています。可能な限り無料の代替プラグインをリストアップしましたが、プラグイン同士が競合して問題を引き起こすことがあることに注意することが重要です。本番サイトに変更を加える前に、必ずステージング環境でサイトへの影響をテストする必要があります。ステージングサイトのセットアップ方法についてはこちらをご覧ください。
ステップ1.使用していないプラグインを削除する
WordPressウェブサイトが新しくない場合、長い間使用していないプラグインが多くインストールされているかもしれません。これらの中にはページ速度に悪影響を及ぼすものもあるため、まずは不要なものは無効にし、アンインストールすることが価値があります。
ただし、注意が必要です。必要性が不明確なものはそのままにしておく方が良いでしょう。
ステップ2.DNSプロバイダーをCloudflareに切り替える
ェブサイトは、インターネットに接続されたサーバー上のファイルです。そして、インターネットに接続されたデバイスは全てIPアドレス（例：123.123.12.1）を持っています。
しかし、IPアドレスを覚えるのは難しいため、ドメイン名はDNS（Domain Name Systemの略）を使用してIPアドレスに関連付けられます。これは実質的にウェブの電話帳のようなものです。ウェブブラウザにドメイン名を入力すると、DNSルックアップが行われ、サーバーのIPアドレスが検索されます。
ただし、問題なのはほとんどの人がドメインレジストラの無料DNSプロバイダーを使用していることです。
こうした場合、Cloudflareのような高速なDNSプロバイダーに切り替えることを検討してみてください。
手順は簡単です。無料のCloudflareアカウントを作成し、「サイトを追加」をクリックし、ドメイン名を入力してボタンをクリックするだけです。
このような場合は、Cloudflareのようなより高速なDNSプロバイダーに切り替えてください。
手順は簡単です。無料のCloudflareアカウントを作成し、「サイトを追加」をクリックし、ドメイン名を入力してボタンをクリックするだけです。
無料プランを選択し、”プランの確認 “をクリックします。
Cloudflareは、続行する前にDNS設定を確認する機会を提供します。
警告がなければ、通常は続行しても問題ありません。
これで、あとはドメインレジストラとネームサーバーを交換するだけです。レジストラによってやり方が異なるので、やり方がわからない場合は遠慮なくサポートに尋ねてください。
Googleドメインを使っている場合の手順は以下の通りです：
ステップ3.キャッシュプラグインをインストールする
キャッシュとは、ファイルを一時的に保存して、訪問者に効率よく提供するための仕組みです。
大きく分けて2つのタイプがあります：
- ブラウザキャッシュ：ロゴのような一般的なファイルをユーザーのハードドライブに保存し、何度も訪問する際に再ダウンロードする必要がないようにする。
- サーバーキャッシュ：完全に構築された「静的」バージョンのページをサーバーに保存し、新しい訪問者がリクエストするたびに再構築する必要がないようにする。
WP Rocketはキャッシュを有効にするのが簡単です。購入してインストールし、有効にするだけです。基本的なキャッシュ（ブラウザとサーバー）はデフォルトでオンになっています。もしサイトがモバイルフレンドリーであれば、キャッシュ設定に進み、モバイルデバイス向けのキャッシュも有効にするオプションにチェックを入れてください。
無料のオプションをお探しですか？W3 Total Cacheをお試しください。
ステップ4.コードを最小化する
ファイルサイズを小さくするために、コードから空白とコメントを削除します。ファイルサイズが小さくなることで、読み込み時間が短縮されます。
WPRocketを使用している場合は、設定でCSSとJavaScriptを最小化するチェックボックスにチェックを入れてください。
WPRocketを使用していない場合は、Autoptimizeをインストールして有効にしてください。
ただ、本番デプロイする前に、これがウェブサイトにどのような影響を与えるかを必ずテストする必要があることを知っておいてください。特にJavascriptに関しては、最小化は壊れたコードにつながる可能性があります。
ステップ5.CSSファイルとJavaScriptファイルを結合する
ほとんどのWordPressウェブサイトには、複数のCSSファイルとJavaScriptファイルが含まれています。テーマ用のものもあれば、プラグイン用のものもあり、カスタム用のものもあるかもしれません。
これらのファイルを組み合わせることでスピードアップできるかもしれませんが、サーバーの設定次第です。
- HTTP/1.1では、CSSファイルとJavaScriptファイルは連続してロードされます。つまり、1つのファイルが完全に読み込まれてからでないと、次のファイルの読み込みは開始されません。
- HTTP/2では、ファイルは同時にロードされます。つまり、複数のCSSやJavaScriptファイルが同時に読み込みを開始することができます。
サーバーがHTTP/1.1を使用している場合、ファイルを結合すると、読み込むファイルが少なくなるため、処理速度が速くなります。 HTTP/2を使用している場合、ファイルを結合しても、ファイルが同時に読み込まれる可能性があるため、必ずしも大きな違いはありません。
あなたのサイトがどのバージョンを使用しているかを確認するには、Key CDNのテスターにあなたのドメインを接続してください。
HTTP/2がサポートされていない場合は、CSSとJavaScriptファイルを組み合わせる価値があります。
WPRocketでこれを行うには、設定の「JavaScriptファイルを結合する」と「CSSファイルを結合する」にチェックを入れましょう。
Autoptimizeを使用している場合、ファイルを「集約」するチェックボックスが2つあります。これらのチェックボックスは、時にあなたのサイトの状況を「壊す」可能性があることを知っておいてください。また、事前にキャッシュをクリアし、シークレットウィンドウで変更をチェックすることを忘れずに。そうしないと、変更が反映されない場合があります。
ステップ6.レンダリングをブロックするリソースを取り除く
レンダリングは、コードを目に見えるウェブページにするプロセスです。
ウェブページが表示される際、すべての部分が完全に読み込まれる必要はありません。
そのため、「画面の上側」に表示されるコンテンツの読み込みを優先することが重要です。
これは、”below the fold “コンテンツに必要な、重要でないCSSやJavaScriptファイルの読み込みを後回しにすることで実現できます。WPRocketを使用してこれを実現するには、「JavaScriptを遅延読み込み」や「CSSの配信を最適化」のオプションにチェックを入れることです。
WPRocketを使用していない場合は、2つのプラグインが必要です：AutoptimizeとAsync JavaScriptです。
Autoptimizeの設定で、「CSSをインライン表示して遅延読み込み」にチェックを入れます。そして、Async JavaScriptの設定で、「JavaScriptを非同期読み込み」を有効にします。
以前、PageSpeed Insightsで「レンダリングを妨げるリソースを削減する」という問題が表示された場合、通常はこれで問題が解決します。
ステップ7.画像とビデオを遅延ロードする
レイジーローディング（Lazy loading）は、画像や動画の読み込みを画面に表示されるまで延期することで、ページの表示速度を向上させます。WordPress 5.5以上を使用している場合、画像の遅延読み込みはデフォルトで有効になっていますが、動画は有効になっていません。
WPRocketを使用している場合は、LazyLoad設定の「iframeと動画を有効にする」にチェックを入れることで解決します。
WPRocketを使用していない場合は、無料のLazy Load for Videosプラグインを使用すると、ほぼ同じことができます。
ステップ8.Googleフォントを最適化する
多くのテーマはGoogle Fontsを使用しており、これらのフォントは誰かがあなたのウェブサイトにアクセスするたびにGoogleのサーバーからダウンロードする必要があります。サーバーはHTTPリクエストを行い、CSSファイルをダウンロードし、スタイルシートで参照されている場所からフォントをダウンロードする必要があるため、時間のかかるプロセスです。しかも、これをページ上のすべてのフォントに対して行わなければいけません。
もしWPRocketを使用している場合、それは自動的にGoogle Fontsのリクエストが最適化されます。そうでない場合は、Swap Google Fonts Displayを試すことも良いスタートです。
ステップ9.プリロードを有効にする
プリロードによって、必要不可欠なリソースを定義することができ、ブラウザは読み込むべきファイルの優先順位を知ることができます。
例えば、あなたのコードが次のようなものだとしよう：
<html> <head> <script src="somefile.js"></script> <link rel="stylesheet" href="/style.css"> </head> <body> コンテンツ</body> </html>
このコードに基づくと、階層の関係上、JavaScriptファイルが最初にロードされる必要がある。なぜなら、CSSファイルはJavaScriptコードよりも重要であることがほとんどだからだ。
これを解決する最も簡単な方法は、次のようにコードを1行追加することだ：
<link rel="preload" href="/style.css" as="style">
これは、階層に関係なく、JavaScriptファイルよりもCSSファイルを優先するようにブラウザに指示すしています。
コードを編集して手動でプリロード属性を追加することもできますが、何をやっているのかわからない限り、面倒で混乱する可能性があります。WPRocketをインストールする方がずっと簡単です。
ステップ10.CDNを使う
コンテンツ・デリバリー・ネットワーク（CDN）は、世界中に分散されたサーバーのグループです。これらの各サーバーは、あなたのウェブサイトのコピーを保存しているため、ユーザーがウェブページをリクエストする際に素早く接続することができます。
例えば、ウェブホストのサーバーがイギリスにあるとします。もし誰かが米国からあなたのサイトを訪問し、CDNを使用していない場合、その人のデバイスとサーバー間の接続は遅くなります。もし誰かが米国から訪問し、CDNを使用している場合、その人のデバイスは最も近いサーバーに接続するため、接続が速くなります。
CNSプロバイダーはたくさんあるので、1つ選んでWPRocketで有効にし、CNAMEを入力すれば良いだけです。
ステップ11.画像を最適化する
レイジーローディングは、画像に関連する多くの問題を解決してくれますが、ページ上部に表示される画像には影響がありません。画像が大きいほど読み込み時間に悪影響を及ぼすことがあります。
この問題を解決するために、Shortpixelのようなプラグインを使用して画像を圧縮することができます。プラグインをインストールして有効化し、設定でAPIキーを入力して「保存して一括処理に移動」をクリックし、その後「最適化の再開」をクリックするだけです。
もしこれらの画質が低すぎると感じたら、設定から圧縮タイプを光沢またはロスレスに変更してください。
結果
これらの最適化がページスピードにどのような影響を与えたか、いくつかの人気ツールで見てみましょう。
以下は、GoogleのPageSpeed Insightsにおける私の投稿の前後の数値です：
下記はGTMetrixによるもの：
以前は、ページが完全にロードされるのに5.9秒、ページサイズは1.89MB、リクエスト数は67であった。最適化後、3つの指標はすべて下がっています。ページサイズは695キロバイト、フルロード時間は4秒、リクエスト数は50%近く減少しています。
Ahrefsのサイト監査でウェブサイトの全ページをチェックすると、平均読み込み時間と95パーセンタイルの読み込み時間が約40%改善されていることがわかります。
最終的な感想
上記のすべてが私のサイトでうまくいきましたし、他のサイトでも成功しました。ただし、WordPressの設定はそれぞれ異なることを覚えておくことが重要です。プラグインの数が多い、テーマが使いにくい、ホスティングの速度が遅い、サードパーティのトラッキングスクリプトが多いなど、ウェブサイトの速度低下の要因は様々です。
これらの最適化を実施してもページ速度が改善されない場合、サイトのカスタム調整が必要な可能性があります。そのため、開発者やページ速度の専門家に助けを求めて、より詳細に診断してもらうことが価値があるでしょう。
また、特定の問題についての詳細をお知りになりたい場合は、ページ速度ガイドをご覧ください。
記事を書いた人
Joshua Hardwick
Ahrefs のコンテンツ責任者（わかりやすく言うと、私たちが公開するすべてのブログ記事が素晴らしいことを保証する責任者です）。
コメント