웹 사이트 로드 시간이 길면 사용자 경험, 사이트 트래픽 및 SEO에 부정적인 영향이 있을 수 있다.
웹 사이트의 성능, 속도가 이들에 어떻게 영향을 주며 그것을 어떻게 측정할 수 있는지 자세히 알아보자.

Site Speed

• 웹 사이트 속도(성능) 브라우저가 특정 사이트의 웹 페이지를 얼마나 빨리 로드하는가를 의미한다.
• 성능이 좋지 않은 사이트는 브라우저에 느리게 표시되며 이러한 사이트에서는 사용자의 이탈률이 높다.
• 반대로 신속하게 로드되는 사이트는 일반적으로 트래픽이 많으며 전환율도 높다.

Site Speed는 왜 중요할까?

• 페이지 속도는 전환율과 SEO 모두에 영향을 미친다.
• 따라서 이를 개선하면 페이지의 총 트래픽과 전환율을 모두 높일 수 있다.

Conversion rate(전환율)

웹 페이지 총 방문자 중 원하는 행동(전환)을 하는 사용자의 비율

• 다양한 연구 결과에 따르면 사이트 속도는 전환율에 영향이 있다.
  • 빠른 사이트는 느린 사이트에 비해 머무는 사용자가 많으며 사용자들의 전환율도 높다.
  • 즉, 웹 페이지가 더 빨리 로드될수록 사용자가 해당 웹 페이지에서 대상 작업을 수행할 가능성이 높아진다.
  • 결과적으로 사이트 성능을 개선하는 일은 전환율 최적화에서 매우 중요한 부분
• 전환율은 페이지 디자인, 레이아웃, 텍스트, 이미지 등의 영향을 받는다.
  • 사용자가 다음에 취해야 할 행동이 명확하지 않거나 너무 많은 옵션이 표시되면 페이지에서 이탈할 수 있다.
  • 이러한 문제와는 별개로 웹 사이트 속도를 최적화하면 전환율이 향상되는 효과가 있다.
• 전환율 최적화(CRO) : 전환율 최대한 높이는 행동
  • 전환율 최적화는 지속해서 진행해야 하는 프로세스

Bounce rate(이탈률)

한 페이지만 보고 웹 사이트를 떠나는 사용자의 비율

• 페이지가 몇 초 이내에 로드되지 않으면 창을 닫거나 다른 곳을 클릭할 가능성이 크다.

User experience(사용자 경험)

• 페이지 로드 시간이 길고 사용자의 행동에 대해 반응 시간이 느리면 사용자 경험이 저하된다.
• 사용자는 콘텐츠가 로드되기를 기다리면서 불만을 느끼며 해당 사이트를 완전히 떠나게 될 수도 있다.

SEO best practices

• Google은 최대한 빠른 시간 내에 관련 정보를 제공하는 것을 중시하는 경향이 있다.
  • 즉, 사이트 성능은 Google 검색 순위의 중요한 요소
• SEO에는 모바일 장치에서의 사이트 성능이 특히 중요하다.

사이트 속도가 어떻게 SEO를 최적화할까?

웹 사이트의 성능을 최적화하는 것은 웹 사이트가 검색 결과에 높게 표시되도록 하는 데 중요한 역할을 한다.

• SEO는 검색 엔진에서 웹 페이지를 평가하고 검색 결과에서 순위를 매기는 방법에 맞게 콘텐츠 및 웹 사이트 경험을 조정하는 것
• SEO의 목표는 검색 결과에서 순위를 최대한 높여 해당 웹 사이트로 더 많은 트래픽을 유도하는 것이다.
• 검색 엔진의 관점에서는 사용자가 필요한 정보를 쉽게 찾을 수 있도록 하는 것이 중요하므로 웹 사이트의 사용자 경험이 매우 중요하다.
  • 사이트 성능은 사용자 경험의 큰 비중을 차지한다.

사이트 속도가 SEO에 얼마나 영향을 미칠까?

• 2010년 Google에서는 사이트 속도가 검색 순위에 반영될 것이라고 발표했다.
  • 그 이후로 사이트 성능의 영향력이 커졌으며 성능 최적화는 이제 SEO 최적화의 큰 부분을 차지한다.
  • Google에서는 느린 웹 사이트가 사용자 경험에 부정적인 영향을 미치는 방식을 강조했다.
  • Google에서는 또한 사용자가 느리게 로드되는 웹 사이트에 머물 가능성이 적다고 지적했다.
