Shopifyでコアウェブバイタルを最適化する方法

Core Web Vitals の測定方法や、サイトのスコアが高いか低いかについては、オンラインでたくさんの情報があります。 しかし、特に Shopify を改善するために何をする必要があるかについて、実行可能なアドバイスはほとんどありません。

この記事では、Shopify ストアで Core Web Vitals スコアを正確に改善する方法を見ていきます。 これらの推奨事項の多くを開発者がいなくても実行できるようにしようとしましたが、専門家による技術的な実装が必要なものもあります。

各主要なウェブの重要な指標を順番に分類し、パフォーマンスに影響を与える要因を説明し、Shopify ストアの各 CWV 指標を改善する方法を示します。

以下の見出しをクリックして、そのセクションに直接ジャンプします。

• ShopifyでのコアWebバイタルの計算方法
• ShopifyでLCPを改善する方法
• ShopifyでCLSを改善する方法
• ShopifyでFIDを改善する方法
• Shopify Core Web Vitals アプリ

コア ウェブ バイタルとは

Core Web Vitals とは何かを簡単に要約してみましょう。

Core Web Vitals は、Google が Web ページのパフォーマンスとユーザー エクスペリエンスを測定するために使用する一連の指標です。 各メトリックについて、URL は「緑 - 良い」、「黄色 - 改善が必要」、または「赤 - 悪い」としてマークされます。

Core Web Vitals スコアは、検索エンジンのランキングに直接影響します。

LCP - 最大のコンテンツ ペイント

ページの最大の要素が画面に表示されるまでにかかる時間は?

CLS - 累積レイアウト シフト

ページが読み込まれると、ページ レイアウトはどの程度変化しますか?

FID - 最初の入力遅延

ページがインタラクションに反応するようになるまでにどのくらいかかりますか?

ShopifyでのコアWebバイタルの計算方法

Google が Core Web Vitals スコアを計算する方法を理解することは重要です。これは、有意義な改善を行う方法に影響を与えるからです。 Core Web Vitals のデータは、Chrome Web ブラウザーを使用して実際の Web サイト訪問者のパフォーマンスを測定する CrUX データから取得されます。 これを「フィールドデータ」と呼びます。

各 CWV メトリックには、「悪い」とマークされないようにするために必要な最小平均スコアがあります。 これは、ページのグループに対して記録された平均スコアに基づいています。 Shopify ウェブサイトはコア ウェブ バイタル指標に対してスコア付けされていないことを理解することが重要です。 あなたのウェブサイトの URL は次のとおりです。

Shopify ストアが Core Web Vitals 指標で失敗した場合、Search Console は問題の影響を受けた URL のサンプルを表示します。 これは、問題がどこにあるかを絞り込み、ターゲットの改善を適用するのに役立ちます。 Shopify ストアで Core Web Vitals の最適化作業を開始する前に、まず、どの改善領域が最も影響力があるかを特定します。 良い結果を生まない仕事に時間を無駄にしないでください。

Shopify Core Web Vitalメトリクス最適化のヒント

Core Web Vitals は、最も重要なコンテンツとリソースをできるだけ早く配信することを目的としています。

ページ速度の最適化は 1 回限りのものではありません。 あなたの組織は、ページ速度の影響がすべての意思決定に考慮される文化を採用する必要があります。 ストアの改善を検討するたびに、ページ速度とのトレードオフを検討してください。

ShopifyでLCPを改善する方法

LCP は、ページ上の最大の要素と、ブラウザがその要素を読み込んで画面にレンダリングするのにかかる時間を指します。 これは通常は画像ですが、テキスト要素の場合もあります。

Shopify ストアで LCP を改善するには、LCP に影響を与える要因を理解することが役立ちます。 LCP 要素をロードするために行われる 4 つの段階があります。

LCP は、Web ブラウザーが最大の要素をページに描画/レンダリングするのにかかる時間に関するものです。 読み込みと描画は同じではありません。 LCP 要素が小さな小さなファイル サイズに最適化されている場合でも、LCP には次の理由で長い時間がかかることがあります。

• リソース読み込みの遅延。 ブラウザが要素のダウンロードを開始するのに時間がかかりすぎます
• 要素のレンダリング遅延。 LCP 要素がブラウザーによってダウンロードされた後、要素をページにレンダリングするのに時間がかかりすぎます。

ここで得られる洞察は、LCP は最大の要素のファイル サイズだけではないということです。 上記の 4 段階のプロセスを完了するのにかかる時間です。 LCP スコアを改善するには、LCP 要素の読み込みとレンダリングのプロセス全体に集中してください。

ShopifyページでLCP要素を見つける方法

