오늘은 웹 페이지의 로딩 성능을 평가하는 중요한 지표 중 하나인 LCP를 PerformanceObserver를 사용해 간단한 LCP 측정기를 만들어 보겠습니다.
PerformanceObserver란 📖
PerformanceObserver는 웹 페이지의 성능 데이터를 감지하고 분석하는 API입니다.
브라우저가 기록하는 다양한 성능 데이터를 실시간으로 수집할 수 있습니다.
구문
new PerformanceObserver(callback)
관찰된 성능 이벤트가 기록될 때 호출되는 콜백입니다.
entryTypes
PerformanceObserver를 사용할 때, observe() 메서드를 통해 감지할 항목을 설정할 수 있습니다.
| Entry Type | 설명 |
| paint | first-paint, first-contentful-paint를 감지합니다.(FCP) |
| largest-contentful-paint | 가장 큰 콘텐츠 요소가 화면에 렌더링된 시간을 감지합니다.(LCP) |
| layout-shift | 페이지의 CLS를 측정합니다. |
| resource | 페이지에서 로드된 리소스(JS, CSS, 이미지 등) 정보를 제공합니다. |
| navigation | 페이지의 FCP, LCP, CLS 등의 데이터를 포함하는 종합적인 성능을 측정합니다. |
✨ 이번 글에서는 largest-contentful-paint를 활용해 LCP 측정기를 만드는 방법에 대해 알아보려고 합니다!
LCP란 📖
LCP란 가장 큰 콘텐츠 요소가 화면에 렌더링 된 시간을 측정하는 성능 지표입니다. LCP가 늦을수록 사용자는 웹사이트가 느리다고 느낄 수 있습니다.
LCP의 기준 (Google Web Vials)
사용자에게 우수한 환경을 제공하기 위해 최대 콘텐츠 렌더링 시간이 2.5초 이하가 좋다고 합니다.
LCP 측정기 예제 📖
아래 코드는 LCP를 측정하는 코드입니다.
HTML 코드 (lcp.html)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LCP 측정기</title>
</head>
<body>
<h1>간단한 LCP 측정기</h1>
<img src="https://placehold.co/300x150" alt="small" />
<img src="https://placehold.co/450x300" alt="medium" />
<img src="https://placehold.co/600x450" alt="large" />
<script src="./performanceObserver.js"></script>
</body>
</html>
JS 코드 (performanceObserver.js)
window.onload = () => {
// LCP 측정
const observer = new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
if (entry.entryType === "largest-contentful-paint") {
console.log("LCP time:", entry.startTime, "ms");
console.log("LCP element:", entry.element);
observer.disconnect(); // 측정 후 옵저버 해제
}
}
});
observer.observe({
entryTypes: ["largest-contentful-paint"],
});
};
getEntires()
performanceObserver에서 감지한 성능 데이터 목록을 반환하는 메서드이고, LCP를 측정하는 경우 요소(이미지 or 텍스트 블록)와 렌더링 시간을 확인할 수 있습니다.
for (const entry of entryList.getEntries()) { ... }
observe()
performanceObserver가 특정 성능 이벤트를 감지하도록 설정하는 메서드입니다.
observer.observe({
entryTypes: ["largest-contentful-paint"],
});
해당 코드에서는 LCP를 측정하기 위해 entryTypes를 largest-contentful-paint로 설정해 가장 큰 콘텐츠 요소의 렌더링 시간을 측정했습니다.
이후, entryType이 largest-contentful-paint이라면 startTime과 element를 통해 시간과 요소를 확인할 수 있습니다.
if (entry.entryType === "largest-contentful-paint") {
console.log("LCP time:", entry.startTime, "ms");
console.log("LCP element:", entry.element);
observer.disconnect(); // 측정 후 옵저버 해제
}
실행 화면
어려웠던 점 ❓
LCP 측정 타이밍
LCP를 측정기를 만든다고 했을 때 가장 큰 콘텐츠 요소를 어떻게 측정해야 될지부터 막혀서 측정 방법을 고민하는 부분에서 어려움이 있었습니다. (구글링을 통해 performance 측정 방식에 대해 알게 되었음,,)
그리고 PerformanceObserver의 동작 방식과 LCP 항목만을 따로 분리해 분석하는 방법을 mdn 문서를 통해 파악하는 데 시간이 걸리는 문제가 있었습니다.
깨달은 점 ❕
실용적 경험
직접 LCP를 구현하면서 PerformanceObserver를 사용해 성능을 측정한 경험은 최적화를 단순히 이론적이지 않고 실제 성능에 어떻게 영향을 미치는지를 이해하는 데 큰 도움이 되었습니다.
최적화의 중요성
웹 성능 최적화는 사용자 경험을 개선할 수 있는 중요한 요소이고, Lighthouse와 같은 성능 지표를 정확히 이해하고 사용한다면 사용자에게 더 빠르고 원활한 웹 경험을 제공할 수 있다는 걸 알게 되었습니다.
회고 🧐
Lighthouse와 같은 툴을 사용해 성능 측정 경험만 있었는데, 이번에 직접 구현해보면서 단순히 툴을 사용하는 것보다 그 원리를 이해하고 활용하는 것이 훨씬 더 효과적임을 깨달았습니다.
많이 부족하기 때문에 조언은 언제나 환영입니다 :)
출처 🏷️
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
'공부 > javascript' 카테고리의 다른 글
| 폴리필이란? (1) | 2024.12.12 |
|---|---|
| javascript 심화 7 (클로저) (0) | 2024.08.07 |
| javascript 심화 6 (이벤트 루프) (0) | 2024.08.02 |
| javascript 심화 5 (Promise, async, await) (0) | 2024.07.29 |
| javascript 심화 4 (콜백함수) (0) | 2024.07.29 |
| javascript 심화 3 (this, 화살표함수, call, apply, bind) (0) | 2024.07.26 |
| javascript 심화 2 (호이스팅, var let const 차이점, TDZ) (5) | 2024.07.24 |
| javascript 심화 1 (실행 컨텍스트) (0) | 2024.07.24 |
