eコマースサイトの速度を測定および改善する方法（11のヒント）と、コンバージョン率の最適化が重要である理由

公開: 2019-05-30

読み込みの遅いWebサイトはランクが低く、収益が少なく、実行コストが高くなります。どんなビジネスをしていても、オンラインでのプレゼンスがあれば、サイトの速度を向上させることは、バウンス率を下げてeコマースのコンバージョン率を上げるためにできる最も有益なことの1つです。

あなたがeコマースの分野にいるなら、可能な限り最速のサイト速度を達成するために時間とリソースを捧げることはさらに重要です。調査によると、サイトの速度は、製品のランキング、コンバージョン、訪問者あたりの価値に直接かつ大きく影響します。

しかし、多くの小売業者は重要な変更を行うことを約束することを望んでいません。サイトの速度の最適化は複雑に見える場合があります。注意が必要な分野はたくさんありますが、その多くは、ほとんどの人が持っていない特定のコーディングスキルを必要とします。

同じように感じても心配しないでください。このガイドでは、画像圧縮からCDN、サーバー側のデータベースの最適化など、知っておく必要のあるすべてのことを説明します。基本を理解すると、サイトの速度を成層圏に直接送るのに十分な自信と知識を身に付けることができます。技術開発や最適化の知識がなくても。

これはあなたがこの投稿で見つけることができるものです：

サイトの速度とは何ですか？
サイトの速度が重要なのはなぜですか？
現在のサイトの速度を確認する方法：Google PageSpeedInsightsの結果の説明
ページ速度を上げるためのトップのデータに裏打ちされた方法
1.ホスティングプロバイダーの速度を確認して改善する
2.画像を最適化する
3.ブラウザのキャッシュを有効にする
4. HTML、JavaScript、CSSを縮小する
5. AMP（Accelerated Mobile Pages）とPWA（プログレッシブウェブアプリ）を活用する
6.パフォーマンスの悪いWordPressプラグインを殺す
7.コンテンツ配信ネットワークを使用する
8.サーバーの応答時間を最適化する
9.可能な限り圧縮を使用する
10.可能な限りファイルを非同期にロードする
11.リダイレクトを減らす
サイトの速度を上げるのに役立つツール
eコマースサイトの速度を向上させる準備はできましたか？

いいですね？ それでは掘り下げましょう！

サイトの速度とは何ですか？

サイトの速度に関しては、よくある誤解がたくさんあります。投稿の要点に飛び込む前に、いくつかの重要な用語を定義しましょう。

まず、「ページ速度」と「サイト速度」を区別することが重要です。ページ速度は、Webサイトに特定の1つのページをロードするのにかかる時間です。サイトの速度は、サイト全体のページのサンプルの平均速度です。

まず、ページの速度とサイトの速度を区別することが重要です。ページ速度は、Webサイトに特定の1つのページをロードするのにかかる時間です。サイトの速度は、サイト全体のページのサンプルの平均速度です。クリックしてツイート

多くの点で、この区別は恣意的ですが、混乱を避けるために理解する価値があります。この投稿は、ページ固有の最適化のヒントとサイト全体の最適化のヒントの両方を提供することを目的としています。ベストページプラクティス（今後すべてのページをどのように設計するかを通知します）を実装することにより、重要な指標であるサイト全体の速度を向上させることができます。

サイトの速度は、ページの読み込み時間（ページが完全にレンダリングされるのにかかる時間）または最初のバイトまでの時間（ブラウザーがサーバーからデータの最初のバイトを受信するのにかかる時間）で測定できます。一般的に、ページの読み込み時間（および同様のバリエーション）は、より正確で一般的に使用される測定値ですが、特定のコンテキストでは、最初のバイトまでの時間も有用な数値です。

サイトの速度が重要なのはなぜですか？

サイトの速度は、検索ランキング、エンゲージメント、コンバージョンなどに関連する多くの重要な方法でWebサイトに影響を与えます。しかし、多くのウェブマスター、その中のeコマース小売業者は、サイトのこの重要な側面を見落としています。

サイトの速度は、検索ランキング、エンゲージメント、コンバージョンなどに関連する多くの重要な方法でWebサイトに影響を与えます。しかし、多くのウェブマスター、その中のeコマース小売業者は、サイトのこの重要な側面を見落としています。クリックしてツイート

読み込み時間が遅いと、収益に直接影響します。ソース

サイトの速度を改善することは、競争力を獲得するための最も確実な方法の1つです。それがなぜそれほど重要なのかを簡単に見てみましょう。

サイトの速度は検索ランキングに影響します

サイトの速度は、Googleの主要なランキング要素です。グーグル自体はこれを何度も繰り返してきました。また、多数の独立した分析により、SEOに関しては、サイトの速度が最適化にとって最も重要な領域の1つであることが確認されています。

