이미지 최적화2 Lazy Loading (LCP, CLS, 스켈레톤 UI) loading="lazy" 한 줄이면 웹 성능 최적화가 끝난다고 생각한 적 있으셨나요? 저도 그랬습니다. 처음 이 속성을 발견했을 때 "이게 전부야?" 싶어서 사이트 이미지 전체에 붙여버렸습니다. 결과는 오히려 점수가 떨어지는 역효과였습니다. 그리고 솔직히 그 역효과가 즉시 눈에 띄지 않았기 때문에 더 골치가 아팠습니다. 한 줄짜리 최적화처럼 보이는 것이 잘못 쓰면 독이 된다는 걸, 직접 겪고 나서야 제대로 이해했습니다.Lazy Loading과 LCP: 무조건 적용이 아닌 선택적 적용Lazy Loading이란 사용자의 뷰포트, 즉 현재 화면에 보이는 영역에 이미지가 들어오기 전까지 로드를 미루는 기술입니다. HTML img 태그에 loading="lazy" 속성 하나만 추가하면 Chrome, Firefo.. 2026. 6. 16. WebP·AVIF 이미지 최적화 (포맷 비교, 자동화, 성능 측정) 모바일 페이지 한 장을 여는 데 이미지가 평균 1.3MB 이상을 차지합니다. 처음 제 블로그의 PageSpeed Insights 점수가 40점대로 찍혔을 때, 지적 항목 1순위가 항상 "차세대 형식으로 이미지 제공"이었습니다. 그때는 그게 뭘 뜻하는지도 몰랐는데, 지금 돌아보면 그 한 줄이 이 모든 삽질의 시작이었습니다.솔직히 그 전까지는 이미지 최적화를 "귀찮은 추가 작업" 정도로 여겼습니다. 글 내용이 중요하지 이미지 파일 형식 같은 건 크게 중요하지 않다고 생각했는데, 실제로 해보니 완전히 틀린 생각이었습니다. 이미지는 대부분의 블로그에서 페이지 무게의 절반 이상을 차지합니다. 이걸 최적화하지 않으면 다른 모든 최적화 노력이 절반짜리가 됩니다.WebP와 AVIF, 무엇이 다른가두 포맷을 두고 "AV.. 2026. 6. 14. 이전 1 다음
