성능은 어떻게 전환율을 높입니까?

너는 반드시 어떤 조치를 취해 실적을 높여야 한다
네트워크 성능은 전환율의 관건적인 지표다.사이트의 성능을 최적화하는 동시에 너는 서로 다른 분야에서 일할 수 있다.예를 들어, 이러한 영역은 로드 시간, 처음 그리는 시간 또는 부드럽게 상호 작용할 수 있습니다.
최적화할 정확한 구역은 누두 변환 절차와 다르다.누두를 바꾸는 데는 서로 다른 절차가 있다.사용자는 귀의하기 전에 하나하나를 받아들인다.
모든 단계는 서로 다른 최적화를 필요로 한다.따라서 당신은 또 다른 지표를 평가해야 한다.예를 들어, 변환 버퍼에는 다음 단계가 있습니다.

검색

조인트

변환

재접속

들키다
이 네 가지 절차를 최적화하는 것은 서로 다른 목표를 대상으로 최적화하는 것을 의미한다.검색 단계에서는 첫 번째 픽셀을 화면에 빠르게 가져와야 합니다.따라서 첫 번째 적재와 첫 번째 페인트 분무가 중요하다.
critical rendering path와 관련된 모든 지표는 매우 중요하다.이 지표들은 헤더 해석 시간, 총 막힘 시간, 또는 첫 번째 바이트까지의 시간일 수 있다.
또한 현장에서 측정할 수 있는 기본 지표는 Core Web Vitals입니다.Core Vitals 서브셋은 세 개의 웹 성능 영역을 포괄합니다.

최대 함유 도료(LCP)
LCP는 마운트 성능을 측정합니다.LCP는 페이지를 처음 로드한 후 2.5초 이내에 발생해야 합니다.

첫 입력 지연(FID)
FID는 상호 작용을 평가합니다.페이지의 FID는 100ms 미만이어야 합니다.

누적 레이아웃 횟수(CLS)
CLS는 시각적 안정성을 측정합니다.페이지는 0.1보다 작은 CLS를 유지해야 합니다.

참여 및 전환
사이트를 불러온 후 사용자는 신속한 상호작용과 내비게이션을 해야만 성공적으로 전환할 수 있다.이것은 모든 사이트에 있어서 매우 맞춤형이기 때문에 측정도 맞춤형이다.너는 전환에 성공하는 데 필요한 시간을 측정할 수 있다.
그 밖에 사용자와 사이트 간의 상호작용의 원활성을 측정할 수 있다.16ms는 애니메이션이 완료되는 시간입니다.브라우저가 해야 할 일이 좀 있기 때문에, 너는 10밀리초가 되어야 한다.
그물 모양의 물건.dev는 페이지 사이의 내비게이션을 측정하기 위해 간단한 인형 스크립트를 제공합니다.사용자가 성공적으로 변환하는 데 필요한 절차를 스크립트로 작성하고 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-16ms
사용자가 감지한 동작이나 애니메이션은 초당 60 프레임을 렌더링하는 매우 매끄럽다.프레임당 16ms입니다.
0-100ms
이 범위 내에서 사용자는 자신의 행위에 대한 반응이 즉각적이라고 느낀다.
100-300ms
사용자는 약간의 뚜렷한 지연을 느낄 것이다.
300-1000ms
동작이 느려서 사용자가 무엇을 해야 하는지 깨달았습니다. (페이지 불러오기 등)
1000ms - +
사용자는 심리적인 상하문 전환을 할 수 있다.
10초-+
사용자가 종료됩니다.
사이트 속도는 검색 신호다.구글은 페이지 순위를 높이고 속도가 빨라지며 유기농 데이터가 더 많아질 것이다.

약혼하다.
내비게이션 속도와 빠른 사용자 상호작용은 사용자가 당신의 내용이나 제품에 참여하도록 유지하는 중점이다.높은 세션 시간과 세션마다 많은 페이지를 원합니다.너의 애니메이션은 원활해야 한다. 서버는 그의 주의력을 잃지 말고 신속하게 응답해야 한다.만약 이 단계가 매우 빠르다면, 당신의 사용자는 전환될 것이다.

바꾸다
높은 전환율은 통상적으로 뛰어난 사용자 체험과 사용자 참여도가 높아졌기 때문이다.영웅 그림의 탑재 속도가 매우 빨라야 하며, 레이아웃의 변화나 점프를 피해야 한다.

재약혼
어떤 사이트에 대해서 말하자면, 사용자로 돌아가는 것은 모두 좋은 일이다.사용자를 한 번 설득하셨습니다.이 단계에서 캐시를 더 빨리 불러오고 사용자가 원활하게 상호작용을 할 수 있도록 하는 것이 목표입니다.

결론
이 글은 성능을 향상시키기 위해 어떤 조치를 취해야 하는지, 웹 성능이 어떻게 전환율을 높여야 하는지 보여 줍니다.
만약 당신이 이 글을 좋아한다면, 잠시 미소를 지으며 그것을 공유하고, 나를 따라와라. check out my RSS feed 와 subscribe to my newsletter.
건배, 마크

한층 더 읽다

How can performance improve conversion?

What should you measure to improve performance?

User-centric performance metrics

사진 작성자web.dev