成長はこれであなたのeコマースのコンバージョン率、売上高と利益をハックします
115ポイントのeコマース最適化チェックリスト

無料の電子ブックを入手する

Yoastのために書いているEdwinToonenは、次のように述べています。「SEOの人々が屋上から叫んでいるので、注意深く耳を傾ける必要すらありません。サイトの速度がすべてです。新しい記事、ホワイトペーパー、Googleの担当者、またはSEOの専門家が、速度の最適化は今できる最も重要なことの1つであると言ってくれない日はありません。もちろん、彼らは正しいです！」

サイトの速度はバウンス率に影響します

読み込みに時間がかかると、サイトを離れる可能性が高くなります。このアクティビティは、Googleにとってマイナスのシグナル（顧客エンゲージメントが低いことを示す）であるだけでなく、コンバージョン率にも直接影響します。

あなたのサイトがロードするのに時間がかかりすぎるために顧客が立ち往生していない場合、彼らはあなたの素晴らしい、コンバージョン最適化されたページと優れた製品を見る機会がありません。

サイトの速度は顧客の価値に影響を与える

調査によると、ページビューあたりの価値はサイトの速度とともに増加します。ここでは、数パーセントのポイントについて話しているだけではありません。サイトの読み込み時間を1秒に短縮すると、ページビューあたりの価値を最大100％向上させることができます。

サイトの速度を1％未満に下げると、ページビューあたりの価値が最大100％増加する可能性があります。ソース

低いサイト速度を経験すると、心理的に悪影響があります

ウェブサイトの読み込みが遅いと、顧客の不満につながり、プロ意識の欠如が伝わります。

ページの読み込みに時間がかかりすぎると、人々は目に見えるストレスを感じます。そして、見込み客があなたのブランドをそのネガティブな体験と関連付けると、将来的にはそれをぼんやりと見ている可能性が高くなります。

逆に、読み込みの速いサイトは、顧客にポジティブなユーザーエクスペリエンスを提供し（この11のUXのヒントをチェックしてください！）、ストアのプロ意識と品質を伝えます。

現在のサイトの速度を確認する方法：Google PageSpeedInsightsの結果の説明

サイトの速度をテストするために利用できるツールは多数あります。 DNSプロバイダーの速度や最初のバイトまでの時間（TTFB）など、特定の領域に焦点を当てているものもあれば、より包括的なものもあります。出発点として、Google PageSpeedInsightsよりも優れたオプションはありません。

サイトに完全な医療を提供する方法とその結果の意味は次のとおりです。

1. Google PageSpeed Insightsにアクセスし、テキストバーにURLを入力します。「分析」を押して結果を取得します。このウォークスルーでは、例としてZapposを使用します。 Google PageInsightsは、間違いなくサイトの速度をテストするために利用できる最高のツールであり、完全に無料で非常に包括的です。

2.ページの上部に含まれる全体的な結果に加えて、ページを低速、平均、または中のいずれかにランク付けし、モバイルとデスクトップの両方について3セットの結果が提供されます。

フィールドデータ–これは履歴データに基づいており、Googleによって追跡されたユーザーのサンプルから取得されます。これは、特定のテストケースだけでなく、過去に発生した可能性のある永続的な問題を確認できるので便利です。下の色とりどりのバーは、ページがChromeユーザーエクスペリエンスレポートの他のページ（Googleがデータを保持しているすべてのページ）とどのように比較されているかを示します。
起点の概要（自動的には表示されません） –クリックして展開する必要がある起点の概要には、サイト全体（個々のページではない）の平均データが表示されます。「オリジン」はベースURLを指します。
ラボデータ–これらは、[分析]をクリックしたときのパフォーマンスに基づいたWebページの即時結果です。これらは、他のデータを考慮せずに、瞬間的なパフォーマンスから得られた現在の結果です。ページ上部の全体的なサイト速度スコアは、このラボデータに基づいています。

「ラボデータ」セクションには、サイト速度メトリックの最も詳細なドリルダウンがあります。

3.異なるデータを表示する2つのタブ（ヘッダーの青いメニュー）があることを忘れないでください。1つはモバイル用、もう1つはデスクトップ用です。多くの場合、それぞれに関連付けられた最適化の提案を個別に適用する必要があります。

4.各セクションには、2つの主要な速度測定値（FCPとFID）があり、「ラボデータ」セクションには5つの個別の測定値があります。

