性能はどのように変換を改善できるか?

パフォーマンス向上のために何を計るべきか
Webパフォーマンスは、変換率の重要な指標です.あなたがあなたのウェブサイトのパフォーマンスを最適化している間、あなたは異なる地域で働くことができます.例えば、これらの領域は、ロード時間、最初のペイントまでの時間、または滑らかな相互作用である.
最適化する適切な領域は、変換funnelステップによって異なります.変換funnelは異なるステップを持っています.ユーザーは彼が変換する前に、それらのそれぞれを取ります.
これらのステップの各々は、異なる最適化を必要とします.したがって、別のメトリックを測定する必要があります.変換ファンネルは、例えば次の手順を実行します.

ディスカバー

従事する

変換

再戦する

ディスカバー
これらの4つのステップを最適化することは、異なる目標に最適化することを意味します.発見ステップは、スクリーンに第1の画素をもたらす際に高速である必要がある.したがって、最初の負荷と最初の塗料が不可欠です.
に関連するすべてのメトリクスcritical rendering path 必須です.これらのメトリックはヘッド解析時間、総ブロック時間、または最初のバイトまでの時間である.
さらに、フィールドで測定することができます必須の指標はCore Web Vitals . コアvitalsサブセットは、3つのWebパフォーマンスフィールドをカバーしています.

最大のcontentful塗料
LCPは負荷性能を測定するYourlcpは、ページが最初にロードを開始するとき、2.5秒以内に起こるべきです.

第1入力遅延
FIDは双方向性を測定するページは、100ミリ秒未満のFIDを持つべきです.

累積レイアウトシフト
CLSは視覚的安定性を測るページは0.1未満のCLSを維持するべきです.

約束と変換
ウェブサイトの負荷の後、ユーザーは、高速な相互作用やナビゲーションの成功を変換する必要があります.これは非常にカスタムすべてのウェブサイトのように、測定もカスタムです.あなたはそれが成功した変換のためにかかる時間を測定することができます.
さらに、ユーザーとあなたのウェブサイトの間の相互作用の滑らかさを測定することができます.16 msはあなたのアニメーションの完了時間です.ブラウザにはいくつかの作業があるので、10 msです.
ウェブあなたのページ間のナビゲーションを測定するには、簡単なPuppeteerスクリプトを提供します.あなたは、ユーザーが成功した変換のために取って、時間を測定するステップをスクリプトしますperformance.now() .

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const start = performance.now();
  await page.goto('https://www.store.google.com/landingpage');
  await page.goto('https://www.store.google.com/productpage');
  // click the buy button, which triggers overlay basket
  await page.click('#buy_btn');
  // wait until basket overlay is shown
  await page.waitFor('#close_btn');
  await page.goto('https://www.store.google.com/basket');
  await page.goto('https://www.store.google.com/checkout');
  console.log('Flow took ' + parseInt((performance.now() - start)/1000) + ' seconds');
  await browser.close();
})();

source

再戦
成功した最初の変換の後、ユーザーはおそらくあなたのサイトに戻ってくるでしょう.この段階では、ページの負荷を最適化する必要があります.あなたはサービスワーカーで資産をキャッシュすることができるか、ブラウザーHTTPキャッシュを使うことができました.
ラボで繰り返しビューを測定するには、使用することができますWebPageTest.org “最初のビューとリピートビュー”のオプションを使用します.たとえば、フィールドでは、Google Analyticsでは、カスタムレポートを使用してユーザーの種類を次元として使用できます.

性能はどのように変換を改善できるか?

ディスカバリー
ユーザーは、有機検索、社会的ウェブサイト、ウェブサイト・リンクまたはキャンペーンを通してあなたのウェブサイトを発見します.彼らはあなたが彼らの問題を解決することができると思うので、彼らはあなたのウェブサイトを訪問します.ユーザーは1秒後にフォーカスを失う.ユーザーエクスペリエンスは、製品を購入するか、記事を読む彼の意欲の重要な指標です.
時間
ユーザーインパクト
0 - 16 ms
ユーザーは、60フレームが毎秒レンダリングされるように滑らかなアクションやアニメーションを認識する.フレームあたり16 msです.
0～100 ms
この範囲で、ユーザーは彼の行動に対する反応が即座であると感じます.
100～300 ms
ユーザーは小さな知覚遅延を経験する.
300～1000 ms
アクションが遅く感じられ、ユーザーは何かを行う必要があることを認識します(ページロードなど)
1000 ms
ユーザーは、おそらく精神的なコンテキストスイッチを持っているでしょう.
10 S +
ユーザーは残します.
ウェブサイトの速度は検索信号です.Googleは、より高速なページをランク付けするでしょう.

婚約
ナビゲーション速度と高速ユーザーの相互作用は、ユーザーがあなたのコンテンツや製品と係合を保つために焦点です.あなたはセッションごとに高いセッション時間と多くのページが欲しい.あなたのアニメーションは、スムーズにする必要がありますサーバーは、高速ではなく、彼の注意を失うことに応答する必要があります.この段階が速いならば、あなたのユーザーは変わります.

転換
高い転換は、優れたユーザー経験とユーザーの増加した約束のためにしばしばあります.ヒーロー画像を高速ロードする必要がありますし、レイアウトのシフトやジャンプを避ける必要があります.

再戦
戻るユーザーは、任意のウェブサイトに最適なものです.あなたはすでにユーザーを一度確信している.この段階では、ユーザーが既に使用されているスムーズな相互作用のキャッシュにさらに高速な負荷時間を目指してください.

結論
このポストでは、パフォーマンスを向上させるためにどのように測定する必要がありますどのようにWebパフォーマンスは、変換率を向上させることができます.
あなたがこの記事が好きならば、ちょっと微笑んで、それを共有してください、私に続いてください.check out my RSS feed , and subscribe to my newsletter .
チアーズマーク

更なる読書

How can performance improve conversion?

What should you measure to improve performance?

User-centric performance metrics

写真でweb.dev