WOCOMMERCEで100 Google PagesSpeedモバイルスコアをWP Rocketでヒットする方法

公開: 2025-06-24

WooCommerceストアを使用して、GoogleのPagesSpeed Insights for Mobileで完璧な100を取得することを目指していますか？

この記事では、元々Magentoで実行された美容eショップであるFemme-Fatale.grでそれをどのように達成したかを正確に紹介します。当時、モバイルページのロードには5〜15秒かかり、500個の製品カテゴリと450個の製品属性を備えた35,000個の産産カタログにもかかわらず、サイトは販売を出血させていました。

私はオックスフォードメタデータの創設者であるディミトリスヴェイエナスです。過去30年にわたって、私はWebパフォーマンスのミリ秒ごとに取りつかれてきました。 2022年初頭、私の友人のニコス・オルファノスは私に彼のオンラインストアを手伝うように頼みました、そして私たちは仕事に取り掛かりました。

WooCommerceに移行し、WP Rocketを秘密兵器として使用するスピードに完全に焦点を合わせた後、99から100/100スコアの間で一貫したスコアでモバイルページスピードスコアを破壊しました。さらに重要なことは、このサイトは停滞から収益マシンに進んだことです。

読み続けると、そのような結果を得ることができた方法と、WP Rocketが95+スコアに到達するのにどのように役立ったかに加えて、完璧な100に押し上げた最終的な調整がどのように役立ったかを学びます。さらに重要なことに、わずか300ミリ秒でサイトがロードを開始すると、その後のビジネスへの影響がわかります。

なぜ、特にモバイルにパフォーマンスに焦点を合わせているのか

femme -fatale.grでは、購入の90％以上がモバイルで発生します。これにより、モバイルパフォーマンスは初日から最優先されました。

モバイルデバイスは、あらゆるWebサイトの究極のストレステストです。制限されたCPU、メモリ、および不安定な接続により、最もleanせたページでも、デスクトップよりも最大10倍遅いロードを行うことができます。そのため、すべての最適化が重要です。

速度は効率を意味します。クリーンなコード、より小さな資産、およびよりlear的なDOMは、特にモバイルでのすべての訪問者にとってよりスムーズな体験に変換されます。

私が言うのが好きなように、 「あなたのモバイルエクスペリエンスが瞬時になければ、あなたは余分なミリ秒ごとに本当のお金を失っています」。

ターニングポイント：MagentoからWoocommerceへの移住

2021年12月、ニコスは明確な挑戦で手を差し伸べました。 「私の店はロックダウン中にセッションあたり0.81ユーロでピークに達しました。その後、売り上げはセッションあたり0.15ユーロに戻りました。ロックダウンハイに戻ることはできますか？」

最初のステップはプラットフォームの変更であることを知っていました。

まず、WooCommerceをアジャイルでモダンなスタックで選びました。パフォーマンス志向のWebエンジニアの最大のコミュニティとともに、想像できるあらゆる機能をカバーするプラグインとテーマ作成者のエコシステムを提供しました。

私たちは、製品データを変更したり、マーケティング支出を増やすことなく、2022年3月に公開しました。唯一の違いは速度でした。ページの負荷を5〜10秒からわずか1〜2秒に削減しました。

これは、Magentoからの移行の前の読み込み時間の結果を示すGTMetrixスクリーンショットです。ホームページで5.8秒、カテゴリで7.9秒、新しいWebサイトの開発中にキャプチャされました。

移行前のウェブサイトのパフォーマンスを示すMagentoのスクリーンショット
WebサイトをWooCommerceに移行する前のGTMetrixスクリーンショット

一方、これは現在のパフォーマンスであり、すべてのコアWebバイタルがグリーンです。

LCP -GTMetrixの300msでの現在のパフォーマンス
LCP - GTMetrixの300msでの現在のパフォーマンス

woocommerceの速度の真の価値は何ですか？

パフォーマンスへのビジネスへの影響は無視することは不可能であり、数字はそれを明確にしました。