LCP を改善するには、ページのどの要素が LCP であるかを知る必要があります。 これは Shopify で簡単です。 PageSpeed Insights にアクセスして、LCP を見つける必要がある URL を分析するだけです。 レポートが終了したら、一番下までスクロールして [診断] セクションを確認します。 「Largest Contentful Paint element」という行があります。 これを展開すると、このページの LCP である要素の詳細が表示されます。

LCP 要素を遅延ロードしない

遅延読み込みは、要素がビューポートに表示されたときにのみ要素を読み込むために使用される方法です。 これにより、スクロールせずに見えるコンテンツの読み込みが速くなります。 ブラウザーがエレメントのダウンロードを開始する速度が遅くなるため、LCP エレメントを遅延ロードしないでください。

Shopify ストアでは、通常、商品ページの LCP 要素がメインの商品画像になります。 または、ブログ投稿では、LCP 要素はおそらくブログのヘッダー画像になります。 一部の Shopify テーマは、スクロールせずに見える画像であっても、すべての画像に遅延読み込みを自動的に追加します。 各 Shopify テンプレートを確認し、LCP 要素が何であるかを理解してください。 フォールドの上に表示される場合は、次の属性が HTML タグに含まれていないことを確認してください。

読み込み中 = "怠惰な"

LCP エレメントをプリロードする

rel=”preload” を使用して、Web ブラウザーに特定のリソースをできるだけ早くダウンロードするように指示できます。 LCP 要素に rel=”preload” を適用すると、ブラウザはそのリソースをページに優先的にロードします。

これは、テーマ コードを編集することで自分で行うことができます。 Shopify テーマの開発者向けに、プリロード タグを出力する Shopify Liquid テンプレートに追加できるフィルターがあります。

Nextgen イメージを使用する

WebP などの新しい画像形式は、JPG や PNG などの従来の形式よりもファイル サイズが小さくなっています。 LCP 要素が画像の場合、Nextgen 画像形式を使用するとダウンロード時間が短縮されます。 可能な場合は WebP 画像を使用しますが、nextgen 画像をサポートしていない従来のブラウザーのフォールバックを含めることを忘れないでください。

新しい Shopify テーマは、画像を自動的に WebP に変換し、適切なブラウザーに提供します。

最初の HTML 応答に LCP 要素が含まれていることを確認する

LCP 要素が最初の HTML 応答内で配信されるようにすることで、「リソースの読み込みの遅延」を減らします。 LCP 要素が外部リソース (JS スクリプトなど) によってページに読み込まれる場合、ブラウザが LCP 要素のダウンロードを開始するのに時間がかかります。

これが Shopify ストアに影響するかどうかは、使用するストアのテーマによって異なります。 これをテストする簡単な方法は、LCP 要素が何であるかを調べてから、JS をオフにしてページを表示することです。 LCP 要素がページ HTML に出力されない場合、それは最初の HTML 応答内で配信されないことを意味します。

レンダリングをブロックするリソースを排除する

「レンダリングをブロックするリソースを排除する」というアドバイスは、何年も前から出回っています。 しかし、それは実際にはどういう意味ですか？ スクリプトやスタイルシートなどの一部のリソースは、Web ページのレンダリングをブロックします。 ブラウザーがリソースを検出すると、ページのダウンロードを停止し、代わりにそのリソースをダウンロードして実行します。 これにより、ユーザーへのページのレンダリングが遅れます。

ライトハウス レポートには、任意のページのレンダリング ブロック リソースが表示されます。 そのため、レンダリングをブロックしているスクリプトとスタイルシートを特定し、それらの配信方法を最適化する必要があります。

レンダリング ブロック JS を排除する

まず、defer と async という 2 つの属性を理解する必要があります。 これらの HTML 属性を外部スクリプトに添付して、リソースをダウンロード/実行するタイミングをブラウザに伝えることができます。

そのため、JS スクリプトに async または defer を適用することで、ページ レンダリングへの影響を最小限に抑えることができます。 Shopify は自動的にスクリプトを非同期または延期しないため、テーマの Liquid テンプレートにアクセスして属性を自分で追加する必要があります。 ただし、スクリプトの延期がストアの機能に与える影響を考慮する必要があるため、このプロセスを実行するときは十分に注意してください。

また、Shopify ストアにインストールしたアプリやプラグインが、レンダリングをブロックする JS スクリプトを出力することもわかります。 これらは Lighthouse レポートで特定できます。 ストアにインストールするすべてのアプリを慎重に検討し、ページ速度への潜在的な影響について考えてください。 一部のマーチャントは、未使用のアプリがまだストアにインストールされており、ページの速度に影響を与えていることにさえ気づいていません。 アプリをアンインストールするときは、テーマにレガシー コードが残らないようにしてください。

レンダリングをブロックする CSS スタイルシートを排除する

