このガイドでは、いくつかのツールをセットアップすることで、WordPressサイトを大幅に高速化する方法をお見せします。
ウェブサイトの読み込み時間を5倍以上速くする方法を学びましょう。より良いユーザーエクスペリエンスと検索エンジンのランキング向上を目指しましょう💪
サイトのページ読み込みを短くし、サイトの速度を上げることで、サイトのユーザーエクスペリエンスは飛躍的に向上します。訪問者はより長く滞在し、最初のページを開いた後にサイトを離れるユーザーの数は以前よりも少なくなります。このメトリックはいわゆる直帰率としてすでに聞いたことがあるかもしれません。
さらに良いことに、サイトの速度はGoogleのランキング要因であり、これはあなたのサイトがしばらくするとGoogleで高い検索ランキングを得られる可能性があることを意味します。これにより、より多くのユーザーがあなたのサイトを見つけ、より多くのトラフィックが得られます。
WordPressサイトが遅い理由はいくつかあります。
最も一般的な理由は「キャッシュなし」とページサイズが大きすぎることです。
これら2つの主要な理由に加えて、サイトの速度に影響する他のいくつかの変数があります：
- 多くのインストール済みプラグイン
- サーバーの構成
- 1つまたは複数のプラグインの悪いコード。
- テーマの悪いコード
- 遅いネットワーク接続
- 遅いサーバー応答
始める前に、推奨されるすべてのアクションがサイトの読み込み時間を改善できるとは限らないことを覚えておくことが重要です。あるアクションは他のアクションよりもうまく機能する可能性があり、いくつかはサイトの読み込み時間にわずかにしか影響しません。
Contents
動画：WordPressを高速化する方法
WordPressを高速化する方法に関するこの記事を読む代わりに動画を見たい場合は、この記事全体を動画として見ることができます：
WordPressを高速化するために使用するツール
- ShortPixel Image CDN
- WP Super Cache
- Autoptimize
- wp-staging.com
- Pingdom
- Google PageSpeed Insights
- GiftofSpeed GZIP Test
サイトのページ速度をベンチマークする
いくつかのベンチマークテストから始めて、自分のサイトの速度の概要と理解を得ましょう。
サイトの速度をベンチマークおよび分析するには、無料のオンラインページ速度ツールPingdomとGoogle PageSpeedInsightsを使用できます。
これらの結果は、WordPress 5.6、いくつかの人気のあるプラグイン、テーマ「Astra」の無料版を使用したサンプルサイトのものです。高速な読み込みのWordPressサイトとはほど遠いものです：
キャッシュを有効にする
最初のステップ、キャッシュプラグインをインストールすることから始めましょう。
キャッシュプラグインは、サイトの表示HTML出力を一時ファイルとしてサイトに保存します。プラグインやテーマからコードを実行することは、サーバーが実行のために多くの計算を行わなければならないため、非常に時間がかかります。
キャッシュを使用すると、これらの計算は訪問者がサイトを開いたときに一度だけ実行する必要があります。キャッシュプラグインは最初に、特定のコンテンツの既存のキャッシュがあるかどうかを確認します。
コンテンツが既にキャッシュされている場合、すべてのコードを再度実行する代わりに、事前に計算されたHTML出力を直接出力します。すると、サーバーはサイトをより速く読み込むためにより多くの空きリソースを持ちます。キャッシュプラグインをインストールし、正しく調整するだけで、サイトを10倍以上速くすることができます。
このガイドに従う前に、このWordPress高速化ガイドのすべての手順を安全にテストするために、サイトのクローンを作成することをお勧めします。以下の手順は簡単に従えますが、プラグインの1つやテーマがこれらのパフォーマンス調整とうまく機能しない可能性があります。
そのため、本番サイトで何か壊れる前に、まずテスト目的ですべての変更をサイトのクローンに適用してください。すべてうまくいけば、その後、本番サイトに同じ最適化を適用できます。
サイトをすばやくクローンするには、無料のプラグインWP STAGINGを使用できます。シンプルなクリックでクローンを作成でき、安全な環境で可能なすべての高速化最適化を試すことができます。
WP Super Cache.をお勧めします。このプラグインはAutomatticによって開発されています。これはWordPressのコア開発を担当している同じ会社です。プラグインは無料で強力で、動作の仕組みを理解していればシンプルです。
このプラグインは多くのオプションで、以前聞いたことがあるかもしれない人気のWP ROCKETなどのプレミアムプラグインと同じくらい強力です。
WP ROCKETはよりユーザーフレンドリーなインターフェースを持ち、初心者にとって使いやすいかもしれません。心配しないでください。あなたの手を取って、プレミアムキャッシュプラグインを使うのと同様の結果を得るために必要なすべてのクリックをお見せします。
つまり、同じ速度の結果を無料で得られます！
プラグインストアに行き、WP Super Cacheを検索します。
WP Super Cacheプラグインをインストールしてアクティブにした後、設定を行いましょう。
「Easy」セクションで「caching on」を選択してキャッシュをアクティブにすることも可能ですが、この時点では、ここで設定をより正確に構成できるため、直接「Advanced」エリアに移動します。
- 「Enable Caching」チェックボックスをアクティブにします。
- キャッシュ配信方法としてSimple。
- ログイン中の訪問者のキャッシュを無効にします。
- GETパラメータ付きページをキャッシュしません。 ショッピングカートなど、ユーザーごとに異なる動的ページが決してキャッシュされないようにします。
- 訪問者により速く配信するためにページを圧縮し、
Gzip圧縮をアクティブにします。これによりサイトが大幅に高速化されます。一部のサーバーはすでにデータを圧縮しているため、オプションを開始するときにエラーが発生することがあります。サーバーがすでにgzip圧縮を使用しているかどうかを確認するには、このgzipパフォーマンステストを使用できます。 - Cache rebuild,
新しいコンテンツのためにキャッシュが更新されている場合でも、キャッシュされたコンテンツをユーザーに表示します。これは、訪問者がキャッシュの初回生成を除いて、キャッシュされていないコンテンツを見ることがないことを意味します。 - 304 Browser Caching,
ユーザーのブラウザにすでにキャッシュされたコンテンツがある場合、サーバーに接続する代わりにブラウザキャッシュからサイトを読み込むようユーザーに指示します。これによりサーバーのCPU負荷をさらに下げることができます。
それから「Advanced」タブまで下にスクロールします。
- モバイルデバイスサポートをアクティブにします。シンプルなクリックで十分ですが、wp-super-cacheは、デザインによっては追加のプラグインをインストールする必要があるかもしれないと指摘しています。標準のWordPressテーマを使用しているため、これは不要です。このオプションをアクティブにした後、サイトがモバイルデバイスで正常に動作する場合は、使用しても問題ありません。
- 投稿またはページが公開または更新されたとき、 すべてのキャッシュファイルをクリアし、新しいコンテンツを表示できるようにキャッシュがクリアされることを確認します。
最後に、キャッシュプラグイン設定の最後のステップは、「Preload」タブの下にあるPRELOADINGオプションです：
プリロード設定により、プラグインはサイトのすべての投稿とページを定期的にキャッシュします。各キャッシュ更新の間隔の時間を設定できます。この時間間隔は非常に重要な設定です。
共有ホスティング環境では、最適には1日1回 – 1440分ごとに設定する必要があります。
サイトを1日2回更新する場合、各キャッシュ更新間の時間間隔を720分に設定できます。この設定により、キャッシュ全体が1日2回更新されます。このような低い更新時間は、サーバーに追加の負荷をかける可能性があります。
共有ホスティング環境では、より低い値を使用しないことをお勧めします。サーバーリソースの過剰使用としてカウントされる可能性が高いためです。
ただし、VPSまたは専用サーバーをご利用の場合は、更新レートを60分まで低く設定できます。
サイト上の投稿とページの数が、各プリロードキャッシュ更新操作に必要なリソースに影響することを知っておく価値があります。高トラフィックサイトの専用サーバーの最適な更新時間は2時間です。
関連するチェックボックスにチェックを入れ、キャッシュ更新間隔を1440分に設定しました。あなたは自由に任意の値を選択できます！
CSS、JavaScriptファイル、画像を最適化する
JavaScriptファイルとCSSファイルを結合し、画像とHTML出力を最適化するなどの次の調整には、別のプラグイン「Autoptimize」を使用します。これはWordPressプラグインリポジトリからインストールできます。
CSSファイルとJavaScriptファイルを集約するかどうかは、主にサーバーの設定方法によって異なります。
すべてのサイトはHTTP 1.1または新しいHTTP 2プロトコルを介してファイルを読み込みます。
HTTP 1.1では、すべてのファイルが次々にダウンロードされます。たとえば、サーバーが次のファイルを送信し始める前に、1つのファイルを完全に訪問者にロードする必要があります。
ダウンロードするファイルの数を減らすために、Autoptimizeはそれらのファイルを結合できます。10個のCSSファイルを送信する代わりに、サーバーは1つのファイルだけをダウンロードすればよいため、結果として総読み込み時間が短縮されます。結合されたCSSまたはJSファイルの合計ファイルサイズが大きい場合でも、各リクエストには追加のオーバーヘッドが伴います。リクエストがサーバーへの接続を確立するのに必要な追加時間など。だからこそ、複数のファイルを読み込むよりも、1つの大きな単一ファイルを読み込む方が速いことがあります。
したがって、サーバーがHTTP 1.1で動作している場合、サイトのすべてのCSSとJSファイルを集約することをお勧めします。
逆に、HTTP2プロトコルは複数のファイルを同時にダウンロードできます。それがサーバーの設定である場合、ファイルの集約を有効にするのは逆効果になる可能性があります。HTTP2は通常、1つの大きなファイルではなく、複数の小さなファイルを同時にダウンロードできるため、はるかに高速です。
そのため、CSSおよびJSファイルを結合してもメリットがないことが多く、HTTP2を使用している場合はサイトを遅くする可能性さえあります。安全のため、両方のオプションをテストして、どちらの設定が最良の結果をもたらすかを判断できます。
サイトがHTTP 2を使用しているかどうかを確認するには、KeyCDN http2 serviceを使用してください。
JavaScriptを最適化する
「JS, CSS & HTML」タブを選択します。
Optimize JavaScript Codeをアクティブにします
サーバーがHTTP 1を使用している場合：
- Aggregate JS filesをアクティブにして、ページ速度ベンチマークサービスが推奨するようにJavaScriptファイルを結合します
オプションを無効にする：
- Force JavaScript in <head
- Exclude scripts from Autoptimize
- Add try-catch-wrapping.
JavaScriptファイルを集約していてウェブサイトの問題が発生した場合のみ、これらのオプションをアクティブにしてください。そうすれば、特定のJavaScriptファイルを結合プロセスから除外できます。
サーバーがHTTP 2を使用している場合：
- Aggregate JS Filesを無効にする
JavaScriptを最適化するとサイト上で何かが壊れる可能性があります！本番サイトに調整を加える前に ステージングサイト でこのステップをテストすることを強くお勧めします。
CSSファイルを最適化する
次のステップはCSSファイルの最適化です。
- Optimize CSS Codeをクリックします。
サーバーがHTTP 1.1を使用している場合は、オプションをアクティブにします：
- Aggregate CSS-files
- Aggregate inline CSS.
これによりページ速度スコアがさらに改善されます。これは、JavaScriptファイルとインラインJavaScriptファイルを集約するのと同じことですが、CSSのみです。サーバーがHTTP2を使用している場合、このオプションは無効のままにしてください！
サーバーがHTTP1またはHTTP2を使用している場合：
- Activate Generate data: URIs for images – これによりHTTPリクエストが減る可能性があります。ただし、CDNを設定してそれを通じて画像を提供した後はそうではありません。CDNを使用する場合、それを無効にする必要があります。CDNを使用することで、ファイルは世界中のいくつかのデータセンターでキャッシュされます。
- Inline and Defer CSSを無効にする
- Exclude CSS from Autoptimize:
CSSファイルを集約していて、サイトで視覚的な問題が発生した場合のみ使用してください。そうすれば、特定のCSSファイルを結合プロセスから除外できます。
HTMLを最適化する
「Optimize HTML code」オプションをアクティブにします。
HTMLファイルを最適化すると、コードからスペースとコメントが削除されます。これによりファイルサイズが縮小されます。そして、通常、小さいファイルは大きいファイルよりも速く読み込まれます。
HTML最適化前：
HTML最適化後
編集する最後のセクションは、AutoptimizeのMISCオプションです。
最初の4つのオプションを有効にします：
- Save aggregated script/CSS as static files.
- Minify excluded CSS and JS files.
- Enable 404 fallbacks.
- Also, optimize for logged-in editors/administrators.
ログインしていて、Elementorのようなページビルダーや他のバックエンドプラグインで問題が発生している場合は、最後のオプションを無効にしてください。
Google Fontsを最適化する
「Extra」タブに進みましょう。
Google Fontsは外部リソースから取得されるため、読み込み時間を遅くする可能性があります。私は「combine and link in head」オプションを好みます。フォントの読み込みを見ることなく、読み込み時間を改善できるからです。EU圏内にいる場合、これらの外部リソースはもはやgoogleから読み込まれないため、サイトはGDPRにも準拠します。
ただし、最後のGoogle Fontオプション「combine and load fonts asynchronously with webfont.js」もテストして、ページ速度ツールでどちらがより良い結果をもたらすかを確認してください。
次に、「remove Emojis」を有効にします。Emojisを担当するjavascriptは肥大しており、良い読み込み時間には有益ではないためです。
画像を最適化する
Autoptimizeは、ShortPixelという統合された第三者サービスを使用して画像をより速く読み込むのにも役立ちます。これを試してみたい場合は、Imagesセクションに移動してください。
「Optimize Images」を選択します。サイト上のURLはShortPixelのCDNを指すように変更されます。
Shortpixelは月100枚の画像を無料で縮小/適応します。小規模または中規模のウェブサイトをお持ちの場合はこれで十分かもしれません。
Image Optimization Quality – 「You can test compression levels here.」をクリックして、圧縮と品質の適切なバランスを見つけることができます。
shortpixel.comに導かれ、自分の画像の1つをアップロードして、ShortPixelの各圧縮レベルの違いを視覚的に見ることができます。
あなたにとって最適なのはどれですか？
- Lossy: 最大の圧縮、最大の品質損失。
- Glossy: 中程度の圧縮、わずかな品質損失。
- Lossless: 低圧縮、最小限の品質損失。
Autoptimizeに戻り、設定を入力してください！
- Load WebP or AVIF in supported browsers – これを有効にすると、AutoptimizeはWebP形式で画像を提供します。これにより、品質をあまり損なうことなく、画像をさらに圧縮できます。
- Lazy-Load images – これも有効にする必要があります。これによりリクエストが減り、より速い読み込み時間のためにGoogleによって推奨されています。
Cloudflareについてはどうですか？
他の多くのチュートリアルがさらなる最適化のために推奨しているCloudflareのようなCDNやDNSサービスについて、なぜ言及しないのか疑問に思うかもしれませんか？
簡単な答えは、DNSサービスを切り替えることがいくつかの潜在的な欠点を伴うため、ほとんどのサイトには必要ないということです。
たとえば、CloudflareのようなDNSベースのCDNサービスに切り替えると、サイトとそのトラフィックの制御を手放すことになります。私はCloudflareのDNSサービスで実行されているサイトによく出会います。そこではサイトにアクセスする前にCAPTCHAを記入する必要があります。このようなCAPTCHAは、訪問者の高い直帰率につながり、検索ランキングに悪影響を与える可能性があります。DNSサービスはトラフィックの一部を他の場所にリダイレクトする可能性もあり、すぐには気づかないでしょう。だから、第三者のDNSサービスにドメインの制御を渡したい場合は、これを念頭に置いてください。
私たちが適用した最適化の後、あなたのサイトはすでにGoogleのランキングを制限しないほど高速ですので、この記事ではCloudflareサービスはカバーしません。
これを別の見方で見て、Cloudflareの使用について別の意見をお持ちの場合は、お知らせください。
関連記事
- WordPressデータベースを優れたパフォーマンスのために最適化する方法
- phpMyAdminでデータベーステーブルを修復および最適化するチュートリアル
- WordPressが遅い理由とその修正方法
- ブラウザのキャッシュとCookieをクリアする方法
