WordPress エージェンシーの秘密兵器として WP Rocket を使用する

PageSpeed Insights で 90% 以上のスコアを獲得した高速で効率的な WordPress Web サイトを作成できると言ったらどうしますか? さらに良いことに、モバイル デバイスでこれらの印象的なスコアを獲得し、すべてのプロジェクトで Core Web Vitals に合格できると言ったらどうでしょうか?

高速なテーマ、優れたホスティング、そして最も重要な WP Rocket を使用して、クライアント プロジェクトに対して一貫してこれを行います。 WP Rocket の使用は、WordPress エージェンシーの秘密兵器です。

しかし、別の開発者や代理店からプロジェクトを継承し、パフォーマンスを改善する必要がある場合はどうすればよいでしょうか? この記事では、いくつかの一般的なパフォーマンスのボトルネックを確認し、素晴らしい結果を得るために WP Rocket で行うことができる改善を提案します.

私たちの背景と WordPress の経験

私たちの代理店である Clio Websites は、2007 年以来、クライアントが美しい新しい Web サイトを立ち上げるのを支援してきました。

私たちは 2013 年から WordPress を使用しており、Web サイトのパフォーマンスを損なう可能性のあるほとんどすべてのものを確認して解決してきました。 非効率的なテーマから、大きな画像ファイルや同じ Web サイト上の複数のビルダーまで。

私たちのコア サービスの 1 つは、クライアントがウェブサイトのパフォーマンスを向上させるのを支援することであり、WP Rocket はその中で重要な役割を果たしています。 カスタム テーマ、ブロック エディター (Gutenberg)、および Elementor や WP Bakery などの一般的なページ ビルダーを使用するプロジェクトに WP Rocket を使用し、優れた結果を得ています。 これが、WP Rocket を WordPress エージェンシーの秘密兵器と呼ぶ理由です。

キャッシング、縮小、およびアセットの遅延 – 優れた Web サイト パフォーマンスを達成するための鍵

すぐに使用できるアーキテクチャーのため、WordPress はパフォーマンスに関して少し特別な配慮が必要です。 通常の WordPress 実装では、SQL データベースに頻繁にアクセスして情報を検索するため、ユーザーが Web サイトを操作しているときにサーバーへの頻繁なラウンドトリップが発生します。

コンテンツ管理システム (CMS) としての WordPress の最大の利点であるこのセットアップの動的な性質は、最大の欠点でもあります。

キャッシングの仕組み

WP Rocket のようなキャッシュ プラグインは、データベースとバックエンド サーバーを往復する代わりに、Web サイトの静的バージョンを作成し、訪問者に表示します。

ウェブサイトに変更を加えたり、新しいコンテンツを追加したりすると、WP Rocket はそのバージョンをキャッシュし、最新のファイルをユーザーに表示します. この魔法のプラグインの仕組みについて詳しくは、WP Rocket の機能をご覧ください。

縮小化によってパフォーマンスが向上する方法

縮小は、Web サイトのパフォーマンスを向上させるもう 1 つの重要な機能です。 このプロセスにより、ウェブサイトのファイルから不要な文字やスペースがすべて削除され、人間が読めるようになり、それらのファイルのより効率的なバージョンが作成されます。

コンピュータはファイルを開いて表示するためのスペースを必要としないため、ファイルの読み取りとレンダリングがはるかに高速になります。 ファイルを縮小すると、Web サイトの速度が向上しますが、問題が発生する場合があるため、徹底的にテストする必要があります (記事の今後のセクションで説明します)。

アセットの遅延と遅延とは?

必要になるまで Web サイトのアセットの読み込みを遅らせることは、まさにそのように聞こえます。 WP Rocket を使用すると、ユーザーがそのセクションにスクロールするか、Web サイト機能の操作を開始するまで、ファイルまたは画像の読み込みを遅延または延期できます。 これにより、訪問者が Web サイトにアクセスしたときに表示する必要がある最初の部分のみを Web サイトに読み込ませることができるため、Web サイトのパフォーマンスを大幅に向上させることができます。

