Jamstack의 속도를 숫자로 살펴보십시오

Jamstack 웹 사이트는 속도로 유명 하며이 기사는 실제 성능 지표를 통해 이유를 밝힐 것입니다. TTFB (Time to First Byte)와 같은 일반적인 메트릭을 다루고 다양한 웹 사이트의 데이터를 비교하여 다양한 동기화 방법이 성능에 어떤 영향을 미치는지 확인합니다.

먼저, 배경 정보를 제공하기 위해 작은 분석을하겠습니다. 페이지로드에 대한 HTTPARCHIVE의 메트릭 보고서에 따르면, 사용자는 평균 6.7 초 동안 기본 콘텐츠를보기 위해 기다립니다.

첫 번째 컨텐츠 그리기 (FCP) - 텍스트 나 그래프가 처음 화면으로 렌더링되는 시점을 측정합니다.

Page 참여 (상호 작용 시간)에 대해 이야기하는 경우 사용자가 더 오래 기다립니다. 평균 상호 작용 시간은 9.3 초 입니다.

상호 작용 시간 (TTI) - 사용자가 지연없이 페이지와 상호 작용할 수있는 시간.

실제 사용자 네트워크 성능 상태

위의 데이터는 실험실 모니터링에서 비롯되며 실제 사용자 경험을 완전히 나타낼 수는 없습니다. CROM (Chrome User Experience Reports)을 기반으로하는 실제 사용자 데이터는보다 포괄적 인 그림을 제시합니다.

모바일 장치를 사용하는 사용자의 데이터를 사용합니다. 구체적으로, 우리는 다음 메트릭을 사용합니다.

• 첫 바이트 (TTFB)까지의 시간
• 첫 번째 콘텐츠 도면 (FCP)
• 첫 입력 지연 (FID)

첫 바이트까지의 시간

TTFB는 브라우저가 서버로부터 응답을 받기 위해 첫 바이트가 기다리는 시간을 나타냅니다. 전 세계 사용자의 경우 TTFB 범위는 200 밀리 초에서 1 초입니다. 페이지의 첫 번째 데이터 블록 배치를받는 데는 상당히 오랜 시간입니다.

첫 번째 콘텐츠 그리기

세계 페이지보기의 23%에서 FCP는 2.5 초 후에 발생합니다.

첫 번째 입력 지연

FID 메트릭은 웹 페이지가 사용자 입력 (클릭, 스크롤 등)에 얼마나 빨리 응답하는지를 보여줍니다.

한계가 다르기 때문에 CRUX에는 TTI 데이터가 없지만 FID가있어 페이지 상호 작용을 더 잘 반영합니다. 모바일 사용자 경험의 75% 이상이 입력 대기 시간이 50 밀리 초이며 사용자는 지연을 경험하지 않았습니다.

아래 쿼리를 사용하여 해당 사이트에서 사용할 수 있습니다.

2019 년 7 월 데이터

