안녕하세요. 실제 운영하고 있는 사이트에서 웹 페이지 성능 개선을 한 경험에 대해 정리 해 보았습니다.
모든 B2C 사이트를 운영하는 회사는 사용자가 페이지에 체류하면서 결제까지 성공적인 연결 되는 것이 이상적인 프로세스입니다. 그러기 위해서는, 웹 성능을 높여 빠르면서 정확한 데이터를 사용자에게 전달하기 위해 노력을 해야합니다.
예전에는 웹 성능의 지표로 DOMContentLoaded, Load 시간을 기준으로 측정하였습니다.
DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않습니다. DOMContentLoaded가 낮아질 수록 초기 로딩속도가 빨라집니다.
Load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다.
최근들어, 웹 성능 지표 개념이 도입되면서 웹 페이지의 성능을 측정하는 부분이 구체적으로 변경 되었습니다. 이를, 웹 사이트 성능 매트릭스라고 부르고 있으며 웹 성능을 측정하고 개선하는 도구로 Lighthouse, PageSpeed Insights 등이 있습니다. 이번에는 대표적인 웹 성능을 측정 도구로 Lighthouse에 대해 설명 하겠습니다.
성능을 측정하고 개선하는 도구 중 Lighthouse는 Google의 오픈소스 자동화 도구로, 웹 페이지의 성능, 접근성, 프로그레시브 웹 앱, SEO 등을 감시합니다. Lighthouse는 다양한 관점에서 웹 사이트에 대한 성능 정보를 수치화하여 알려줍니다. 웹 페이지 로딩 시간, 렌더링 시간, 사용자 경험 등을 평가합니다. 특히 Core Web Vitals라는 세 가지 지표 (LCP, FID, CLS)를 기반으로 웹 성능을 측정합니다.
/wikis/3774112671238311989/files/3776921504876922268
(출처 : https://blog.imqa.io/web-performance-index/)
LCP는 페이지에서 가장 큰 콘텐츠가 화면에 표현 되기까지 걸리는 시간을 측정합니다. 일반적으로 큰 콘텐츠는 페이지에서 핵심 요소이므로 빠르게 뜨는 것이 좋습니다. 예를 들어, 페이지의 메인 이미지나 텍스트 블록이 LCP의 대상이 될 수 있습니다.