簡単な答え: ほとんどのShopifyストアで速度の問題は、アプリと画像が原因であり、その解決策は巧妙なエンジニアリングではなく、削除と圧縮です。管理画面の速度スコアは無視し、実際の訪問者からのLargest Contentful Paint、Interaction to Next Paint、Cumulative Layout Shiftを測定してください。これらがGoogleが使用し、コンバージョンと相関する指標です。

正しい3つの数値を測定する

Shopifyの管理画面にはスピードスコアが表示されます。これはLighthouseのラボスコアであり、シミュレーションされたデバイスでのシミュレーションされたロードを示しています。訪問者とは関係のない理由で変動します。先月の自分のストアと比較するのには便利ですが、Googleが使用するものではありません。

Googleが使用するのはフィールドデータです。実際の接続で実際の人々に何が起こったかを示します。

メトリック 測定内容 合格基準 通常のShopifyの原因
LCP メイン画像や見出しが描画される時間 < 2.5秒 ヒーロー画像が遅延読み込みされている、圧縮されていない、またはスライダーの後ろにある
INP ページがタップに応答する速さ < 200ms メインスレッドで実行されるアプリのJavaScript
CLS レイアウトのジャンプ量 < 0.1 サイズ指定のない画像、遅れて挿入されるバナー、フォントの入れ替え

Search ConsoleのCore Web Vitalsレポートは、あなたの訪問者からのこれらのデータを示します。PageSpeed Insightsは、URLに対してフィールドデータとラボデータの両方を表示します。まずフィールドセクションを読み、ラボセクションはなぜを診断するためのものとして扱ってください。

アプリは通常、最大の単一行

スクリプトを挿入するアプリは、ダウンロード、解析、実行のためにバイト数を増やし、ページがそのアプリを使用しているかどうかに関わらず、すべてのページでそれを行います。12個のアプリは12個の小さなコストではなく、同じメインスレッドを競い合う12個のアプリです。

適切に監査する:

  1. インストールされているすべてのアプリをリストアップし、それぞれが何をもたらしているかを書き出します。答えられないものは候補です。
  2. 候補をアンインストールします。
  3. その後、テーマに残りがないか確認します。 これは多くの人が飛ばすステップです。アプリをアンインストールしても、theme.liquidに追加されたスクリプトタグが必ずしも削除されるわけではないため、もはや持っていないアプリのロードコストを支払っている可能性があります。テーマ内でアプリの名前やCDNドメインを検索してください。
  4. 各削除後に再測定し、最後にまとめて測定するのではなく、どれが重要だったかを把握します。

Googlebotシミュレーターは、クローラーが受け取る生のHTMLを表示し、ページのどれだけがサードパーティのスクリプトであるかをレンダリング前に素早く確認する方法です。

画像: 圧縮、サイズ調整、ヒーロー画像の遅延読み込みを停止

画像は通常、Shopifyページで最大のバイト数を占め、半分にするのが最も簡単です。

ShopifyのCDNは、多くのマーチャントが気づいている以上のことをすでに行っています。 WebPを受け入れるブラウザには自動的にWebPを提供し、URLパラメータを通じてサイズを調整します。しかし、4 MBのオリジナルを元に戻すことはできません。より小さな形式を提供するのであって、より小さな写真を提供するわけではありません。アップロード前に圧縮してください。

スロットに合わせてリクエストのサイズを調整する。 2,400pxの画像を600pxのカラムで表示すると、バイト数の3/4が無駄になります。Shopifyの画像URLは?width=を受け入れますので、それを利用し、srcsetを提供して、スマートフォンがデスクトップ用の画像をダウンロードしないようにしましょう。

ヒーロー画像は遅延読み込みのルールの例外です。 ほとんどの場合、LCP要素であるため、遅延読み込みするとGoogleが計測する唯一の画像を遅らせることになります。loading="eager"とfetchpriority="high"を設定し、折りたたみ以下のすべてを遅延読み込みしてください。「どこにでも遅延読み込みを追加」して遅くなるストアは、ほとんどの場合、まさにこれを行っています。

常に幅と高さを設定する。 それがないとブラウザはスペースを確保できず、画像が到着するとページが再配置され、CLSが発生します。Shopifyでの画像SEOではaltテキストとファイル名の側面をカバーしていますが、これは純粋にパフォーマンスの側面です。

フォントと見えないコスト

カスタムフォントは、初回訪問時に実際のコストとして支払われます。以下の3つのルールで大部分をカバーできます：

  • 少なく送る。 フォントファミリーは2種類、ウェイトはそれぞれ2つで十分です。4種類のファミリーはデザイン上の選択ですが、パフォーマンスに影響を与えます。
  • font-display: swapを使用。 これを設定しないと、フォントが読み込まれる間、テキストが見えなくなり、ページが速くても壊れているように感じられます。
  • フォントホストへの事前接続。 theme.liquidに1行追加するだけで、重要な経路でのDNSルックアップとTLSハンドシェイクを省略できます。

Shopifyの独自フォントライブラリは、ストアフロントと同じオリジンから提供されるため、接続コストが完全に排除されます。ブランドフォントが必須でない場合は検討する価値があります。

修正できないこと、そして試みるのをやめるべきこと

Shopifyはサーバーの応答時間、CDN、チェックアウト、そしてコアプラットフォームのJavaScriptを管理しています。これらを調整することはできず、Lighthouseレポートの重要な部分はこのカテゴリーに含まれます。

これは期待値の設定において重要です。すべてのストアに共通する最低限の基準があり、それを超える「速度最適化サービス」を約束するものは別の何かを売っているのです。実際にあなたの手に委ねられているのは、HTMLが到着した後のすべてです。そして、アプリが多いストアでは、ほとんどの回避可能な損失がそこに存在します。

計画の順序

第1週 — 測定と削除。 Search ConsoleからLCP、INP、CLSを記録します。アプリを監査し、不要なものをアンインストールし、テーマに残っているスクリプトを探します。再測定します。

第2週 — 画像。 ホームページと主要コレクションのヒーロー画像を圧縮して再アップロードします。明示的な幅と高さを追加します。ヒーロー画像の読み込み属性を修正します。スライダー画像を実際に表示されるものに減らします。

第3週 — フォントとサードパーティ。 フォントファミリーとウェイトを削減します。preconnectを追加します。初回描画に必要ない残りのサードパーティスクリプトを遅延させます。

第4週 — 再測定と停止。 フィールドデータは最大28日遅れるため、第1週を第2週で評価しないでください。3つの数値が合格したら停止します。合格したストアでのさらなる最適化は、他の場所でより多くの利益を生む努力です。

速度の重要性

速度は決定要因の一つです。クエリに対して適切に答えられない速いページは、遅いけれども適切に答えるページに負けてしまいます。そのため、「Core Web Vitalsの改善」が2,000の商品があり、メタディスクリプションがないストアで最も価値のある項目になることは稀です。

訪問者が遅いストアを離れてしまうため、また実際のランキング要素であるため、速度を改善する必要がありますが、正直に優先順位をつけましょう。Shopify SEOチェックリストは他の要素との順序を示し、無料監査では速度が本当にあなたの制約条件なのか、それとも単に最も目立つ改善点なのかを教えてくれます。