WPロケットとボティガでWooCommerceをスピードアップする方法

公開: 2022-04-25

WooCommerceを高速化し、読み込みの速いストアを作成する方法に苦労していますか？

あなたの店の読み込み時間はあなたの買い物客の経験、あなたのSEOランキング、そしてあなたの店のコンバージョン率にさえ影響を与えるので、スピーディーな店を持つことは不可欠です。

しかし同時に、WooCommerceストアは通常のWordPressサイトよりも最適化が難しく、ストアの読み込み時間に失望する可能性があります。

いくつかの理由がありますが、最大の2つは、WooCommerceストアが通常のWordPressサイトよりもはるかにデータベースを集中的に使用し、ストアのすべてのページをキャッシュできないことです。

ただし、それは、より高速なストアを作成するオプションがないという意味ではありません。

適切なツールを使用すると、特別な技術的知識を必要とせずにストアをスピードアップできます。

このチュートリアルでは、WooCommerceの速度の最適化について、私が知っている最も簡単な方法で説明します。WPRocketプラグインと、その他のいくつかのツールと調整を使用します。

その過程で、実際のパフォーマンステストデータを共有して、各調整がストアの読み込み時間にどのように影響するかを確認できるようにします。

最終的には、読み込みがはるかに高速なストアが必要になります。すべてを設定するためにコンピューターサイエンスの学位は必要ありません。

いいね？ 一緒にWooCommerceをスピードアップしましょう。

WPロケットの前の2つの基本的なWooCommerce速度最適化戦術

次のセクションでは、WP Rocketを使用してWooCommerceを高速化し、読み込みの速いストアを取得する方法についてすべて説明します。

ただし、読み込みが速いWooCommerceストアが必要な場合でも、強力なパフォーマンス基盤が必要です。 そうでなければ、WPロケットを使用することは豚に口紅を置くようなものです。

基本的に、WPRocketはあなたの店をより速くします。 ただし、ファンデーションを開始するには遅すぎる場合でも、ストアの速度は遅くなります。 少しだけ…「遅くない」でしょう。

では、WooCommerceのパフォーマンスの強力な基盤は何ですか？

これらの2つの詳細を釘付けにする必要があります。

1.より高速なWooCommerceテーマを選択します

ストアのテーマは、ロードの速度に大きな役割を果たします。 大きく肥大化したテーマはより多くのリソースをロードし、サイトの速度を低下させます。

一方、高速のWooCommerceテーマは逆のことをします。それは、見栄えが良く、買い物客に優しい店を作るために必要な最小限のものだけをロードします。

専用の投稿があり、最速のWooCommerceテーマを見つけるために多数のオプションをテストしました。 ただし、時間を節約したい場合は、無料のBotigaテーマを使用できます。

BotigaはWooCommerceの最速のテーマの1つです

ゼロから、Botigaはパフォーマンスのために構築されています。 バニラJavaScriptのみを使用し（jQueryの依存関係はありません）、コードを自動的に最小化し、箱から出して44.3KB未満です。

さらに、すべてのデモサイトはネイティブブロックエディターで構築されています。つまり、サイトをデモのように見せるためだけに、ページビルダープラグインでストアを圧迫する必要はありません。

同時に、Botigaは、次のような便利なeコマース機能を多数提供しています。

  • 複数のチェックアウトとカートページのスタイル
  • 買い物客が商品をすばやく見つけるのに役立つインスタント商品検索
  • スタイリッシュな製品の推奨事項
  • 製品バリエーション見本
  • 複数の製品ギャラリーのレイアウト
  • ウィッシュリスト
  • 粘着性のあるカートに追加バー

Botigaには、完全に機能する無料バージョンと、さらに機能を追加する69ドルのProエディションがあります。

これらの理由から、店舗をスピードアップするための例としてBotigaを使用します。

ここからBotigaをダウンロードするか、デモを参照していくつかの例を確認できます。

2.パフォーマンスが最適化されたWooCommerceホスティングを使用する

高速なテーマを使用するだけでなく、パフォーマンスが最適化されたWordPressホスティングを選択することもできます。

可能な限り安価なホスティングを利用したくなるかもしれませんが、安価な共有ホスティングには通常、WooCommerceを処理するためのリソースがないため、何をしても読み込み時間とパフォーマンスが低下します。