• Google에서는 검색 알고리즘에 대한 세부 정보를 공개하지 않으므로 사이트 속도가 SEO에 얼마나 영향을 미치는지 정확히 정량화하기는 어렵다.
• 웹 사이트 유용성과 전반적인 사용자 경험은 특히 모바일 장치의 경우에 더 중요하다.

사이트 속도에 영향을 미치는 요소들

Page weight

• 웹 사이트가 로드되기 위해 필요한 리소스의 양은 사이트 속도(성능)에 큰 영향이 있다.
  • 큰 JavaScript 파일, 비디오 콘텐츠, 무거운 CSS 파일, 고화질 이미지 등은 모두 웹 페이지에 로드 시간을 증가시킨다.
  • 리소스가 많이 필요한 페이지는 느리게 로드된다.
• 웹 기술로 용량이 증가하고 웹 사이트가 복잡해지고 있으므로 웹 사이트를 가볍게 하는 일은 더욱 어려워지고 있다.
  • 과거와 달리 웹 페이지에 다양한 기능을 추가할 수 있으며 결과적으로 평균적인 전체 페이지 무게는 증가하고 있다.

Network conditions

• 웹 사이트를 가볍게 설계했다고 해도 네트워크가 느리다면 브라우저에 빠르게 로드되지 않을 수 있다.
  • 로컬 네트워킹 장치와 ISP 서비스의 품질은 네트워크 연결성에 영향이 있다.
  • 또한 WiFi를 이용하지 않고 3G나 4G를 이용하여 인터넷에 접속하는 모바일 장치도 일반적으로 네트워크 연결 속도가 느리다.
• 연결이 느린 경우에도 웹 리소스를 빠르게 전달하는 여러 기법이 있다.
  • minify, 압축, CDN을 이용한 콘텐츠 호스팅 등

Hosting location

• 콘텐츠를 필요로 하는 곳에 해당 콘텐츠가 도착하기까지 긴 거리를 이동해야 한다면 네트워크 대기 시간이 증가할 것

웹 사이트 속도의 측정

• 웹 사이트 속도 테스트를 제공하는 많은 도구들이 있다.
• 이 중 많은 속도 테스트 도구가 성능 지표를 제공하면서 동시에 페이지 속도를 느리게 하는 개별 요소들을 파악해준다.

어떤 측정 지표가 중요할까?

Load time(로드 시간)

• 전체 웹 페이지가 브라우저에 표시될 때까지 걸리는 시간
  • 모든 HTTP 요청이 처리되는 시간
• 모든 페이지를 로드하기 위해서는 다수의 HTTP 요청이 필요하다.
  • 페이지의 기본 HTML 이외에도 다수의 리소스를 로드해야 하기 때문

Page Size(페이지 크기)

• 해당 페이지가 작동하기 위해 로드되어야 하는 모든 리소스의 파일 크기
  • 페이지 크기는 브라우저가 해당 페이지를 로드하기 위해 걸리는 시간에 영향을 미치며 웹 페이지를 로드하는 사용자에게 큰 영향이 있을 수 있다.

TTFB: Time To First Byte

• 브라우저가 웹 페이지를 요청한 후 응답의 첫 바이트가 도착할 때까지의 시간
  • 전체적인 로드 시간이 더 중요하지만, 웹 사이트 성능을 평가할 때는 TTFB도 고려되며, SEO에도 영향이 있다.

The number of round trips

• 요청/응답이 원본 서버까지 몇 번이나 오가는가
  • 웹 페이지에 필요한 왕복 이동수가 많다면 대기 시간이 커진다.

RTT: Round Trip Time

• 요청이 왕복 이동하는 데 걸리는 시간
  • 요청이 원본 서버에 도착하고 요청을 한 장치로 돌아올 때까지의 시간

Google page experience update

