ページの読み込み時間を短縮する

読み込み速度とは何ですか?

読み込み速度、 としても知られている ページの読み込み時間は、ユーザーがリクエストを送信してから、ウェブページのコンテンツがブラウザに完全に表示されるまでにかかる合計時間を指します。これには、画像やテキストからスクリプトやスタイルシートまで、あらゆるものが含まれます。

Googleは読み込み速度をランキング要素として利用している特にモバイルファースト インデックスに適しています。 

ウェブサイトの読み込み速度を確認する方法

最適化を行う前に、ベンチマークを取得することが重要です。信頼できる2つの方法をご紹介します。

1. オンライン速度テストツールを使用する

• GoogleのリソースPageSpeed: モバイルとデスクトップの両方の速度スコアと実用的な提案を提供します。
• GTMetrix: 最初のバイトまでの時間 (TTFB)、最大コンテンツ ペイント (LCP) などの詳細なレポートを提供します。
• Pingdomのツール: さまざまな地理的地域からのテストに適しています。

通常、それぞれに独自の計算指標があり、異なる結果を提供しますが、最終的には、フロントエンド、つまり顧客の閲覧デバイス上でページがどのように機能しているかを大まかに推定できます。

2. 手動テストを行う

場合によっては、自分自身の印象が最善の監視ツールになることもあります。技術的な測定ツールを使用する以外に、いつでも Web サイトの負荷をテストすることもできます。

複数のデバイス、複数のインターネット接続、さまざまなブラウザを使用して、Web サイトにアクセスし、ページを閲覧して、Web サイトが標準どおりに機能しているかどうかを確認します。

読み込み速度を最適化する方法

ページのパフォーマンスには多くの要因が関係しており、制御可能なものもあれば、そうでないものもあります。ストアを最適に最適化するために制御可能なコンポーネントのリストをまとめました。

1. メディアファイルを圧縮する

ストアにアップロードする前に、すべてのメディア ファイルが適切に最適化されていることを確認してください。高解像度の画像は必要な場合にのみ使用してください。そうしないと、サイトの読み込みに時間がかかり、悪い第一印象を与えてしまいます。

2. 画像の品質と解像度を調整する

GemPages V6を使用している場合は、 ヒーローバナー and 視差 要素に応じて、 ライター and 最軽量 バナーの解像度 画像のクオリティ ドロップダウンメニュー。

画像要素では、 画像のクオリティ画像の解像度は、 画像解像度 ドロップダウン メニュー。読み込み速度が速く、かつ鮮明な画像品質を保証する合理的な解像度を選択します。

V7では、画像最適化はCDN経由で自動的に処理され、次のような追加のパフォーマンス制御が追加されました。 遅延読み込み and プリロード 要素ごとに利用可能なオプション。これにより、手動で設定することなく読み込みを高速化できるだけでなく、デバイス固有の画像を制御できます。

3. 不要なコードを縮小する

Shopifyで

• 不要な HTML、CSS、JavaScript、Liquid コード、空白、コメントなどを削除して、テーマ コードを最適化します。
• サードパーティ アプリのリストを整理する: Shopify アプリ ストアからサードパーティ アプリをインストールして使用すると、アプリによってテーマにコードが生成されます。使用しなくなったアプリは削除することを検討してください。
• Google や Facebook の冗長な行動追跡コードは、サイトの速度を低下させる可能性があります。実際に使用するコードのみを保持するようにしてください。

In GemPages

• ページ上に未使用の要素が残っていないことを確認してください。
• あなたの 遅延読み込み 特徴。

• フォントとスタイルシートのプリロード機能を活用しましょう。 フォントとスタイルシートをプリロードする この機能とは、ブラウザにページの主要リソース（フォントやスタイルシートなど）を事前にリクエストして読み込むよう指示するディレクティブであり、読み込み速度を大幅に向上させます。 GemPages バージョン 7この機能はすでに 統合されており、デフォルトで有効になっています。

4. リダイレクトチェーンを減らす

一方、 URLのリダイレクト 便利なものもありますが、多すぎると余分なHTTPリクエストが発生し、読み込み処理が遅れる場合があります。ベストプラクティス：必要がない限り、ページからページへのリダイレクトは無効です。
URL を変更した場合は、リダイレクトに頼るのではなく、内部リンクを更新してください。

5. 高速CDNを使用する

GemPages 高速 CDN (コンテンツ配信ネットワーク) を実装して、世界中のコンテンツをキャッシュし、顧客がどこにいてもサイトの読み込みを高速化します。

GoogleやBingなどの主要検索エンジンでは、モバイルページのパフォーマンスは長年にわたり重要なランキング要因であり、デスクトップ版はそれ以前から重要なランキング要因とみなされてきました。それだけでなく、速度は訪問者のエクスペリエンスを向上させ、直帰率を下げ、最終的には収益を向上させる上で重要な役割を果たします。つまり、コンバージョン率を高めたいのであれば、ページの読み込み速度の最適化は絶対に無視できない要素なのです。

よくある質問

1. Shopify または GemPages のコレクションページの速度を上げるにはどうすればよいですか?

コレクションページは商品画像が多く表示され、フィルタリング機能や並べ替え機能が含まれている場合があるため、読み込みが遅くなることがよくあります。パフォーマンスを改善するには、以下の方法をお試しください。

• アップロードする前に製品画像を圧縮してサイズを変更します。
• 　 遅延読み込み GemPages では、画像の読み込みが画面に表示されるまで遅延されます。
• ページ区切りを有効にして、ページあたりの商品数を減らします。
• コレクションページで負荷の高いサードパーティ製アプリやスクリプトを制限します。
• 可能な限り、リソースを大量に消費するアプリではなく、Shopify の組み込みフィルタリングを活用しましょう。

• バナーとセクションの画像を圧縮します。
• 画像とビデオには遅延読み込みを使用します。
• ホームページで使用されるアプリとスクリプトを最小限に抑えます。
• GemPages に重要なフォントとスタイルシートをプリロードします。

• 製品画像とサムネイルを圧縮します。
• スクロールせずに見える範囲の画像に対して遅延読み込みを有効にします。
• 余分なアプリやサードパーティのスクリプトを制限します。
• 重要なフォントとスタイルシートをプリロードします。