First Contentful Paint FCP – Webパフォーマンスのコンテキストでは、「最初のペイント」という用語は、ブラウザーユーザーに表示される最初のWeb要素を意味します。「最初の満足のいくペイント」とは、最初のまとまりのあるコンテンツが表示されるときです。ここでの「コンテンツ」の定義は、ドキュメントオブジェクトモデルで個別に定義されているものです。基本的には、画像やテキストのブロックなど、ページの階層の一部を構成する個別の個別の要素です。コンテンツの一部は、Webユーザーが「消費」できるものです。このように、背景の変更や単一ピクセルのような単純なものである可能性がある「最初のペイント」とは区別されます。
最初の入力遅延（FID）–最初の入力遅延は、サイトが応答するまでの速さの尺度です。訪問者がリンクをクリックしたり、画像を拡大したり、製品オプションを選択したりするなどしてサイトを操作する場合、インタラクティブなサイト要素を効果的に「無効にする」バックグラウンドブラウザプロセスのため、応答を受信するのに余分な時間がかかる場合があります。 FIDは、Googleが収集した実際のユーザーデータに基づいているため、ラボデータには含まれていません。
最初の意味のあるペイント–基本的に、視聴者が実際にコンテンツを消費し始めることができる時期の尺度。最初の意味のあるペイントは、メインの折り畳み上のコンテンツとWebフォントの両方がロードされたときに発生しました。 Googleは、これがサイト速度の主要なユーザーエクスペリエンス指標であると述べています。
スピードインデックス–視覚的にページが完全に読み込まれるまでにかかる時間。これは、フレームごとの比較でブラウザのレンダリングが変化しなくなった時間に基づいています。
最初のCPUアイドル–最初のCPUアイドルは、Webサイトが少なくともある程度インタラクティブである時間を示します。すべてのインタラクティブ要素が準備できているわけではありませんが、いくつかは準備ができています。
インタラクティブまでの時間–サイトが完全に読み込まれ、完全にインタラクティブになり、訪問者のアクションに応答できるようになるまでにかかる時間。
最大潜在的最初の入力遅延–テストする場合の可能な限り最高のFIDの予測値。この数値は、実際のデータではなく、ラボのデータに基づいています。

5.これらの3つのセクションの下には、 「機会」というタイトルのセクションと、サイトの速度を落とすことができる時間の長さがあります。これがテストの真髄であり、サイトの速度を向上させるための実用的な提案です。実装手順については、各提案を展開できます。

以下のスクリーンショットからいくつかの例を見てみましょう（これらのほとんどについては、以下のセクションで詳しく説明します）。

「機会」セクションでは、サイトの速度を上げるための具体的な提案が提供されます。

JavaScriptの縮小–縮小は、コード（HTML、CSS、JavaScriptなど）を含むファイルを圧縮して、サーバーからブラウザーにすばやく転送できるようにするプロセスです。
オフスクリーン画像の延期–オフスクリーン画像の延期には、折り畳みを超えていない画像の読み込み時間を遅らせ、最初のサーバーリクエストのサイズを縮小し、全体的な初期読み込み時間を短縮することが含まれます。折り畳み上のすべての画像が読み込まれると、ページの残りの画像がレンダリングされます。
未使用のCSSを削除する–.cssスタイルシートに大量の不要なコードが含まれることは非常に一般的です。このコードを削除すると、CSSファイルのサイズを減らすことができます。すべてのCSSを1つのファイルに含めることで、ブラウザーがデータを解釈するのにかかる時間を短縮することもできます。
次世代フォーマットで画像を提供– JPEG 2000、JPEG XR、WebPなどの画像フォーマット（およびその他のフォーマット）は、品質を犠牲にすることなく、他のフォーマットよりも優れた圧縮を提供します。
サーバー応答時間の短縮（TTFB）–サーバー応答時間は、CMSを最適化したり、より高速なホスティングプロバイダーを選択したりするなど、さまざまな方法で高速化できます。
テキスト圧縮を有効にする–サーバーでgzip機能を有効にすると、ファイル内のテキストが圧縮され、サイズが小さくなり、転送が高速化されます。圧縮されたファイルは、ブラウザで処理できます。

6.最後に、「機会」セクションの下には、「診断」セクションと「合格した監査」セクションがあります。これらは（それぞれ）あなたが合格したベストウェブプラクティスと基準に基づいて機会をさらにスピードアップします。

以降のセクションでは、サイトの速度を向上させるためのさらに多くの提案と、合格した監査を確認できます（変更が適切に実装されているかどうかを確認するのに最適です）。

Google PageSpeed Insightsには、そのすべての機能と提案に関する有益で明確なドキュメントがあり、さらに不確実な点がある場合は優れたリソースです。

他のツールはどうですか？

そのすべての機能について、PageSpeedInsightsは完璧ではありません。

それがつまずく1つの領域は、地理的領域に関連しています。テストサーバーの場所が不明なため、結果が均一でない場合があります。たとえば、サーバーが英国にあり、テストサーバーが米国の西海岸にある場合、前の国のサイトにアクセスした人の結果は速くなります。

PingdomとGTmetrixを使用すると、どちらもテストサーバーの場所を設定でき、PageSpeedInsightsによって提供される画像を補足できます。

