클라우드플레어 최적화로 LCP, TBT, 웹 바이탈 점수를 상승시키는 방법

웹 성능은 고객에게 원활한 쇼핑 경험을 제공하는 데 중요한 요소입니다. 이 기사에서는 클라우드플레어를 사용하여 Largest Contentful Paint [LCP]와 Total Blocking Time [TBT]와 같은 웹 바이탈 점수를 향상시키는 방법을 소개합니다. 이러한 설정은 간단한 수정부터 고급 최적화까지 다양합니다.
본격적으로 시작하기 전에 Google PageSpeed Insights와 같은 도구를 사용하여 현재 웹사이트 성능을 평가하세요. 이렇게 하면 이러한 설정을 적용한 후 개선 사항을 추적할 수 있습니다.
웹 바이탈의 중요성
웹 바이탈은 사용자 경험의 핵심 측면을 측정합니다. 초점에 맞출 주요 지표에 대한 간단한 개요는 다음과 같습니다:

지표	측정하는 항목	왜 중요한가
LCP	가장 큰 보이는 요소가 로드되는 시간	사이트 속도에 대한 사용자의 인식에 영향을 미침
TBT	긴 JavaScript 작업으로 차단된 시간	상호작용성과 반응성에 영향을 미침
CLS	페이지 로드 중 레이아웃 이동	시각적 안정성과 사용성을 보장함

클라우드플레어 설정을 최적화함으로써 이러한 점수를 크게 향상시키고 방문자들에게 더 빠르고 매력적인 경험을 제공할 수 있습니다.

1단계: 클라우드플레어에 도메인 설정 및 CDN 활성화

클라우드플레어를 통해 웹사이트 성능을 최적화하기 위해서는 먼저 도메인이 플랫폼에 올바르게 설정되어 있고 CDN(콘텐츠 전송 네트워크) 기능이 활성화되어 있는지 확인해야 합니다.

클라우드플레어 CDN 활성화 방법

1. 클라우드플레어 계정에 로그인하고 도메인을 선택하세요.
2. DNS 섹션으로 이동하세요.
3. DNS 레코드에서 도메인의 A 또는 CNAME 레코드를 찾으세요.
4. 레코드 옆에 있는 오렌지색 구름 아이콘을 클릭하여 프록시 클라우드 기능을 활성화하세요. 활성화되면 아이콘이 밝은 오렌지색으로 변해 도메인이 클라우드플레어의 CDN을 통해 라우팅되고 있음을 알립니다.

Selldone 사용자에 대한 특별 안내

만약 당신이 Selldone을 사용하고 있다면, 클라우드플레어와 CDN 통합을 위해 도메인을 올바르게 구성해야 합니다. 이렇게 하면 Selldone의 외부 CDN이 귀하의 사이트와 원활하게 작동하여 캐시된 내용을 효율적으로 전달하면서 Selldone 플랫폼과의 호환성을 유지할 수 있습니다.
Selldone에 대한 구성 단계:

1. Selldone 대시보드에서 사용자 지정 도메인을 설정하세요.
2. 외부 CDN이 클라우드플레어를 가리키도록 DNS 레코드를 올바르게 설정하세요.
3. 프록시 클라우드 상태를 포함하여 클라우드플레어의 설정이 완전히 활성화되었는지 확인하세요. 이러한 단계는 Selldone 기반 웹사이트가 클라우드플레어의 성능 향상 기능을 충분히 활용하게 합니다.

2단계: 클라우드플레어의 속도 테스트 기능

클라우드플레어는 웹사이트 성능에 대한 귀중한 통찰력을 제공하는 내장된 속도 테스트 도구를 제공합니다. 이 기능은 클라우드플레어의 서비스를 구현한 후 로딩 시간, 반응성 및 전반적인 속도 개선과 같은 주요 지표를 측정합니다.

3단계: 클라우드플레어에서 실시간 사용자 인사이트 활성화

사용자의 행동을 실시간으로 이해하는 것은 웹사이트 경험을 최적화하는 데 중요합니다. 클라우드플레어의 실시간 사용자 인사이트 (RUN) 기능을 사용하면 방문자가 사이트와 상호작용하는 방법에 대한 실시간 데이터를 추적할 수 있으며, 성능과 사용성을 개선하는 데 유용한 지표를 제공합니다.

4단계: 클라우드플레어의 모든 최적화 기능 활성화

웹사이트 성능을 극대화하려면 속도 탭에서 사용 가능한 최적화 기능을 활성화하세요. 이러한 기능은 로드 시간을 개선하고 대역폭 사용을 줄이며 전체 사용자 경험을 수월하게 향상시키도록 설계되었습니다.
  사이트 속도를 높이기 위해서는 PRO 라이선스가 필요한 중요한 기능이 있습니다.
“클라우드플레어 폰트” 및 “로켓 로더”를 활성화하는 것을 잊지 마세요.

5단계: 클라우드플레어 무료 플랜으로 즉각적인 결과 얻기

클라우드플레어 무료 플랜에서도 적절한 기능을 활성화함으로써 상당한 성능 개선을 경험할 수 있습니다. marketplace.hanscristy.com에 이러한 최적화를 적용했더니 결과가 즉각적으로 나타났습니다. 변화는 LCP 및 TBT와 같은 웹 바이탈 지표를 개선할뿐만 아니라 전반적인 사용자 경험도 향상시켰습니다.
 

6단계: 클라우드플레어와 Selldone 최적화가 실제 성능에 미치는 영향

클라우드플레어의 최적화와 Selldone의 전 dedicated 기술이 결합하여 도전적인 테스트 시나리오에서도 비교할 수 없는 성능을 보여주는 방법을 살펴보겠습니다.

성능 테스트의 도전 이해하기

