오늘날의 디지털 시대에서 웹 사용자는 매우 참을성이 없으며 모든 것이 빠르고 효율적으로 작동하기를 기대합니다. 이러한 사고방식을 가진 많은 기업은 웹사이트가 기대에 부응하지 않거나 너무 느리게 로드되어 사용자가 원하는 목적을 달성하지 못할 때 잠재 고객을 잃을 수 있습니다. 최종 결과는 종종 고객을 잃는 것입니다. 그렇다면 빠르고 최적화된 웹사이트를 만드는 주요 요소는 무엇일까요? 함께 분석해 봅시다.

웹사이트를 매끄럽고 효율적으로 운영하는 방법?

Core Web Vitals이란 무엇입니까?

Core Web Vitals는 Google에서 제공하는 표준화된 지표 세트로, 개발자가 웹페이지에서 사용자 경험을 더 잘 이해할 수 있도록 도와줍니다. Core Web Vitals는 개발자를 위해 만들어졌지만, 이러한 도구는 웹사이트 소유자 모두가 사용할 수 있습니다. 왜냐하면 이러한 도구는 웹페이지에서 실제 사용자 경험을 분석하는 데 도움이 되기 때문입니다.

Core Web Vitals는 사용자 경험의 세 가지 주요 측면에 대한 메트릭을 제공함으로써 사용자 경험 문제를 식별합니다. 여기에는 다음이 포함됩니다.

• 페이지 로딩 성능
• 상호 작용의 용이성
• 사용자 관점에서 본 페이지의 시각적 안정성

이러한 메트릭은 사용자 경험의 전체 이야기를 전하지는 않지만 결합하면 개발자가 문제를 효과적이고 체계적으로 해결할 수 있습니다.

오늘 웹사이트를 개선하기 위해 Core Web Vitals의 세 가지 주요 메트릭을 자세히 살펴보겠습니다!

1. Largest Contentful Paint (LCP)

LCP는 웹사이트 소유자가 사용자가 본 가장 큰 콘텐츠 블록의 로드 시간을 기준으로 페이지가 유용한지 여부를 평가하기 위해 사용할 수 있는 Core Web Vitals 메트릭입니다.

웹사이트 소유자는 페이지가 빠르게 로드되어 좋은 사용자 경험을 제공하도록 해야 합니다. 빠른 로딩 시간은 사용자 경험에 중요한 요소일 뿐만 아니라 Google에서 페이지 순위를 높이는 데도 도움이 됩니다. 또한 빠른 로딩 시간은 느린 로딩 시간의 페이지에 비해 참여 수준과 전환율에 긍정적인 영향을 미칩니다.

LCP는 무엇을 측정합니까?

LCP는 사용자의 뷰포트(현재 화면)에서 다양한 콘텐츠 블록의 로드 시간을 측정합니다. 이 메트릭은 화면에 표시되는 콘텐츠만 고려하며 화면 아래의 콘텐츠는 제외합니다.

LCP로 측정되는 요소는 다음과 같습니다.

• 이미지
• 비디오 포스터 이미지
• 배경 이미지
• 텍스트 블록

웹사이트 소유자는 페이지 로딩 시작 후 2.5초 이내에 LCP를 목표로 해야 합니다.

2. Cumulative Layout Shift (CLS)

웹사이트 소유자는 페이지에서 링크와 버튼을 최대한 쉽게 상호작용할 수 있도록 하여 판매 및 전환율을 높여야 합니다. CLS는 웹페이지가 로드된 후 링크 또는 버튼의 위치가 변경되어 사용자가 페이지의 요소와 상호작용하려고 할 때 직면하는 어려움에 영향을 미치는지 여부를 확인하는 메트릭입니다.

UX 및 UI 디자인은 사용자 경험에서 매우 중요한 요소이며, 사용자가 읽고 있을 때 페이지의 요소가 변경되면 사용자에게 좌절감을 줄 수 있습니다. CLS는 개발자가 페이지에서 이미지나 링크의 위치가 변경되는지 여부를 확인하여 사용성을 개선하고 클릭률을 높이는 데 도움이 됩니다.

CLS는 무엇을 측정합니까?

CLS는 뷰포트의 요소가 두 렌더링된 프레임 사이에 원래 위치에서 변경되는지 여부를 측정합니다. 간단히 말해, 이 메트릭은 웹사이트 소유자가 텍스트, 버튼 및 배너와 같은 콘텐츠가 페이지에서 사용자가 읽는 동안 밀려나는지 여부를 이해하는 데 도움이 됩니다.

위치가 변경되는 요소는 사용자를 혼란스럽게 하고 페이지에서의 경험을 방해할 수 있으므로 페이지 로드 후 모든 콘텐츠가 제자리에 유지되도록 하는 것이 중요합니다. CLS는 다음과 같은 여러 요소를 고려하여 사용자 관점에서 페이지의 시각적 안정성을 결정하는 주요 메트릭을 고려합니다.

• 레이아웃 이동
• 영향 분수
• 거리 분수

웹사이트 소유자는 CLS를 0.1 이하로 유지해야 합니다.

3. First Input Delay (FID)

온라인 소비자는 웹사이트가 빠르게 반응하고 쉽게 상호작용할 수 있기를 원합니다. FID는 사용자가 작업을 수행할 때 페이지가 응답하는 데 걸리는 시간을 측정하여 청중에게 좌절감을 줄 수 있는 페이지를 식별합니다.