移行の前に、femme -fatale.grはパフォーマンスのわずかに詰まっていました。 Magentoでは、毎月の売上高は7,000ユーロから10,000ユーロの範囲で、約40,000セッションで、1セッションあたり平均0.15ユーロから0.20ユーロでした。トラフィックが62,500セッションに急増した2020年のロックダウンピーク中でさえ、最高のパフォーマンスはセッションあたり0.81ユーロでトップになりました。

2022年2月までに、WooCommerceに移住する直前に、サイトはセッションあたりわずかに改善されて0.29ユーロになりましたが、その可能性からは程遠いものでした。

より速いパフォーマンスの影響はすぐにありました。 2022年3月、移住後の最初の1か月であるセッションあたりの収益は、セッションが一時的に陥っているにもかかわらず、ボットがキャッシュをウォームアップしたにもかかわらず、0.58ユーロに2倍になりました。

利益はそこで止まりませんでした。 2023年12月までに、セッションあたり0.81ユーロのロックダウンピークと一致しました。今日、その数はさらに上昇しました。ウェブサイトは、毎月40,000件の訪問でセッションごとに1.11ユーロを獲得しています。

セッションあたりの収益 - G4
セッションあたりの収益 - G4

femme -fatale.grの所有者であるニコスは、それを最もよく言ってください：

一致し、コビッドピークを超えることにより、速度が当社のビジネスで唯一の最大のレバーであることを証明しました。

すべてのWooCommerceサイトに必要なパフォーマンスファンデーション

WP Rocketが完全なパフォーマンスの可能性を提供する前に、強固な基盤を配置する必要があります。これらの初期の決定は、私たちの結果に大きな影響を与えました。これは、WooCommerceストアを運営している人にも強くお勧めします。

  1. パフォーマンス最初のテーマを選択します。最適なオプションを解決する前に、多数のテーマをテストしました。 Athemes and Ray Theme （Elementor Based）によるBotiga （Gutenbergベース）は、どちらもベンダーデモで90+を獲得しました。 70未満のものはありますか？私たちはそれを避けました。
  1. 真に高速なホストを選んでください。ロンドン、フランクフルト、アムステルダム、ミラノ、ストックホルムなどの主要なヨーロッパ地域で、Linode、Vultr、Digitaloceanに裏打ちされたCloudwaysを使用しています。ワンクリックのPHPおよびデータベースのアップグレード、ビルトインワニスとRedis、さらにシームレスなモバイルデバイスの検出が可能になります。これにより、非シグ付きAPI呼び出しが常に最適化されたコンテンツにヒットします。私たちは3年間でダウンタイムがゼロであり、彼らのサポートチームは傑出しています。

    e -commerceでは、顧客への近接性は交渉できません。すべての製品クエリ、カートの更新、在庫チェックが起源に触れます。アテネやギリシャ諸島の買い物客と、クラウドウェイがローカルノードを持っていないため、 FastPathを展開する必要があります。すべての主要なギリシャのモバイルオペレーターとCloudFlareと直接覗き込み、50ミリ秒のTTFBと真に地元の体験を提供します。
  1. 支援ベンダーとのパートナー：アテームやフィボスチャルから溶接、ピクセル、重力形態、アイオソー、およびWPロケット自体まで、質問に答えたりトラブルシューティングしたり、トラブルシューティングをしたりするための信頼できる迅速なサポートを提供するベンダーを選択しました。
  1. コンテンツの最適化：すべての画像をWebPに変換し、それらを日付ベースのフォルダーに整理し、各フォルダーに10,000未満のファイルが含まれるようにしました。フォントの場合、woff2ファイルを自己ホストし、視聴者が必要とするキャラクターのみを含めるようにサブセットします。これにより、フォントファイルのサイズが70〜80％削減されました。ローカルで提供し、早期にプリロードすることで、外部ルックアップとレイアウトシフトを回避することができました。
  1. 手術プラグインのロードを使用し、データベースの衛生状態を維持します。プラグインオーガナイザーと手動フィルターを使用して、ページごとに必要なプラグインのみをロードしました。また、トランジェントを毎週クリーニングし、大規模なWP_OPTIONSエントリ用にAutoLoadを無効にしました。

PageSpeedで99/100になったWPロケット機能