ここでも、最速のWordPressホスティングを見つけるために多数のホスティングプロバイダーをテストした記事があります。 お急ぎの場合は、次のオプションを検討してください。

  • Kinsta –Kinstaのレビュー全文を読む
  • WPエンジン– Elasticsearchを含む専用のeコマースホスティングプランを特にお勧めします（これにより、ストアの商品検索パフォーマンスが大幅に向上します）
  • Cloudways –Cloudwaysのレビュー全文を読む
Kinstaは高速なWooCommerceホスティングを提供しています

WPロケットでWooCommerceをスピードアップする方法

それでは、WP Rocketを使用してブースターをストラップで固定し、WooCommerceの読み込みをさらに高速化します。

私たちの店では堅実なホスティングとスピーディーなBotigaテーマを使用しているため、それ自体ですでにかなり迅速に読み込まれます。 これは、ホームページのどこから始めているかを示すWebPageTestのパフォーマンスメトリックのスクリーンショットです。

BotigaだけでWooCommerceの速度テストデータ

ただし、WP Rocketを使用すると、ロードを高速化できます。 素晴らしいWordPressパフォーマンス最適化プラグインがたくさんあるのに、なぜWooCommerceにWP Rocketをお勧めするのですか？

さて、あなたは私がそれを好きな理由を学ぶために私の完全なWPロケットレビューを読むことができます、しかしここにハイポイントの簡単な要約があります：

  1. すぐに使用できるWooCommerceとの互換性があります。 WP Rocketは、WooCommerceを使用していることを確認すると、キャッシュなどの基本事項に関して、最適な方法で自動的に構成されます。 WooCommerceストアでキャッシュを不適切に構成すると、主要な機能が損なわれる可能性があるため、これは大きな利点です。
  2. 使い方はとても簡単です。 上記の点に加えて、WP Rocketは通常、シンプルなインターフェイス、詳細なドキュメント、およびプレミアムサポートを備えています。
  3. それはあなたのサイトをずっと速くします。 私は最後まで最善を尽くしました。 WP Rocketは単純に機能し、WooCommerceストアの読み込みを高速化するのに最適です（他のWordPressサイトも同様です）。 また、未使用のCSSを削除したり、JavaScriptの実行を遅らせたりする機能などの独自の機能も備えています。

WP Rocketはプレミアムプラグインですが、49ドルを支払うことは、より高速なWooCommerceストアに支払うための小さな価格です。 ページの読み込み時間とコンバージョン率には直接的な関係があるため、ストアを高速化すると、コンバージョン率の向上という形で簡単に収益を上げることができます。

開始するには、必ずWPRocketのコピーを購入してください。 次に、WooCommerce用に設定する方法を説明します。

1.プラグインをインストールして、基本的な最適化をアクティブにします

まず、WooCommerceストアにアクセスし（または、まだ持っていない場合は最初にセットアップします）、WPRocketをインストールしてアクティブ化します。

WPロケットフレッシュインストールウェルカムメッセージ

WP Rocketプラグインをアクティブ化するとすぐに、次の機能が自動的にアクティブ化され、ストアが高速化されます。

  • ページのキャッシュ– WP Rocketは、問題を回避するために主要なWooCommerceコンテンツも自動的に除外し、可能な限り多くのコンテンツをキャッシュします。 たとえば、互換性の微調整の中でも、カートとチェックアウトページが除外されます。
  • ブラウザのキャッシュ
  • GZIP圧縮
  • Webフォントのクロスオリジンサポート
  • GoogleFontsファイルの最適化

WooCommerceストアでは、WPRocketはget_refreshed_fragmentsリクエストも自動的に最適化します。 これは、WooCommerceが買い物客のカートの内容を動的に更新するために使用するものです。

繰り返しになりますが、これらの最適化はすべて自動的に行われるため、WP Rocketをアクティブにするとすぐに、ストアの読み込みが速くなります。

WP Rocketの1つの設定に触れることなく、ストアのホームページがどのように読み込まれるかを次に示します。

WPRocketのデフォルト設定を使用したWooCommerce速度テスト

最初のバイトまでの時間が約450ミリ秒（0.509秒から0.043秒）短縮されたことがわかります。これにより、最大コンテンツペイント（LCP）を含む他のほとんどすべてのメトリックが同様に短縮されます。 最大のコンテンツフルペイント時間が約1.1秒から約0.7秒に短縮されました。

この削減は主に、WP Rocketが実装するWooCommerceに適したページキャッシュの結果ですが、他の調整も役立ちます。

2.ファイルの最適化を設定します

WP Rocketはデフォルトで多くの便利な機能をアクティブにしますが、手動で有効にする必要がある重要な機能もいくつかあります。

