티스토리 속도 최적화 & 오류 해결 가이드

직접 겪은 티스토리 최적화 과정과 오류 해결 방법을 기반으로 한 실전 가이드입니다. PageSpeed Insights 점수 향상(45 → 53) 과정과 추가적인 개선 방향을 공유합니다.

Cloudflare CDN 적용

1. PageSpeed Insights 점수 상승 과정

✅ 초기 점수: 45 → 53으로 개선됨 ✅ 주요 작업:

1. 이미지 최적화: WebP 변환, Lazy Loading 적용
2. CSS & JavaScript 최적화: async, defer 적용하여 렌더링 차단 방지
3. . htaccess 설정: 브라우저 캐싱 및 압축 활성화
4. Cloudflare CDN 적용: 응답 속도(TTFB) 최적화

⚡ 추가 목표: 점수 80 이상 달성!

---

2. 주요 용어 해설

✅ PageSpeed Insights:

• 구글에서 제공하는 웹사이트 속도 측정 도구로, 성능 최적화를 위한 권장 사항을 제안해 줍니다.

✅ WebP 변환:

• 기존 JPG, PNG보다 용량을 줄여 웹사이트 로딩 속도를 개선하는 이미지 포맷 변환 기술입니다.

✅ Lazy Loading:

• 페이지가 로드될 때, 화면에 보이는 이미지부터 로드하고 스크롤 시점에서 필요한 이미지를 불러오는 기법입니다.

✅ async & defer:

• async: 스크립트를 비동기 로드하며 HTML 파싱을 중단할 수 있음.
• defer: HTML을 모두 파싱 한 후 스크립트를 실행하여 렌더링 차단을 방지하는 속성.

✅. htaccess 설정:

• 웹서버에서 브라우저 캐싱, 압축 설정 등을 제어하는 파일로, 성능 최적화에 중요한 역할을 합니다.

✅ TTFB (Time To First Byte):

• 웹 서버가 브라우저의 요청을 받아 첫 번째 바이트를 전달하는 데 걸리는 시간으로, 서버 응답 속도를 평가하는 중요한 지표입니다.

✅ Cloudflare CDN:

• 전 세계적으로 콘텐츠를 빠르게 제공할 수 있도록 도와주는 무료 CDN(Content Delivery Network) 서비스입니다.

---

3. 주요 오류 및 해결 방법

🔹 (1) 이미지 404 오류 해결

📌 오류 내용: GET https://myinfo1995.tistory.com/image/new-image.webp 404 (Not Found)

✅ 해결 방법:

• [1단계] 티스토리 관리자 글쓰기 > 파일 업로드에서 올바른 이미지 업로드 확인
• [2단계] 업로드된 이미지의 정확한 URL 확인 후 수정
• [3단계] 올바른 이미지 태그 적용:

<img src="https://t1.daumcdn.net/tistory_admin/upload/your-image.webp" width="800" height="400" loading="lazy" alt="최적화된 이미지">

---

🔹 (2) CSS MIME 타입 오류 해결

📌 오류 내용: Refused to apply style from 'default-skin.css' because its MIME type ('text/html') is not a supported stylesheet MIME type.

✅ 해결 방법:

• [1단계] CSS 파일이 정상적으로 업로드되었는지 확인
• [2단계] 올바른 CSS 적용 코드 수정:

<link rel="stylesheet" href="https://t1.daumcdn.net/tistory_admin/upload/your-style.css">

---

🔹 (3) JavaScript 실행 오류 해결

📌 오류 내용: Uncaught TypeError: Cannot read properties of null (reading 'click')

✅ 해결 방법:

• [1단계] <script> 태그에서 async → defer로 변경하여 실행 순서 조정
• [2단계] JavaScript 코드 추가:

document.addEventListener("DOMContentLoaded", function() {
    const adminLayer = document.querySelector("#admin-layer");
    if (adminLayer) {
        adminLayer.addEventListener("click", function() {
            console.log("Admin layer clicked!");
        });
    }
});

---

4. 티스토리에서 스크립트를 실행할 때 처리하는 방법

✅ [1단계] JavaScript 실행이 안될 때 확인할 사항

• Chrome 설정에서 JavaScript 차단 여부 확인 (설정 > 개인정보 및 보안 > 사이트 설정 > JavaScript 허용)
• <script> 태그에서 async 대신 defer 사용하여 실행 순서 조정
• 개발자 도구(F12) → Console에서 오류 확인 후 해결

✅ [2단계] JavaScript 실행 코드 추가 예제

document.addEventListener("DOMContentLoaded", function() {
    console.log("페이지가 로드되었습니다. JavaScript 실행 완료!");
});

✅ [3단계] MIME 타입 오류 방지 (서버 설정 확인 필요)

• . htaccess 설정에 JavaScript MIME 타입 추가:

<IfModule mod_mime.c>
  AddType application/javascript .js
</IfModule>

---

5. 티스토리 스킨 변경 & 디자인 최적화 과정

✅ [1단계] HTML에서 스킨 선택 드롭다운 추가

<select id="skin-selector">
    <option value="default-skin.css">기본 스킨</option>
    <option value="skin1.css">스킨 1</option>
    <option value="skin2.css">스킨 2</option>
</select>

✅ [2단계] JavaScript에서 스킨 변경 로직 추가

document.addEventListener("DOMContentLoaded", function() {
    const skinSelector = document.getElementById("skin-selector");
    const skinStylesheet = document.getElementById("skin-stylesheet");

    skinSelector.addEventListener("change", function() {
        skinStylesheet.href = this.value;
    });
});

✅ [3단계] CSS 파일을 동적으로 변경하여 스킨 적용

<link id="skin-stylesheet" rel="stylesheet" href="default-skin.css">

---

6. 결론 & 최종 점검 리스트

✔ PageSpeed Insights 점수: 현재 53 → 목표 80 이상 ✔ 이미지 최적화 (WebP → AVIF 변환 적용 필요) ✔ CSS & JS 최적화 (Minify, async & defer 적용) ✔ 브라우저 캐싱 및 압축 설정 (. htaccess 적용) ✔ Cloudflare CDN 활성화하여 TTFB(서버 응답 속도) 개선 ✔ 티스토리에서 스크립트 실행 문제 해결 및 스킨 변경 기능 추가

🚀 위 단계를 순서대로 진행하면 티스토리 블로그 성능이 더욱 개선될 것입니다.