ページ速度を上げるためのトップのデータに裏打ちされた方法

では、実用的なヒントをいくつか掘り下げてみましょう。

サイトが瞬く間に読み込まれるようにするために実行できる上位10の手順は次のとおりです。

1.ホスティングプロバイダーの速度を確認して改善する

ショートバージョン：サーバーに前向きな変更を加えることができ、共有プランから専用プランに移行することは有益な場合がありますが、プロバイダーを変更する必要がある場合もあります。管理下にあるタスクに進む前に、プロバイダーからのサービスの品質を確認してください。

ホスティングプロバイダーのサーバーが遅い場合、問題を克服するためにできることはほとんどありません。ソース

Bitcatchaのようなツールを使用して、Webサイトホスティングサーバーの速度をテストし、他社と比較します。

ホスティングプロバイダーが遅い場合、それについてできることはあまりありません。 新しいプロバイダーへの変更を検討する必要があるかもしれません。オンラインストアを運営している場合は、通常、eコマースの経験を持つ専用またはマネージドホスティングプロバイダーに切り替えると便利です。

速度の点でホスティングプラン間の主な違いは次のとおりです。

共有ホスティング–共有ホスティングは、最も安価で最も遅い形式のホスティングです。あなたのウェブサイトは他のユーザーのウェブサイトと一緒にサーバーに保存されます。このような配置の大きな欠点は、すべてのサーバーリソース、特にCPUとRAMも共有されることです。これはサイトの速度に悪影響を与える可能性があり、多くの処理能力を必要とする大規模なサイトでは特に悪影響を与える可能性があります。
仮想プライベートサーバー（VPS）–仮想プライベートサーバーは多くの点で共有サーバーに似ています。複数のサイトが単一のサーバーでホストされていますが、それらは仮想バリアによって分離されており、事実上、独自のサーバーを持つことを再現しています。これの主な利点は、すべてのサーバーリソースがリングフェンスで囲まれていることです。フラットメイトの1人がすべてのお湯を使用して、体を高く乾燥させてしまう可能性はありません。仮想プライベートサーバーを使用すると、サーバーの管理者に対してより高い自由度を得ることができます。また、より多くのスペースが必要な場合は、それを購入することができます。
専用ホスティング–専用ホスティングはVPSホスティングからの次のステップです。専用プランでは、サーバーをレンタルします。サーバーは、サイトの運営にのみ使用されます。また、サーバーサイトの技術的な速度の最適化を可能にする完全な管理者およびルート制御（オペレーティングシステムとセキュリティ設定の選択を含む）があります。専用ホスティングは、大規模なサイトや専用の技術チームを持つ企業に最適です。

一般的に言って、eコマースサイトを運営している場合は、専用ホスティングまたはVPSホスティングのいずれかを選択することをお勧めします。

オンライン小売業者にとって最も評価の高いプロバイダーのいくつかを次に示します。

SiteGround – SiteGroundには、Magento、WooCommerce、PrestaShopなどのeコマースプラットフォーム専用のプランが多数あります。

Liquid Web – Liquid Webの中心的な提案の1つは、優れたカスタマーサービスです。同社は24時間年中無休でアドバイザーにアクセスを提供しており、多くの場合、応答時間は1分未満です。多くのeコマース固有のプランが提供されており（WooCommerceの専用ホスティングを含む）、将来の拡張が見込まれる中小小売業者にとっては素晴らしいオプションです。

InMotionホスティング– InMotionは、eコマース小売業者に非常に人気があり、利用可能な最も価格の高いオプションの1つです。

Rackspace – Rackspaceは、エンタープライズeコマース向けの最高のソリューションの1つであり、専用のクラウドホスト型ソリューションを幅広く提供しています。カスタマーサービスとセキュリティインフラストラクチャは、業界でも最高です。

あなたのホスティングプロバイダーを軽蔑しないでください。それはあなたの管理下にない1つの領域です。また、パフォーマンスよりもコストを優先すると、長期的には収益が低下するだけです。

2.画像を最適化する

ショートバージョン：画像の最適化は、サイトの速度を向上させるための最も簡単で迅速な方法の1つです。画像がウェブに適した形式であることを確認してください。画像の読み込み時間を短縮するには、CSSスプライトを使用します。

サイトの速度に関しては、画像が主な原因です。不必要に大きい画像ファイルはサーバースペースを不必要に占有し、訪問者のブラウザに送信するのにより多くの時間を必要とします。

PhotoShopやGIMPなどのプログラムで画像を最適化して、画像の品質を完全に制御する必要があります。さまざまな形式がさまざまな種類の画像に最適です。たとえば、一般的に言えば、JPEGは写真に最適ですが、ストックカラーを使用した単純な画像はPNGとしてより速くレンダリングされます。

