Shopify Speed Optimization: from a sluggish theme to Core Web Vitals 95+
遅い、アプリが多いShopifyストアが、スクリプト監査、LCP修正、テーマリファクタリングにより95以上のCore Web Vitalsスコアに到達した方法と結果。
問題
成長するShopifyストアは、時間をかけて12個のアプリとサードパーティスクリプトを蓄積していました。モバイルページは数秒インタラクティブになるまでにかかり、Largest Contentful Paintは2.5s閾値をはるかに上回り、ストアはSearch ConsoleでCore Web Vitalsに失敗していました。モバイルでのコンバージョンはデスクトップに遅れていました。
アプローチ
- テンプレートごとにすべてのアプリとサードパーティスクリプトを監査し、レンダリングをブロックする時間とメインスレッド作業のリアルコストを測定しました。
- ページに必須ではないスクリプトを削除または遅延させ、2つの重いアプリを軽いネイティブテーマコードで置き換えました。
- Largest Contentful Paint要素を修正しました。ヒーロー画像をプリロード、明示的な寸法を設定、重要なCSSをトリミングしました。
- テーマのJavaScriptをリファクタリングして、メインスレッド作業を削減し、商品ページとコレクションページのレイアウトシフトを排除しました。
- 継続的なCore Web Vitals監視を設定し、新しいアプリがスコアを静かに低下させることができないようにしました。
結果
すべてのキーテンプレートがモバイルとデスクトップの両方で95以上のCore Web Vitalsスコアに到達しました。Largest Contentful Paintは2.5s閾値を下回り、レイアウトシフトはほぼゼロになり、ストアはSearch ConsoleでCore Web Vitalsに合格しました。より速いモバイルエクスペリエンスはモバイルコンバージョンを顕著に引き上げました。
FAQ
Shopifyストアにとって現実的なCore Web Vitalsスコアは?
ほとんどのShopifyテーマでは、レンダリングをブロックするスクリプトを削除し、LCP画像をプリロードし、未使用アプリを削除すれば、モバイルとデスクトップの両方で90から100のスコアは現実的です。サードパーティアプリが多いストアでも低く始まりますが、機能を失わずに95以上のスコアは達成可能です。
高速なテーマを使っていても、Shopifyストアが遅いのはなぜ?
テーマが主な原因になることはめったにありません。遅さは通常、蓄積されたアプリとサードパーティスクリプトから来ており、各々がレンダリングをブロックするJavaScriptとメインスレッド作業を注入しています。テンプレートごとにすべてのアプリを監査し、不要なものを遅延させるか削除することが、LCPとINPを最も動かします。
速度最適化によってアプリやデザインが壊れますか?
いいえ。この作業は実際に使用しているページにスクリプトを遅延させてスコープします。最も重いアプリのみを軽いネイティブテーマコードに置き換えます。ストアは見た目と動作は同じです。読み込みが速くなるだけで、継続的な監視により新しいアプリがスコアを静かに低下させることはできません。
Core Web Vitalsはコンバージョンとセオに影響しますか?
Core Web VitalsはGoogleランキング信号であり、直接的なコンバージョン要因です。より速いLargest Contentful Paintとほぼゼロのレイアウトシフトはモバイルバウンスを減らし、カートに追加レートを上げます。Search ConsoleでCore Web Vitalsに合格することは、より速い競合他社に対するランキングハンディキャップも削除します。