WooCommerce Web サイトを高速化する方法: ステップバイステップガイド

あなたは、WooCommerce Web サイトを高速化する方法を学びたいためにここに来ています。 もしかしたら、あなたのショップの処理が遅すぎることに気づいたかもしれません。 これはユーザーエクスペリエンスとSEOにとって重要であるということを聞いたことがあるかもしれません。 理由が何であれ、あなたは正しい場所に来ました。

この記事では、WooCommerce オンライン ショップのサイト速度を改善する方法について詳しく説明します。 なぜ速度が重要なのかを説明し、e コマース Web サイトのパフォーマンスを向上させる方法についての実践的な手順を説明します。

最後に、実際の Web サイトで言及したすべての効果を確認できるケーススタディも追加します。

1 WooCommerce 速度の最適化が重要な理由

なぜこのトピックに関心を持つ必要があるのか​​という質問から始めましょう。 結局のところ、WooCommerce Web サイトが機能するのであれば、その読み込み速度は重要ではないでしょうか? 人々は少し待つことを本当に気にしますか?

実際、そうです。

ウェブサイトの速度は、オンライン ショップの成功において最も過小評価されている要素の 1 つです。 Google の調査によると、モバイル サイトの読み込み時間が 0.1 秒改善されただけでも、小売サイトのコンバージョン率は 8.4% 向上しました。

同じ調査では、購入者の購買行動のほぼすべての段階にプラスの影響があることも示しています。

さらに、ページの読み込み速度は検索エンジンの最適化にとって重要です。 最新のランキング要素の一部である Core Web Vitals で大きな役割を果たします。 したがって、サイトのパフォーマンスが遅いとオーガニックの可視性に影響を与える可能性があり、それが WooCommerce SEO の一部である理由です。

2 WooCommerce ウェブサイトを高速化する 9 つの方法

このトピックに注目する必要がある理由がわかったので、次にそれを行動に移す方法を見てみましょう。 以下では、WooCommerce ショップをスピードアップできるいくつかの方法について説明します。

2.1適切なホスティングを選択する

ホスティングはウェブサイトのパフォーマンスに大きな影響を与えます。 これにより、オンライン ショップのアプリケーションが存在する物理マシンが決まります。 遅いか低品質の場合、Web サイトの読み込み速度に大きな影響を与える可能性があります。 言うまでもなく、ホスティングが不適切だとダウンタイムのリスクが高まります。

そのため、優れたホスティングプロバイダーを選択する必要があります。 そのために考慮すべき要素は次のとおりです。

• ホスティングの種類– 共有、VPS、クラウド、専用、およびマネージド WordPress ホスティングの違いについて理解してください。 そうすることで、最適なものを選択できます。
• トラフィックの予測– 始めたばかりの場合、満たさないトラフィック マージンに対して料金を支払う必要はありません。 引き付ける訪問者の数について現実的に考えてください。 後でいつでもアップグレードできます。
• パフォーマンスの特徴– データセンターは顧客のいる場所にありますか? ホスティングプロバイダーは CDN を提供していますか? その他のパフォーマンスの最適化? すべての重要な考慮事項。
• セキュリティ対策– プロバイダーには SSL 証明書、自動バックアップ、その他の重要なセキュリティ要素が付属していますか?
• その他の機能– ステージング サイトを作成する機能、十分な帯域幅とストレージ、または WooCommerce の自動インストール機能はすべて考慮すべき事項です。
• 予算– はい、ホスティングは重要ですが、コストによってビジネスが台無しになることがあってはなりません。 購入する前に請求書を支払うことができることを確認してください。

ニーズを絞り込んだら、決定を下す前に候補者を調査します。

速度の比較、ダウンタイム レポート、利用可能なカスタマー サポート オプションを確認し、カスタマー レビューを読んでください。

ドイツで信頼できるホスティングプロバイダーをお探しの場合は、dogado ホスティングから始めるのが最適です。 ドイツ以外の地域については、One.com をご覧ください。

2.2最適化された WooCommerce テーマの選択

ホスティング以外に、WooCommerce ショップの主要な構成要素の 1 つはテーマです。 サイトのデザインに関係するすべてを制御するため、パフォーマンスにも大きな影響を与える可能性があります。 したがって、ここでも調査を行うことは有益です。