開始するには、[WPロケット設定]領域の[ファイルの最適化]タブに移動します（ [設定]→[WPロケット] ）。

ここで、ストアのCSSおよびJavaScriptコードを最適化できます。これにより、ストアのパフォーマンスに大きな違いが生じる可能性があります（特に、Core Web VitalsとLighthouseのパフォーマンススコアに関して）。

私がお勧めする設定は次のとおりです。

CSSファイル：

  • CSSファイルの縮小– Botigaテーマはデフォルトですでにコードを縮小していますが、これは使用しているプラ​​グインからコードを縮小するのに役立ちます。
  • CSS配信の最適化→未使用のCSSの削除–これにより、ページごとに不要なCSSが削除され、各ページのファイルサイズが縮小されます。

CSSファイルを組み合わせるのはお勧めしません。ほとんどの高品質のホストがHTTP/2を使用しているため、これはあまり役に立ちません。

WP RocketWooCommerceCSSパフォーマンスの最適化

JavaScriptファイル：

  • JavaScriptファイルを縮小する
  • JSの読み込みを延期
  • JavaScriptの実行を遅らせる

CSSと同様に、JavaScriptファイルを組み合わせることはお勧めしません。

ストアが確実に機能するように、 JavaScript実行の遅延設定にいくつかの除外を追加することをお勧めします。 これは基本的に、ユーザーがサイトを操作するまで（クリックやスクロールなど）、すべてのJavaScriptの読み込みを遅らせます。

これは、コンテンツフルペイントの最大時間を改善するのに最適ですが、トラッキングスクリプト（GoogleAnalyticsやGoogleTag Managerなど）や使用しているプラ​​グインなど、すぐにロードしたいJavaScriptがある場合があります。

WP Rocketは、すべての潜在的な除外の詳細ページを維持しているため、自分自身を除外するためのスクリプトを理解する必要はありません。 このWPRocketヘルプ記事からそれらをコピーして、[除外されたJavaScriptファイル]フィールドに貼り付けるだけです。

たとえば、Google Analyticsを除外する場合は、次のように構成します。

WP RocketWooCommerceJavaScriptのパフォーマンスの最適化

これらの調整を行った後、さらに多くの改善を見ることができます。 私たちのホームページのページサイズは約80KB縮小され、最大のコンテンツフルペイント時間はさらに約0.7秒から約0.5秒に短縮されました。

WPRocketでファイル最適化機能をアクティブ化した後のWooCommerceスピードテストデータ

3.メディアを最適化する

この時点で、WPRocketからパフォーマンス値のほとんどを絞り出しました。 ただし、追加の調整を行うために調査する必要のある設定領域が他にもいくつかあります。

[メディア]タブで、遅延読み込みと欠落している画像のサイズを有効にすることをお勧めします。 前者はパフォーマンスに役立ち、後者は累積レイアウトシフト（CLS）の問題を減らして、コアWebVitalsのパフォーマンスをさらに向上させることができます。

WPロケットメディア最適化オプション

4.コンテンツ配信ネットワークを追加します（グローバルストア用）

コンテンツ配信ネットワーク（CDN）を使用すると、画像やスクリプトなどの静的アセットをグローバルサーバーのネットワークにキャッシュすることで、ストアの読み込み時間を短縮できます。

次に、訪問者は、物理的に最も近いサーバーからこれらの静的ファイルをダウンロードできます。これにより、ダウンロード時間が短縮され、ストアの速度が向上します。

あなたの店が特定の地理的地域、例えば英国内の買い物客だけをターゲットにしているなら、あなたはおそらくCDNからの多くの利益に気付かないでしょう。

しかし、英国や米国など、世界中の買い物客をターゲットにしている場合、CDNはWooCommerceをスピードアップするためのもう1つの優れたオプションです。

CDNセクションでは、WPRocketにCDNをストアに追加するための2つのオプションがあります。

  1. 公式のRocketCDNサービスを使用できます。このサービスは、無制限の帯域幅で月額わずか7.99ドルです。 これは、StackPathのグローバルネットワークに基づいています。 自動構成を提供するため、これは最も簡単なオプションです。
  2. WP RocketにURLを書き換えさせることで、サードパーティのCDNと統合できます。 人気のあるオプションは、StackPath、KeyCDN、Bunny CDN、CloudFrontなどです。

独自のCDNを設定することに自信がない場合は、RocketCDNサービスを使用することをお勧めします。これは、定価で無制限の帯域幅を利用できるため、かなりお得なサービスです。

