Shopifyページの読み込み速度を改善する方法

最適化されたページ読み込み速度の重要性

1. 直帰率を下げる

• Hubspot Google統計ページの読み込み時間が超過した場合 3 seconds直帰率は最大で 32%つまり、ページの読み込みに時間がかかるほど、顧客がウェブサイトのコンテンツを見る前に離脱する可能性が高くなります。
• 読み込み時間が 5 seconds直帰率は最大 90%、そしてそれが 10 secondsこの数字は 123%.

2. ユーザーエクスペリエンスとコンバージョンの向上

• 高速なウェブサイトはユーザーを満足させるだけでなく、コンバージョン率も向上させます。ページの読み込みが1秒遅くなると、約 1.6億ドル規模の製品検査を 年間で読み込み速度の重要性が強調されています。
• Shopify はまた、読み込み時間が遅いストアは読み込み時間が速いストアに比べてコンバージョン率がはるかに低いことにも注目しています。

3. SEOを強化する

• Google は、ページの読み込み速度がランキング アルゴリズムの重要な要素であることを確認しました。つまり、読み込み速度が速い Web サイトは検索結果に表示される可能性が高くなります。
• 読み込み速度が速いウェブサイトは、より多くの顧客を引き付けるだけでなく、SEO ランキングの向上にも役立ち、より幅広いユーザーがウェブサイトにアクセスしやすくなります。

ページの読み込み速度はどのように機能しますか?

ユーザーがサイトにアクセスすると、ブラウザはホスティングサーバーやサードパーティのサービスにデータ（画像、スクリプト、フォント、コンテンツ）をリクエストします。これらのデータの読み込みとレンダリングにかかる​​時間によって、以下のことが決まります。

• First Contentful Paint（FCP）： 最初の可視要素が表示されたとき。
• 最大のコンテンツフルペイント（LCP）： メインコンテンツが読み込まれるとき。
• 対話型になるまでの時間 (TTI): ユーザーがページを完全に操作できる場合。

アセットの数が少なく軽量であればあるほど、サイトの読み込み速度は速くなります。GemPagesはこの点に最適化されていますが、重い画像、不要なアプリ、カスタムフォントの多用といった要因は読み込み速度を低下させる可能性があります。

ウェブサイトの読み込み速度を確認するにはどうすればいいですか?

検証ツール

ウェブサイトの読み込み速度を評価するには、2つの便利なツールがあります。 GTMetrix の三脚と GoogleのリソースPageSpeed以下のリンクからアクセスできます。 これらのツールは、Web サイトのパフォーマンスを包括的かつ詳細に表示します。

Google スピードインサイト

ウェブサイト： https://pagespeed.web.dev/

Largest Contentful Paint (LCP)、First Input Delay (FID)、Cumulative Layout Shift (CLS) などの指標を含む、Google の Core Web Vitals 標準に重点を置いています。このツールは、Google が SEO とユーザー エクスペリエンスに重要と考える要素に基づいてパフォーマンスを評価します。そのため、PageSpeed Insights の結果は、Google 検索エンジンでのランキングを最適化したい場合に非常に役立ちます。

GTMetrix

ウェブサイト：  https://gtmetrix.com/

Lighthouse などのツールや、Speed Index (SI) や Total Blocking Time (TBT) などの特定の指標を活用し、ページに影響を与える技術的要因に関するより詳細な分析情報を提供します。GTMetrix では、世界中のさまざまな場所からテストを行うこともできるため、世界中のユーザーの視点から Web サイトのパフォーマンスを把握できます。

• Largest Contentful Paint (LCP): Google PageSpeed Insights と同様に、この値は 2.5 秒未満である必要があります。
• Total Blocking Time (TBT): ページがブロックされている時間を測定し、ページの応答性を最適化します。
• Speed Index (SI): ページのコンテンツが完全に表示されるまでにかかる時間を評価します。値が短いほど良いです。
• First Contentful Paint (FCP): 最初のコンテンツが表示されるまでの時間。できるだけ速くなるように最適化する必要があります。
• Time to Interactive (TTI): ページがユーザーにとって完全にインタラクティブになるまでにかかる時間。

手動テスト

テスト用のツールを使用するだけでなく、実際の読み込み速度をより正確に把握するために、Web サイトを直接体験することも必要です。

ページの読み込み速度に影響を与える要因とその改善方法

GemPages は読み込み速度の最適化を念頭に置いて設計されていますが、ページの読み込み速度に影響を与える要因はいくつかあります。考慮すべき要因は次のとおりです。

