モバイルeコマースの改善：ウェブサイトの高速化

公開: 2018-03-13

さまざまな統計で、読み込み時間の1秒ごとの違いがeコマースストアのコンバージョン率に影響していることがわかります。店舗のコンバージョン率に影響を与える可能性のある他の多くの要因があるため、私はこれらの統計の多くについて個人的に少し疑わしいです。ただし、ほとんどすべての小売Webサイトでモバイルeコマースとデスクトップブラウジングが優勢であるため、速度はユーザーエクスペリエンスに直接影響するため、eコマースストアが実際に可能な限り高速であることが明らかに重要です。

Webサイトのフロントエンドを最適化する方法はたくさんあります。複雑で高価なものもあれば、非常に単純なものもあります。多くの場合、早い段階ですばやく簡単に大きな勝利を収めることができますが、最終的には収穫逓減と小さな段階的な改善が見られ始めます。

実際にどこまで進むかは、オンライン収益の規模と、小規模な段階的改善から得られる可能性のあるモバイルeコマースからの追加収益の量によって異なります。

コンバージョン率を0.1％向上させると、小規模な小売業者よりも大規模な小売業者の方がはるかに大きな投資収益率が得られます。

Mコマースの例：絶対にそれを押しつぶしている3つのブランド

モバイルコマース（mコマース）は、ラップトップやデスクトップで買い物をするときに期待するのと同じシームレスなエクスペリエンスを期待して、小さな画面で買い物、支払い、銀行取引を行う買い物客が増えるにつれて急速に成長しています。

最高のモバイルeコマースエクスペリエンスのために画像を最適化する

画像の最適化は、ページの読み込み時間を大幅に短縮できる領域です。画像の品質とサイズに関しては、グラフィックデザイナー、マーチャンダイザー、eコマースマネージャーの間で対立がよく見られます。グラフィックデザイナーは、可能な限り最大で最高の解像度の画像を望んでおり、作成する画像の速度への影響を常に考慮するとは限りません。マーチャンダイザーは、最大かつ最高の解像度の商品画像を望んでいる可能性がありますが、eコマースマネージャーは、全体的なページ速度の可視性と評価を備えた唯一の人物である可能性があります。

画像の最適化は、常に品質とファイルサイズのバランスです。画像の品質が高いほど、ファイルサイズは大きくなります。画像のネイティブサイズと複雑さもファイルサイズに影響します。背景が詳細で複雑な画像は、背景が無地の画像よりもファイルサイズがはるかに大きくなる可能性があります。

デザイナーは、多くの色と単なる無地ではない背景を使用して、Webサイトにインパクトのあるバナーを作成することを好むことがよくあります。これは視覚的な影響が大きくなる可能性がありますが、その結果、背景が無地の同様のバナーよりもファイルサイズがはるかに大きくなります。 AppleのRetinaDisplayのような高解像度画面の導入により、画面が低品質の画像の欠陥を強調するため、バランスを維持することがさらに困難になります。

すべてのチームメンバーがフロントエンドの最適化を理解し、グラフィックの決定が画像のサイズ、したがってページ速度に与える影響を理解することが重要です。

Photoshopなどの標準的なデザインツールを使用すると、デザイナーは画像を最適化できますが、Webサイトの画像を自動的に最適化できるサードパーティのサービスが多数あります。 AkamaiとAmplianceはどちらも、構成された一連のルールに基づいて画像を最適化する画像管理サービスを提供しています。また、jpegファイルをWebPイメージに変換してブラウザーをサポートし、ファイルサイズを可能な限り小さくすることもできます。