WPロケットCDN設定

WooCommerceでのWPRocketの問題のトラブルシューティング

上記の手順に従うと、問題なくWooCommerceストアが高速になりますが、小さな問題が発生する可能性のあるまれなシナリオがいくつかあります。

最も一般的な例は、ユーザーのウィッシュリスト、最近表示されたアイテム、場所固有のコンテンツ（国ごとに異なる価格など）など、ある種の動的コンテンツの問題です。

たとえば、ユーザーがウィッシュリストに追加した商品にアクセスした場合、その商品を商品ページに表示することができます。 ただし、場合によっては、キャッシュによってここで不安定な動作が発生する可能性があります。

では、どうすればこれを修正できますか？ いくつかのヒントを見てみましょう。

まず、キャッシュ互換の方法でコーディングされた動的コンテンツプラグインを使用してみてください。 基本的に、これはプラグインがPHPの代わりにJavaScriptまたはAJAXを使用して動的コンテンツを生成することを意味します。

よくわからない場合は、問題が発生しているプラ​​グインの開発者に問い合わせることができます。 一部のプラグインには、互換性ツールが組み込まれています。 たとえば、YITH WooCommerce Wishlistプラグインには、AJAXの読み込みを有効にする設定があります。これにより、キャッシュに関する問題が修正されます。

WP Rocketチームは、問題を引き起こす可能性のある人気のあるWooCommerceプラグイン用の互換性プラグイン/ツールもいくつか作成しました。

  • YITHWooCommerceウィッシュリストプラグイン
  • ネイティブWooCommerce最近表示された製品ウィジェット
  • YITHWooCommerce最近表示された製品プラグイン

上記の修正がオプションでない場合、別の潜在的な修正は、プラグインが設定するCookieを対象とするキャッシュ除外ルールを追加することです。 これはより高度ですが、動的コンテンツを表示する必要があるユーザーのキャッシュをバイパスできます。

プラグインのドキュメントからCookie情報を検索するか、開発者を雇ってそれを理解してもらうことができます。 次に、WPRocketのAdvancedRules領域でCookieキャッシュ除外ルールを設定できます。

WPロケットの高度な除外ルール

WPロケットを超えた他の便利なWooCommerce速度最適化プラグイン

WP Rocketは、WooCommerceのパフォーマンスの最適化に必要なほとんどすべてのことを実行できます。 ただし、主な例外が1つあります。

画像！

あなたの店にはおそらくたくさんの商品画像があります。 また、注意しないと、これらの商品画像によってストア（特に商品やショップのページ）の速度が低下する可能性があります。

解決策は、サイトの画像を圧縮してサイズを変更することにより、画像を最適化することです。 これは、画像最適化プラグインを使用して自動的に実現できます。

最高のWordPress画像最適化プラグインに関する投稿全体がありますが、ここにいくつかのトップオプションがあります：

  • Imagify –このプラグインはWPRocketと同じ開発者からのものです
  • ShortPixel –これは私が自分のサイトで使用しているプラ​​グインです
  • WP Compress –もう1つの高品質オプション。 WPCompressレビューで詳細をご覧ください

画像以外にも、大規模な店舗で役立つもう1つのツールは、ある種の商品検索ソリューションです。

多くの製品がある場合、製品検索は大量のデータベースクエリを引き起こすため、非常に多くのリソースを消費する可能性があります。

これは、Elasticsearch（ElasticPressプラグイン経由）やJetpack Search（Elasticsearchに基づいていますが、実装が簡単）などのオフサーバー検索ソリューションを使用して修正できます。

今日のWooCommerceストアをスピードアップ

WooCommerceストアを成功させるには、ロードをすばやく行うことが重要です。

ストアを成功に導くには、最初に強力な基盤を設定することが重要です。

  1. 無料のBotigaテーマなど、読み込みの速いWooCommerceテーマを選択してください。
  2. KinstaやWPEngineなどのパフォーマンスが最適化されたWordPressホスティングを使用します。
  3. eコマースサイトの基盤を設定します。

そこから、WP Rocketは、WooCommerce互換のキャッシング、CSSおよびJavaScriptの最適化など、多数のWooCommerceパフォーマンスの最適化を実装するのに役立ちます。

製品画像を最適化するために画像最適化プラグインも追加する場合は、軽量でスピーディーなWooCommerceストアを使用するように設定する必要があります。

WP RocketとBotigaでWooCommerceをスピードアップする方法についてまだ質問がありますか？ コメントで教えてください！