상세 컨텐츠

본문 제목

웹사이트 로딩 속도 3초 → 1초 만들기

카테고리 없음

by Flo_web 2025. 10. 14. 19:13

본문

웹사이트 로딩 속도 3초 → 1초 만들기 (SEO 점수 상승)

 

3초 안에 로딩 안 되면 사용자의 53%가 이탈합니다. 웹사이트 속도 최적화는 SEO뿐 아니라 애드센스 수익에도 직결됩니다. 느린 사이트는 돈을 버리는 것과 같습니다!

로딩 속도가 중요한 이유

구글 순위 요소

2021년부터 Core Web Vitals(페이지 경험 지표)가 공식 순위 요소로 추가되었습니다. 느린 사이트는 아무리 좋은 콘텐츠라도 검색 순위에서 밀려납니다.

비즈니스 임팩트

  • 로딩 1초 지연 = 전환율 7% 감소
  • 페이지 속도 50% 개선 = 매출 12% 증가
  • 모바일 사용자의 70%는 느린 사이트를 다시 방문하지 않음

애드센스 수익과의 관계

빠른 사이트 = 더 많은 페이지뷰 = 더 많은 광고 노출 = 높은 수익

  • 이탈률 감소 → 체류 시간 증가 → 광고 노출 증가
  • 구글 검색 상위 노출 → 자연 유입 증가 → 수익 증가
  • 사용자 경험 개선 → 재방문율 증가 → 장기 수익

측정 도구 (PageSpeed Insights)

속도 측정 방법

Step 1: pagespeed.web.dev 접속
Step 2: URL 입력 후 분석
Step 3: 점수 확인

  • 90~100: 빠름 (녹색) ✅
  • 50~89: 보통 (주황) ⚠️
  • 0~49: 느림 (빨강) ❌

핵심 지표 3가지

LCP (Largest Contentful Paint)
가장 큰 콘텐츠 로딩 시간 → 2.5초 이내 목표

FID (First Input Delay)
첫 상호작용 반응 시간 → 100ms 이내

CLS (Cumulative Layout Shift)
시각적 안정성 (레이아웃 밀림 현상) → 0.1 이하

중요: 모바일 점수가 더 중요합니다. 모바일 퍼스트 인덱싱 시대니까요!

이미지 최적화 (가장 효과적)

이미지가 전체 페이지 용량의 50~70%를 차지합니다. 이것만 해결해도 속도 2배 개선!

포맷 선택

WebP (추천!): 가장 가볍고 화질 좋음 (PNG보다 26% 작음)
JPEG: 사진용, 압축률 높음
PNG: 투명 배경 필요 시
SVG: 로고, 아이콘 (용량 극소)

압축 도구

TinyPNG.com

  • 완전 무료
  • 80% 압축 가능
  • 화질 손실 거의 없음
  • 드래그 앤 드롭으로 간편

Squoosh.app

  • 구글 제공
  • 세밀한 조정 가능
  • WebP 변환 지원

ImageOptim (Mac)

  • 일괄 처리 가능
  • 메타데이터 자동 제거

적절한 크기

  • 썸네일: 500px 이하
  • 본문 이미지: 1200px 이하
  • 히어로 이미지: 1920px 이하
  • 모바일용 이미지: 800px 이하

팁: 큰 이미지 올린 후 CSS로 축소하지 마세요! 원본 크기대로 로딩됩니다.

Lazy Loading (지연 로딩)

화면에 보이는 이미지만 먼저 로딩하는 기술입니다.

 
 
html
<img src="image.jpg" loading="lazy" alt="설명">

효과: 초기 로딩 속도 30~50% 개선

티스토리 속도 최적화 팁

스킨 최적화

가벼운 스킨 선택

  • 불필요한 기능 많은 무거운 스킨 피하기
  • 심플한 디자인이 빠름
  • 반응형 스킨 필수

위젯 최소화

불필요한 위젯 제거

  • 인기글, 최근댓글 위젯은 DB 조회로 느림
  • 태그 클라우드, 달력 위젯도 무거움
  • 꼭 필요한 것만 최소한으로

외부 스크립트 줄이기

카운터, 통계 도구 최소화

  • 여러 개 설치하면 로딩 지연
  • 구글 애널리틱스만으로도 충분
  • 불필요한 소셜 공유 버튼 제거

광고 배치 최적화

애드센스 자동 광고 주의

  • 너무 많으면 속도 저하
  • 수동 배치로 2~3개만
  • Lazy Load 옵션 활성화

캐싱 설정

브라우저 캐싱이란?

한 번 로드한 파일을 브라우저에 저장해서 재방문 시 빠르게 로딩하는 기술입니다.

티스토리는 자동 캐싱
티스토리는 기본적으로 캐싱이 적용되어 있으니 별도 작업 불필요!

캐싱 효과

  • 첫 방문: 3초
  • 재방문: 1초 (66% 개선)

CDN 활용

CDN이란?

