티스토리 블로그 속도 개선 팁! 이것만 해도 CLS,TTI 점수 오른다구요?

📁 이 글은 블로그 성장기록 카테고리에 저장되어 있어요 :)

안녕하세요 💛 감성블로그 꾸미기에 진심인 찌니언니입니다 :)
오늘은 저처럼 티스토리 스킨 커스터마이징 하면서 속도 점수에 깜짝 놀란 분들께 드리는 꿀팁을 정리해봤어요!
예쁘게 꾸몄더니 점수가 곤두박질친다? 괜찮아요, 해결방법이 있어요😉

✔️ CLS 점수란? 왜 중요한가요?

CLS는 Cumulative Layout Shift의 약자로, 페이지 로딩 중 화면이 얼마나 “튀는지”를 나타내는 지표예요.
사진, 글씨, 광고 요소가 위치를 바꾸면 점수가 낮아지고, 사용자 경험이 나빠지죠.
👉 구글 검색 랭킹에도 영향을 줄 수 있어요!

• 이미지가 로딩되며 갑자기 위치가 밀리는 경우
• 폰트가 늦게 적용돼서 글이 깜빡이며 바뀌는 경우

✔️ PageSpeed 점수 측정 툴

💡 https://pagespeed.web.dev/ 이곳에서 내 블로그 URL을 입력하면
속도 점수와 CLS, TTI 등의 수치를 확인할 수 있어요!

✔️ 속도 낮아지는 흔한 원인들

• 이미지 크기 지정 안 됨 (width/height 없음)
• 외부폰트 불러오기 지연
• 불필요한 스크립트나 CSS 과다
• lazy 속성 없는 이미지

✔️ 반응형 스킨에서 속도 개선하는 법

찌피디가 뽑은 핵심 체크리스트 💡

• <img> 태그에 width / height 값 명시
• loading="lazy" 속성 추가
• 외부폰트는 swap 방식 적용 or 최소화
• CSS/JS defer 처리 or 불필요한 코드 제거
• 배경으로 쓰는 큰 이미지 압축하기 (tinypng 추천)

✔️ 추가 팁! 감성 유지하면서 속도 잡는 꿀포인트

• 썸네일 이미지 1:1 비율 통일해서 CLS 줄이기
• 메인페이지에 이미지 너무 많이 넣지 않기 (3개 이내 추천!)
• GIF 대신 짧은 mp4로 전환해서 용량 줄이기
• 사이드바 꾸미기는 PC에만 보이게 설정

예쁘게 보이고 싶어서 넣은 기능이 실제로 방문자에게는 불편함이 될 수 있어요.
그래서 꾸미기 전에 꼭 PageSpeed에서 미리 확인해보는 걸 추천드려요!

✔️ 마무리 인사

한 번에 완벽할 필요는 없어요 :)
중요한 건, 꾸준히 점검하고 조절하면서 감성도 성능도 함께 잡는 거죠!
앞으로도 찌니언니가 직접 실험하면서 효과 좋았던 팁들 공유해드릴게요 💛
궁금한 게 있다면 언제든 댓글로 소통해요!

#티스토리속도개선 #티스토리스킨꾸미기 #CLS점수개선 #PageSpeed점수 #반응형스킨속도 #블로그성장기록 #찌니언니블로그 #감성블로그 #티스토리꿀팁