[TIL] LCP 최적화 도전하기..!

어느 날, 저는 저희 팀 백엔드 개발자에게 연락을 받았습니다.

 

LCP가 뭐야?

 

백엔드 개발자: "형, 우리 웹 사이트 LCP 부분에서 시간을 너무 많이 소모하는 것 같아. 웹 페이지 처음 로딩할 때, 너무 느려! 확인해줘~"

본인: "그..그래!! 고마워..!!"

 

백엔드 개발자님이 주신 https://www.webpagetest.org/ 를 바탕으로 저희 사이트를 분석해보았습니다.

확실 LCP 부분에서 빨간색 경고가 있었어요..ㅠㅠ

 

 

이를 개선하고자, LCP에 대해서 마구마구 찾아봤어요..!!

 

구글링해보자

 

 

LCP란 무엇인가?

LCP (Largest Contentful Paint)는 웹 페이지 로딩 속도와 사용자 경험을 측정하는 중요한 지표 중 하나입니다.

LCP는 페이지의 가장 큰 콘텐츠 요소가 화면에 표시되는 데 걸리는 시간을 측정합니다.

 

 

그러면 LCP가 왜 중요할까?

 

LCP가 느리면 사용자는 웹사이트가 느리다고 느끼고, 기다리지 않고 나갈 가능성이 커져요..ㅠㅠ

LCP가 빠르면 사용자는 웹사이트가 빠르게 로딩된다고 느끼고, 페이지에 머무를 확률이 높아져요!! 🤗

 

 

LCP 점수

 

 

 

저희 밋팀 사이트는 4초가 넘어가는 것이 문제였어요.. 최악이었죠.. ㅎ

 

문제의 심각성을 깨닫고 하나씩 적용해보았습니다.

 

최적화 가능한 파트들

 

저의 경우에는 1번과 3번에서 많은 시간이 소모되어 이 부분들을 중점적으로 개선했어요!

---

 

1. fetchpriority 적용

가장 시간을 많이 잡아먹는 친구가 있었습니다..!
바로 메인 페이지 배너에 있는 이미지였는데요!

 

우측에 아이콘 이미지가 범인..!

 

 

저 친구를 우선적으로 불러오기 위해서 처음에 fetchpriority='high'를 부여했습니다. 

하지만, 명확하게 개선되지 않았어요..ㅠ

 

 

2. 이미지 확장자 webp로 변환

WHY?

이미지 자체의 용량이 너무 컸어요!

 

해당 이미지 리소스를 로드하는데 너무 오랜 시간이 걸렸어요.

 

그래서 이미지의 크기 자체를 줄이고, 확장자도 webp로 변환했습니다.

(구글에 png/jpeg ... to webp 라고 검색하시면 무료로 변환 가능합니다^^)

 

 

3. srcset과 sizes 부여하기

img 태그에 해당 속성들을 부여했어요.

이 친구들을 부여하게 되면, 작은 디바이스에서는 작은 크기/용량의 이미지를 불러오게 되어요! 

그래서 휴대폰에서 불러오는 이미지는 데스크탑에서 불러오는 이미지보다 작은 용량의 이미지가 되도록 수정했습니다!!!

 

실제로 적용하기!

 

 

4. <link rel="preload"> 적용하기

 

LCP 리소스를 HTML 소스에서 검색할 수 있도록 link 태그와 rel="preload"를 추가했어요!

 

적용하기 222

 

 

 

추가 작업

* 이미지를 조금 더 최적화하기 위해서 alt 속성을 모두 부여했습니다.

* 이미지에 aspect-ratio 속성을 부여하여 width와 height의 비율을 반응형 환경에서 동일하게 유지하여 reflow를 최소화하도록 했습니다.

 

 

 

처음에는 막막했지만, 차근차근 찾아보면서
하나씩 적용하니까 정말 개선이 되었어요!! 

 

WOW..

 

 

다음 시간에 찾아뵐게요~~ 모두들 홧팅🔥🔥

 

 

Yeah~

 

---

참고자료

 

1. Web dev - https://web.dev/articles/lcp?hl=ko

Largest Contentful Paint (LCP)  |  Articles  |  web.dev

 

2. Web dev, 성능 개선 방법 - https://web.dev/articles/optimize-lcp?hl=ko

최대 콘텐츠 렌더링 시간 최적화  |  Articles  |  web.dev

 

3. 이미지 최적화 - https://velog.io/@sehyunny/the-definitive-guide-to-image-optimization

(번역) 이미지 최적화에 대한 명확한 가이드