基礎が整ったら、WP Rocketは速度を高め、優れたパフォーマンスの結果を迅速に達成するのに役立ちました。これらの機能は、モバイルでGoogle PagesSpeedで95+スコアを獲得する上で重要な役割を果たしました。

  • モバイルキャッシュとサイトマッププリロード： WP Rocketは、モバイルデバイスを自動的に検出し、専用のキャッシュを構築します。つまり、スマートフォンユーザーは常にプリロードされたHTMLスナップショットを取得します。 SiteMapベースのPreloaderは、キャッシュパージの直後にページをクロールします。これにより、最初の訪問でしばしば発生する遅延が削除されます。
  • CSSとJSの模倣： WP Rocketは、ファイルサイズを縮小するために、ホワイトスペースとコメントを取り除きます。また、JavaScriptファイルを1つに組み合わせて、HTTPリクエストの数を減らすこともできます。これは、より遅いネットワーク上のモバイルユーザーにとって特に重要です。  
  • 未使用のCSS（RUCS）を削除します。 単純なミニフィッシュとは異なり、RUCSはページのHTMLを分析し、フロントエンドで使用されていないすべてのCSSルールをストリップします。このDeclutters StyleSheetsはしばしば数十キロバイトをカットするため、ブラウザはバイトが少ないとより速くレンダリングされます。 RUCSだけがホームページのペイロードから200 kbを剃ったことを可能にすることを可能にし、ロードページがより速くなりました。
  • JavaScriptの実行の遅延：分析、チャットツール、サードパーティのウィジェットなどのスクリプトは、通常すぐに実行する必要はありません。 WPロケットは、ユーザーがスクロール、タップ、またはクリックするまでそれらを遅らせます。これにより、ページはインタラクティブを高速にし、次のペイントとページのユーザーインタラクションに対する全体的な応答性へのインタラクションを改善します。

これらの機能を有効にした後、99のモバイルページスピードパフォーマンススコアを取得しました。

MobileのGoogle PagesSpeedスコア-PagesSpeed Insights
MobileのGoogle PagesSpeedスコア - PagesSpeed Insights

ボーナス：特別なケース用のWPロケットアドオン

時には、ボックスの設定が少しブーストする必要があります。複雑なスケジューラ、カスタムフォントルール、または珍しいデバイスの検出を備えた私たちのような選択セットアップについては、WPロケットシニアエンジニアに相談した後、5つの無料のWPロケットアドオンをインストールしました。

  • RUCSSパラメーターの変更： WP Rocketの頻度と深いWP Rocketが未使用のCSSを削除する程度を調整しました。これは、タスクスケジューラにオーバーロードされる可能性のあるAutomateWooなどのプラグインとの互換性に不可欠でした。
  • WooCommerceカートフラグメントを非アクティブ化：データベースはすでに最適化されていたため、WP Rocketのカートフラグメントキャッシュを無効にして、チェックアウトコールをさらに高速化しました。
  • 使用済みのCSSフォントプリロードを無効にする：マニュアルプリロードルールを備えたカスタムセルフホストWoff2フォントを使用しました。このアドオンにより、これらのルールは、WP Rocketの自動フォントプリロードによってオーバーライドされていませんでした。
  • HTMLの削除ルール：私たちのCDNとサーバーはすでにキャッシュヘッダーを処理しているため、競合を回避するためにWP RocketのデフォルトのHTML有効期限のあるルールを削除しました。
  • タブレットをモバイルとして設定します。モバイルデバイスのようにタブレットを扱い、モバイルキャッシュとレスポンシブの最適化の恩恵を受けました。これは、wp_is_mobile（）checkに依存するカスタム機能にとって重要でした。

タブレットプラグインとは別に、これらのアドオンのほとんどは、高複雑さストアでのみ必要です。典型的なeコマースのセットアップでは、WPロケットはすぐにうまく機能します。

100/100の秘密：怠zyなロードとそのLCP画像の完成

GoogleのPageSpeed Insightsで99に達することは大きなマイルストーンでしたが、私たちは満足していませんでした。私たちと完璧の間に1つのポイントが立っていました。

まず、要素の膨満感に取り組みました。これは、ページ上のHTML要素の数を減らすことを意味します。 Googleは、810を超えるDOM要素を持つページをペナルティし、メニュー、スライダー、フッターだけで1,000を過ぎて私たちをプッシュしました。