最も一般的な形式とそれらをいつ使用するかについて簡単に説明します。

JPEG（Joint Photographics Expert Group）– JPEGは、高品質の写真や細部にまでこだわった画像におそらく最も広く使用されている形式です。主な利点は、高レベルの圧縮を提供しながら、JPEG画像が適切にレンダリングされることです。写真の場合、JPEGが推奨されるオプションです。さらに高レベルの圧縮を提供できるJPEG2000やJPEGXRなどの新しいJPEGバリアントの使用も検討する必要があります。
PNG（Portable Network Graphics）–フォーマットとして、PNGはJPEGとGIFの間に位置します。品質、幅広い色のサポート、サイズのバランスが取れています。 PNGはJPEGよりも小さい傾向がありますが、色と詳細の点でまったく同じ容量を持っていません。古いブラウザとの互換性について懸念がありましたが、これらは現在ほとんど冗長です。
GIF（グラフィック交換形式）– GIF（Web上で最も古い形式の1つ）は、ロゴなどのカラーパレットが限られている画像に最適です。主にテキストで構成される画像をアップロードする必要がある場合は、GIFが選択する形式です。 GIFファイルの主な利点は、非常に小さい傾向があることです。色の容量が限られているため、GIFをリッチな画像や写真に使用しないでください。基本的なアニメーションにGIFを使用することもできます。リッチメディアにGIFを使用しないでください。サードパーティがホストするコンテンツ（YouTubeなど）を使用すると、サイトの速度が向上します。

正しい形式を使用することに加えて、サイトの速度に合わせて画像を最適化するためにできることがいくつかあります。

画像を必要以上に大きくしないでください–多くのデザイナーや開発者は、大きな画像（多くの場合、数千ピクセルを超える）をサーバーにアップロードし、ページコードを使用してサイズを変更するという間違いを犯します。これは大きな間違いです。 商品ページに1000ピクセルでしか表示されない場合、5,000ピクセル幅の画像を訪問者のブラウザに送信してもまったく意味がありません。 多くの場合、ズーム機能を有効にするには画像を比較的大きくする必要がありますが、できるだけ小さくしてください。 アップロードする前に画像のサイズを変更してください。
画像をアップロードする前に圧縮する–圧縮により、画像ファイルから不要な情報がすべて削除されるため、画像のサイズが小さくなります。画像が撮影された時間など、特定の「見えない」詳細がファイルに埋め込まれている場合があります。 TinyPNG、JPEG Optimizerなどのツール、およびWPSmushなどのプラグインを使用して、このタスクをすばやく実行できます。頻繁に使用するために必要なすべての有料プランは非常に合理的です。
ページに不要な画像を使用しないでください–すべての画像はサイトを完全にロードするのにかかる時間を負担するため、絶対に必要な数より多くの画像を使用しないでください。 それだけのために画像を含めるという罠に陥りがちです。もう1つの製品ショットは傷つきませんよね？ただし、製品ページを作成するときは、不要な画像を削除することをお勧めします（優れた製品ページテンプレートを確認してください）。また、「遅延読み込み」を利用して、（ページ上のすべての画像を同時に表示するのではなく）折り畳み上の画像を最初にレンダリングすることもできます。 HTMLコードで「遅延読み込み」に設定した画像は、ページ上部の情報が訪問者に表示された後、または訪問者がスクロールを開始したときにのみ読み込まれます。

最後に、必要に応じて画像をCSSスプライトとしてサーバーにアップロードします。 CSSスプライトは、1つのファイルに結合された複数の画像のコレクションです。サーバーから画像を個別にロードするのではなく、ブラウザーは単一の画像に相当するものをダウンロードできるため、複数のサーバー要求が不要になります。その後、必要なときに特定の個々の画像のみを表示するようにページコードを調整することができます。この手法は、商品画像からCTA（召喚状）ボタンやソーシャルメディアアイコンまで、あらゆるものに使用できます。

3.ブラウザのキャッシュを有効にする

ショートバージョン：ユーザーが戻ってきたときにサイトファイルを保存して再利用するようにブラウザに「依頼」します。そうすることで、実質的に入力がないリピーターのページ読み込み時間が短縮されます。

ブラウザのキャッシュは、ブラウザがサイトを構成する重要なファイルを保存するときに発生します。これは、訪問者がサイトに戻ったときに、ブラウザがサーバーからすべてのファイルを直接取得する必要がないことを意味します。 更新された可能性のある特定のファイル、または個々のページの特定の部分（ロゴ画像など）を要求するだけで済みます。これにより、サーバーに対して行われる要求の数が削減されるため、ロード時間が大幅に増加します。

