티스토리 페이지 속도 개선 방법 (Lighthouse 성능 점수 올리기)

티스토리 페이지 속도 개선 방법 (Lighthouse 성능 점수 올리기)

구글 Lighthouse에서 티스토리 블로그의 점수를 확인할 수 있습니다.
구글 Lighthouse 점수가 낮으면 검색 엔진 최적화에도 영향을 줄 수 있습니다.
특히 모바일 환경에서는 페이지 로딩 속도가 더욱 중요합니다.
원인 대부분은 이미지 용량, 불필요한 스크립트, 렌더링 차단 리소스 세 가지입니다.
Lighthouse 점수를 올리면 검색 노출을 개선할 수 있습니다.

티스토리 페이지 속도 개선 방법 (Lighthouse 성능 점수 올리기)

 

---

Lighthouse

Lighthouse는 구글이 제공하는 웹사이트 성능, 접근성, SEO 분석 도구입니다.
성능, 접근성, 권장사항, 검색엔진 최적화 등 4가지 항목을 100점 만점으로 평가합니다.
점수는 0~100점으로 표시됩니다.

 

Lighthouse 점수
90점 이상	우수
50 ~ 89점	개선 필요
49점 이하	나쁨

 

티스토리 페이지 속도 개선 방법 (Lighthouse 성능 점수 올리기)

모바일 점수가 데스크톱보다 낮게 나오는 것은 일반적입니다.
모바일과 데스크톱 점수를 모두 확인하고 데스크톱 기준으로 먼저 개선합니다.

 

Lighthouse 점수
성능(Performance)	페이지 로딩 속도, LCP, CLS, TBT 측정	이미지 용량 감축, CSS/JS 지연 로딩
접근성(Accessibility)	이미지 alt 태그, 명암비, HTML 구조 표준	이미지 대체 텍스트 삽입, 글자 명암비 확보
권장사항(Best Practices)	보안 연결(HTTPS), 콘솔 에러 유무	HTTPS 상시 적용, 미사용 스크립트 제거
검색엔진 최적화(SEO)	메타 태그, robots.txt, 모바일 가독성	메타 디스크립션 설정, H태그 구조화

https://developer.chrome.com/blog/lighthouse-load-performance?hl=ko

Lighthouse를 사용하여 페이지 로드 성능 개선  |  Blog  |  Chrome for Developers

 

---

Lighthouse 실행

크롬에서 Ctrl + Shift + N을 눌러 시크릿 창에서 진행합니다.
애드센스 자동 광고가 적용된 티스토리는 점수에 영향을 줍니다.

 

티스토리 페이지 속도 개선 방법 (Lighthouse 성능 점수 올리기)

 

1. PageSpeed Insights 접속합니다.
https://pagespeed.web.dev

PageSpeed Insights

 

티스토리 페이지 속도 개선 방법 PageSpeed Insights

 

2. 블로그 URL 입력합니다.

 

티스토리 페이지 속도 개선 방법 PageSpeed Insights

 

티스토리 페이지 속도 개선 방법 PageSpeed Insights

 

3. 분석 버튼 클릭합니다.

 

티스토리 페이지 속도 개선 방법 PageSpeed Insights

 

4. 분석이 완료되면 항목별 점수와 개선 권장 사항이 표시됩니다.

 

티스토리 페이지 속도 개선 방법 PageSpeed Insights

 

---

Lighthouse 점수에 영향을 주는 항목

항목	설명	가중치
LCP (최대 콘텐츠 렌더링 시간)	가장 큰 콘텐츠 요소가 표시되는 시간	25%
TBT (총 차단 시간)	메인 스레드가 차단되는 총 시간	30%
CLS (누적 레이아웃 이동)	페이지 로드 중 레이아웃이 얼마나 움직이는지	15%
FCP (첫 콘텐츠 렌더링 시간)	첫 번째 콘텐츠가 표시되는 시간	10%
SI (속도 지수)	콘텐츠가 표시되는 평균 속도	10%
TTI (상호작용 가능 시간)	페이지가 완전히 반응하는 데 걸리는 시간	10%

 

티스토리 페이지 속도 개선 방법 (Lighthouse 성능 점수 올리기)

 

우선순위	항목	난이도	기대 효과
1순위	이미지 WebP 변환 및 크기 축소	낮음	매우 높음
2순위	불필요한 위젯, 외부 스크립트 제거	낮음	높음
3순위	Google Fonts 굵기 수 최소화	낮음	보통
4순위	이미지 width·height 명시	낮음	보통

 

 

티스토리 페이지 속도 개선 방법 (Lighthouse 성능 점수 올리기)

---

1. 이미지 최적화

이미지는 웹 페이지 용량의 절반 이상을 차지하는 경우가 많습니다.
티스토리 성능 점수를 올리는 가장 효과적인 방법입니다.

 

이미지 최적화

업로드 전 이미지 크기를 1200px 이하로 줄입니다.

PNG 나 JPG 대신 WebP 형식으로 변환합니다.

lazy loading 속성을 사용합니다.

WebP 포맷으로 변환하기
최신 브라우저는 WebP, AVIF 같은 차세대 이미지 포맷을 지원하므로
JPG/PNG보다 훨씬 작은 용량으로 같은 화질을 제공할 수 있습니다. 
약 10분의 1 수준으로 용량이 줄어듭니다.

반응형

[블로그] - 블로그 이미지 WebP 변환 사이트

블로그 이미지 WebP 변환 사이트

 

티스토리 페이지 속도 개선 방법 (Lighthouse 성능 점수 올리기)

 

