スピードのためにあなたのeコマースサイトを最適化する11の方法

eコマースビジネスとして、サイトのパフォーマンスを最適化することはあなたの最優先事項の1つでなければなりません。

これは、ページの読み込み速度によってコンバージョンが直接影響を受けるためです。 今日の消費者は、非常に高速なサイトを期待しています。 オンラインストアが何らかの理由で遅い場合、顧客を失い、最終的には収益を失うリスクがあります。

実際、ページの読み込み時間が3秒遅れると、訪問者の20％が失われると、AberdeenGroupによる2016年の調査によると。

どれくらい速いですか？ デジタルパフォーマンス管理会社のDynatraceによると、2017年にブラックフライデーから1月3日までの間に運営されていた世界の小売ウェブサイトは、平均して視覚的に完成し、2.5秒以内に使用できるようになりました。

サイトの速度を最適化するための重要な方法は次のとおりです。

1.DNSルックアップの数を制限する

eコマースサイトが読み込まれるたびに、ブラウザはドメイン名に対応するIPアドレスを見つける必要があります。 これは、DNS（ドメインネームシステム）ルックアップと呼ばれます。

ブラウザは、メインドメインと、Twitterフィードや埋め込みYouTubeビデオなどの外部ソースからのページ上のドメインを検索する必要があります。 したがって、サイトの外部ソースへのクエリの数を減らすと、クライアントが行う必要のあるさまざまなDNSルックアップが最小限に抑えられ、ページの初期読み込みが遅れる可能性があります。 たとえば、画像にハイパーリンクする代わりに、サーバーで画像をホストすることができます。

また、より高速なDNSプロバイダーを探したり、TTL（存続時間）値を変更してDNSキャッシングを利用したり、できるだけ多くのリソースをコンテンツ配信ネットワークに移動したりすることもできます（これについては後で詳しく説明します）。

2.より良いウェブホスティングルックアップに投資する

信頼性の高い高速なWebホスティングは、サイトの速度にとって重要な要素です。 そして、すべてのWebホストが同じように作成されているわけではありません。 Webトラフィックとトランザクションの大幅な急増（大規模な製品の発売中やブラックフライデーからサイバーマンデーの期間など）を処理できるサービスを見つける必要があります。

訪問者がアクセスできないことほど、eコマースサイトの運命は悪くありません。 優れたホスティングサービスは、99.5％以上の稼働時間を保証します。 プレミアムホストは、99.99％もの稼働時間を約束します。

間違いなく、SSL認証と専用IPアドレスが必要になります。

3.写真を圧縮します

画像はウェブサイトの総重量の50〜75％を占めていますが、驚くべきことに、上位100のeコマースサイトの約45％はわざわざ画像を圧縮していません。 彼らはすべきであり、あなたはすべきです。 品質を低下させることなくファイルサイズを縮小するロスレス圧縮を選択できます。

ブラウザがページ上の他の要素に移動する前に画像が完全にレンダリングされるのを待つ必要がないように、常にコードで画像のサイズを設定する必要があります。 あらかじめ設定されたサイズのボックスをそのままにして、サイトの読み込みを続行します。

Photoshop内で画像を圧縮するか、TinyPNGやKraken.ioなどの画像コンプレッサーを使用します。

4.フォールドを超える読み込みを優先します

サイトの上部が訪問者に最初に表示されるため、「フォールドを超える」ものを他のWebサイトよりも速くロードすることは理にかなっています。 このプロセスの別の用語は、レイズローディングです。 これは、多くのブランドで人気のあるデザインの選択肢となっている、単一ページの画像を多用するWebサイトを高速化するのに特に役立ちます。

遅延読み込みを有効にする方法については、こちらをご覧ください。

5.ページをキャッシュします

キャッシュを使用すると、訪問のたびにすべてのページのすべてのコンポーネントをダウンロードするようにユーザーに強制するのではなく、グローバル要素をブラウザーでキャッシュできるため、新しい要素のみがブラウザー要求を必要とします。