**CDN(Content Delivery Network)**은 전 세계 서버에 콘텐츠를 분산 저장해 가까운 서버에서 전송하는 기술입니다.

효과: 해외 사용자 접속 시 속도 3~5배 개선

무료 CDN

Cloudflare

  • 가장 대중적
  • 무료 플랜으로 충분
  • DNS 변경만으로 간단 적용

적용 방법:

  1. Cloudflare 가입
  2. 도메인 연결
  3. DNS 설정 변경 (자동 안내)
  4. 캐싱 옵션 활성화

티스토리 CDN
티스토리는 자체 CDN을 사용하므로 이미지는 빠르게 제공됩니다!

코드 최적화

HTML/CSS/JS 압축 (Minify)

불필요한 공백, 줄바꿈 제거로 파일 크기 축소

온라인 도구:

  • cssminifier.com
  • javascript-minifier.com

티스토리 적용: 스킨 편집 → CSS/HTML 압축 → 적용

불필요한 플러그인 제거

jQuery 같은 라이브러리가 중복으로 로드되는 경우 많습니다.

확인 방법: F12 개발자 도구 → Network 탭 → 중복 파일 체크

폰트 최적화

웹폰트 사용 최소화

한글 웹폰트는 용량이 큽니다 (2~3MB).

최적화 방법:

  • 시스템 폰트 활용 (나눔고딕, 맑은고딕)
  • 서브셋 폰트 사용 (필요한 글자만)
  • Google Fonts → 한글 지원 + 경량화

폰트 로딩 전략

 
 
html
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

효과: 폰트 깜빡임(FOIT) 현상 방지

동영상 최적화

자동재생 금지

동영상 자동재생은 데이터 대량 소모 + 로딩 느림

티스토리 팁:

  • YouTube 임베드 활용 (자체 호스팅보다 빠름)
  • 썸네일 이미지로 대체 + 클릭 시 재생
  • 모바일에서는 자동재생 OFF

동영상 압축

HandBrake 같은 도구로 용량 줄이기

실시간 속도 체크 방법

Chrome 개발자 도구

F12 → Lighthouse 탭

  • 'Generate report' 클릭
  • 성능, 접근성, SEO 등 종합 분석
  • 개선 사항 구체적으로 제시

GTmetrix

gtmetrix.com

  • PageSpeed + YSlow 점수
  • 상세한 분석 리포트
  • 무료 계정으로 충분

속도 최적화 체크리스트

□ 모든 이미지 WebP 변환 및 압축
□ 이미지에 loading="lazy" 속성 추가
□ 불필요한 위젯 제거
□ 외부 스크립트 최소화
□ 가벼운 스킨 사용
□ 애드센스 광고 23개로 제한
□ 폰트 개수 12개로 제한
□ PageSpeed Insights 모바일 80점 이상
□ 동영상 자동재생 OFF
□ Cloudflare CDN 적용 (선택)

티스토리 블로거 필수 팁

이미지 업로드 전 필수 작업

  1. TinyPNG로 압축
  2. 적절한 크기로 리사이즈
  3. 파일명에 키워드 포함 (SEO 보너스)
  4. alt 텍스트 꼭 작성

글 작성 시 주의사항

  • 첫 이미지는 Lazy Loading 제외 (LCP 개선)
  • GIF 사용 자제 (용량 큼)
  • 여러 개 이미지는 갤러리로 묶기
  • 본문에 동영상 너무 많이 넣지 않기

정기 점검

월 1회 속도 체크

  • PageSpeed Insights 재측정
  • 새로 추가된 플러그인 확인
  • 이미지 최적화 누락 확인

속도 최적화 전후 비교

최적화 전:

  • 로딩 시간: 5.2초
  • PageSpeed 점수: 42점 (빨강)
  • 이탈률: 68%
  • 일 방문자: 200명

최적화 후:

  • 로딩 시간: 1.8초 (65% 개선)
  • PageSpeed 점수: 89점 (초록)
  • 이탈률: 38% (30%p 감소)
  • 일 방문자: 420명 (2배 증가)
  • 애드센스 수익: 2.3배 증가

주의사항

과도한 최적화는 독

  • 화질 너무 낮추면 사용자 경험 나쁨
  • 광고 아예 없으면 수익 0원
  • 균형이 중요!

모바일 우선

  • 데스크톱보다 모바일 점수가 중요
  • 모바일에서 빠르면 데스크톱은 자동으로 빠름

추가 리소스

무료 도구 모음:

  • TinyPNG: 이미지 압축
  • PageSpeed Insights: 속도 측정
  • GTmetrix: 상세 분석
  • Squoosh: 이미지 변환
  • Cloudflare: 무료 CDN

실전 팁: 속도 최적화는 '한 번에 완벽'보다 '지속적 개선'이 중요합니다. 신규 글 발행 시마다 이미지 압축을 습관화하세요. 한 달에 한 번씩 PageSpeed 점수를 체크하고, 점수가 떨어졌다면 최근 변경 사항을 되돌려보세요!

티스토리툴바