Webパフォーマンス:それが非常に重要である理由とそれを最適化する方法

公開: 2021-07-01

すでにオンラインストアをお持ちの場合、またはオンラインストアの作成を検討している場合は、おそらくWebパフォーマンスの重要性についてすでに聞いたことがあるでしょう。 これは通常、Webページが読み込まれる速度に対応します。 このパフォーマンスの概念は指標と一致しており、毎年かそこらで、新しい専門用語がWebサイトのパフォーマンスを定量化しようとしているように見えます。読み込み時間、最近ではFirst Byteまでの時間( TTFB )またはFirst Contentful Paint( FCP )、主なものだけに言及します。

最初は、これらの用語は少し野蛮に見えるかもしれませんが、安心してください。それほど悪くはなく、あなたとあなたのクライアントにとって良いものです。

オンラインストアにとってパフォーマンスが非常に重要なのはなぜですか?

読み込みが速いページに驚く人は誰もいませんが、読み込みが遅いページは目立ちすぎて、コンテンツが画面に表示される前にすぐに離れたくなるでしょう。 実際、ページが3秒以内に完全に読み込まれない場合、ほとんどの訪問者はWebサイトを離れます。

スピードが重要な競争の激しいeコマースセクターでは、モバイルとデスクトップの両方で訪問者を顧客変えるには、優れたWebパフォーマンスを確保することが不可欠です。 eコマースサイトの読み込み時間が0.1秒改善されると、コンバージョン率が8%向上すると推定されます。

オンラインストアのパフォーマンスを向上させる3つの理由:

  • あなたはあなたの顧客体験を大幅に改善し、あなたのコンバージョン率を自然に増加させます、
  • 最大数のユーザーに同時に対応できる容量を獲得し、忙しい時期に貴重な顧客を失うことを回避します。
  • あなたはあなたが検索エンジン結果(SEO)であなたの位置を改善することを可能にするあなたのサイトの最適な読み込み速度のおかげで可視性を得るでしょう。

したがって、オンラインストアのパフォーマンスについて考えるときは、次のことを考えてください。

  1. ユーザー体験、
  2. 会話、
  3. 可視性

あなたの店に関する限り、それは主に、2021年のeコマースサイトの技術的要件を尊重しながら、その読み込み速度を上げることの問題になります。

どの指標とそれらを最適化する方法は?

サイトのパフォーマンスとユーザーエクスペリエンスの両方に直接影響する5つの主要な指標を検討できます。 これらの中で、最初のバイトまでの時間と速度インデックスは、Webサイトのパフォーマンスの概要を示すため、特に重要であると考えられています。

1.最初のバイトまでの時間(TTFB)

このインジケーターはサーバーの応答時間に対応し、ページの読み込みで最も重要なミリ秒です。 応答時間を構成する主要な要素のいくつかは、サーバー構成(ロード時間を最適化し、Webサイトを堅牢にする言語、ライブラリなど)とデータベース要求の実行時間です。

知っておきたいこと: Googleは、200ミリ秒以下で、500ミリ秒まで許容できる場合に適切と見なします。 多くの場合、これは時間の経過とともに変化する唯一の指標であり、多くの場合、トラフィックによって条件付けられます。

クイックヒント:海外の顧客に特に役立つCDN(コンテンツ配信ネットワーク)を使用します。

2.最初の満足のいくペイント

ユーザー側では、それが主なハイライトです。 訪問者は、リンクをクリックしてからページに要素が表示されるまでの間に待ち時間があることに気付く場合があります。 この測定値は、主に、ブラウザーサーバーの応答ロードするのにかかる時間と、ブラウザーによる最初のコンテンツ項目の表示に対応します。 この最初の要素は厳密には美的ではなく、画像でもカラーブロックでもかまいません。

知っておきたいこと: 2.5秒未満(TTFBを含む)で実行されれば良好と見なされるため、レンダリングをブロックしているファイルのロード時間は2秒未満で実行する必要があると見積もることができます。

