Shopify ストアの速度を最適化する 7 つの方法

読み込みに 4 秒以上かかると、訪問者のほぼ 1/4 がサイトを離れます。 これらの 46% は、Web サイトのパフォーマンスが低いためにサイトに戻ることはありません。 遅いサイトは顧客体験の低下につながり、顧客を遠ざけます。

Web サイトがコンテンツをロードするのに 15 秒待つことはありますか? すぐにサイトを離れて、他の店を探します。 そのため、遅いサイトは Web サイトのトラフィックを妨げ、直帰率を高めます。 これらは両方とも、潜在的な顧客ベースに悪影響を及ぼします。

サイトの速度は、技術的なメンテナンスだけではありません。 収益に直接影響します。 では、Shopify ストア サイトの速度をどのように修正しますか? 今日は、Shopify ストア サイトの速度を最適化するための 7 つのヒントを見ていきます。

1. 画像の最適化
2.サードパーティのアプリを分析する
3. AMP (Accelerated Mobile Pages) を実装する
4. 適切なテーマと機能を選択する
5. レイジーローダー
6.ポップアップを避ける
7. リダイレクトとリンク切れを減らす
8. Shopify ストア サイトのスピード ベンチマーク

Shopify は、ダッシュボード自体にサイトの速度スコアを提供します。 このスコアは、Google ライトハウスのパフォーマンス メトリックに基づいて、サイトの読み込み速度を測定します。 Shopify サイトの平均速度スコアは 50 です。70 を超える値は、優れた速度スコアです。

サイトのスコアが 50 未満の場合は、これらの戦術を使用してサイトのパフォーマンスを改善する必要があります。 これとは別に、Java や HTML スクリプトの縮小、CSS や Javascript のレンダリング ブロックなどの技術的なニュアンスについて専門家の助けを借りる必要があります。 Shopify サイトは HTML、CSS、Javascript などで頻繁に動作するため、サイトの速度が低下します。 したがって、以下のヒントがどれもうまくいかない場合は、コードとサイトのバックエンドを確認してください。

1. 画像の最適化

基本から始めましょう: イメージ。 高解像度の画像は、サイトの速度を遅くする可能性があります。 また、ストアに複数の HD 画像、グラフィック、およびビデオがある場合、サイトは大幅に遅れます。 画像を最適化し、サイトの速度を向上させる 5 つの方法を次に示します。

圧縮画像をアップロードする

それらはファイルサイズを減らし、サイトの負荷を減らします。 ただし、低品質の画像を避けるために、指定された画像サイズに従ってください。

スライダーを避け、ヒーロー レイアウトを選択する

スライダーを通過する訪問者はわずか 1% です。 したがって、4 ～ 7 枚の HD 画像を選択する代わりに、1 つの高解像度画像を使用してください。

GIF や動画は避けてください。

商品に複数の画像が必要な場合は、3 ～ 4 個の高解像度画像を使用してください。 高品質の GIF またはビデオは、訪問者のシステムにロードするのに時間がかかり、時間がかかる場合があります。

遅延ローダーを使用する

多くの画像、ビデオ、または GIF をアップロードすることをやめられない場合、この場合、サイトはユーザーの画面で利用可能なコンテンツのみを読み込みます。 そのため、ユーザーがスライダーを開いたり、ビデオに到達したりしない限り、読み込まれません。 その結果、コンテンツの読み込みが制限されるだけでなく、サイトの実行速度が向上します。

静止画像に固執する

GIF やビデオの代わりに、サイトの負荷を軽減し、速度を大幅に向上させます。

2.サードパーティのアプリを分析する

サードパーティのアプリをインストールすることは、Shopify ストアの所有者にとって標準的な方法です。 これらを追加して、パフォーマンスの向上、機能の追加、自動化などを行います。 ただし、あまりにも多くのアプリを取得すると、コードにも影響します。 速度低下につながります。 そう？

• 何の役にも立たず、役に立たないアプリを特定します。
• これらのアプリをアンインストールします。 アプリの特定の機能が無効になっている場合は、それらを削除してください。
• 機能を無効にしたり、アプリをアンインストールしたりしても、コード統合は削除されません。 そのため、手動で削除する必要があります。

使用していないアプリを削除します。 それとは別に、サイトの速度を妨げるアプリケーションに代わるものを探してください。

3. AMP (Accelerated Mobile Pages) を実装する

2020 年には、ウェブサイト トラフィックの 61% が米国のモバイル デバイスからのものでした。 ユーザーの半数以上が携帯電話から店舗をチェックしています。 ただし、通常の Web サイトを PC に読み込むには、電話の方が時間がかかります。 そのため、携帯電話向けにウェブサイトを最適化することは交渉の余地がありません。

テクニカル チームがモバイルの最適化をお手伝いします。 ただし、Shopify の 3 番目のアプリ ディレクトリから一部のアプリを DIY に追加できます。 FireAMP や Shopsheriff などのアプリが AMP に役立ちます。 これらを設定するにはかなりの時間がかかります。 ただし、そうすることで、はるかに多くの聴衆を獲得できます。

4. 適切なテーマと機能を選択する