キャッシュを有効にすることはかなり簡単なプロセスであり、特定のファイルの有効期限を設定するためにHTTPヘッダーに少量のコードを追加する必要があります。サイトがWordPressでホストされている場合、このプロセスを合理化するために、W3 TotalCacheなどの多数のプラグインがあります。

ページは価格、在庫レベル、レビュー、配送情報などに関して時間に敏感な更新の対象となることが多いため、 Bローザーキャッシングはオンライン小売業者にとって少し注意が必要です。 CSSスタイル、ロゴ、ナビゲーションなど- -と変更の対象となるコンテンツのこれらの作品このため、それは本当に安定したコンテンツを格納し、それらのファイルを区別することが重要です。次に、それに応じてコーディングできます。ヘッダーやフッターなどの特定のページ要素を、時間に依存しない大きなファイル（CSSスタイルシートなど）とともにコーディングすることは完全に可能であり、これらのキャッシュを有効にするだけでも、サイトの速度にプラスの効果があります。

4. HTML、JavaScript、CSSを縮小する

ショートバージョン： CDN（コンテンツ配信ネットワーク）を使用して、自動縮小を有効にし、ファイルサイズを最大60％削減します。 CDNの設定は、CloudFlareやAmazonAWSなどの有名なサービスによって可能になった比較的簡単なプロセスです。

縮小化は、Webファイル内のコードを最小化するプロセスです。 サイトの読み込み時間を大幅に短縮することが示されています。 小さいファイルはより高速に要求され、ブラウザによって解釈されます。この最適化戦略は、ページ速度ツールによって強調されることが多く、実装できる最も効果的なものの1つです。

これは、開発者が理解できる長さと複雑さの不一致（通常、コメント、スペース、コンマなどを含む）と、ブラウザーがページをレンダリングするために必要な最小限のコードの種類のために機能します。この縮小バージョンは、元のバージョンの40％程度の小ささになる場合があります。

縮小化により、Webファイルのサイズを大幅に削減できます。ソース

しかし、重要な問題があります。手動の縮小は大したことではありません。時間がかかりすぎて、間違いの余地が多すぎます。自動化されたツールを使用する場合でも、すべての代替コードを処理および実装するには、開発段階で高レベルの手動入力が必要です。

代わりに、ブラウザに配信する前にコードを自動的に縮小するCDN（コンテンツ配信ネットワーク）を使用するのが最善のオプションです。 元のファイルは独自のサーバーに保存され、縮小されたバージョンはCDNサーバーに保存されます。ページに変更を加えるたびに、ページはCDNサーバーと同期されます。 CDNは他のさまざまな理由でも役立ちますが、後で説明します。

5. AMP（Accelerated Mobile Pages）とPWA（プログレッシブウェブアプリ）を活用する

ショートバージョン：どちらもGoogleが開発したAMPとPWAは、モバイルページの読み込み速度を劇的に向上させることができます。開発コストが大きいため、他のプラス要因を考慮して、PWAまたはAMPへの移行を検討する必要があります（気になる場合）。先に進むことにした場合、サイトの速度に大きな影響を与える可能性があります。

モバイルページをAMPに変換することは大きな仕事になる可能性があり、すべての人に適しているわけではありません。ただし、長期的な戦略として検討する価値は確かにあります。

AMPとPWAとは正確には何ですか？概要は次のとおりです。

Accelerated Mobile Page（AMP）– AMPは、開発フレームワーク– HTMLサブセット（AMP HTML）、JavaScriptフレームワーク、およびオプションのCDN（コンテンツ配信ネットワーク）で構成され、開発者が電光石火を配信できるようにGoogleによって作成されました-速度の最適化に多大なリソースを投資する必要のない高速モバイルページ。 AMPは当初コンテンツベースのサイト用に開発されましたが（多くのニュースページの検索結果に小さな稲妻の矢印が表示されます）、オンライン小売業者の間でますます人気が高まっています。
プログレッシブウェブアプリ（PWA）– PWAは、モバイルブラウザからアクセスするモバイルアプリのようなものです。モバイルホーム画面のアイコンからのアクセスやプッシュ通知など、アプリの機能の多くを複製しますが、カスタムソフトウェアを作成したり、ユーザーが携帯電話に何かをインストールしたりする必要はありません。

2つの間にいくつかの重要な違いがあります（そして多くの議論があります）が、どちらもモバイルサイトの速度を向上させます。 AMPとPWAの実用性については、Googleの包括的なドキュメントから学ぶことができます。

6.パフォーマンスの悪いWordPressプラグインを殺す

短いバージョン：プラグインは、ロード時間の大きな浪費として機能する可能性があります。 eコマースサイトがWordPressでホストされている場合は、プラグインの包括的なレビューを実施し、不要なプラグインを取り除き、「重い」プラグインの代替ソリューションを探します。