``[{ "date": "2019_07_01", "timestamp": "15619392000000", "클라이언트": "데스크탑", "Fastttfb": "27.33", "avgttfb": "46.24", "26.43", "48.", "48.", "26.43" "avgfcp": "33.17", "slowfcp": "17.84", "fastfid": "95.78", "avgfid": "2.79", "slowfid": "1.43"}, "날짜": "2019_07_01", "timestamp": "client", "" "" "", "": "" ": "FASTTTFB": "23.61", "avgttfb": "46.49", "slowttfb": "29.89", "FastFCP": "38.58", "avgfcp": "38.28", "slowfcp": "23.14", "75.13", "Avgfid": "17.95", "slowfid": "6.92"}]

<code>
</code><details><summary>큰 퀴리</summary> ```
#StandardSQL
  선택하다
    regexp_replace (yyyymm, '(\\ d {4}) (\\ d {2})', '\\ 1 _ \\ 2_01')))
    unix_date (cast (regexp_replace, '(\\ d {4}) (\\ d {2})', '\\ 1-\ 2-01')) * 1000 * 60 * 60 * 24 타임 스탬프,
    if (device = 'Desktop', 'Desktop', 'Mobile'))).
    Round (sum (fast_fcp) * 100 / (sum (fast_fcp) sum (avg_fcp) sum (slow_fcp), 2), fastfcp,
    Round (sum (avg_fcp) * 100 / (sum (fast_fcp) sum (avg_fcp) sum (slow_fcp), 2) as avgfcp,
    Round (sum (slow_fcp) * 100 / (sum (fast_fcp) sum (avg_fcp) sum (slow_fcp)), 2) slowfcp,
    Round (sum (fast_fid) * 100 / (sum (fast_fid) sum (avg_fid) sum (slow_fid)), 2), fastfid,
    round (sum (avg_fid) * 100 / (sum (fast_fid) sum (avg_fid) sum (slow_fid)), 2) as avgfid,
    Round (sum (slow_fid) * 100 / (sum (fast_fid) sum (avg_fid) sum (slow_fid)), slowfid로 2)
  에서
    `chrome-ux-report.materialized.device_summary`
  어디
    yyyymm = '201907'
  그룹에 의해
    날짜,
    타임 스탬프,
    고객
  주문
    날짜 desc,
    고객</details>

### 컨텐츠 관리 시스템 (CMS) 성능 상태

CMS는 우리의 구세주가 되어 더 빠른 웹 사이트를 건설하는 데 도움이됩니다. 그러나 데이터로부터 판단하면 그렇지 않습니다. 전 세계 CMS의 현재 성능은 이상적이지 않습니다.

2019 년 7 월 데이터

````{ "freq": "1548851", "fast": "0.1951", "avg": "0.4062", "slow": "0.3987"}]

<code>
</code><details><summary>큰 퀴리</summary> ```
#StandardSQL
  선택하다
    카운트 (별개 원점)는 freq로,

    RAND (if (ttfb.start = 200 및 ttfb.start = 1000, ttfb.density, 0)) / sum (ttfb.density), 4) slowttfb

  에서
    `chrome-ux-report.all.201907`,
    ttfb로서 Unnest (실험 .time_to_first_byte.histogram.bin)
  가입하다 (
    선택하다
      URL,
      앱
    에서
      `httparchive.technologies.2019_07_01_mobile`
    어디
      카테고리 = 'cms'
    ))
  CONCAT (Origin, '/') = url에서
  주문
    FREQ DESC</details>

FCP 결과는 다음과 같습니다.

최소한 FID 결과가 더 좋습니다.

2019 년 7 월 데이터

````{ "freq": "546415", "fastfcp": "0.2873", "avgfcp": "0.4187", "slowfcp": "0.2941", "fastfid": "0.8275", "avgfid": "0.1183", "0.0543"} "