현대적인 웹사이트는 사용자에게 콘텐츠를 제공하기 위해 많은 고급 기술과 동적 콘텐츠 위젯을 사용합니다. 그러나 이러한 요소는 지연을 일으켜 사용자가 상호작용할 때 브라우저가 응답하기를 기다려야 합니다.

개발자는 웹사이트 전체에서 상호작용 및 사용성을 개선하기 위해 사용자가 입력에 대해 브라우저가 응답하기를 기다리는 시간을 줄여야 합니다.

FID는 무엇을 측정합니까?

FID는 사용자의 입력 요소를 로드할 때 페이지의 응답성을 측정합니다. 즉, FID는 클릭 및 키 입력과 같은 이벤트만 기록합니다.

웹사이트 소유자는 FID가 100밀리초 이하인 좋은 사용자 경험을 제공하는 것을 목표로 해야 합니다.

기타 성능 지표

앞서 논의했듯이 Core Web Vitals는 개발자가 웹사이트를 개선하는 데 도움이 되는 많은 정보를 제공합니다. 앞서 언급한 주요 메트릭 외에도 개발자는 코딩이 웹페이지에서 사용자가 콘텐츠를 인식하는 방식에 어떤 영향을 미치는지 이해할 수 있습니다.

비록 사용자 경험 지표로 간주되지는 않지만, 이러한 지표는 지연 시간이나 온라인 청중이 웹사이트와 상호작용하는 방식에 부정적인 영향을 미칠 수 있는 기타 기술적 요소를 정량화합니다. 따라서 방문자가 웹사이트에서의 경험을 더 잘 이해할 수 있도록 몇 가지 추가 지표를 검토해 보겠습니다.

1. First Contentful Paint (FCP)

FCP는 사용자의 브라우저가 DOM 요소(이미지, 흰색이 아닌 요소 및 SVG)를 렌더링하는 데 걸리는 시간을 측정합니다. 이 메트릭은 렌더링을 방해하는 리소스를 식별하고 초 단위로 측정되며 다음과 같은 평가를 받습니다.

• 0–2초: 초록색 (빠름)
• 2–4초: 주황색 (보통)
• 4초 이상: 빨간색 (느림)

2. Speed Index (SI)

빠르게 로드되는 웹사이트는 더 나은 온라인 경험을 제공하며, SI는 사용자가 콘텐츠가 페이지에 표시될 때까지의 평균 시간을 보여줍니다. 이 메트릭은 페이지의 과도한 JavaScript를 식별하고 밀리초 단위로 측정되며 다음과 같은 평가를 받습니다.

• 0–4.3초: 초록색 (빠름)
• 4.4–5.8초: 주황색 (보통)
• 5.8초 이상: 빨간색 (느림)

3. Time to Interactive (TTI)

TTI는 페이지의 콘텐츠가 완전히 상호작용 가능해질 때까지 걸리는 시간을 측정합니다. TTI는 불필요한 JavaScript가 포함된 페이지를 식별하는 데 도움이 되며 초 단위로 측정되며 다음과 같은 평가를 받습니다.

• 0–3.8초: 초록색 (빠름)
• 3.9–7.3초: 주황색 (보통)
• 7.3초 이상: 빨간색 (느림)

4. Total Blocking Time (TBT)

TBT는 웹사이트 소유자가 사용자 입력에 대해 웹페이지가 응답하는 데 걸리는 시간을 평가하는 데 도움을 줍니다. 이 메트릭은 불필요한 JavaScript가 포함된 페이지를 식별하며 밀리초 단위로 측정되고 다음과 같은 평가를 받습니다.

• 0–300 ms: 초록색 (빠름)
• 300–600 ms: 주황색 (보통)
• 600 ms 이상: 빨간색 (느림)

5. Page Performance Scores

페이지 성능 점수는 Core Web Vitals의 모든 중요한 사용자 경험 지표를 고려한 복합 지표입니다. 이 점수는 모든 모바일 및 데스크탑 방문에서 누적 평가 시스템을 사용합니다. 가중 평균 점수를 계산하여 단일 점수를 제공하여 어떤 페이지를 더 면밀히 검토해야 하는지 빠르게 이해할 수 있도록 합니다. 이러한 메트릭은 페이지 성능 점수에서 단순화되었지만 개발자는 특정 척도에 따라 각 범주의 점수를 참조할 수 있습니다.

• 90점 이상: 좋음
• 50–90점: 개선 필요
• 50점 미만: 나쁨

이 모든 요소들을 고려할 때 현재 귀하의 웹사이트는 어디에 있습니까? 더 최적화할 수 있다고 생각하십니까? 물론, 이것은 많은 잠재 고객을 창출하고 고객 수를 증가시킬 수 있는 고성능 웹사이트를 소유하는 것에 대해 빙산의 일각에 불과합니다. 디자인 및 사용자 경험 요소도 사람들이 귀하의 웹사이트와 상호작용하는 방식에서 중요한 역할을 합니다. CTA(콜투액션)와 사용자가 원하는 목적지로 안내하는 것은 전형적인 예입니다. SEO는 말할 것도 없지만, Core Web Vitals 및 성능 지표를 확인하는 것은 좋은 출발점입니다.

자세한 정보가 필요하면 AMIT에 지금 바로 문의하세요!