レビューを読んで、さらに良いのは、ステージング サイトまたは開発サイトをセットアップして試してみることです。 テーマの機能を直接確認し、ダミー コンテンツを入力して速度テストを実行します。

注意すべきボトルネックがあるかどうかが表示されます。

もう 1 つの考慮事項は、モバイルの応答性です。 つまり、あらゆるデバイスの画面サイズに自動的に適応し、携帯電話やタブレットでも使いやすくなります。

最近では、レスポンシブでない WooCommerce テーマを販売する人はいないはずですが、チェックしておいて損はありません。 もう一度、デモ サイトをセットアップし、モバイル デバイスまたはブラウザの開発者ツールを使用して確認します。

後者の方法は次のとおりです。

1. 選択したブラウザでテスト サイトを開きます
2. レスポンシブ デザイン モードに切り替える (Chrome と Firefox の両方でCmd/Ctrl+Shift+M )
3. 上部の設定を使用して、さまざまなデバイスのサイズと接続速度をシミュレートします
4. いつものように閲覧し、サイトのすべての機能を試してください

2.3キャッシュプラグインの使用

WooCommerce を高速化する簡単な方法は、キャッシュ プラグインを使用することです。 キャッシュに詳しくない方のために説明すると、キャッシュとは、ショップの Web ページの完成版をサーバーに保存し、訪問者がすぐにアクセスできるようにすることを意味します。

通常、WordPress/WooCommerce では、Web ページは PHP ファイルから動的に作成されます。 これらは、データベースから取得したコンテンツを使用してサーバー上で処理され、ブラウザで表示できる HTML コードが配信されます。 キャッシュ プラグインは、サーバーが HTML を直接送信できるように、事前にすべてを前処理することでそのいくつかのステップをスキップします。

WooCommerce で最も人気があり、最高のキャッシュ プラグインの 1 つは WP Rocket です。

オンライン ショップがアクティブ化されるとすぐに、モバイル デバイス用のオプションを含むキャッシュが自動的に追加されます。

それに加えて、以下でわかるように、WooCommerce Web サイトを簡単に高速化するためのより強力な機能を提供します。

2.4コードを最適化する

パフォーマンスに関するもう 1 つの重要な要素は、Web サイトのコードを改善することです。 キャッシュは WooCommerce を高速化するための重要なテクニックですが、より体系的なパフォーマンスの問題に対処するには、他の速度最適化手段を考慮する必要があります。

その精神に基づいて、Web サイトのコードをより合理化するために使用できる 3 つのテクニックを以下に示します。

1. 縮小– これは、コメントやインデントなど、コードを読みやすくするためのすべての書式設定を Web サイト ファイルから削除することを意味します。ブラウザは、書式設定なしでもコードを理解できますが、余分な書式設定によりファイルが大きくなり、ダウンロードが遅くなります。
2. 未使用の CSS を減らす– Web サイト上に、読み込まれるページに何も寄与しないコードがある場合、速度が低下するだけです。
3. JavaScript の遅延と延期– 遅延と延期とは、分析スクリプトなどの重要性の低い JavaScript ファイルを無視するようにブラウザーに指示することを意味し、読み込みプロセスに不可欠なファイルを優先できるようになります。 これらは、レンダリングをブロックするリソースを排除するための優れたテクニックです。

WP Rocket は、ファイルの最適化で上記すべてのオプションを提供します。 いくつかのボックスをチェックすると、JavaScript と CSS を縮小、最適化、延期できます。

2.5製品画像を最適化する

オンライン ショップを運営している場合は、商品をより魅力的にするために多くの画像を使用している可能性があります。 これは良い考えですが、画像にはテキスト コンテンツよりもはるかに多くのデータが含まれるため、画像の読み込みを高速化する方法を知る必要があります。

そのための主要なテクニックは次のとおりです。

• 画像の圧縮– 縮小と同様に、不要なデータを削除することを意味します。 そうすることで、品質を損なうことなく画像サイズを縮小できます。
• 画像サイズの削減– 画像を小さくしてダウンロードを速くするもう 1 つの方法は、画像が表示される場所に必要な大きさだけを表示することです。そうしないと、訪問者に不必要なデータをダウンロードさせることになります。
• より優れた画像形式の使用– WebP や Avif などの形式は、JPG や PNG よりもはるかに少ないデータを使用します。

上記を自動的に実装するオプションは Imagify です。 これは WP Rocket のコンパニオン プラグインであり、画像を一括圧縮して WebP に変換できます。