使いやすいプラグインが利用できることは、多くの小売業者がWooCommerceやShopifyなどのプラットフォームを選択する理由の1つです。 ほとんどの場合、プラグインは小売業者にとって有益です。それらはパフォーマンスを向上させ、複雑な開発タスクの必要性を排除し、多くの場合無料です。

ただし、コーディングが不適切なプラグイン、サイトの他の要素と競合するプラグイン、または古くなっているプラグインは、サイトの読み込み時間に大きな負担をかける可能性があります。 同様に、大規模なプラグインは、独自のスタイルシートまたはJavaScriptを取得するために、複数のファイル要求を送信する必要があることがよくあります。

幸い、プラグインのトラブルシューティングは非常に簡単です。多くの場合、最も簡単な方法は、速度レポートを使用してプラグインに関連する可能性のある問題を特定し、プラグインが無効になったら再テストすることです。

または、P3などのWordPressプラグインを使用することもできます。プラグインをスキャンし、パフォーマンスの低い領域を強調表示します。
プラグインのもう1つの興味深い点は、プラグインが解決する問題の多くは、Webファイルのコードを簡単に変更するだけで修正できることです。プラグインの乱用は、開発者の知識が不足していることの確かな兆候です。不格好なプラグインで比較的小さな問題を解決するという罠に定期的に陥る場合は、サイトの速度を大幅に低下させる可能性があります。

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

ショートバージョン： CDN（コンテンツ配信/配信ネットワーク）は、サブスクライブが安価で、実装が簡単です。

CDNは、多くのプロバイダーが自動ミニファイのオプションも提供しているため、すでに触れられていますが、自動ミニファイに加えて追加の利点を提供するため、ここで再度言及する価値があります。

CDNは、地理的に離れた場所でのデータ転送の悪影響を軽減します。ソース

CDNの背後にある考え方は非常に賢いです。 CDNは、キャッシュされたバージョンのWebサイトを格納するサーバーのグローバルネットワークです。 これにより、地理的に異なる場所にいる訪問者がサイトにすばやくアクセスできるようになります。訪問者がブラウザを介してサイトにリクエストを送信するたびに、サイトのコピーを保存している最寄りのサーバーに連絡します。

CDNを使用すると、帯域幅のコストを制御し（料金を支払っている場合）、トラフィックの急増に対処することもできます。

8.サーバーの応答時間を最適化する

ショートバージョン：不良サーバーを変更することはできませんが、パフォーマンスの高いサーバーを最適化することはできます。データベースのクリーンアップ、CMSの適切な設定の選択、および高速DNSプロバイダーの選択に重点を置いてください。

最初のバイトまでの時間（TTFB）は、ブラウザーがサーバーから情報の最初のバイトを受信するのにかかる時間の尺度です。 サーバーリクエストには基本的に3つの部分があり、それぞれが最適化の可能性のある領域を示します。リクエストの送信にかかる時間、サーバーがリクエストを処理するのにかかる時間、リクエストされた情報をに送信するのにかかる時間です。ブラウザ。

WebPageTestを使用して、最初のバイトまでの時間を確認できます。 200ミリ秒未満である必要があります。

ネットワークによってサーバーと訪問者のブラウザー間の距離が短くなるため、CDNの使用は第1段階と第3段階を改善するための最良の方法の1つです。

ここで私たちが関心を持っているのは2番目の領域です。 Optimizing server speed is a massive topic that's well beyond the scope of this article, but there are a handful of optimization tweaks that can have a significant effect on server processing speed.

Here's a quick checklist for ensuring good server response time:

Configure your CMS (content management system) for optimal speed – Your CMS is responsible for the management and handling of your content. Check if there are any settings specific to your CMS that can be disabled or enabled to boost response time. On WordPress, for example, you should ensure you have the latest PHP version installed and limit any processes that consume CPU (server resources).
Clean up your database – Whenever a browser requests a dynamic page, your server needs to query a database to retrieve information and “build” that page. Poorly-optimized databases can cause this process to take longer than it should. Server-side caching, which stores a copy of your pages without the need to consult a database, can be a great way to overcome this problem.
Consider a premium DNS (domain name system) lookup service – The DNS turns your domain name into an IP address. Your address is stored with your DNS provider, who needs to be consulted to provide the exact IP that maps to your domain. Opting for a DNS provider with faster lookup functionality can shave milliseconds off your load time. And every millisecond counts. Use this service to check your DNS speed.

Remember to evaluate all of these changes in the context of your TTFB. Generally speaking, server-side changes can be quite technical, so it's good practice to hire an experienced optimization developer to ensure that no mistakes are made. It's also usually easier to implement server changes with a dedicated hosting package, as access to certain functionality may be limited on shared and VPS hosting.

9. Use Compression Wherever Possible

Short Version: Gzip enables you to compress files before they're sent to a visitor's browser. It's an easy server-side function to turn on and can cut file sizes significantly (leading to faster transfer).