라이트하우스, GTmetrix와 같은 도구는 주로 정적 페이지 또는 서버 측에서 콘텐츠를 렌더링하는 웹사이트를 위해 설계되었습니다. 그러나 Selldone은 다음과 같이 다릅니다:

• 100% PWA: Selldone의 플랫폼 모든 부분(메인 웹사이트, 대시보드, 상점 등)은 공통적인 구조로 Progressive Web App (PWA) 형태로 구축되었습니다. 이는 모든 렌더링이 클라이언트 측에서 이루어져 사용자가 맞춤형 대시보드와 상점을 설계할 수 있는 엄청난 유연성을 제공합니다.
• 동적 도메인 로딩: 사용자는 복잡한 백엔드를 구현하지 않고도 어떤 도메인에서든 Selldone을 불러올 수 있습니다. 시스템은 모든 것을 동적으로 처리하여 단일 JavaScript 파일로 제공됩니다.

이러한 독특한 접근은 유연성과 속도를 제공하지만, 서버 렌더링된 페이지에 대해 설계된 도구로 테스트할 경우 고유한 도전 과제를 만들어냅니다.

Selldone이 현실에서 10배에서 100배 더 빠른 이유

정적 페이지는 각 사용자 요청에 대해 HTML을 렌더링하기 위해 서버에 의존하는 반면, Selldone의 PWA 접근은 본질적으로 다릅니다:
효율적인 데이터 패칭:

• 서버에서 전체 페이지를 렌더링하는 대신, Selldone은 필요한 데이터를 포함하는 가벼운 JSON 구조를 전송합니다.
• 예를 들어, 사용자가 제품을 클릭하면, 플랫폼은 전체 페이지를 다시 로드하거나 렌더링하는 대신 필요한 데이터(예: 제품 세부정보)만 가져옵니다.

서버 측 렌더링 지연이 없음:

• 우커머스와 같은 플랫폼에서는 각 클릭이 서버 측 렌더링을 유발할 수 있지만, Selldone은 이 병목 현상을 완전히 제거합니다. 모든 사항은 클라이언트 측에서 처리되며, 대기 시간이 크게 감소합니다.

실시간 속도 장점:

• 사용자는 거의 즉각적으로 페이지 전환을 경험합니다. 이러한 현실 속도는 전통적인 테스트 점수가 이점을 완전히 반영하지 않더라도, 플랫폼이 실제 서버 렌더링 웹사이트보다 훨씬 빠르게 느껴지도록 만듭니다.

기술적 병목 현상 극복하기

클라이언트 측에서 렌더링된 PWA의 높은 테스트 점수를 달성하는 것은 역사적으로
다음과 같은 문제로 어렵게 여겨졌습니다:

• JS 실행 지연: 클라이언트 측 렌더링은 JavaScript에 크게 의존하며, 테스트 도구는 종종 이를 처벌합니다.
• 동적 콘텐츠: 정적 HTML과 달리 동적 콘텐츠 로딩은 합성 테스트에서 더 느리게 보일 수 있습니다.

하지만 Selldone은 다음과 같이 인터넷에서 처음으로 이러한 한계를 극복했습니다:

• 클라우드플레어 최적화 (로켓 로더™ 및 Brotli 압축과 같은)를 통해 자산 전달을 간소화합니다.
• 고급 PWA 아키텍처를 통해 실시간 데이터 패칭 및 렌더링을 구현합니다.

실제 성능 대 합성 점수

합성 테스트는 Selldone과 같은 클라이언트 렌더링 플랫폼에 대해 낮은 점수를 보여줄 수 있지만, 실제 성능은 다른 이야기를 만듭니다. Selldone의 대시보드와 상점은 서버 렌더링 플랫폼보다 10배에서 100배 더 빠른 경험을 제공하여 현대의 전자상거래 요구에 이상적인 솔루션이 됩니다.
  최적의 성능을 위해 사용되는 클라우드플레어 설정을 미러링하고 싶다면, 다음은 활성화된 기능 목록입니다:

웹 성능 용어

여기에는 웹 바이탈과 관련된 웹 성능 용어에 대한 친절하고 이해하기 쉬운 설명이 있습니다:

LCP (Largest Contentful Paint)

LCP는 웹페이지에서 가장 큰 보이는 부분(예: 큰 이미지나 제목)이 로드되고 사용자에게 보이는 데 걸리는 시간을 측정합니다. 페이지가 사용자가 읽거나 상호작용하기 위해 “준비 상태”가 되는 시간을 생각해 보세요.

CLS (Cumulative Layout Shift)

CLS는 웹페이지 로딩 중 갑자기 무언가가 움직이는 정도를 추적합니다. 예를 들어, 버튼 클릭 직전에 위치가 이동하면 - 그건 레이아웃 이동입니다. 낮은 CLS 점수는 사이트가 안정적이고 매끄럽게 느껴짐을 의미합니다.

INP (Interaction to Next Paint)

INP는 사용자 상호작용에 대해 웹페이지가 얼마나 빨리 반응하는지를 측정합니다. 버튼 클릭이나 검색창에 타이핑하는 것과 같은 경우입니다. 더 빠른 INP는 귀하의 사이트가 응답성 있게 느껴진다는 것을 의미합니다 그리고 사용자가 작업을 기다리는 데 실망하지 않을 것입니다.

TBT (Total Blocking Time)

TBT는 페이지가 로딩되는 동안 사용자가 스크롤하거나 클릭하려 할 때 무반응인 시간(예: 아무 일도 일어나지 않는 경우)을 계산합니다. 낮은 TBT는 페이지가 멀티태스킹에 더 뛰어나다는 의미이며, 로딩되는 동안 사용자가 원활하게 상호작용할 수 있도록 합니다.