Envoyでは、最近、クライアントのWebサイトでAkamaiイメージマネージャーを試用しましたが、PLPイメージのファイルサイズが平均80％減少し、視覚的な品質が著しく低下することはありませんでした。これにより、PLP（商品リストページ）ページの全体的な重量が大幅に減少し、GooglePagespeedスコアがすぐに大きく飛躍しました。このためにサードパーティのサービスを使用したくない場合は、Thumborなどのオープンソースツールを実装できます。これは、Webサーバーにローカルにインストールするサービスです。このようなツールは、画像をその場で自動的に最適化し、リポジトリにキャッシュします。

CDNを使用する

コンテンツ配信ネットワーク（CDN）は、一般にエッジと呼ばれるサーバーのネットワークにコンテンツをキャッシュするサービスです。これらのサーバーは通常、多くの場所でグローバルにホストされ、コンテンツがオリジンサーバーよりもユーザーに物理的に近い場所にキャッシュされるようにします。 CDNは、画像、css、JavaScript、およびビデオをキャッシュするためだけに使用されることがよくありますが、完全なHTMLページをキャッシュするためにも使用できます。

完全なHTMLページをキャッシュすることにより、ユーザーへのページの配信を大幅に高速化できます。 HTMLがキャッシュされるため、オリジンWebアプリケーションは、要求されるたびにページを作成してユーザーに返す必要がなく、CDNキャッシュサーバー（ポイントオブプレゼンス）は、オリジンよりも物理的にユーザーに近い可能性があります。サーバー。 CDNには、ユーザーへのコンテンツの配信を圧縮および高速化するテクノロジーもあり、すべてがはるかに高速なエクスペリエンスを実現します。

CDNは、オリジンサーバーの負荷を大幅に軽減することもできます。 PLPページは、多くの場合、Webアプリケーションがその場で生成するためのプロセッサを大量に消費するページです。多数の製品とファセットが含まれている可能性があり、すべてが多くの処理になります。ほとんどの場合、PLPページは1時間ごとに変更されないため、そのページを1時間キャッシュすることは完全に実行可能です。そのページを1時間以内に何千回も生成する必要はなく、オリジンサーバーは1回生成する必要があります。実際には、多くのCDNが複数の独立したキャッシュを持っているため、そのようには機能しませんが、それでも約60％のオフロードが期待できます。これは、オリジンサーバーとアプリケーションがCDNを配置しない場合よりも60％少ないリクエストを受け取ることを意味します。

オンラインで成功するために不可欠なeコマースWebサイトの機能

消費者の実際のニーズを満たすエクスペリエンスを提供するために、オンライン販売者が必要とする3つの機能があります。ブランドが繁栄するには、優れたCXを備えたモバイルフレンドリーなAI主導のサイトが必要です。

速度分析ツールを使用して、モバイルeコマースエクスペリエンスを最適化します

Webページを分析し、Webサイトを高速化する方法に関する推奨事項を提供できる無料および有料のオンラインツールが多数あります。おそらく、最も使用されている3つの無料ツールは、Google PageSpeed Insights、Yslow、およびWebpagetestです。これらのツールはそれぞれわずかに異なりますが、すべてURLを分析し、スコアとともに推奨事項を含むレポートを送信します。

これらのツールは、Webページのどの要素がWebページの速度を低下させているかをすばやく示すのに非常に役立ちます。また、一部のツールは、これらの問題を解決するためのソリューションを提供します。包括的ではありませんが、大きな影響を与える可能性のある変更をすばやく簡単に見つけることができます。

サードパーティのスクリプトの使用を最小限に抑える

ほとんどのB2CeコマースWebサイトには、アフィリエイトネットワーク追跡スクリプトからMVTテストに至るまで、多数のサードパーティリソースが含まれています。 Twitterフィード、Facebookトラッキング、さらには外部フォントが含まれている場合があります。これらの外部リソースは、慎重に管理しないと、Webサイトの速度を大幅に低下させる可能性があります。

Webページ速度アナライザーを使用すると、これらのリソースがページ速度に寄与する要素のリストに常に表示されることがよくあります。最大の課題の1つは、これらのリソースはサードパーティによって開発およびホストされているため、これらのリソースのサイズと最適化を制御できないことです。