ヒント:HTML / CSS / JSファイルを圧縮し、表示をブロックするファイルを制限します。

3.最大のコンテンツフルペイント(LCP)

LCPは、ユーザーにとって2番目のハイライトであり、このメジャーは、表示されている要素のほとんどを統合します。 これは、Webページが形になり、最終的な(またはほぼ最終的な)外観になるときです。 このステップは、表示するコンテンツによっては、最も長く、最も重い場合があります。

理解を深めるための図を次に示します。

Illustration of FCD timeline
知っておきたいこと: 2.5秒未満(FCPのように)で達成され、4秒まで許容できる場合は良いと見なされます。 多くの研究では、3秒を超えると、バウンス率が大幅に増加することが示されています

ヒント:画像を最適化し、便利な形式(jpeg 2000、jpeg XR webpなど)を生成し、HTMLコードでさまざまなサイズの画像を提供し、キャッシュ(ブラウザーとサーバー)を設定します。

4.最初の入力遅延

このインジケーターは、ページのインタラクティブな側面にリンクされています。 簡単に言うと、実行されたアクション(クリックされたリンクやボタンなど)から最初のインタラクティブ要素が表示されるまでのブラウザーの応答時間です。

知っておきたいこと:このインジケーターは、ユーザーの「フラストレーション時間」 、つまり、表示された最初のインタラクティブ要素をクリックした場合にユーザーがブラウザーの応答を待つ時間を測定します

5.インタラクティブへの時間

この指標はしばしば誤解されます。 ナビゲーションの開始からページリソースが読み込まれ、メインブラウザスレッドが少なくとも5秒間アイドル状態になるまでの時間を測定します。つまり、50ミリ秒を超えるスクリプトの実行はありません。

知っておきたいこと: eコマースサイトの全体的なパフォーマンスは良好で、FIDは良好ですが、それにもかかわらず、インタラクティブ化までの時間は短くなります。

ヒント:メインスレッドを整理するために、表示するページに不要なスクリプトをロードおよび削除するために、必須ではないJavaScriptを延期します。 これには、適切なコードセグメンテーションを行う必要があります。

指標間の遅延のより代表的なタイムラインと、優れたサイトのタイムライン(Googleによる)は次のとおりです。

Example of good website performance for Google

ボーナスインジケーター:スピードインデックスまたはSI

この指標は、FCPとLCPに大きく依存しており、それ自体がTTFBに依存しているため、ボーナスです。 これは、ページの表示部分(フローティングブロック)の速度と進行度に基づいて計算した結果です。

これは、ページの読み込み中にユーザー(潜在的に)が感じることを測定します。 FIDと同様に、GoogleがSEOに使用する最新のUXインジケーターの1つです。

結論

各指標は前の指標の影響を受けるため、すべてが重要になります。 冒頭で述べたように、TTFBはホスティングとトラフィックの品質に依存するため、特に重要で非常に変動します。したがって、TTFBが不十分な場合、サイトのパフォーマンスに悪影響を与える可能性があります。 この指標は、非常に技術的でもある複雑でわかりにくいステップであるため、ほとんどのパフォーマンス測定ツール(Page Speed Insights、GtMetrix)では提供されないことがよくあります。 したがって、非専門家の情報にアクセスして解釈することは困難です。 このような問題に直面した場合、PrestaShopサイトで作業している場合は、PrestaShopプラットフォームの提供などの専門サービスに連絡することができます。

Touching a screen

PrestaShop Platform、ストアの成長を支援するサービス:

  • 3つの環境を備えたPrestashopに特化した専用ホスティングソリューション
  • 明確な技術的KPIを備えたインターフェース
  • 環境を管理するためのインターフェース(開発/本番前および本番)
  • 簡素化された環境移行
  • 安心していただくための強力なサポート