블로그 운영 노하우

티스토리 AMP 적용 가능성과 리스크 분석

블로그 꿀팁 2025. 10. 18. 13:30

티스토리 AMP 적용 가능성과 리스크 분석

AMP티스토리 성능코어 웹 바이탈애드센스GA4SEO

개요: AMP의 현재 위치

AMP(Accelerated Mobile Pages)는 모바일에서 빠른 로딩을 목표로 하는 HTML 하위 집합입니다. 한때 뉴스 상단 노출의 요구 조건으로 주목받았지만, 지금은 필수는 아니며 코어 웹 바이탈(CWV)을 충족하는 비-AMP 페이지도 충분히 경쟁합니다. 그럼에도 AMP는 제한된 컴포넌트로 안정적인 속도를 확보할 수 있어 특정 상황에서는 여전히 선택지입니다.

핵심: “AMP 자체”보다 속도·안정성·광고/분석 호환성이 의사결정의 기준입니다.

장점과 리스크 요약

구분	내용
👍 장점	초기 렌더링 속도와 CLS/INP 개선에 유리, AMP 컴포넌트로 일관된 UI, 일부 캐시 이점
⚠️ 리스크	JS·CSS 제약, 커스텀 스크립트 어려움, 기능 확장과 유지보수 비용 증가, 중복 URL 관리 필요
🧭 적합 사례	콘텐츠가 정적이고 광고 배치가 단순한 블로그, 실험용 랜딩
⛔ 비적합 사례	동적 위젯/댓글/복잡한 인터랙션이 핵심인 스킨

팁: AMP를 도입하더라도 모바일 비-AMP를 병행 운영해 A/B로 지표를 비교하세요.

티스토리에서의 적용 방식(가상)

티스토리는 기본적으로 AMP 전환을 제공하지 않습니다. 실무에서는 커스텀 스킨/프록시를 이용해 AMP 버전을 생성하고 link로 상호 참조합니다.

<!-- 비-AMP 페이지의 <head> -->
<link rel="amphtml" href="https://도메인/글-주소/amp" />

<!-- AMP 페이지의 <head> -->
<link rel="canonical" href="https://도메인/글-주소" />
<style amp-custom>
/* 50KB 제한 내에서 타이포/레이아웃 최소 스타일 */
body{font-family:"Noto Sans KR",sans-serif;line-height:1.78}
.container{padding:16px}
figure{margin:16px 0}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>

이미지/동영상 교체

<amp-img src="이미지.webp" width="1200" height="675" layout="responsive" alt="설명"></amp-img>
<amp-youtube data-videoid="영상ID" layout="responsive" width="16" height="9"></amp-youtube>

주의: 임베드 스크립트(예: 커스텀 JS, 일부 위젯)는 AMP에서 동작하지 않을 수 있으며 대체 컴포넌트가 필요합니다.

광고·분석(Adsense/GA4) 처리

애드센스

<amp-ad width="300" height="250"
  type="adsense"
  data-ad-client="ca-pub-XXXX"
  data-ad-slot="YYYY"
  layout="responsive">
</amp-ad>

광고는 1화면 1개 원칙을 유지하고, 본문 첫 600~800px 내 과도한 배치는 피하세요.

GA4

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">{
    "vars": {"gtag_id":"G-XXXX","config":{"G-XXXX":{"groups":"default"}}},
    "triggers": {
      "scroll_90": {"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"request":"event","vars":{"event_name":"scroll_90"}}
    }
  }</script>
</amp-analytics>

팁: AMP/비-AMP 모두 동일 이벤트 이름을 사용해 비교 분석이 쉽도록 스키마를 고정하세요.

이미지·OG·ALT 규칙

대표 썸네일(OG): 1200×630, 대비 높은 색 + 12~16자 핵심 문구.
본문 이미지: WebP, width/height 지정, AMP에서는 <amp-img> 사용.
ALT: 이미지 없이도 맥락이 전달되는 1문장(키워드 1회, 과밀 금지).

상호 참조와 컴포넌트 차이(amp - img, amp - ad등)를 한눈에 비교

적용 루틴(의사결정 가이드)

목표 정의: CWV 목표 수치·광고 배치·분석 요구 명확화
프로토타입: 인기 글 3개로 AMP 버전 제작, 링크 상호 참조
테스트: 로딩 속도/광고수익/이탈률/완독률 비교(2~4주)
결정: AMP 유지 또는 비-AMP 최적화(이미지·캐시·코드스플릿)

대안: AMP 대신 이미지 최적화(WebP/AVIF), 지연 로딩, 크리티컬 CSS, 스크립트 지연으로도 충분한 속도 개선이 가능합니다.

지표: CWV·CTR·view_second_post

CWV: LCP ≤ 2.5s, CLS ≤ 0.1, INP ≤ 200ms 목표.
CTR: 목록/추천 피드 클릭률(썸네일/제목 A/B).
깊이: view_second_post 비율로 내부 링크 품질 점검.

지표	AMP 기대 효과	리스크/보완
LCP	초기 렌더링 유리	이미지 크기 명시, 캐시·CDN 병행
INP	제한된 JS로 지연 적음	비-AMP는 스크립트 최소화·지연 로딩
광고수익	레이아웃 안정으로 CTR 도움	형식/슬롯 제약, 배치 테스트 필수

적용 전 체크리스트

핵심 페이지 3개로 A/B 실험 계획이 수립됐는가?
amphtml/canonical 링크가 상호 참조로 정확히 연결됐는가?
amp-img/amp-ad/amp-analytics로 모두 대체 가능한가?
비-AMP 성능 개선 플랜(이미지·CSS·JS 최적화)을 병행 준비했는가?

최종 정리

티스토리에서 AMP는 필수는 아니지만 특정 조건에서 성능·안정성 이점이 있습니다. 반대로 스크립트 제약과 운영 복잡도가 수반되므로, 소수 페이지로 실험→지표 비교→확대/철회의 순서로 접근하세요. 중요한 것은 AMP 자체가 아니라, 빠른 로딩과 안정적인 사용자 경험, 그리고 애드센스·분석의 호환성입니다.

'블로그 운영 노하우' 카테고리의 다른 글

티스토리 고정형 사이드바 스크롤 구현 방법 (0)	2025.10.17
티스토리 전용 글쓰기 자동화 Notion-GPT 워크플로우 (0)	2025.10.17
티스토리 블로그용 GA4 이벤트 추적 커스터마이징 (0)	2025.10.16
블로그 성과 추적용 UTM 파라미터 설정법 (0)	2025.10.16
ChatGPT와 티스토리 연동한 글 자동 템플릿 만들기 (1)	2025.10.15

현재글티스토리 AMP 적용 가능성과 리스크 분석

티스토리 정보 저장소

"티스토리 블로그에 대한 정보와 운영에 관한 기본적인 필수 정보를 제공합니다. "

SEO 최적화, 콘텐츠, 블로그운영, 디자인, 사용자 경험, 블로그 수익화, 글쓰기, 구글, 검색엔진최적화, SEO, 블로그 운영, 티스토리, 키워드, 트래픽 증가, 수익화, 애드센스, 콘텐츠 마케팅, 건강, 블로그, 블로그수익화,

Today :
Yesterday :

티스토리 정보 저장소