これが私たちがしたことです：

  • レイジーロード静的コンテンツ：ヘッダーメニュー、製品カテゴリスライダー、ブランドカルーセル、フッターなどの非クリティカルな要素を、最初のペイントの後まで延期しました。
  • 不要な要素を削除しました：モバイルで深いメニューレベルを剪定し、無効にした非アクティブウィジェット領域を剪定しました。これにより、Googleのペナルティしきい値以下の総Domカウントを取得することができました。

よりクリーンなページを使用しても、100をクラックすることはできませんでした。最終的な問題はヒーローイメージでした。

もともとは、オーバーレイ、影、テキストを備えた350×622 PX画像でした。 350×350 px Webpに簡素化し、次のコードを使用して高優先度でプリロードしました。

 add_action('wp_head','ff_preload_mobile_image',1); function ff_preload_mobile_image(){ if(!is_front_page()||!wp_is_mobile()) return; echo '<link rel="preload" as="image" href="/uploads/lcp-simple.webp" importance="high">'; }

そして、それが、ヒーローイメージを簡素化し、プリロードすることにより、モバイルから完璧な100/100 PSIスコアを達成した方法です。

MobileからのGoogle PagesSpeed Insights：100/100スコア - PSI

ビジネスへの影響：成長エンジンとしての速度

私が説明したように、SpeedはPageSpeedスコアを改善するだけではありませんでした。それは私たちの収益を直接後押ししました。

パフォーマンスを最適化し、WPロケット機能を活用した後、結果に測定可能な利益が見られました。

  • 変換率は33％増加しました。
  • セッションあたりの収益は、0.20ユーロから1.11ユーロから5倍以上増加しました。

これらの結果は、移住後最初の18か月間に追加の384,000ユーロの収益に変換されました。

これらはわずかな改善ではありませんでした。彼らは一致し、最終的に私たちのピークロックダウンパフォーマンスを上回り、サイトの速度が成長の重要なレバーであることを証明しました。

私が言うのが好きなように、 「すべてのミリ秒の剃毛が最終的なユーロを追加しました。」

ビジネスオーナー向けの3つの実用的なヒント

eコマースストアを運営している場合は、技術的であろうとなかろうと、パフォーマンスの取り組みを最大限に活用するのに役立つ実用的なヒントをいくつか共有したいと思います。

  1. 実際のユーザーを追跡する：実際のユーザー監視（RIM）を使用して、フィールドデータに目を向けます。ラボのスコアは有用ですが、実際に重要なのは、実際の訪問者のサイトのパフォーマンスです。歪んだ結果を避けるために、PageSpeed Insightsテストを実行するときは必ず無効にしてください。
  2. 起源をジオロケート：顧客の近くでサイトをホストします。 Origin Serverが視聴者の近くにあるとき、製品検索からチェックアウトまですべてがより速く、より信頼性が高くなります。
  3. LEAN ON WPロケット：デフォルト設定から始めます。彼らはすぐにほとんどのパフォーマンスの問題を自動的に処理します。ベースラインが固体になったら、たとえばCSSやJSファイルを最適化するために、いくつかの追加機能を有効にすることで微調整できます。そして、あなたが技術に精通していないなら、 「サイトがより速く、欲求不満が少なく、売り上げが増え、より幸せな顧客を意味することを忘れないでください。」

まとめます

MagentoからWooCommerceに移動し、モバイルページスピードスコアを55からパーフェクト100に引き上げ、セッションあたりの収益を0.20ユーロから1.11ユーロに増やしました。その旅は明らかに1つのことを証明しました。スピードは技術的なマイルストーン以上のものです。それはビジネスの成長の真の要因です。

私たちはパフォーマンスに焦点を当て、強力な技術基盤を構築し、WPロケットを使用して結果を迅速に解き放ちました。あなたのwoocommerceストアがゆっくりとまたはパフォーマンスの低いと感じるなら、今こそ行動を起こす時です。より高速なサイトとは、訪問者にとってよりスムーズな体験を意味し、ビジネスの真の利益を意味します。