レンダリングをブロックする CSS を排除するには、スクロールせずに見えるコンテンツのレンダリングに必要な重要なスタイルをインライン化する必要があります。 ほとんどの CSS は使用されないため、訪問者ごとにスタイルシート全体をすぐにダウンロードするのは効率的ではありません。

解決策は、ページのスクロールせずに見える部分をレンダリングするために必要な重要なCSS をインライン化することです。 次に、以下のコードをメインのスタイルシートを非同期的にロードするには、theme.liquid.js を使用します。

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

これをライブ ストアにリリースする前に、テスト テーマを試して、ページがまだ視覚的に正しく表示されることを検証します。

ShopifyでCLSを改善する方法

CLS は、ページが読み込まれるときにページ レイアウトがどれだけ変化するかということです。 原因は通常、コンテンツが読み込まれてレンダリングされるときに画像が移動することです。

画像に幅と高さの属性を追加する

最も簡単な CLS ソリューションは、img タグが明示的な幅と高さの属性を出力するようにすることです。 これらの属性は画像 HTML に適用され、ブラウザに画像の幅と高さを伝えます。 この情報を使用して、ブラウザは画像の縦横比と寸法を計算し、その画像に必要なスペースを確保できます。 これにより、画像がページに追加されたときにレイアウトがシフトするのを防ぎます。

自分の Shopify ストアの画像でこれを行うには、ログインしてテーマ セクションに移動します。 そして、テーマの「コードの編集」に入ります。 次に、画像を出力する Liquid テンプレート内のコード スニペットを見つけ、次のスニペットを img タグに追加します。

 height="{{img.height}}" width="{{img.width}}

Shopify のホームページ、コレクション、商品、ブログに使用しているリキッド テンプレートを見て、img タグが幅と高さの属性を参照していることを確認してください。

フォントを最適化する

Google フォントなどの場所から読み込んだファンシーな Web フォントは、FOUS (スタイル設定されていないテキストのフラッシュ) と呼ばれる問題により、CLS の問題を引き起こす可能性があります。 これは、Web ブラウザーが最初にフォールバック フォントを読み込む場所であり、メインの Web フォントが読み込まれると、テキストが再レンダリングされ、レイアウト シフトが発生します。

サード パーティの Webフォントへの依存を減らす まず、サード パーティの Web フォントへの依存を減らしてみてください。 Web フォントをインポートするときは、必要なフォント ファミリのみをインポートします。 フォント ファイルのサイズが肥大化するため、使用しない場合は、さまざまなフォントの太さとスタイルをインポートしないでください。

プリロード フォントWeb フォントは、スタイルシート内からロードされることがあります。 これにより、ブラウザーがフォントのダウンロードを開始できる速度が遅くなります。 代わりに、フォント ファイルをあなたの店の。 これにより、ブラウザーはフォント ファイルを優先的に読み込むようになります。

font-display:optional を使用するFont-display は、フォント フェイスが 100 ミリ秒以内にダウンロードされなかった場合にブラウザーに何をすべきかを伝える CSS プロパティです。 ブラウザーは最初にフォールバック フォントを読み込みます。カスタム フォントのダウンロードが 100 ミリ秒以内に完了しない場合、ブラウザーはフォールバック フォントをページに表示したままにします。 これにより、カスタム フォントの読み込みが遅すぎてレイアウト シフトが発生するリスクが軽減されます。

ShopifyでFIDを改善する方法

私たちの経験では、FID は、Shopify ストアに影響を与える最も一般的でない Core Web Vital 指標です。 FID は、読み込み中のページの応答性を測定する方法と考えてください。 クリック/タップ以上にユーザーを苛立たせるものはなく、何も起こりません。

FID は、Total Blocking Time (TBT) と呼ばれる別のメトリックに似ています。 TBT は、ページのレンダリングが開始されてから (First Contentful Paint または FCP)、ページが応答するまでの時間 (Time to Interactive または TTI) を測定します。

TBT は、メイン スレッドの処理をブロックする「長いタスク」によって引き起こされます。 メイン スレッドは、ブラウザーがページの読み込みに必要なすべてを処理する場所です。 長いタスクがメイン スレッドの処理をブロックすると、ページがユーザーにとってインタラクティブになる速度が遅くなります。

FIDとTBTの違いは何ですか

FID と TBT の主な違いは、FID がフィールド データ (Shopify ストアを訪れた実際のユーザーからのデータ) に基づいていることです。 一方、TBT は実験室で測定可能であり、定義されたネットワーク条件を備えた不自然な環境でテストを実行することによって計算されます。

独自のページをテストするときは FID を測定できないため、代わりに TBT を測定する必要があります。

FID を改善するには、Shopify ストアがユーザーの最初のやり取りに応答する速度を上げる必要があります。 これは、Shopify ページを可能な限り効率的にロードすることによって行われます。 次の 3 つの領域に注目してください。