Shopify には、テーマ、機能、フォントの膨大なライブラリがあります。 これらはあなたのウェブサイトのデザインを強化し、魅力的に見せます。 ただし、テーマや機能を追加するたびに、サイトの速度が低下します。

• レスポンシブ テーマを必ず追加してください。 テーマが Web サイトの速度を低下させているかどうかを確認してから、テーマを置き換えます。
• 追加されたすべての機能が使用されているかどうかを分析します。 機能に価値がない場合は、それらを削除/無効にします。
• システム フォントの選択: Mono、Serif、および Sans-serif。 ユーザーのシステムが最初にダウンロードしなければならない派手なフォントは避けてください。 このような場合、フォントのダウンロード、フォントの読み込み、Web サイトの読み込みに多くの時間がかかります。 Shopify はフォントに多くのオプションを提供していますが、基本的なシステム フォントに固執することはうまく機能します。

すべてのテーマと機能は、サイトの速度に影響を与える CSS/HTML に重きを置いています。 それらを賢く選択し、不要な要素を避けてください。

5. レイジーローダー

遅延読み込みは、ページが限られたコンテンツのみを読み込む最適化手法です。 ユーザーがストア/サイトの特定の部分にいる場合、その特定の部分のみを読み込みます。 これは遅延ビデオ読み込みに似ています。 必要でない限り、ページはユーザーが関与する要素のみを読み込みます。

画像や動画、GIFなどの重いファイルを多く追加する店舗に有効です。 読み込み時間を大幅に短縮し、サイトの速度を向上させることができます。

6.ポップアップを避ける

ポップアップは、企業が情報製品やニュースレターを強調するために不可欠です。 特定のコンテンツにスポットライトを当てて、より多くの注目を集めるのに役立ちます。 ただし、サイトの速度が低下し、ユーザー エクスペリエンスに影響を与えます。

• ページ全体を占める大きなポップアップを回避します。 読み込み時間が長くなり、サイトの遅延やフリーズにつながります。 また、ページ全体をカバーするポップアップが表示されると、ユーザー側がイライラする可能性があります。
• 特定の価値の高いページでポップアップを使用します。 すべてのサイト/ストア ページにポップアップを追加する必要はありません。 要件を分析し、それに応じて使用します。
• ユーザーがウェブサイトにカーソルを合わせてから数秒後にポップアップを表示します。 Web サイトに出入りするユーザーは、ポップアップに関与しません。 そのため、ユーザーがストアに到着してから 7 ～ 15 秒後にポップアップを追加します。 それらはより効果的で、クリック率が高くなります。

7. リダイレクトとリンク切れを減らす

ストアには、さまざまなリダイレクトや壊れたリンクがある場合があります。 ただし、サイトに遅れが生じ、速度が大幅に低下します。 これは、Shopify ダッシュボードから 404 リダイレクトを行うことで直接修正できます。

または、ユーザーを新しい URL に誘導する 301 リダイレクトを追加することもできます。 また、技術チームの助けを借りてこれらのリンクを削除することもできます。 壊れたリンクを削除し、リダイレクトを減らします。

これらすべてのヒントに加えて、ストアの最適化に Google タグ マネージャーを使用できます。 コードをツールに移行すると、すべてのコードを非同期で一緒に読み込むことができます。 技術的な面から言えば、ストアの速度を向上させる方法はたくさんあります。 HTML/CSS の縮小、レンダリングのブロック、不要なコードの削除、および移行を意味する可能性があります。

しかし、サイトの読み込みに平均でどれくらいかかるでしょうか? いくつかのベンチマークを見てみましょう。

8. Shopify ストア サイトのスピード ベンチマーク

ダッシュボードで利用できる Shopify ストアの適切な速度は 50 以上です。ただし、サイトの速度を確認するために展開できるツールは他にもあります。

平均的なサイトでは、最初の画像を読み込むのに約 3.8 秒、インタラクティブになるまでに 22.1 秒かかります。 あなたのサイトはもっと時間がかかりますか？ Shopify ストアのサイト読み込み速度を確認します。

これは、平均と最高の Shopify ストア速度ベンチマークを示すグラフです。

これに加えて、ここでもサイトの速度を確認できます.

これらのサイトを使用する場合は、テストを 3 回実行して明確な全体像を把握してください。 それ以降は平均を使用しますが、単一のテストには依存しません。 これにより、より良い結果とストア速度の明確な全体像が保証されます。

よくある質問

Shopify ストアの最適な速度はどれくらいですか?

Shopify スピード スコアはダッシュボード自体に反映されます。 ストアは 50 を超えるスコアを取得するように努める必要があります。70 の速度スコアは、Shopify ストアにとって優れていると見なされます。

ウェブサイト、特に Shopify ウェブサイトの速度を低下させる最も一般的な項目は何ですか?

ストアの速度に影響を与える最も一般的な項目は、画像と重いバックエンド コードです。 高解像度の写真、ビデオ、および GIF は、読み込んでインタラクティブになるまでに時間がかかります。 一方、テーマ、機能、およびサードパーティのアプリは Web サイトのコードを増やし、ストアの速度を低下させます。