キャッシングとミニフィケーションについてもう少し理解できたので、クライアントで作業するときによく見られる問題に飛び込み、WP Rocket を使用してそれらを修正する方法を示しましょう。

4 つの一般的な Web サイトのパフォーマンスの問題

私たちは、クライアントがウェブサイトのパフォーマンスを向上させるように構築し、支援してきた多くの経験を持っています.

他の開発者から継承した Web サイトを操作する際に見られる最も一般的な問題は次のとおりです。

1. 圧縮されていない大きな画像
2. キャッシュ プラグインの設定ミス、またはキャッシュ プラグインがない
3. 遅延または遅延機能のない非圧縮アセット (CSS および JavaScript ファイル)
4. 非効率なテーマとプラグイン

パフォーマンスの問題を特定する方法

Web サイトのパフォーマンスの問題を診断して解決するために使用できる無料のツールが多数あります。 私たちのお気に入りのツールは、PageSpeed Insights、GTmetrix、および WebPageTest です。

3 つすべてを使用することを恐れないでください。問題の解決に関する独自の洞察と提案が得られるからです。 私たちの意見では、PageSpeed Insights は最も重要で信頼できるツールです。 これは、Google Search Console で特定されたパフォーマンスの問題をトラブルシューティングおよび修正するために Google が推奨するツールです。

次のいくつかのセクションでは、最も一般的なパフォーマンスの問題とその修正方法について掘り下げます。

1. 非圧縮画像

圧縮されていない大きな画像を使用することは、Web サイトの読み込み速度に悪影響を与える最も一般的な問題です。 2022 年の Web サイトの平均サイズは、デスクトップ版で約 2.3MB、モバイル版で約 2MB です。

Web サイトで複数の高品質の画像を使用している場合、Web サイトの平均サイズをすぐに超えて速度が低下する可能性があります。 これにより、ウェブサイトの読み込みが遅くなり、テキストの後に画像が読み込まれ、1990 年代半ばの雰囲気のウェブサイトができあがります。

サイトにアップロードする前に画像を圧縮することが重要です。 Imagify などのツールを使用して、このプロセスを自動化できます。 Web サイトで画像を圧縮して提供する方法に関するその他の提案については、この記事を参照してください。

2.キャッシュプラグインの設定ミスまたは欠落

WordPress はクライアント サーバー アーキテクチャを使用するため、キャッシュの有効化と構成は必須です。 キャッシュ プラグインを使用すると、WordPress Web サイトの所有者が経験する多くのパフォーマンスの問題を解決できます。

このステップを完全に見逃しているサイトがたくさんあります。 これにより、Web サイトの読み込みに永遠に時間がかかる可能性があり、特にモバイル デバイスでは、Web サイトのパフォーマンスに関してデスクトップ デバイスよりもさらに許容度が低くなります。

キャッシュ プラグインは複雑で、設定ミスを起こしやすい傾向があります。 これが、WP Rocket を好むもう 1 つの理由です。 設定は非常に簡単で、すぐに素晴らしい結果が得られるように設定されています。

3. 遅延機能のない非圧縮アセット

CSS や JavaScript (JS) ファイルなどの他の Web サイト アセットの圧縮は、適切なツールを使用すれば簡単で、優れた結果を生み出すことができます。 次のセクションでは、ウェブサイトのパフォーマンスを改善するためにそれを行う方法を紹介します.

パフォーマンスをさらに向上させるために、これらの同じアセットを組み合わせたり、遅延させたり、延期したりすることもできます。 これらの問題は、トラブルシューティングが少し難しい場合がありますが、GTmetrix などのツールが役立つ場所です。

GTmetrix には、Web サイトによって読み込まれているすべてのアセットを表示できるウォーターフォール チャートがあります。 圧縮と遅延がなければ、より多くの CSS および JS ファイルが読み込まれます。

注意: 圧縮と遅延の設定を有効にすると、Web サイトの特定のセクションや機能が壊れる場合があります。 各ステップで徹底的にテストしていることを確認してください。

4. 非効率なテーマとプラグイン