• 페이지 로드 시간은 오랜 기간 SEO의 중요한 부분이었다.
• Google은 2020년에 CWV가 2021년 중반부터 순위 알고리즘의 일부가 될 것이라고 발표했다. 이를 Google page experience update라고 한다.
• Google은 페이지의 검색 순위를 결정하는 데 도움이 되는 페이지 경험 요인에 CWV가 포함될 것이라고 밝혔다.
  • 다른 페이지 경험 요인에는 HTTPS 보안, 모바일 친화성, 전면 광고(예: 팝업)의 유무 등이 포함된다.
• 업데이트의 목표는 긍정적인 사용자 경험을 제공하는 웹페이지에 보상을 제공하는 것

Core Web Vitals (CWV)이란?

검색 엔진 결과에서 웹사이트가 표시되는 순위에 영향을 미치는 세 가지 웹 성능 측정치

• Google의 검색 엔진은 세 가지 성능을 측정하고 검색 결과에 표시할 페이지를 결정하는 데 반영한다.
• 즉, 웹 페이지의 핵심 웹 바이탈을 최적화하면 검색 엔진 최적화(SEO)로 페이지의 순위를 개선할 수 있다.

CWV는 다음과 같다.

1. LCP(Largest Contentful Paint) : 로딩 속도를 측정
2. FID(First Input Delay) : 페이지 상호 작용을 측정
3. CLS(Cumulative Layout Shift) : 시각적 안정성을 측정

Core Web Vitals는 SEO에 어떤 영향을 미칠까?

• 모든 검색 엔진은 웹 크롤러 또는 웹 스파이더 라는 봇을 사용하여 웹 사이트를 분석한다.
  • 봇은 각 웹사이트의 콘텐츠가 무엇인지 결정하고 검색 쿼리에 대한 응답으로 해당 웹사이트를 표시해야 하는 시기를 결정하는 데 도움을 준다.
  • 웹 성능은 Google 봇이 확인하는 웹사이트의 측면 중 하나
• Google이 순위 알고리즘을 대부분 비밀로 유지하기 때문에 LCP, FID 및 CLS가 SEO에 얼마나 영향을 미치는지는 정확히 알 수는 없지만, CWV는 SEO에 상당한 영향을 미친다.

왜 Google은 웹 성능으로 순위를 결정할까?

• Google과 같은 검색 엔진은 검색자에게 가장 관련성 높은 정보를 가능한 한 빨리 제공하기를 원한다.
• 로딩 시간의 지연은 사용자를 불만스럽게 하는 경향이 있는 반면, 빠른 로딩 페이지는 사용자가 돌아올 가능성을 높인다.
• 유사한 이유로 DuckDuckGo 및 Bing과 같은 다른 검색 엔진도 웹 성능을 고려할 수 있다. 하지만 Google과 마찬가지로 페이지 순위 알고리즘이 어떻게 작동하는지 확실하지 않다.

Largest Contentful Paint (LCP)

이미지 또는 텍스트 블록인 웹 페이지의 가장 큰 부분을 로드하는 데 걸리는 시간을 측정

• Google의 가이드라인은 LCP 측정이 2.5초 미만인 경우 '양호'로 분류
  • 당연히 빠를수록 좋다.
• 웹페이지가 얼마나 빨리 로드되는지 나타내는 좋은 기준을 제공
• 일반적으로 웹 페이지에서 가장 큰 요소는 주요 콘텐츠이므로 페이지가 로드되는 시간은 사용자가 페이지가 로드되었다고 인지하는 시간과 잘 일치하는 경우가 많다.
• FMP(First Meaningful Paint) : 이전 버전의 LCP 메트릭. 페이지의 주요 콘텐츠가 표시되는 시기를 측정. Google은 이 측정항목이 신뢰할 수 없음을 발견했고 이후 일부 도구에서 삭제했다.

First Input Delay (FID)

사용자가 웹 페이지와 상호 작용하려는 첫 번째 시도와 응답할 때 사이의 시간을 측정
즉, FID는 사람이 화면을 처음 클릭하고 얼마나 빨리 어떤 일이 일어나게 할 수 있는지 정량화한다.