Webサイトから呼び出されているサードパーティのリソースを定期的に監査し、それらがすべて正しい場所で正しい方法で実行されていること、および実際にそれらを使用していることを確認する必要があります。 GTMを使用して追加され、サービスの使用が停止されたときに誰かが削除し忘れたために、使用されなくなったサービスの追跡スクリプトがまだ実行されている場合が多くあります。

Google AMP

Google Accelerated Mobile Pagesプロジェクトは、特にモバイルデバイスに配信されるコンテンツの速度とパフォーマンスを向上させることを目的とした、オープンソースのウェブパブリッシングテクノロジーです。 Googleが主導し、2015年に開始されたAMPテクノロジーは、もともとニュースコンテンツの配信用に設計されました。 AMPページは非常に軽量で、同等の非AMPページの約10分の1のデータを使用する傾向があり、多くの場合、1秒未満で読み込まれます。しかし、大きな問題があります。 AMPページは非常に限られた機能セットをサポートしているため、多くのアプリケーション、特にリッチで機能的なeコマースWebサイトには適していません。

一握りの小売業者は、eコマースのためにAMPを試しましたが、成功はまちまちでした。ページははるかに高速ですが、AMPの制限を回避して機能とユーザーエクスペリエンスを完全に再設計する必要がありました。チェックアウトなどのWebサイトの複雑な領域は、AMPに組み込むことができないため、ユーザーは標準のHTMLまたはプログレッシブWebアプリ（PWA）のチェックアウトに移動します。

AMPは非常に興味深いプロジェクトであり、ニュース業界で広く採用されていますが、eコマースで実際の牽引力を示すには至っていません。グーグルが利用可能な機能を拡張し続けるならば、私はこれがeコマースのための実行可能なツールになるのを見ることができます。

適応する

現在、ほとんどのeコマースWebサイトは、表示されている画面に合わせてレイアウトが動的に適応するように、応答性の高い方法で構築されています。これは、ウェブサイトのモバイルバージョンとデスクトップバージョンを別々にするよりも確かに望ましいことであり、通常、サイトが利用可能な多数の画面サイズでうまく機能することを意味します。

ただし、レスポンシブデザインでは、Webサイトが表示されているデバイスに関係なく、同じアセットが使用される傾向があります。バナーや製品の画像は、多くの場合、小さいサイズで表示されたり、モバイルビューに非表示にされたりしますが、大きなファイルはダウンロードされます。

ここで、アダプティブデザインの要素を使用できます。アダプティブWebサイトには、画面サイズに応じて動的に変化する流動的なデザインを作成するのではなく、特定の画面サイズ用に設計された複数の固定レイアウトがあります。これにより、デザイナーは特定の画面サイズごとにユーザーエクスペリエンスを厳密に制御および最適化できます。

これは実装がより複雑で時間がかかりますが、速度の主な利点の1つは、モバイルデバイスに大きな画像を小さなサイズで表示するだけでなく、特定のモバイル向けに最適化された画像をそのデバイスにロードすることです。ロード時間を短縮します。レスポンシブデザインでは、サイトをモバイルで表示するときに特定のデスクトップ要素を非表示にすることができます。アダプティブデザインでは、それらをまったくロードしません。

完全に適応するための実用的な代替手段の1つは、レスポンシブデザインでJavaScriptを使用して、使用されている画面サイズを検出し、単に大きな画像を小さなサイズで表示するのではなく、モバイル向けに最適化された画像が要求されて表示されるようにすることです。これにより、レスポンシブデザインのメリットを享受しながら、表示されている画像とコンテンツのみが要求され、ダウンロードされることが保証されます。

モバイルeコマースサイトのページを高速化するには、さまざまな方法があります。開発を伴うもの、サードパーティのサービスの使用を伴うもの、設計と機能のバランスを伴うものがあります。