サイト検索インデックス、カタログ情報、ユーザー情報、サイドバーブロック、レイアウト手順、翻訳ファイルなどのページ要素がブラウザによって保存されるため、キャッシングにより読み込み時間が短縮されます。 これらの要素は通常、すべてのページで同じままであるため、訪問者が新しいページをクリックするたびにブラウザがこれらのリソースを要求する必要はありません。

ブラウザのキャッシュを有効にするには、HTTPヘッダーを編集して、特定の種類のファイルの有効期限を長く設定する必要があります。 これがGoogleの開発者からのいくつかの推奨事項です。

6.HTTPリクエストを減らします

Webサイトの応答時間の約80％は、画像、スタイルシート、スクリプト、Flash要素などのフロントエンドの要素のダウンロードに費やされます。要素の数を減らすと、ページを完全にレンダリングするために必要なHTTPリクエストの数が減ります。 。

これを行う最も簡単な方法は、Webサイトのデザインを単純にすることです。 しかし、多くの場合、それは実行可能なオプションではありません。 CSSスプライトと画像マップを使用して、複数の画像を1つの画像に結合し、画像リクエストの数を減らすことができます。 また、すべてのスタイルシートを1つのファイルに結合し、すべてのCSSを1つのスタイルシートに結合することもできます。

7.Gzip圧縮を使用する

訪問者がサイトにアクセスすると、サーバーにファイルの配信が要求されます。 ファイルが大きいほど、ブラウザに到達するまでに時間がかかることは理にかなっています。

Gzip圧縮を使用すると、サーバーはサイトファイルをブラウザに返す前に圧縮できるため、転送時間が大幅に短縮されます。 実際、gzipはページとスタイルシートのサイズを90％削減できます！

圧縮は、Webサーバー構成を介して有効になります。 各Webサーバーには異なる命令があります。 詳細については、このGoogleチュートリアルに従ってください。

8.コンテンツ配信ネットワークを活用する

世界中からの訪問者がいるグローバルなeコマースビジネスの場合は、コンテンツ配信ネットワークを使用してサイトのパフォーマンスを最適化する必要があります。 CDNは、サーバーノードを世界中に分散させることで機能するため、サイトの訪問者は、サーバーノードに最も近いノードでキャッシュされたリソースをダウンロードできるため、効率が向上し、読み込みの待ち時間が短縮されます。

CDNプロバイダーは、より大きなネットワークパイプ、世界中に配置されたより多くのサーバー、およびネットワークピアリング機能を誇っています。 さらに、インフラストラクチャを常に監視および最適化する専任のチームがあります。

適切なCDNを選択するのは難しい場合があります。 このガイドから始めてください。

9.コードを縮小する

縮小化とは、機能に影響を与えることなく、ソースコードから空白や行などの不要な文字をすべて削除し、ブラウザがページをより高速にロードできるようにするプロセスです。 このプロセスにはHTML、CSS、JavaScriptファイルが含まれ、読み込み時間の短縮に大きな違いをもたらす可能性があります。 縮小化により、ファイルのサイズと必要なファイルの数の両方が削減されます。

これらのリソースに従ってコードをクリーンアップし、ブラウザがページを簡単にレンダリングできるようにします。

10.非同期ロードを使用する

ブラウザがページをロードすると、ページは上から下に移動します。 CSSやJavascriptなどのスクリプトを同時にロードできるようにすることで、処理を高速化できます。 これは非同期ロードと呼ばれます。 スクリプトが同期的に読み込まれる場合は、ページに表示される順序で読み込まれるため、処理が遅くなる可能性があります。

非同期ロードを有効にする方法の基本的な理解については、このガイドに従ってください。

11.サイトの速度を継続的に監視する

最後に、開始したところから終了します。サイトのパフォーマンスを毎日優先する必要があります。 つまり、サイトの問題を常に監視し、速度と効率を最適化する方法を探す必要があります。

GoogleのPageSpeedInsightsは、モバイルとデスクトップでサイトの速度を分析するための優れたツールを提供します。

サイトの速度を調べるためのもう1つの優れたツールは、Pingdomから入手できます。

経験則を覚えておいてください。サイトの読み込みにかかる時間が1秒長くなると、訪問者の10％が失われます。 痛い。