• Google 가이드라인에 따르면 좋은 FID는 100밀리초 이하
• FID는 요청된 이벤트가 실제로 발생하는 데 걸리는 시간. 요청과 요청이 이행되기 시작하는 시간 사이의 시간만 측정한다.
• FID는 실제 사용자의 관찰을 기반으로 측정된다.
• 실험실 환경에서는 다음으로 측정된다. (lab metric)
  • TBT(Total Blocking Time) : FCP와 TTI 사이의 경과 시간을 측정
    • FCP(First Contentful Paint) : 로드가 시작되는 시점과 사용자 화면에 항목이 로드되는 시점 사이의 시간을 측정
  • TTI(Time To Interactive) : 항목이 로드된 것으로 표시되는 데 걸리는 시간과 사용자가 항목과 실제로 상호 작용할 수 있는 시간을 측정

Cumulative Layout Shift (CLS)

웹 페이지가 로드될 때 "이동"하는 정도를 측정

• Google 가이드라인에 따르면 좋은 CLS 측정값은 0.1 이하
• 레이아웃 이동은 페이지에서 요소가 예기치 않게 이동하는 것을 의미
• How CLS is measured in Google
  • impact fraction distance fraction = 레이아웃 이동 점수
  • impact fraction : 레이아웃 이동의 크기
  • distance fraction : 요소가 얼마나 멀리 이동했는지를 측정

CWV를 측정하는 도구

• Chrome UX Report(CrUX)
  • Chrome 사용자가 보고한 필드 데이터를 제공하여 실제 사용자가 웹사이트를 경험하는 방법에 대한 사이트 소유자 데이터를 제공
• Google Lighthouse
  • CWV에 대한 lab metric을 제공하는 무료 도구
  • 성능, SEO, 접근성 등을 개선하기 위해 실행 가능한 방법을 제공
• Google PageSpeed Insights
  • CrUX와 Lighthouse의 기능을 결합하여 CWV 및 기타 웹 바이탈에 대한 현장 및 실험실 데이터를 모두 제공
• Google Search Console
  • 부분적으로 CrUX 필드 데이터를 기반으로 하며 URL 또는 URL 그룹별로 CWV 성능 데이터를 제공

CWV를 개선시키는 방법

LCP

• CDN (Content Delivery Network ) 사용
  • CDN은 콘텐츠가 사용자에게 더 빨리 도달할 수 있도록 전 세계 위치에 콘텐츠를 캐시한다.
• Optimize images
  • 이미지는 보통 페이지의 가장 큰 요소다.
  • 이미지 파일 크기를 줄이면 이미지 로드 시간을 단축하는 데 도움이 될 수 있다.
• lazy-loading 구현
  • lazy-loading에서는 웹 사이트 리소스가 사용자가 필요할 때만 로드된다.
  • 과도하게 사용하면 LCP가 낮아질 수 있다.
  • 이러한 이유로 Google은 지연 로딩 이미지를 "스크롤 아래" 또는 “접힌 부분 아래”로 제한할 것을 제안한다.

FID

• JavaScript 함수의 크기 줄이기
  • 코드가 많은 동적 웹 페이지는 브라우저가 코드를 실행하기 전에 모든 코드가 로드될 때까지 기다려야 하므로 입력 지연이 발생할 수 있는데, 이 프로세스를 더 빠르게 진행하는 데 도움이 될 수 있다.
• 정적 웹페이지 구축
  • 정적 HTML 웹페이지는 특히 CDN을 통해 배포될 때 동적 페이지보다 훨씬 빠르게 로드된다.
• 불필요한 타사 도구 및 스크립트를 제거
  • 웹 사이트에 추가 도구를 로드하면 성능이 느려질 수도 있다. 웹 사이트에서 타사 도구의 양을 줄이면 일반적으로 FID 및 웹 사이트 속도를 향상시킬 수 있다.

CLS

• 타사 페이지 요소 최소화
  • 타사 페이지 요소는 페이지의 나머지 부분과 비교하여 별도의 위치에서 로드된다.
  • 약간 다른 시간에 로드됨에 따라 페이지의 레이아웃이 변경될 수 있다.
  • 이러한 타사 요소의 사용을 최소화하면 레이아웃 변경 횟수가 줄어든다.
• 공간 확보
  • 개발자는 브라우저가 실제 요소를 가져오기 전에 웹 페이지에서 공간을 미리 확보할 수 있다.