2.6 CDN の使用

CDN または「コンテンツ配信ネットワーク」は、世界のさまざまな場所に配置された相互接続されたサーバーの集合です。 これらにはすべて Web サイト ファイルのコピーが含まれており、その目的は、地球上のさまざまな地域にいる訪問者がそれらにアクセスするまでの距離と時間を短縮することです。 これは、海外の顧客向けのオンライン ショップをスピードアップするための優れた方法です。

CDN プロバイダーはたくさんあります。 サインアップしてサイト用に構成するだけです。

サポートが必要な場合は、WP Rocket が、2 つの人気のあるソリューションである Sucuri と Cloudflare の専用アドオンを提供します。 これにより、構成が非常に迅速になります。

他のオプションの場合は、 CDNで CDN の使用を有効にし、ネットワークの CNAME を指定して、そこにアウトソーシングするファイルを構成するだけです。

最後に、WP Rocket には RocketCDN と呼ばれる独自の CDN も付属しています。 既存の WP Rocket アカウントに簡単に追加して、自動的に構成することができます。

2.7 HTTP/2の実装

HTTP プロトコルは、インターネット接続の基本的な構成要素の 1 つです。 Web サイトの URL の前にhttp://を記述するのはこのためです。

時間の経過とともに、伝送速度に重点を置いた HTTP の新しい改良バージョンがリリースされてきました。 たとえば、HTTP/2 は HTTP よりも何倍も高速です。 その証拠はここで見ることができます。

オンライン ショップとしては、HTTP/2 がすでに導入されている必要があります。 これは HTTPS の基礎であり、安全な接続を確立し、クレジット カード情報などの機密の支払いデータを処理するために必要です。 そうでない場合は、できるだけ早く変更してください。 また、サイトの速度も向上します。

ただし、現在では速度がさらに向上した新しいバージョン HTTP/3 が利用可能になっています。 Web ホスティング プロバイダーがこのプロトコルをサポートしている場合は、WooCommerce サイトをそれに移行することを検討してください。 これは、ここ Rank Math でも使用されています。

2.8データベースをクリーンアップする

ご存知かもしれませんが、WooCommerce Web サイトはファイル システムとデータベースの 2 つの部分で構成されています。

データベースには、ページ上のテキスト、製品説明、メニュー項目名など、すべてのコンテンツが保存されます。この情報はすべての Web ページで使用されるため、データベースが遅いとサイト全体に影響が及びます。

時間が経つと、データベースは一時的な冗長データによって詰まります。 さらに、サイトが成長し続けると、保存される情報が増えるほど、適切なサイトにアクセスするのに時間がかかるようになります。

したがって、十分に油を注いだマシンのように動作させるには、データベースを定期的に最適化する必要があります。 これは、PHPMyAdmin などのデータベース プログラムや WordPress プラグインを使用して手動で行うことができます。

すでに WP Rocket を使用している場合は、ご想像のとおり、データベースの最適化もその機能セットの一部です。 [データベース]では、リビジョンと自動ドラフト、スパム コメントの削除、一時的なデータベース データのクリーンアップ、テーブルの最適化、自動クリーンアップのスケジュール設定を行うことができます。

2.9プラグインが多すぎるのを避ける

WooCommerce サイトの速度の最後の要素は、使用するプラグインの数です。 WooCommerce 自体には数百の拡張機能があり、WordPress も同様に数万の無料プラグインを提供しています。 したがって、機能を追加するためにサイトにさらにインストールしたいという誘惑が常にあります。

ただし、すべてのプラグインにはロードする必要がある独自のコードとファイルが付属しており、サイトの速度が低下する可能性があります。 特に、コードが適切にコーディングされていない場合は、残念なことに、時々そのようなことが起こります。

そのため、パフォーマンスのために、その数を最小限に抑える必要があります。 サイトには、積極的に使用するプラグインのみを含めてください。 何かに目的がない場合は、それを削除する時期が来ています。 さらに、Web サイトのスピード テストを定期的に実行して、サイトの読み込み時間に特に大きな影響を与えるプラグインがないかどうかを確認する必要があります。

3 WP Rocket による WooCommerce の高速化: ケーススタディ

この投稿の最後の部分では、ケーススタディを検討して、キャッシュ プラグインを使用して WooCommerce サイトを高速化する方法の実践的な例を示します。