非効率的な WordPress テーマには、多くのスクリプト、肥大化したアセット、不適切なプログラミング手法が含まれている可能性があり、Web パフォーマンスに大きな影響を与える可能性があります. 主に高速で効率的なテーマ (Hello Elementor、GeneratePress、Astra など) を使用することをお勧めします。

WP Rocket のようなツールは、悪いテーマによって引き起こされる問題を軽減するのに役立ちますが、新しいプロジェクトを構築するときに高速テーマを使用することで、これらを完全に回避する方が簡単です.

不要なプラグインを避けることは、パフォーマンスに重点を置き、遅いサイトのトラブルシューティングを行う場合のもう 1 つの優れたアイデアです。 多くのプラグインをインストールすると、Web サイトの速度が大幅に低下する可能性があります。

使用するプラグインの数に関して厳格な規則はありませんが、必要以上に使用しないことをお勧めします。 すべてのプラグインが同じように作成されているわけではなく、他のプラグインよりも確実に優れているプラ​​グインもあります。 ウェブサイトのパフォーマンスを改善したいと考えているクライアントと協力するとき、私たちはできるだけ多くの不要なプラグインを排除しようとします.

WP Rocket を使用して 90% 以上のスコアを達成する方法

遅い Web サイトの使用を楽しんでいる人はいません。 特にモバイルデバイスではそうではありません。

クライアントの Web サイトで発生したパフォーマンスの問題を特定したら、WP Rocket を使用してそれらを解決し、モバイルで 90% 以上のスコアを獲得できます。

これがクライアントと代理店にとって何を意味するか

私たちは最近、クライアントが WP Rocket をインストールして構成するだけで、モバイルでのパフォーマンスを 54% から 97% に改善するのを支援しました。

クライアントのウェブサイトのコンバージョン、SEO、および訪問者の満足度がパフォーマンスによって向上するのを見てきました。 実際、調査によると、訪問者の半数以上が、読み込みに 3 秒以上かかる Web サイトを放棄します。

Google はまた、高速な読み込み速度がランキング要因であることを示しています。つまり、Web サイトが競合他社よりも高速であれば、Google 検索で上位にランクされるということです。

別の例では、WP Rocket を使用してモバイル パフォーマンスを 24% から 90% 以上に改善し、Core Web Vitals をパスできるようにしました (下のスクリーンショットを参照)。 パフォーマンスの問題が解決され、Google Search Console の速度低下エラーが解消された直後に、 SEO トラフィックが 55% 増加しました。

代理店として、WP Rocket Infinite プランを使用し、パフォーマンスを向上させるためにすべてのクライアント Web サイトに WP Rocket をインストールします。 これは、独自のプレミアムプラグインの購入を余儀なくされる可能性がある他の代理店よりも代理店を使用する利点として使用します.

私たちのクライアントは、市場で最高のプラグイン (Imagify や WP Rocket など) にアクセスできるという利点を享受しています。 WP Rocket を使用すると、プラットフォーム内のサイトを管理し、必要に応じて削除することも非常に簡単になります. ライセンスを使用しているすべての Web サイトがアカウントに表示され、ライセンスを使用する必要がなくなったサイトを簡単に削除または禁止することもできます。

次のセクションでは、WordPress Web サイトで使用する一般的な WP Rocket 機能について説明し、パフォーマンスを向上させ、モバイルで 90% 以上のスコアを獲得します.

1.キャッシュ設定

WP Rocket Cacheセクションで「モバイルデバイスのキャッシュを有効にする」を常にオンにします。 Google はモバイル デバイスでの Web サイトのパフォーマンスに基づいて速度パフォーマンスを判断するため、この設定は必須です。

モバイル デバイスのパフォーマンスの改善を優先します。これは実現が難しいためです。 モバイル デバイスで優れた結果が得られた場合、デスクトップ デバイスでも優れたパフォーマンスが得られます。

「キャッシュの寿命」設定も、パフォーマンスを向上させるために通常増加させるものです。 デフォルトは 10 時間です。つまり、10 時間ごとに Web サイトのキャッシュが完全に削除されます。

これは不要です。更新されたページは自動的に再生成され、WP Rocket によってプリロードされるため、通常はこの設定を増やします。