1.画像サイズ

ページの読み込み速度が遅くなる主な理由の 1 つは、画像の過剰な使用や大きすぎる画像のアップロードです。

この状況を改善するには、画像のサイズを最適化することが不可欠です。

解決策1: 画像のサイズを変更する

アップロードする画像のサイズを確認してください 1MBを超えない適切なサイズにするために、画像を切り取ったりサイズを変更したりすることができます。目安としては、 最大幅1920ピクセル そしてサイズ 1MB未満.

解決策2: 適切な画像形式を選択する

検討 JPG形式の画像を使用するこれら 2 つの形式は異なる圧縮方法を使用するため、通常は PNG よりもサイズが小さくなります。

GemPages は、Shopify にアップロードするときに画像を自動的に WebP 形式に変換し、画像のサイズを大幅に最適化します。

解決策3: モバイルデバイス向けに画像を最適化する

小さなモバイル画面で大きな画像を使用する必要はありません。そのため、モバイルデバイスに特化して、より適切で最適化された画像を選択できます。

GemPages は画面の種類に基づいて小さいサイズを自動的に選択しますが、完全に最適化するには、これらの画像を手動で更新できます。

たとえば、 ヒーローバナー 要素では、デスクトップ用とモバイル用の 2 つの異なる画像を使用できます。モバイルの場合は、表示と見た目の両方が最適化された小さい画像サイズを選択します。

モバイル画像に関する推奨事項は次のとおりです。

• 幅： モバイル画像の最大幅は通常 640ピクセルと750ピクセルこれは、ページが重くなることなく、ほとんどの最新のスマートフォンで鮮明に表示されるのに十分です。
• ファイルサイズ： 読み込み時間を最適化するには、画像サイズを 100KBと200KB （可能であればそれ以下でも）視覚的な品質をあまり犠牲にすることなく。
• フォーマット： 次のような最新のフォーマットを使用する WebP または圧縮 JPEG高画質を維持しながらファイルサイズを縮小します。

解決策4: 遅延読み込みを使用する

レイジーローディング GemPages は、不要な画像やコンテンツの読み込みをユーザーの画面に表示されるまで遅らせることで、Web サイトの読み込みを高速化する最適化手法です。

つまり、ユーザーが下にスクロールし、コンテンツを表示する必要が生じたときのみ、読み込みが開始されます。

これにより、ページの初期読み込み時間が短縮され、帯域幅が節約され、特にモバイル デバイスやインターネット接続が遅い場合のユーザー エクスペリエンスが向上します。

現在、GemPages はすでにこの機能をネイティブでサポートしているため、この点については心配する必要はありません。

解決策5: 自動画像圧縮アプリを使用する

• Avada SEO スピード画像最適化
• SEOAnt - 画像最適化とスピード 
• 小さなSEO画像最適化、スピード

2. サードパーティのアプリを使いすぎる

解決策1: ヘッダーとフッターを非表示にしてサードパーティのアプリスクリプトの読み込みを回避する

GemPages を使用してランディング ページを作成する場合、コンテンツ、デザイン、販売に必要な機能に完全に集中していることになります。つまり、ストア内のすべてのアプリのすべての機能を読み込む必要がないということです。

この場合、「ヘッダーとフッターを非表示にする”機能については、 このリンク.

ヘッダーとフッターを非表示にすると、GemPages によって作成されたページはアプリから不要な JavaScript スクリプトを読み込みません。

解決策2: 不要なアプリのインストールを制限する

読み込み時間を考慮して適切に構築され最適化された Shopify アプリを選択し、ページが常にすばやく読み込まれるようにします。

3. フォント（特にカスタムフォント）を使いすぎる

異なるフォントを使用するとデザインがより魅力的になりますが、コストもかかります。

解決策: フォントの使用を制限します。

• ページで使用するフォントは最大 3 つにすることをお勧めします。通常は、見出しに 1 つ、本文に 1 つ、合計 2 つだけ使用します。
• さらに、使用を検討してください Googleのフォント カスタムフォントファイルをアップロードする代わりに。

4. 画面ごとにセクションを分けすぎている

GemPages には、特定の画面でセクションを非表示にしたり表示したりできる非常に便利な機能があります。これにより、ユーザーはデスクトップ専用とモバイル専用の 2 つのセクションを作成できます。この方法は、さまざまなデバイスでのコンテンツの表示とデザインを最適化するのに役立ちます。