3.1テストのセットアップと初期測定値

Storefront テーマを使用して、シンプルな WooCommerce Web サイトをセットアップしました。 サンプル商品やホームページデザインを自動作成します。

また、多くの一般的なプラグインと WooCommerce 拡張機能もインストールしました。

初めて PageSpeed Insights を通じてサイトを実行したとき、結果はやや平凡なものになりました。

それらはひどいものではありませんが、特筆すべきこともありません。

• パフォーマンススコア: 64 (モバイル)、75 (デスクトップ)
• 最大のコンテンツフル ペイント: 7.7 秒 (モバイル)、2.5 秒 (デスクトップ)
• 合計ブロッキング時間(INP データはまだありません): 60 ミリ秒 (モバイル) バージョン、0 ミリ秒 (デスクトップ)
• 累積レイアウトシフト: 0.007 (モバイル)、0 (デスクトップ)

つまり、Largest Contentful Paint はモバイルとデスクトップの両方で高すぎるため、全体的な速度スコアはさらに向上する可能性があります。 他の Core Web Vitals の測定値は良好でした。

「診断」セクションを見ると、改善の余地がたくさんあることがわかります。 上で説明した修正の多くについても触れています。

WP Rocket がどのように役立つかを見てみましょう。

3.2速度の最適化

WP Rocket プラグインをインストールしてアクティブ化すると、いくつかの改善が自動的に行われます。

• モバイル キャッシュを含むキャッシュを有効にし、有効期間を 10 時間に設定します。
• Gzip 圧縮を有効にして Web サイト ファイルを圧縮し、ダウンロードを高速化します。
• WooCommerceショッピングカートの読み込み時間を短縮します
• キャッシュのプリロードとリンクのプリロードを有効にする

これらはすでに WooCommerce を高速化するための効果的な方法です。 それでも、私たちにできることは他にもたくさんあります。

まず、プラグイン設定の[ファイルの最適化]で、CSS と JavaScript を縮小、最適化、延期するオプションをオンにしました。

さらに、 Mediaで遅延読み込みを有効にしました。

その後、プリロードが有効になっていることを確認し、特に WP Rocket に WooCommerce プラグインに含まれるフォント ファイルをプリロードするように指示しました。これは速度テストで表示されたものです。

WooCommerce サイトで同じことを行いたい場合は、次のパスをコピーして貼り付けます: /wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff

[画像の最適化]で、Imagify をインストールし、その一括オプティマイザーを通じてサイト上のすべての画像を実行しました。

また、WebP 形式で画像を表示するオプションもオンにしました。

最後に、メディア ライブラリに移動し、ホームページに表示されるヒーロー画像のすべてのサムネイル サイズを特に最適化しました。

これは、PageSpeed Insights が読み込みを妨げる主な要素の 1 つです。 また、組み込みの編集ツールを使用して幅を半分に縮小しました。

3.3最終速度の結果

これらの調整を行った後、サイトを再度テストしました。 今回は見た目がかなり良くなりました。

私たちが達成した変更は次のとおりです。

診断 セクションも改善されました。 以前の推奨事項のほとんどはなくなっているか、以前よりも改善されています。

最大の問題は依然として最大のコンテンツ ペイント イメージです。 残念ながら、WordPress の仕組み上、モバイルとデスクトップで同じ画像が使用されるため、現時点ではそれについて何もすることができません。

ただし、最適化の実装にかかった時間はわずか 10 分程度であることを考えると、結果はかなり良好です。

WooCommerce の高速化に関する4 つの最終的な考え

Web サイトのパフォーマンスは、特に e コマース サイトでは重要なトピックであり、読み込み速度が販売、コンバージョン、SEO に直接影響します。 それを無視することは、あなたのオンラインショップに成功の最高のチャンスを与えないことを意味します。

上記では、WooCommerce ショップの速度を向上させるためのいくつかの効果的な手順を説明しました。 適切なホスティングとテーマの選択、キャッシュ プラグインの使用、コードと画像の最適化、データベースとプラグインのクリーンアップは、実行できる対策のほんの一部です。

より技術的なソリューションが自分のスキル レベルを超えていると感じる場合は、いつでも WP Rocket の助けを借りることができます。 ケーススタディで見てきたように、ほんの少しの努力で大きな効果をもたらすことができます。

この投稿が気に入ったら、 @rankmathseo をツイートしてお知らせください。