Along with images, you can also compress other files to increase transfer speed. You can use gzip functionality to compress CSS, HTML, and JavaScript files that are larger than 150 bytes.

So how exactly does it work?

Whenever your server sends files to a visitor's browser, the size of these files make a big difference to the amount of time it takes to process them. Gzip is a software application that compresses your files (by up to 70%) before they are sent. Because the files are smaller, they are delivered to the browser much more quickly.

To take advantage of gzip, you simply need to enable it on your server, either by adding a few lines of code to your .htaccess file or through the control panel (for IIS servers).

10. Load Files Asynchronously Wherever Possible

Short Version: Asynchronous loading is far faster than synchronous loading. Enable it through your CMS (content management system).

Synchronous loading occurs when files load consecutively, one after the other. Asynchronous loading is when files load together.

During an asynchronous load, multiple files are loaded at the same time. ソース
Because browsers process files in a hierarchical fashion – loading the first page elements first – synchronous loading can significantly increase the amount of time it takes to achieve full page load. Asynchronous loading allows the browser to load multiple elements in conjunction without waiting for the previous load to complete.

It should be possible to change settings that determine synchronous vs asynchronous loading through your CMS software. If you are using WordPress, there are several plugins you can use.

11. Reduce Redirects

Short Version: By eliminating redirects, you can cut seconds off your site speed. Remember that each redirect requires a separate request to be sent to the server.

Redirects are enemy number one when it comes to site speed. Well, maybe not number one. But they should be pretty high on your kill list.

Redirects are enemy number one when it comes to site speed. Well, maybe not number one. But they should be pretty high on your kill list. クリックしてツイート

Whenever one of your pages redirects to another URL, your visitor has to wait for the server to respond all over again.

Often, numerous redirects occur in response to a single request, especially when desktop pages redirect to mobile pages. All of this adds up to make overall page load time much slower.

Use a tool like Screaming Frog to check for any redirects. Then go through all the flagged pages and see if you can get rid of any.

Don't worry too much about loss of search rankings (one of the main reasons webmasters keep redirects) as your page will likely replace the redirect link in the results sooner rather than later.

In particular, be very wary of “redirect chains”. These are sequences of redirects between more than two pages. If you have to keep redirects, break up the chain by ensuring that each individual redirect points to the main page.

Tools to Help Boost Your Site Speed

Here's a quick rundown of the tools you need to help with implementation:

Google PageSpeed Insights – Already covered in detail above, this tool is hands-down the best for testing and optimizing your site.

Pingdom and GTmetrix – Both of these page speed tools offer additional information to Google PageSpeed insights, in particular geographical response times. They are useful for building a complete picture of your site speed problems.

WebPageTest – A simple tool to test your TTFB.

DNSPerf – A good tool for testing the speed of your DNS provider.

Google Test My Site – You can also use Google Test My Site to generate a broader report about your mobile performance, which includes information about site speed. It's a good complementary tool for use in conjunction with PageSpeed Insights.

Google Analytics – At all stages of the optimization process, you should be linking changes to specific and measurable outcomes. Google Analytics will enable you to track how traffic, engagement and conversions are affected by speed optimization.

Image Compression Tools – For image editing, you should aim to keep as much control as possible. Photoshop and GIMP (which is free) are two feature-rich image-editing apps that will allow you to compress images exactly as you wish.

CSS Sprite Tools – There are many free tools for creating CSS sprites (compiled images) from Toptal, Spritegen, and Sprite Cow.

Content Delivery Networks (CDNs) – There are many fantastic CDNs that come with a range of additional features. Check out CloudFlare, Amazon AWS, and Google Cloud CDN.

Minify Tools – Minification is best done through a CDN, which automates the entire process. Remember, if you do decide to minify your code manually, you will need to maintain two separate development areas. Try out Minifier and JSCompress.

Ready to improve your ecommerce site speed?

Improving your site's speed is a big job. But it's worth it. A fast-loading site provides your customers and potential customers with a positive experience that is likely to keep them returning to purchase again and again.

But remember one crucial point. It's vital to take a consistent approach. You should be monitoring and optimizing regularly. For optimal results, speed testing and optimization need to be conducted regularly (as with most things when it comes to ecommerce optimization).

Ideally, site speed testing should be built into your broader optimization strategy, conducted on all new and modified pages, and periodically reviewed across your site.

Now, time to head over to PageSpeed Insights.

Download Your Free Optimization Checklist

Site speed optimization is only one small part of ecommerce optimization. To ensure that all your optimization boxes are ticked, we've written the most comprehensive ecommerce optimization checklist on the web. Or probably anywhere, for that matter.

Oh, and it's free! Click here to download it now and gain a vital edge over your competitors.
eコマース最適化チェックリスト電子ブック