이미지 크기 최적화
본문 이미지는 가로 800 ~ 1,200px이면 대부분의 웹사이트에서 충분합니다.
스마트폰으로 촬영한 사진은 가로 3,000~4,000px에 용량이 3~5MB입니다.
그대로 업로드하면 페이지 속도가 급격히 저하됩니다. 
블로그 본문 이미지는 업로드 전에 반드시 크기를 줄입니다.

이미지 너비·높이 명시
img 태그에 width와 height를 명시하는 것이 좋습니다.
레이아웃 안정성 확보, CLS 감소, 사용자 경험 향상, SEO 점수 상승 등 다양한 이점을 얻을 수 있습니다. 
티스토리 에디터에서 이미지를 삽입할 때 크기가 자동으로 지정됩니다.
HTML 편집 모드에서 직접 확인하고 width·height 속성이 누락된 경우 추가합니다.

티스토리 페이지 속도 개선 방법 (Lighthouse 성능 점수 올리기)

 

---

2. 불필요한 위젯, 플러그인 제거

티스토리 사이드바나 본문에 삽입된 외부 스크립트는 페이지 로딩 속도를 크게 저하시킵니다.
특히 카운터, 날씨 위젯, 실시간 방문자 위젯 등이 대표적입니다.

 

불필요한 위젯, 플러그인 제거

불필요한 HTML 태그를 정리합니다.

CSS 파일을 최소화합니다.

불필요한 스크립트를 제거합니다.

 

 

티스토리 페이지 속도 개선 방법 (Lighthouse 성능 점수 올리기)

 

---

3. 스킨 교체

사용 중인 스킨이 무겁다면 Lighthouse 점수에 직접 영향을 줍니다.
외부 폰트, 애니메이션, 과도한 CSS를 포함하는 경우입니다.
- 티스토리 스킨을 가벼운 것으로 변경합니다.

외부 폰트 최소화
Google Fonts를 여러 종류 불러오면 각각 네트워크 요청이 발생합니다.
- 폰트 종류를 1~2가지로 줄입니다.
- 불필요한 폰트 굵기(weight)를 제외하고 필요한 것만 로드합니다.

예를 들어 Noto Sans KR을 불러올 때 400, 700 두 가지만 지정합니다.

html

<!-- 불필요한 굵기 모두 포함 (느림) -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

<!-- 필요한 굵기만 포함 (빠름) -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

CSS·JS 파일 점검
스킨 편집 화면에서 사용하지 않는 CSS나 JS 코드가 대량으로 포함되어 있다면 정리합니다.

 

티스토리 페이지 속도 개선 방법 (Lighthouse 성능 점수 올리기)

 

---

4. 티스토리에서 적용이 어려운 항목

Lighthouse 보고서에는 권장 사항이 표시되지만 티스토리 특성상 직접 적용이 어려운 항목도 있습니다.
이 항목들은 보고서에 표시되더라도 티스토리에서는 해결하기 어려우므로 넘어가도 됩니다.

 

티스토리에서 적용이 어려운 항목
서버 응답 시간 개선	티스토리 서버 자체 문제로 사용자가 직접 제어 불가합니다.
렌더링 차단 리소스	티스토리 기본 스크립트는 수정 불가합니다.
캐시 정책 설정	티스토리 서버 캐시는 사용자 제어 불가합니다.

 

---

티스토리 블로그

[블로그] - 티스토리에서 블로그 추가하는 방법

티스토리에서 블로그 추가하는 방법

 

 

[블로그] - 티스토리 관리자 초기 설정 방법

티스토리 관리자 초기 설정 방법

 

 

[블로그] - 티스토리 구글 서치 콘솔 설정 방법

티스토리 구글 서치 콘솔 설정 방법

 

 

[블로그] - 티스토리 구글 애널리틱스 설정 방법

티스토리 구글 애널리틱스 설정 방법

 

 

[블로그] - 티스토리 네이버 애널리틱스 설정 방법

티스토리 네이버 애널리틱스 설정 방법

 

 

[블로그] - 티스토리 네이버 서치어드바이저 설정 방법

티스토리 네이버 서치어드바이저 설정 방법

 

 

[블로그] - 티스토리 빙 웹 마스터 도구 설정 방법

티스토리 빙 웹 마스터 도구 설정 방법

 

 

[블로그] - 티스토리 IP 추적 statcounter 설정 사용

티스토리 IP 추적 statcounter 설정 사용

 

 

[블로그] - 티스토리 방문자 행동 분석 Clarity 설치 설정 방법

티스토리 방문자 행동 분석 Clarity 설치 설정 방법

 

 

[블로그] - 티스토리 가독성 높이는 편집 방법 3가지 (글꼴·줄간격·여백)

티스토리 가독성 높이는 편집 방법 3가지 (글꼴·줄간격·여백)

 

 

[블로그] - 티스토리 구글 서치콘솔 색인 오류 총정리 (크롤링·페이지 제외)

티스토리 구글 서치콘솔 색인 오류 총정리 (크롤링·페이지 제외)

 

 

[블로그] - 티스토리 페이지 속도 개선 방법 (Lighthouse 성능 점수 올리기)

티스토리 페이지 속도 개선 방법 (Lighthouse 성능 점수 올리기)

 

 

[블로그] - 티스토리 구글 애드센스 수익 지급 절차 (PIN 번호·세금 정보·지급 계좌 등록)

티스토리 구글 애드센스 수익 지급 절차 (PIN 번호·세금 정보·지급 계좌 등록)

 

---

요약

1. https://pagespeed.web.dev
2. 성능 점수 향상 > 이미지 WebP 변환
3. 본문 이미지 > 가로 800~1,200px, 100KB 이하 권장
4. 사이드바 위젯, 외부 SNS 버튼, 불필요한 Google Fonts 제거

티스토리 페이지 속도 개선 방법 (Lighthouse 성능 점수 올리기)