ただし、異なる画面に表示される独立したセクションを多すぎる数使用すると、意図せずコンテンツの重量が増加し、読み込み時間が長くなる可能性があります。

解決策: デスクトップとモバイルで重複するセクションの使用を制限します。

各画面上の独立したセクションの表示を制限します。ヒーロー セクションやスクロールせずに見えるセクションなど、特に重要なセクションを 1 つまたは 2 つだけ使用することをお勧めします。その他のセクションでは、既存のデスクトップ セクションのレスポンシブ表示を活用して最適化することをお勧めします。

5. テーマが読み込み速度に最適化されていない

読み込み速度が最適化されたテーマを選択するようにしてください。以下に、利用を検討できるテーマをいくつか示します。

解決策1: 軽量テーマを使用する

軽量の Shopify テーマを選択することをお勧めします。無料の Shopify テーマも、次のような優れたデザインなので、迷わず選択してください。

無料のテーマ:

• 夜明けのテーマ
• 体験
• 感覚

有料テーマ

• ブースターテーマ

解決策2: インスタントランディングページ機能（ヘッドレス）を使用する

GemPages の Instant Landing Page はヘッドレス テクノロジーを使用しており、フロントエンドとバックエンドを分離しています。これにより、GemPages はフロントエンドのソース コードを 100% 管理できます。基本的に、GemPages はページを独立したサーバーに保存し、他の Shopify アプリのスクリプトに依存せずに自律的に実行できるようにすることで、読み込み速度を向上させます。

インスタントランディングページの詳細 こちら.

よくある質問

1. ページ ビルダーによってページの速度が低下していますか?

はい、そしていいえ。GemPages は読み込み速度の最適化を念頭に置いて設計されています。読み込み速度は多くの要因に依存するため、ページ ビルダーを使用する場合は、この記事で説明した要因を理解してページ ビルダーを正しく使用することが重要です。

2. ラテンアメリカでページの読み込みが遅いのはなぜですか?

この地域のネットワーク速度とインフラストラクチャは高くありません。

ページを設計する際には、重い画像（ラテンアメリカのページでは一般的な動作）を制限する必要があります。

3. ウェブサイトの読み込み速度をテストするにはどうすればよいですか?

上記のようなテスト ツールを使用します。Google Speed Insights と GTMetrix の 2 つのツールをお勧めします。

4. コンテンツ配信ネットワーク (CDN) は読み込み速度の向上にどのような役割を果たしますか?

A コンテンツ配信ネットワーク（CDN） サイトのコンテンツを世界中の複数のサーバーに分散することで、Web サイトの読み込み速度を向上させる上で重要な役割を果たします。

訪問者がサイトにアクセスすると、CDN は訪問者の所在地に最も近いサーバーからコンテンツを提供するため、データの移動距離が短縮され、読み込み時間が短縮されます。

GemPagesでは、画像をShopifyのCDNに直接保存し、スクリプトをAmazonのCDNでホストすることでパフォーマンスを最適化しています。この設定により、訪問者がどこにいても、GemPagesで作成されたページが迅速かつスムーズに読み込まれます。

これらの強力な CDN を活用することで、世界中でより高速でスムーズなユーザー エクスペリエンスを提供できます。

5. First Contentful Paint (FCP) と Time to Interactive (TTI) の違いは何ですか?

First Contentful Paint（FCP） 最初のコンテンツが画面に表示され、ページの読み込みの開始を知らせるまでの時間です。

対話時間（TTI） ページが完全に使用可能になり、ユーザーが遅延なく操作できるようになるまでにかかる時間です。 

FCP はコンテンツが表示されるタイミングを示し、TTI はページが完全に機能するタイミングを示します。

6. 高速な読み込み速度を維持しながら、視覚的に魅力的なデザインを実現するにはどうすればよいでしょうか?

視覚的に魅力的なデザインと高速な読み込み速度を両立させるには、シンプルさを重視しましょう。見栄えの良いウェブサイトには、複雑なアニメーションや過度に複雑なデザインは必要ありません。

重要なのは、デザインをクリーンでミニマルに保ち、顧客に最高の体験を提供することです。「Less is more（少ないほど豊か）」です。シンプルなデザインを優先し、各要素をピクセルパーフェクトに最適化しましょう。

そうすることで、効率的かつ高速で、パフォーマンスを損なうことなくユーザー エクスペリエンスを向上させる、視覚的に魅力的な Web サイトを作成できます。