• 이미지가 최적의 크기로 로드되는지 확인
  • 이미지를 최적화하는 것과 약간 다른 프로세스
  • 데스크톱 컴퓨터, 태블릿, 스마트폰은 모두 화면 크기가 다르기 때문에 다른 크기의 이미지가 필요하다.
  • 브라우저가 데스크톱에 최적화된 큰 이미지를 먼저 로드한 다음 사용 중인 장치가 스마트폰이기 때문에 모바일에 최적화된 이미지를 가져와야 하는 경우 크기가 다른 이미지가 로드될 때 페이지의 콘텐츠가 이동할 수 있다.
• 이미지 및 비디오의 높이 및 너비 포함
  • 높이 및 너비 속성은 이미지 또는 비디오가 로드되기 전에 해당 공간을 확보할 수 있도록 브라우저에 이미지 크기를 알려준다.
• CSS 종횡비 상자 사용
  • 개발자가 종횡비를 사용하여 페이지 요소의 공간을 보존하기 위해 사용할 수 있는 여러 가지 CSS 기술이 있다.

다른 중요한 성능 지표

CWV는 SEO에 유일하게 중요한 웹 바이탈 지표는 아니다.

• FCP(First Contentful Paint), DCL(DOMContentLoaded), TTI(Time to Interactive) 및 TTFB(Time to First Byte)는 SEO에 CWV만큼 영향을 미치지 않지만 개발자가 CWV에 영향을 미치는 문제를 식별하는 데 도움이 될 수 있다.
  • ex. TTFB는 그 자체로 특별히 유용한 메트릭은 아니지만 개발자가 수정해야 하는 추가 문제를 나타낼 수 있다.

Appendix. SEO

SEO는 어떻게 작동할까?

• 사용자가 검색을 수행하면 검색 엔진에서 쿼리를 수행할 가능성이 가장 높은 것부터 낮은 것 순으로 웹 사이트 목록을 생성한다.
  • 이 목록은 일반적으로 사용자의 쿼리에 응답할 수 있는 웹 사이트를 나열하는 일련의 결과 페이지(SERP)로 나뉘며, 일반적으로 SERP당 10개의 결과가 있다.
• 웹 사이트가 검색어와 얼마나 관련이 있는지, 검색 알고리즘이 웹 사이트를 얼마나 신뢰할 수 있다고 생각하는지 등 여러 요인에 따라 검색 엔진 결과에서 순위가 매겨진다.
• SEO는 웹 사이트에서 제공하는 정보의 종류를 결정하고 해당 정보를 검색 엔진에서 사용자가 찾을 수 있도록 한다.
• SEO에는 다음과 같은 다양한 전략이 있다.
  • Content quality : 사용자의 질문에 얼마나 잘 답변이 이루어지는지
    • 키워드 연구 프로세스 : 추구할 가치가 있는지. 검색량, 관련 검색어 등의 이해가 포함된다.
    • 콘텐츠의 품질 : 콘텐츠가 사용자 의도와 얼마나 잘 부합하는지. 사용자가 해당 페이지에 접속한 의도를 달성했는가
  • On-page factors : 웹 페이지 콘텐츠가 구성되는 방식
    • 최적화된 웹 페이지에는 명확하고 직접적인 제목, 유용한 섹션 헤더, 설명이 포함된 파일 이름 및 이미지에 대한 대체 텍스트, 이해하기 쉬운 사이트 계층 구조가 있다.
    • 이러한 요소를 통해 검색 엔진은 웹 페이지 내용을 쉽게 이해할 수 있다.
  • Off-page factors : 웹 사이트 자체의 콘텐츠 외부 요소
    • ex. 웹 사이트에 있는 외부 링크의 양
    • 권한 있는(또는 신뢰할 수 있는) 웹 사이트가 웹 사이트 외부의 콘텐츠로 연결되는 경우 Google 알고리즘은 이를 콘텐츠가 가치 있다는 표시로 해석한다.
  • User experience : 웹 사이트 방문자에 초점을 맞추고 코어 웹 바이탈(CWV)이 중요한 작용을 하는 곳
    • 웹 페이지의 항목이 얼마나 빠르고 원활하게 로드되는지
    • 사용자가 사이트를 어떻게 경험하는지를 측정하는 데 사용하는 측정 항목 집합
  • black hat : 키워드 채우기. 일반적으로는 권장되지 않는다.
    • 키워드 채우기는 검색 엔진 순위에서 이점을 얻으려고 콘텐츠에서 키워드를 부자연스러운 정도로 여러 번 사용하는 관행
    • Google에서는 더 이상 키워드가 사용되는 빈도를 관련성이 있다고 생각하지 않으며 때로는 불이익을 준다.