<code>
</code><details><summary>큰 퀴리</summary> ```
#StandardSQL
  선택하다
    카운트 (별개 원점)는 freq로,
    Round (if (fcp.start = 1000 및 fcp.start = 2500, fcp.density, 0)) / sum (fcp.density), 4) slowfcp,
    Round (Sallfid로서 (If (fid.start = 50 및 fid.start = 250, fid.density, 0)) / sum (fid.density), 4)
  에서
    `chrome-ux-report.all.201907`,
    FCP로서 Unnest (First_Contentful_Paint.histogram.bin),
    FID로 Unnest (Experimental.first_input_delay.histogram.bin)
  가입하다 (
    선택하다
      URL,
      앱
    에서
      `httparchive.technologies.2019_07_01_mobile`
    어디
      카테고리 = 'cms'
    ))
  CONCAT (Origin, '/') = url에서
  주문
    FREQ DESC</details>

보시다시피, CMS로 구축 된 웹 사이트의 성능은 웹에서 웹 사이트의 전반적인 성능보다 훨씬 나을 것입니다.

이 httparchive 포럼 토론에서 다양한 CMS의 성능 분포를 찾을 수 있습니다.

전자 상거래 웹 사이트는 일반적으로 CMS를 기반으로 구축되는 웹 사이트의 훌륭한 예입니다.

• ~ 40% - TTFB는 1 초입니다
• ~ 30% - 1.5 초에 걸친 FCP
• ~ 12% - 페이지 상호 작용 지연.

이 사용자의 트래픽은 1%를 차지하기 때문에 IE10-IE11을 지원하도록 요청하는 일부 고객을 만났습니다. 이는 수백만 달러의 수익에 해당합니다. 사용자의 1%가 즉시 떠나고 성능 저하로 인해 돌아 오지 않으면 손실의 양을 계산하십시오. 사용자가 만족하지 않으면 비즈니스도 불만족합니다.

네트워크 성능이 수익과 관련된 방법에 대한 자세한 내용은 WPO 통계를 확인하십시오. 다음은 실제 회사의 연구 사례 목록과 성능 향상 후 성공 사례 목록입니다.

Jamstack은 네트워크 성능을 향상시키는 데 도움이됩니다

Jamstack을 통해 개발자는 클라이언트의 렌더링 작업을 최소화하고 대신 서버 인프라를 사용하여 대부분의 것을 처리합니다. 말할 것도없이, 대부분의 Jamstack 워크 플로는 배포를 처리하는 데 매우 능숙하며 확장 성 및 기타 이점에 기여합니다. 컨텐츠는 정적 파일 호스트에 정적으로 저장되며 CDN을 통해 사용자에게 제공됩니다.

Jamstack에 대한 더 나은 아이디어를 얻으려면 Mathieu Dionne의 "Jamstack Newbie? 시작해야 할 모든 것"을 읽으십시오.

인기있는 전자 상거래 CMS를 사용한 2 년의 경험이 있으며 배포, 성능, 확장성에 많은 문제가있었습니다. 팀은 이러한 문제를 해결하는 데 며칠을 소비 할 것입니다. 이것은 고객이 원하는 것이 아닙니다. 이것들은 Jamstack이 해결하는 큰 문제입니다.

Crux 데이터를 살펴보면 Jamstack 웹 사이트의 성능이 좋아 보입니다. 다음 값은 NetLify 및 GitHub에서 제공하는 웹 사이트를 기반으로합니다. Httparchive 포럼에는 데이터를보다 정확하게 만들기 위해 참여할 수있는 몇 가지 토론이 있습니다.

TTFB의 결과는 다음과 같습니다.

2019 년 7 월 데이터

```[{ "n": "7627", "fastttfb": "0.377", "avgttfb": "0.5032", "slowttfb": "0.1198"}]

<code>
</code><details><summary>큰 퀴리</summary> ```
#StandardSQL
선택하다
  카운트 (별개의 원점)는 n,
  RAND (if (ttfb.start = 200 및 ttfb.start = 1000, ttfb.density, 0)) / sum (ttfb.density), 4) slowttfb
에서
  `chrome-ux-report.all.201907`,
  ttfb로서 Unnest (실험 .time_to_first_byte.histogram.bin)
가입하다
  (URL, regexp_extract를 선택하십시오 (하부 (CONCAT (respotherHeaders, resp_x_powered_by, resp_via, resp_server)),
      '(netlify | x-github-request)')
    플랫폼으로
  `httparchive.summary_requests.2019_07_01_mobile`)
에
  concat (원산지, '/') = url
어디
  플랫폼은 NULL이 아닙니다
주문
  n desc</details>

FCP의 결과는 다음과 같습니다.

이제 FID를 보자 :

2019 년 7 월 데이터

``[{ "n": "4136", "fastfcp": "0.5552", "avgfcp": "0.3126", "slowfcp": "0.1323", "fastfid": "0.9263", "avgfid": "0.0497", "0.024"}]

<code>
</code><details><summary>큰 퀴리</summary> ```
#StandardSQL
  선택하다
    카운트 (별개의 원점)는 n,
    Round (if (fcp.start = 1000 및 fcp.start = 2500, fcp.density, 0)) / sum (fcp.density), 4) slowfcp,
    Round (Sallfid로서 (If (fid.start = 50 및 fid.start = 250, fid.density, 0)) / sum (fid.density), 4)
  에서
    `chrome-ux-report.all.201907`,
    FCP로서 Unnest (First_Contentful_Paint.histogram.bin),
    FID로 Unnest (Experimental.first_input_delay.histogram.bin)
  가입하다
    (URL, regexp_extract를 선택하십시오 (하부 (CONCAT (respotherHeaders, resp_x_powered_by, resp_via, resp_server)),
        '(netlify | x-github-request)')
      플랫폼으로
    `httparchive.summary_requests.2019_07_01_mobile`)
  에
    concat (원산지, '/') = url
  어디
    플랫폼은 NULL이 아닙니다
  주문
    n desc</details>

