CSS최적화2 Core Web Vitals 개선기 (CLS, LCP, INP) CLS 수치 0.31. 구글 서치 콘솔에서 경고 메일을 받았을 때 저도 처음엔 이게 뭔 숫자인지 몰랐습니다. 페이지가 로드되면서 뭔가 살짝 밀리는 느낌은 늘 있었는데, 그게 구글한테 측정되고 있었다는 걸 그날 처음 알았습니다. 직접 수정해가며 깨달은 것들을 순서대로 정리했습니다.CLS를 잡는 데 이미지 태그 하나가 이렇게 중요할 줄 몰랐습니다CLS(Cumulative Layout Shift)란 페이지가 로드되는 동안 화면의 요소들이 얼마나 많이, 얼마나 크게 움직이는지를 수치로 나타낸 지표입니다. 쉽게 말해 "로딩 중에 화면이 얼마나 덜컹거리는가"를 측정하는 값인데, 구글은 0.1 이하를 좋음 기준으로 정의하고 있습니다(출처: Google Web.dev).저는 PageSpeed Insights로 원인을 .. 2026. 4. 26. CSS Minify로 블로그 속도 올리기 (Minify, PageSpeed, 백업) CSS Minify로 블로그 속도 올리기 (Minify, PageSpeed, 백업)티스토리 스킨을 오래 손대다 보면 어느 순간 CSS 파일이 감당하기 어려운 크기로 불어나 있습니다. 저도 반년 넘게 스킨을 수정하다가 파일이 4,000줄을 넘어선 걸 뒤늦게 알았습니다. 공백, 주석, 덮어쓴 속성들이 쌓인 결과였고, 그게 블로그 속도에 직접 영향을 주고 있었습니다.PageSpeed 점수가 낮게 나온 이유구글 PageSpeed Insights로 블로그를 검사해봤더니 모바일 기준 58점이 나왔습니다. "렌더링 차단 리소스 제거"라는 경고도 함께 떴는데, 솔직히 처음엔 무슨 말인지 잘 몰랐습니다. 찾아보니 CSS 파일이 600KB를 넘어서 브라우저가 페이지를 그리기 전에 해당 파일을 전부 내려받느라 지연이 생기는.. 2026. 4. 14. 이전 1 다음