SEO가 중요한 이유는?

• SEO는 전체적인 마케팅 전략에 아주 중요한데, 높은 순위를 차지하는 것이 회사의 위상에 좋기 때문
• 콘텐츠를 최적화하거나 사용자 경험을 최적화하는 데 시간과 노력이 필요할 수 있지만, 그 결과로 얻는 트래픽은 돈을 주고 살 수 있는 것이 아니다.
• SEO는 기업에서 미래 구매자 집단을 구축하는 데 도움이 될 수 있다.

SEO를 위해 웹 페이지를 최적화하려면 어떻게 해야 할까?

• 콘텐츠 및 키워드 조사
  • Conduct keyword research : 키워드에 대한 페이지 최적화는 사람들이 실제로 해당 키워드를 검색하는 경우에만 중요하다.
    • 사용자가 찾고 있는 질문 유형을 결정하고 비즈니스 우선순위와 겹치는 것을 찾는 데 도움이 될 수 있다.
  • Understand and write for search intent : 모든 사용자는 목표가 있다. 사용자가 목표를 달성하는 데 도움이 되는 방법이 무엇일지 생각해야 한다.
  • Write thorough, easy to understand pieces : Google에서는 검색어에 가장 잘 응답한다고 생각하는 부분의 순위를 매긴다. 글이 높은 순위에 오르도록 하는 가장 좋은 방법은 사이트 소유자가 사용자의 목표와 관련된 주제를 최대한 많이 다루도록 하는 것이다. 또한 가독성이 또 하나의 순위 요소이므로 이해하기 쉬운 글을 쓰는 것은 SEO를 높이는 데 도움이 될 수 있다.
• 온 페이지 SEO 팁
  • Organize by headers : 헤더를 사용하여 콘텐츠를 분할하면 사용자가 콘텐츠를 더 쉽게 스캔하여 경험을 개선할 수 있다.
  • Use alt text : 대체 텍스트는 이미지의 내용을 설명하는 데 사용된다. 이 텍스트 덕분에 스크린 리더기를 사용하는 사람들이 웹 사이트에 더 쉽게 액세스할 수 있다.
  • Keyword incorporation : 키워드 채우기는 좋은 전략이 아니지만, meta 정보에 대상 키워드를 포함하는 것은 중요할 수 있다.
• 사용자 경험 및 기술적 SEO
  • Site speed : 위에서 다루었듯 빠른 웹 사이트 속도는 SEO의 핵심 중 하나.
    • 콘텐츠 전송 네트워크(CDN)를 사용 : CDN은 서버 네트워크에서 콘텐츠를 캐싱(또는 복사본 저장)하여 작동한다. 이렇게 하면 사용자가 웹 페이지를 방문할 때 해당 콘텐츠가 더 가까운 서버에 로드되므로 로드 속도가 빨라진다.
    • 이미지 크기 조정 : 이미지 크기를 줄이면 더 빨리 로드되어 웹 사이트 성능이 향상된다.
  • Crawlable webpages : 검색 엔진이 웹 페이지를 크롤링할 수 있도록 하는 것.
    • 한 가지 방법은 관련 웹 페이지가 "인덱싱"되었는지 확인하는 것이다. 이는 웹 페이지가 검색 결과에 표시되어야 함을 나타낸다. 사이트 아키텍처는 웹 사이트를 크롤링 가능하게 만드는 또 다른 부분.
    • 내부 링크(웹 사이트 내에서 웹 사이트의 웹 페이지로 연결되는 하이퍼링크 포함하는 것)를 사용하면 Google에 가장 중요한 페이지가 어느 것인지 알리는 데 도움이 된다.

Reference

Why site speed matters

Website performance and conversion rates

How website speed boosts SEO

What are core web vitals