2.ファイルの最適化設定

ファイル最適化セクションは、WP Rocket の最も重要で印象的なセクションの 1 つです。 しかし、大きな力には大きな責任が伴います。

これらの設定を 1 つずつ有効にし、ブラウザーのキャッシュをオフにして Chrome シークレットで徹底的にテストして、Web サイトが壊れていないことを確認することをお勧めします。 壊れた場合は、特定の設定を元に戻すか、トラブルシューティングを行うことができます。

CSS の最適化

上部のセクションは CSS ファイルの変更と改善を処理し、下部のセクションは JavaScript ファイルの改善を処理します。

「CSS ファイルの縮小」機能をオンにすると、Web サイトの CSS ファイルからすべてのスペースと不要な文字が削除され、それらのアセットの読み込みが速くなります。 通常、この設定をオンにします。

ほとんどのサイトは HTTP2 をサポートするサーバーでホストされており、ファイルを結合するよりも個別にロードする方が効率的であるため、通常は CSS ファイルと JS ファイルの結合をオフにします。

CSS 配信の最適化も、PageSpeed Insights で警告が表示された場合に試すことができる優れた機能です。 上記の例でわかるように、この設定をオンにしておらず、この特定のクライアント サイトのモバイルで 97% を取得しています。

この設定をオンにすると、さらに改善が必要な場合に役立ちます。 この設定により、使用されていないすべての CSS が Web サイトから削除され、Web サイトがそれほど多くのコードを読み込んで実行する必要がなくなるため、より効率的になります。

上記の例でわかるように、この機能を徹底的にテストすることをお勧めしますが、印象的な結果が得られる可能性があります。

JavaScript の最適化

JavaScript 最適化セクションには、同様のオプションと機能があります。

HTTP2 を使用するサーバーを実行している場合は、JavaScript の縮小をオンにし、「結合」をオフのままにすることをお勧めします。

JavaScript の実行を遅らせたり遅らせたりすると、Web サイトのパフォーマンスも大幅に向上します。 実際、ほとんどの Web サイトは、延期も遅延もされていない多数の JavaScript ファイルをロードすることによって、最大の影響を経験します。

defer セクションと delay セクションは、特定の機能を壊して動作を停止させる可能性があるため、これらを 1 つずつ有効にして、Web サイトをテストしてください。 問題が発生した場合は、トラブルシューティングする方法があります。

この設定をオンにすると、いくつかの人気のあるテーマやプラグインが壊れる傾向があります。 最も一般的な例の 1 つは Elementor Pro です。 これに似た問題が発生した場合は、WP Rocket が対応します。 詳細については、JavaScript の除外に関するトラブルシューティング ガイドを確認し、推奨されるスクリプトをこのセクションに追加してください。

たとえば、Elementor Pro Web サイトの場合、除外する必要があるスクリプトを見つけてこのセクションに追加しても、残りの Web サイトの JavaScript ファイルでこの機能の恩恵を受けることができます。

3. メディア オプションとチューニング

もう 1 つの一般的な問題は、圧縮されていない画像と遅延読み込みの欠如です。

調整されていない画像をアップロードすると、パフォーマンスに大きな影響を与える可能性があるため、画像を調整して圧縮してから Web サイトにアップロードしてください。 Imagify のようなプラグインを使用して、事後に自動的に圧縮することもできます。 この部分を自動化し、クライアントの良好なパフォーマンスを維持したいため、クライアント サイトにこの方法を使用しています。 Imagify は、同じチームによって開発されているため、WP Rocket とうまく統合されます。 WP Rocket は、同じ Web サイトにインストールされている場合、Imagify を認識して利用します。

画像と動画の LazyLoad を有効にするには、[メディア] タブですべての機能を有効にすることをお勧めします。 これにより、訪問者がそのセクションにスクロールしたときにのみ画像が読み込まれるようになります。

ロゴやメイン ヒーロー セクションの画像などの画像は、「除外された画像または iframe」セクションに追加することで除外できます。