데이터에 따르면 Jamstack 웹 사이트가 가장 잘 작동합니다. 모바일과 데스크탑의 값은 거의 동일합니다.

엔지니어링 리더의 일부 생각

업계에서 유명한 사람들의 몇 가지 예를 보여 드리겠습니다.

@httparchive의 4 억 6 천만 건의 요청 중 48%가 CDN에서 제공되지 않았습니다. 아래의 서비스 소스를 시각화했습니다. 이들 중 다수는 타사 서비스에 대한 요청입니다. 요청을 한 고객은 캘리포니아 레드 우드 시티에 있습니다. 지연이 중요합니다. #webperf pic.twitter.com/0f7nfa1qgm

- Paul Calvano (@paulcalvano) 2019 년 8 월 29 일

Jamstack 웹 사이트는 일반적으로 CDN에서 호스팅하며 TTFBS를 구제합니다. 파일 호스팅은 Amazon Web Services 또는 유사한 인프라에서 처리되므로 단일 수리로 모든 웹 사이트를 개선 할 수 있습니다.

또 다른 실제 설문 조사에 따르면 더 나은 FCP를 얻으려면 정적 HTML을 제공하는 것이 가장 좋습니다.

어느 것이 더 나은 첫 번째 의미있는 그림 시간을 가지고 있습니까?

27,506 개의 트윗을 모두 포함하는 8.5MB HTML 파일 전체 텍스트 ② 하나의 트윗만으로 클라이언트 측 렌더링 된 React 웹 사이트

(스포일러 : @____lighthouse는 8.5MB의 HTML이 약 200 밀리 초로 승리했다고보고했습니다)

- Zach Leatherman (@zachleat) 2019 년 9 월 6 일

다음은 위에 표시된 모든 결과를 비교합니다.

Jamstack은 CDN을 사용하여 정적으로 페이지를 제공하여 네트워크 성능을 향상시킵니다. 빠른 백엔드는 사용자에게 도달하는 데 오랜 시간이 걸리고 매우 느리기 때문에 중요합니다. 마찬가지로, 느린 백엔드는 사용자에게 빠르게 도달하며 매우 느립니다.

Jamstack 은이 사이트를 사용하는 사이트 수가 CMS만큼 크지 않기 때문에 아직 공연 대회에서 우승하지 못했지만 콘테스트에서이기려는 의도는 매우 좋습니다.

성능 예산에 이러한 메트릭을 추가하면 워크 플로우에서 우수한 성능을 구축 할 수 있습니다. 예를 들어:

• TTFB : 200 밀리 초
• FCP : 1 초
• FID : 50 밀리 초

현명하게 사용 하시겠습니까?

편집자 주 : Artem Denysov는 Jamstack 웹 사이트의 출시에 큰 도움이되는 서비스 인 Stackbit에서 왔으며, 다가오는 도구가 Jamstack 웹 사이트 및 컨텐츠의 워크 플로우 에지를 단순화하기위한 도구입니다. Artem은 Rick Viscomi, Rob Austin 및 Aleksey Kulikov에게 기사를 검토하는 데 도움을 준 것에 감사한다고 말했습니다.

위 내용은 Jamstack의 속도를 숫자로 살펴보십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!