티스토리 반응형 스킨 로딩속도 개선 실험 기록

티스토리 반응형 스킨 로딩속도 개선 실험 기록

티스토리 반응형 스킨 로딩속도 개선 실험 기록

 

코어 웹 바이탈LCPINPCLS크리티컬 CSS지연 로딩

📑 목차

• 개요: 목표와 베이스라인
• 실험 설계(변수·측정·도구)
• 개선안 6가지와 코드 스니펫
• 전후 비교 결과
• 이미지 슬롯·OG·ALT 규칙
• 운영 루틴(월간 점검)
• 배포 전 체크리스트
• 최종 정리

 

개요: 목표와 베이스라인

 

목표는 LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1입니다. 최초 측정에서는 LCP가 큰 이미지/폰트 로딩 지연으로 3초대였습니다. 아래 개선안을 순차 적용하고 각 단계별로 측정했습니다.

핵심: “첫 화면 자원 최소화”와 “레이아웃 이동 방지(CLS)”가 성능을 좌우합니다.

LCP. INP. CLS 목표값과 초기 수치를 시각화했습니다

 

 

실험 설계(변수·측정·도구)

 

• 변수: 이미지 포맷/크기, 폰트 로딩, 크리티컬 CSS, 스크립트 로딩 방식, 광고 컨테이너, 캐시.
• 측정: PageSpeed/Lighthouse(모바일), GA4 INP 분포, 실제 사용자 데이터.
• 도구: Squoosh/Sharp, Critters/手동 추출, Preload/Font-Display, defer/async, CDN 캐시.

 

개선안 6가지와 코드 스니펫

 

① 이미지 최적화(WebP/AVIF + 사이즈 고정)

<img src="hero.webp" width="1200" height="630" loading="lazy" alt="핵심 비주얼" />

 

② 폰트 로딩 전략

<link rel="preload" href="/fonts/pretendard.woff2" as="font" type="font/woff2" crossorigin>
<style>@font-face{font-family:Pretendard;src:url(/fonts/pretendard.woff2) format('woff2');font-display:swap}</style>

 

③ 크리티컬 CSS 인라인 + 나머지 지연

<style>/* above-the-fold 최소 스타일 */ body{font-family:"Noto Sans KR",sans-serif}</style>
<link rel="preload" href="/css/app.css" as="style" onload="this.rel='stylesheet'">

 

④ 스크립트 지연 로딩

<script src="/js/app.js" defer></script> <script src="/js/optional.js" async></script>

 

⑤ 광고로 인한 CLS 방지

<div class="ad-slot" style="min-height:280px"><!-- adsense tag --></div>

 

⑥ 캐시/쿠키 최소화

Cache-Control: public, max-age=31536000, immutable

팁: 이미지/광고 영역은 width/height 또는 고정 비율 컨테이너로 자리잡기를 먼저 해결하세요.

 

전후 비교 결과

 

단계	LCP	INP	CLS	비고
Baseline	3.1s	250ms	0.19	큰 히어로 이미지, 웹폰트 블로킹
이미지/폰트	2.6s	220ms	0.14	WebP/프리로드, font-display:swap
CSS/JS 지연	2.3s	190ms	0.10	크리티컬 CSS 인라인, defer/async
광고/캐시	2.1s	180ms	0.08	고정 높이 광고, 장기 캐시

 

이미지 슬롯·OG·ALT 규칙

 

• 대표 썸네일(OG): 1200×630, 대비 높은 색 + 12~16자 핵심 문구.
• 본문 이미지: WebP/AVIF, width/height 명시, loading="lazy".
• ALT: “전후 비교” 등 문맥을 1문장으로 설명(키워드 1회).

 

적용한 6가지 개선안을 한눈에 정리했습니다

 

운영 루틴(월간 점검)

 

1. W-1: 인기 글 10개 선정 → 이미지 재인코딩(WebP/AVIF)·크기 고정
2. W-2: 폰트/크리티컬 CSS 정리 → 나머지 CSS 지연 로딩
3. W-3: 스크립트 분리(defer/async) → 불필요 위젯 제거
4. W-4: 광고 컨테이너 고정 높이·캐시 정책 점검 → 지표 리포트

주의: 대규모 변경은 스테이징에서 먼저 테스트하고 동일 URL을 업데이트로 운영하세요.

 

배포 전 체크리스트

 

1. 히어로/광고/썸네일에 width/height가 지정되어 CLS를 막는가?
2. 웹폰트는 preload + font-display:swap으로 플래시를 최소화했는가?
3. 크리티컬 CSS를 인라인하고 나머지는 지연 로딩하는가?
4. 필수 아닌 스크립트는 defer/async 처리했는가?
5. 이미지 WebP/AVIF, 지연 로딩, ALT/캡션이 적용됐는가?

 

단계별 성능 추세를 그래프로 기록해 재현 가능성을 높였습니다

 

 

최종 정리

 

반응형 스킨의 속도는 첫 화면 자원 최소화와 안정적 레이아웃에서 결정됩니다. 이미지·폰트·CSS/JS·광고·캐시를 체계적으로 다루면 LCP/INP/CLS가 동시에 개선됩니다. 동일 URL을 지속 업데이트하며 월간 루틴으로 점검하면 성능은 유지·상향 안정화됩니다.