サードパーティ コードの影響を軽減する

すべての主要な Web Vitals 指標と同様に、サードパーティの JavaScript が問題の原因になることがよくあります。 250 ミリ秒を超えてメイン スレッドをブロックするサードパーティは、Lighthouse レポートでフラグが立てられます。 ページを Lighthouse で実行して、どのサードパーティ スクリプトが問題を引き起こしているかを特定します。 次に、非同期または遅延に設定できるものを決定します。

JavaScript の実行時間を短縮

JavaScript の実行にかかる時間も重要です。 まず、Lighthouse でページを実行し、実行に最も時間がかかるスクリプトを特定します。 Lighthouse は、2 秒以上かかるスクリプトにフラグを立てます。

コード分​​割を使用する すべての JavaScript コードを 1 つのファイルで配信するのではなく、コードを小さな断片に分割し、そのページに必要なコードのみを配信します。 これは簡単ではなく、コードを管理する開発者のサポートが必要です。 プロジェクトの開始時にShopifyテーマの開発に統合されている場合、これがはるかに簡単になります.

コードの縮小と圧縮 コードを縮小すると、不要な空白とコメントが削除されます。 これにより、ファイルのサイズが縮小されますが、ブラウザーがコードを実行できる速度が向上します。 Shopify の素晴らしい点の 1 つは、ほとんどのテーマ js が自動的に縮小されることです。

圧縮と同様に、js を圧縮するとファイル サイズが小さくなり、Web ブラウザーがコードを実行する速度が向上します。

スレッドの作業を最小限に抑える

メイン スレッドは、すべての作業処理と、ページの作成方法の計算を行います。 メインスレッドが集中的なタスクで占有されている場合、TBT は悪化します。 これは主に、Shopify テーマの堅牢性にかかっています。 貧弱な開発者によって作成された安価なテーマは、Shopify の専門家によって開発されたテーマほど効率的に読み込まれません。

Shopify ストアでスレッド作業を最小限に抑えるにはどうすればよいですか? 前述のように、これを最初からテーマに統合すると、はるかに簡単になります。 優れたレビューのあるプレミアム Shopify テーマを購入することをお勧めします。 または、独自の Shopify ストアを構築している場合は、テーマを最適化してスレッド作業を最小限に抑えることができる Shopify のエキスパート開発者と協力していることを確認してください。

Core Web Vitals のパフォーマンスを測定する方法

これで、Shopify ストアで Core Web Vitals を改善する方法を理解できました。次に、Core Web Vitals の進捗状況を測定する方法を知る必要があります。

サーチコンソール

Core Web Vitals に対する Shopify ストアの現在のパフォーマンスを確認する最も簡単な方法は、Search Console を使用することです。 左側のメニューから Core Web Vitals レポートに移動して、サイトの現在のパフォーマンスに関するデータを取得します。 Core Web Vitals の問題がある場所の内訳が含まれ、影響を受ける URL のサンプルが表示されます。

Pagespeed Insights/ライトハウス

Pagespeed Insights は、任意のページのページ速度を測定できる無料の Google ツールです。 ツールを使用して Shopify URL を実行し、パフォーマンスの詳細な内訳と、より高いスコアを達成するための推奨アクションを取得します。

CrUXレポート

CrUX は、何百万もの実際のページの速度/パフォーマンスに関する Google 独自のデータセットです。 Google CrUX Data Studio ダッシュボードを使用して、独自の Shopify ストアの CrUX データにアクセスできます。 ダッシュボードには、過去 16 か月間の Core Web Vitals メトリック全体でのサイトのパフォーマンスの詳細な内訳が表示されます。

これらすべての CWV 用語は何を意味しますか?

Core Web Vitals を見始めると、多くの複雑な用語に出くわします。すべての意味は次のとおりです。

コア Web バイタル Shopify アプリ

Core Web Vitals スコアを改善できると主張する Shopify アプリはたくさんあります。 これらのアプリの一部は効果的で、パフォーマンスの向上を実現します。 これにより Core Web Vitals スコアが改善される可能性がありますが、効果が見られるという保証はありません。 これは、Core Web Vitals スコアがすべての Shopify ストアに固有であるためです。 特定のテーマの問題が原因でストアの Core Web Vitals スコアが低い場合、アプリはおそらく何の違いもありません。

アプリ ルートを使用する場合は、アプリを試用し、パフォーマンスへの影響を観察することをお勧めします。 試用におすすめのアプリは次のとおりです。

• https://apps.shopify.com/core-web-vitals-booster
• https://apps.shopify.com/page-speed-optimizer
• https://apps.shopify.com/swift

e コマース ビジネスに関するアドバイスやサポートが必要な場合は、当社のチームまでご連絡ください。喜んでお手伝いさせていただきます。