웹사이트의 성능은 사용자 경험(UX)의 핵심 요소로 자리 잡았습니다. 빠르게 로딩되는 페이지, 부드럽게 반응하는 인터페이스, 지연 없는 상호작용은 사용자에게 긍정적인 경험을 제공합니다. 그 결과 사용자는 웹사이트에 더 오랜 시간 동안 머물거나 원하는 행동(ex. 구매, 회원 가입)을 취하게 됩니다. 웹 성능 최적화의 최종 목표는 페이지 로딩 속도만을 개선하는 것이 아닌, 사용자에게 뛰어난 웹 경험을 제공하는 것입니다. 이번 챕터에서는 웹 성능 최적화에 대해 알아보고, 이것이 사용자 경험과 어떻게 연결되어 있는지 살펴보겠습니다.
웹 성능을 평가하고 개선하려면 먼저 그 성능을 어떻게 측정하는지 이해해야 합니다. 웹 성능을 측정하는 주요 지표들을 살펴보겠습니다.
First Contentful Paint (최초 콘텐츠풀 페인트, FCP) : 사용자가 페이지에서 첫 번째 내용을 볼 수 있는 시점을 나타냅니다. 페이지 로딩 초기에 이루어지며, 이를 통해 사용자는 페이지가 로드 중임을 인지할 수 있습니다.
Largest Contentful Paint (최대 콘텐츠풀 페인트, LCP) : 페이지에서 가장 큰 콘텐츠가 로드되는 시간을 나타냅니다. 주요 이미지나 텍스트 블록과 같은 핵심 콘텐츠의 로드 시간을 측정하는 데 중요한 지표입니다.
Time to Interactive (상호 작용까지의 시간, TTI) : 페이지가 사용자와 상호작용이 가능한 상태가 될 때까지의 시간을 나타냅니다. 즉, 페이지의 모든 요소가 사용자의 인터랙션에 즉시 반응할 수 있는 상태를 가리키는 지표입니다.
First Input Delay (최초 입력 지연, FID) : 사용자가 페이지와 처음 상호작용을 시도할 때 (예: 버튼 클릭, 링크 선택 등) 그 반응까지의 지연 시간을 나타냅니다. 사용자의 첫 인터랙션 반응성에 초점을 맞춘 지표로, 사용자 경험에 큰 영향을 줍니다.
Cumulative Layout Shift (누적 레이아웃 이동, CLS) : 사용자가 예상치 않은 레이아웃 변화를 얼마나 자주 경험하는지를 나타냅니다. 페이지의 시각적 안정성을 나타내는 지표로, 낮은 CLS 값은 안정적인 사용자 경험을 의미합니다.
웹 성능 지표는 웹 페이지의 다양한 특성과 성능 측면을 반영하며, 웹사이트의 성능 문제점을 정확하게 파악하고 개선하는 데 중요한 역할을 합니다. 웹 성능 최적화는 이러한 지표들을 통해 정확한 목표를 설정하고, 지속적인 모니터링을 통해 개선해 나가야 합니다.
웹 페이지의 로딩 시간은 사용자 경험에 큰 영향을 미칩니다. 빠르게 로딩되는 웹 페이지는 사용자의 만족도를 향상시키며, 웹사이트의 전환율에도 긍정적인 영향을 줍니다. 예를 들면, 핀터레스트는 로딩 시간을 40% 줄이자 검색 엔진을 통한 트래픽과 회원 가입 전환율이 15% 상승한 반면, BBC는 로딩 시간이 1초 증가할 때마다 사용자가 10%씩 감소했습니다.
<aside> 💡 웹사이트의 전환율(Conversion Rate) 이란?
웹사이트 방문자 중 특정 행동(예: 상품 구매, 회원 가입 등)을 수행한 사용자의 비율을 나타냅니다. 전환율은 웹사이트의 효율성과 성공을 측정하는 주요 지표 중 하나입니다. 예를 들어, 온라인 상점에서 100명의 방문자 중 5명이 상품을 구매했다면, 그 상점의 전환율은 5%입니다. 높은 전환율은 웹사이트의 성공을 나타내는 중요한 지표로 간주합니다.
</aside>
웹 페이지의 로딩 시간은 다양한 리소스들의 로딩 방식과 크기에 크게 영향을 받습니다. 최적화된 리소스는 웹 페이지의 전체 성능을 크게 향상시킬 수 있습니다. 이제 주요 리소스들을 어떻게 최적화할 수 있는지 살펴보겠습니다.
이미지 최적화란 웹 페이지의 로딩 속도를 향상하고, 전반적인 웹 성능을 개선하기 위해 이미지의 크기, 포맷, 로딩 방식 등을 조절하는 과정을 의미합니다. 최적화된 이미지를 사용하면 페이지의 로딩 시간을 줄이고, 데이터 사용량을 절약할 수 있습니다.
적절한 이미지 포맷 선택