不足している画像のサイズを追加することも、優れた Web 開発およびアクセシビリティの実践として推奨されます。 一部のテーマや開発者はこのステップを見逃しているため、WP Rocket は寸法のない画像に対してこれを自動化することで支援できます。 クライアントのウェブサイトで作業するときは、常にこの設定を使用します。

4.プリロード

WP Rocket のプリロードはデフォルトでオンになっているため、オンのままにしておくことをお勧めします。 サイトにアクセスする Web サイト訪問者をシミュレートし、Web サイトのキャッシュ バージョンを生成して、実際の訪問者が到着したときにキャッシュが既に存在するようにします。

リンクのプリロードも、ユーザーがハイパーリンクにカーソルを合わせたときにサイトの読み込みを開始する優れた機能です。 ユーザーがリンクをクリックすると、ページはほぼ瞬時に読み込まれます。

5. WP Rocketのその他の設定

もう 1 つの非常に便利なオプション機能は、「データベースのクリーンアップ」です。 この機能は、投稿の修正やスパム コメントが多いサイトで実行され、処理速度が向上します。 このクリーンアップを自動化し、時々実行するオプションもあります。 通常、何か問題が発生した場合に備えて、データベースのバックアップを作成した後、この手順を手動で実行することをお勧めします。

また、[ハートビート] セクションで、デフォルトの [ハートビートの制御] オプションをオンのままにしておくことをお勧めします。 ハートビートはデフォルトの WordPress スケジュール タスクであり、ユーザーが投稿のリビジョンを書いている間に自動保存するのに役立ちます。 これは非常に便利な機能ですが、サーバー リソースを不必要に使用する可能性があります。

WP Rocket は、サーバー リソースを維持し、パフォーマンスを向上させるために、このアクティビティを 1 分から 2 分間隔に自動的に減らします。

その他のアドオン設定には、Varnish キャッシュ (WP Rocket によって自動的に検出される) の有効化、および WebP 互換性が含まれます。

Varnish を使用すると、サーバー側で Web サイトのパフォーマンスをさらに向上させることができます。 ホスティング プロバイダーが Varnish を使用している場合、自動的に認識されない場合は、この設定をオンにします。

WebP は、最新のすべてのブラウザがサポートする比較的新しい画像圧縮規格およびファイル拡張子です。 パフォーマンスを向上させるために、Imagify などの画像圧縮プラグインを使用すると、png および jpg 画像を自動的に WebP に変換できます。 WP Rocket は、これらの画像をキャッシュから自動的に提供できます。

代理店として、私たちのお気に入りの機能の 1 つは、あるサイトから別のサイトに設定をエクスポートおよびインポートすることです。 私たちが使用する設定とツールのほとんどはプロジェクト間で類似しているため、設定を別のサイトにエクスポートおよびインポートすると、多くの時間を節約できます!

まとめ

これらの設定をオンにして、Web サイトを徹底的にテストすることで、クライアント Web サイトで印象的な結果を得ることができます。 WP Rocket を使用すると、これらの機能の有効化とテストが非常に簡単になり、問題が発生した場合に素晴らしいトラブルシューティングのヒントが提供されます。

チューニング後のパフォーマンス結果の維持

高速で効率的な Web サイトを立ち上げたら、それで終わりではありません。 ウェブサイトに肥大化を追加するのは簡単ですが、不要なプラグインを導入したり、大きな画像や動画をアップロードしたり、データベースをクリーンに保ったり、ウェブサイトを最新の状態 (プラグイン、コア、および PHP のバージョン) に維持したりしません。

PageSpeed Insights と GTmetrix を使用して、ウェブサイトのパフォーマンスを月に 1 回テストし、ウェブサイトが引き続き迅速に読み込まれることを確認しています。 また、さらなる改善に役立つ新しい WP Rocket 機能と更新に注意することをお勧めします. WP Rocket は、ユーザーが Web サイトのパフォーマンスを向上させるのに役立つ新しい機能を常に改善および追加しています。

代理店の武器に WP Rocket を追加すると、超高速の Web サイトを作成し、既存のクライアントの Web サイトの速度を向上させることができます。 この記事が、WordPress エージェンシーの秘密兵器として WP Rocket を追加することを奨励するのに役立つことを願っています.