워드프레스 모바일 최적화 완전정리 AMP PWA 코어웹바이탈 속도와 애드센스 광고 설정

워드프레스 모바일 최적화 AMP PWA Core Web Vitals 속도 광고 설정

요즘 방문자의 대부분이 스마트폰으로 들어오다 보니 워드프레스 모바일 최적화를 어떻게 하느냐가 사이트 성장에 바로 연결되는 분위기입니다. 예전에는 구글에서 AMP(Accelerated Mobile Pages)를 쓰면 검색 결과에서 유리하다고 알려지기도 했지만, 지금은 Core Web Vitals와 전체적인 모바일 속도, 사용자 경험이 훨씬 더 중요하게 평가되는 시기라 AMP, PWA, 캐시 플러그인, 광고 세팅을 모두 묶어서 보는 게 편합니다.

그래도 여전히 AMP를 활용하면 코드가 가벼워지고, 모바일에서 기본 속도를 크게 끌어올릴 수 있는 건 사실이라서, 저는 블루호스트 + 아바다 테마 구성에 WP Rocket과 AMP for WP를 함께 써보면서 얼마나 개선되는지 직접 체크해 봤습니다. 아래 내용은 오래전에 작성해 두었던 내용을 2026년 기준으로 정리하면서, AMP와 PWA, 그리고 최근 기준에서 꼭 챙겨야 할 Core Web Vitals 포인트까지 같이 묶어 본 정리라고 보면 됩니다.

워드프레스 모바일 최적화 AMP PWA 광고설정 속도향상

만약 내 사이트가 Google PageSpeed Insights에서 모바일 점수가 초록색이 아니라 붉은색, 노란색에 머물러 있다면, AMP와 PWA, 캐시 플러그인을 한 번쯤은 진지하게 고려해 볼 만합니다.

AMP로만 모든 게 해결되지는 않지만, 코드가 복잡한 테마를 쓰는 워드프레스 환경에서는 확실히 기본 속도를 끌어올리는 역할을 해줍니다.

블루호스트가 추천하는 워드프레스 최적화 방법 개선방법 - 노랗IT월드

저렴한 블루호스트에 무거운 아바다 테마까지 얹어 쓰다 보면 모바일 점수가 바닥을 치는 경우가 많은데, 이런 환경에서 AMP 플러그인을 적용해 보면 체감이 꽤 큽니다.

다만 이제는 AMP만 바라보기보다는 캐시 플러그인 · 이미지 최적화 · 광고 로딩 방식을 같이 고려해야 효과가 확실히 살아납니다.

애드센스 광고 속도 최적화 방법 - 티스토리 워드프레스

PageSpeed Insights로 워드프레스 모바일 속도 점검

모바일 속도를 이야기할 때 가장 먼저 확인하는 도구가 Google PageSpeed Insights입니다.

URL을 넣으면 모바일과 데스크톱 점수를 나눠 보여주는데, 예전 측정 기준에서는 제 사이트 모바일 점수가 22점이라는 끔찍한 숫자로 나왔습니다. 블루호스트에 아바다 테마, 각종 플러그인이 겹치니 서버 응답부터 렌더링까지 전부 지연되는 상황이었죠.

상세 리포트를 보면 LCP, FID, CLS 같은 Core Web Vitals 항목과 함께, 서버 응답 시간, 렌더링 차단 리소스, 이미지 인코딩 등 세부 원인이 쭉 나오는데요.

하나하나 따로 손대기보다는 AMP, 캐시 플러그인, 이미지 최적화 플러그인을 동시에 묶어서 개선하는 쪽이 훨씬 현실적이었습니다.

PageSpeed 권장 항목	설명
서버 응답 시간(TTFB) 단축	호스팅 성능, 캐시 플러그인, DB 최적화로 첫 바이트 응답 시간을 줄여야 합니다.
사용하지 않는 CSS 제거	테마와 플러그인이 불필요하게 불러오는 스타일을 줄이면 렌더링이 훨씬 빨라집니다.
차세대 포맷 이미지 제공	WebP, AVIF 같은 포맷을 쓰면 용량을 크게 줄이면서 화질은 유지할 수 있습니다.
오프 스크린 이미지 지연	화면에 보이지 않는 이미지는 나중에 로드되게 하면 초기 로딩이 부드럽습니다.
렌더링 차단 리소스 줄이기	JS, CSS 로딩 방식을 바꿔 위에서 막히지 않게 만드는 게 중요합니다.
효율적인 이미지 인코딩	너무 큰 원본, 필요 이상의 해상도를 줄이고 압축률을 조정해 줍니다.

아래 진단 항목들도 실제 운영에서는 자주 보게 되는 내용입니다.

진단 항목	확인 포인트
웹폰트 표시 방식	폰트 로드 전까지 텍스트가 안 보이지 않도록 설정하는 것이 좋습니다.
기본 스레드 작업 최소화	무거운 스크립트, 불필요한 플러그인을 줄여 CPU 점유를 낮춥니다.
자바스크립트 실행 시간	필요한 스크립트만 남기고 나머지는 지연 로딩을 적용합니다.
DOM 크기 관리	불필요한 요소가 너무 많으면 렌더링이 느려집니다.
캐시 정책	정적 리소스에 만료 시간을 길게 두면 재방문 속도가 빨라집니다.
중요 요청 깊이	초기 로딩에 꼭 필요한 리소스만 먼저 가져오도록 구성합니다.

워드프레스 이미지 CSS 최적화 Gzip 압축 플러그인

저는 여기에 WP Rocket을 더해서 HTML, CSS, JS 압축과 캐시, Lazy Load까지 같이 적용하고 있습니다.

AMP와 WP Rocket을 조합하면 데스크톱과 모바일 모두에서 점수가 안정적으로 올라가는 편이라, 코드를 직접 다루기 어렵다면 이런 유료 플러그인 조합이 현실적인 선택이 될 수 있습니다.

WP Rocket 플러그인 워드프레스 최적화 후기 - 노랗IT월드

AMP for WP 플러그인으로 모바일 AMP 페이지 구성

AMP For WP - Accelerated Mobile Pages

워드프레스 플러그인 검색에서 AMP for WP – Accelerated Mobile Pages를 찾으면 이 플러그인을 설치할 수 있습니다. 이름 그대로 모바일용 AMP 페이지를 자동으로 만들어 주는 플러그인이라, 별도 테마를 쓰지 않고도 AMP 버전을 제공할 수 있다는 점이 편합니다.

처음 활성화하면 “I’m a new user”와 “I’m an experienced user” 중에서 고르도록 나오는데, AMP가 처음이라면 새 사용자 쪽을 선택해서 마법사 화면을 따라가는 편이 부담이 덜합니다.

이미 AMP 구조를 여러 번 만져본 편이라면 바로 고급 설정 화면으로 들어가 세부 옵션부터 손볼 수도 있습니다.

위처럼 환영 화면을 지나면 어떤 콘텐츠를 AMP로 제공할지 고르는 부분이 나옵니다. 게시물만 AMP로 할지, 페이지와 카테고리까지 AMP 버전을 함께 제공할지 선택할 수 있는데, 저는 블로그 글 중심 사이트라 게시물 · 카테고리 · 홈페이지를 모두 켜두고 쓰고 있습니다.

워드프레스 모바일 AMP 설정

항목	역할
시작 화면	간단한 소개와 함께 로고 업로드, 기본 스타일을 지정할 수 있습니다.
로고 이미지	190x36 크기 로고를 등록해 두면 AMP 상단에 심플한 브랜드 이미지를 보여줄 수 있습니다.
콘텐츠 선택	게시물, 페이지, 카테고리, 홈페이지 등 어떤 영역을 AMP로 제공할지 고를 수 있습니다.

Google Analytics 4와 AMP 연동

구글 애널리틱스 추적코드 설정

예전 스크린샷에는 UA-로 시작하는 코드가 보이지만, 지금은 Google Analytics 4 (G- 코드)만 사용되고 있습니다.

AMP for WP 설정 화면에서 분석 탭을 열고 GA4 측정 ID를 넣어 두면 AMP 페이지에서도 방문자 데이터를 함께 쌓을 수 있습니다.

AMP 반응형테마 설정

디자인 탭에서는 AMP 전용 테마를 고를 수 있는데, 무료 테마만으로도 4가지 정도 스타일을 지원합니다.

복잡한 요소가 빠지고 심플한 형태라 콘텐츠 가독성 · 속도 두 가지를 동시에 챙길 수 있는 느낌입니다.

AMP 번역·에러 페이지 메시지 손보기

AMP for WP 메뉴에서 번역 패널을 열면 기본으로 들어 있는 영문 텍스트를 모두 한글로 바꿀 수 있습니다. 404 페이지, 검색 결과 없음, 댓글 관련 문구 등 자주 노출되는 문장을 사이트 분위기에 맞춰 바꿔 두면, 문제가 생겨도 방문자가 훨씬 차분하게 페이지를 이용하는 데 도움이 됩니다.

모바일 앱 크기 설정

일반 탭에서는 AMP 페이지의 기본 폭과 레이아웃을 지정할 수 있습니다. 여기서 게시물, 홈페이지, 맞춤 프런트 페이지 등 AMP를 적용할 영역을 다시 한 번 체크해 두면 됩니다.

AMP 애드센스 광고 위치 최적화

AMP 페이지에도 애드센스를 붙일 수 있는데, 이때는 속도를 해치지 않는 선에서 적당한 위치를 골라야 합니다. AMP for WP에서는 헤더 아래, 제목 아래, 본문 상단, 본문 하단, 푸터 위, 관련 글 위처럼 꽤 다양한 위치를 지원합니다.

amp 애드센스 광고설정

실제로 운영해 보니 제목 바로 아래에 하나, 본문 중간쯤에 하나, 맨 아래에 하나 정도만 넣어도 수익과 속도를 적당히 맞출 수 있었습니다. 데이블 같은 다른 광고 플랫폼 코드를 넣을 때도 이 영역을 활용하면 정리하기 편합니다.

SEO 플러그인과 AMP SEO 설정 연동

SEO 플러그인 선택

AMP for WP의 SEO 메뉴에서는 현재 사용 중인 SEO 플러그인을 선택할 수 있습니다.

Yoast SEO, Rank Math, All in One SEO 등과 연동해 두면, 기존 글에서 입력한 제목과 설명, OG 태그를 AMP 페이지에서도 그대로 활용할 수 있어 검색엔진 최적화 관점에서 손해가 없습니다.

PWA Progressive Web App으로 모바일 경험 강화

PWA - Progressive Web App

PWA(Progressive Web App)는 모바일 웹사이트를 거의 앱처럼 느껴지게 만들어 주는 기술입니다. 홈 화면에 아이콘을 추가해서 바로 접속할 수 있고, 캐시를 적극적으로 활용해 느린 네트워크 환경에서도 비교적 쾌적한 속도를 유지할 수 있습니다. AMP가 HTML 구조를 가볍게 만드는 역할이라면, PWA는 전체 경험을 앱에 가깝게 가져가는 느낌이라고 보면 이해하기 쉽습니다.

AMP for WP 안에서 PWA 애드온을 설치해 함께 쓰면 더 자연스럽게 연동됩니다. 설

치만 끝내면, 사이트 이름, 아이콘, 시작 화면 색상, 오프라인 페이지 등을 추가로 정해 줄 수 있습니다.

PWA 설정까지 끝내고 나면, 방문자가 브라우저에서 “홈 화면에 추가”를 눌렀을 때 내 워드프레스 사이트가 아이콘 하나짜리 앱처럼 보이게 됩니다. 네이티브 앱을 따로 만들기 부담스러운 1인 블로그, 소규모 서비스라면 이 정도만 해도 모바일 경험이 꽤 달라집니다.

PWA Progressive Web App - 워드프레스 최적화 플러그인 - WordPress

모바일 성능 최적화: Minify, 스키마, AMP 리디렉션

워드프래스 Minify 압축

AMP for WP 안에도 Minify 옵션이 있어 CSS와 JS를 압축할 수 있습니다.

WP Rocket과 겹치는 부분이 있어서 어느 쪽에서 처리할지 한 번 정해두고 테스트해 보는 게 좋습니다. 저 같은 경우에는 충돌을 피하려고 AMP 쪽 Minify를 최소한으로 두고, 메인 압축은 WP Rocket에서 맡기고 있습니다.

스키차 서렂ㅇ

구조화 데이터(스키마) 기능도 제공하는데, 글이 리뷰인지, 레시피인지, 일반 기사인지 타입을 지정해 주면 검색 결과에서 별점이나 썸네일이 더 풍부하게 보여질 수 있습니다. SEO 플러그인에서도 스키마를 지원하지만, AMP 버전에도 제대로 반영되는지 한 번은 확인해 보는 게 좋습니다.

또 하나 중요한 부분이 모바일 AMP 리디렉션입니다. AMP for WP에서 모바일 접속 시 AMP 버전으로 자동 전환되도록 설정해 두면, 방문자가 별도 주소를 기억하지 않아도 됩니다.

AMP가 제대로 적용된 글은 주소 끝에 /amp가 붙는 형태로 열리게 됩니다.

검색엔진에는 정규 URL을 알려주고, 사용자가 보는 쪽은 AMP 버전으로 연결해 주는 구조라 SEO에 문제 없이 속도만 가져가는 방식이라고 보면 됩니다.

AMP 적용 전후 모바일 점수 변화

AMP for WP, WP Rocket, 이미지 최적화 플러그인을 같이 적용한 뒤 다시 PageSpeed Insights를 돌려보니, 처음 22점이었던 모바일 점수가 60점대 후반까지 올라갔습니다.

초록색 영역(90점 이상)을 만들려면 호스팅 교체나 테마 변경까지 가야 하는 경우가 많지만, 이 정도 개선만으로도 체감 속도는 확실히 달라집니다.

하단에 나오는 개선 항목 수도 눈에 띄게 줄어들었습니다.

이제는 특정 스크립트나 이미지 몇 개만 추가로 손보면 될 정도의 수준이라, 실사용 입장에서는 충분히 만족스러운 상태라고 느꼈습니다. 워드프레스 모바일 속도 때문에 애를 먹고 있다면 AMP 플러그인과 캐시 플러그인을 같이 묶어 보는 것을 한 번쯤 시도해 볼 만합니다.

AMP · PWA · 일반 최적화 비교 정리

구분	장점	주의할 점
AMP	HTML 구조를 단순하게 만들어 모바일 속도를 크게 개선하고, 이미지·광고도 AMP 규격에 맞게 가볍게 출력됩니다.	일부 위젯이나 JS 기능이 제한될 수 있고, 디자인 자유도가 줄어듭니다.
PWA	홈 화면 추가, 오프라인 캐시, 앱 같은 경험을 제공하면서 재방문율을 높일 수 있습니다.	최초 설정 시 서비스워커, 매니페스트 등 기본 개념을 한 번은 이해해 두는 것이 좋습니다.
캐시·이미지·코드 최적화	WP Rocket, Autoptimize, 이미지 압축 플러그인 등을 활용해 데스크톱·모바일 전체 속도를 고르게 끌어올릴 수 있습니다.	플러그인끼리 기능이 겹치면 충돌이 날 수 있어서 한 번에 여러 옵션을 켜지 말고 차근차근 테스트해야 합니다.

워드프레스 모바일 최적화 연계 팁

실제 운영을 하다 보면 AMP, PWA 말고도 신경 써야 할 부분이 계속 생깁니다.

특히 광고 수익과 사용자 경험 사이에서 균형을 잡는 일이 가장 고민되는 부분인데요, 적당한 선을 찾아가면서 느꼈던 점을 정리해 보면 다음과 같습니다.

우선 이미지 용량부터 줄여 두면 좋습니다. 썸네일을 너무 크게 올리기보다는 가로 1200px 정도에 WebP 포맷으로 저장해 올리는 것만으로도 로딩이 꽤 빨라집니다. 자동으로 WebP를 변환해 주는 플러그인을 하나 골라 두고, 기존 이미지를 순차적으로 변환하는 방식이 편합니다.

다음으로는 광고 개수가 중요합니다. 애드센스 자동 광고를 켜두면 알아서 잘 넣어줄 것 같지만, 모바일 환경에서는 갑자기 레이아웃이 밀리면서 CLS 점수를 떨어뜨리는 경우가 많습니다. 그래서 AMP에서는 직접 위치를 지정해 두고, PC 버전에서는 자동 광고를 섞어서 쓰는 식으로 조합했더니 점수와 수익이 모두 안정적인 편이었습니다.

마지막으로, 테마 선택도 생각보다 큰 영향을 줍니다. 아바다처럼 기능이 많은 테마는 디자인적으로는 만족스럽지만, 모바일 점수에서는 항상 불리한 편입니다. 만약 사이트 구조를 크게 바꿀 계획이 있다면, 요즘은 블록 기반의 가벼운 테마도 잘 나오기 때문에, 중장기적으로는 테마 변경까지 염두에 두는 것이 좋다고 느꼈습니다.

워드프레스 참고 포스팅 모음

• [IT 리뷰/블로그 SEO] - 네이버 웹마스터도구 올바른 RSS가 아닙니다 RSS 본문 크기를 줄여주세요
• [IT 리뷰/블로그 SEO] - 워드프레스 관리자 주소 백엔드 WP-Admin 변경 방법
• [IT 리뷰/블로그 SEO] - 워드프레스 목차 TOC 플러그인 Easy Table of Contents
• [IT 리뷰/블로그 SEO] - 워드프레스 표 만들기 표 짤림 해결방법

자주 묻는 질문(FAQ)

AMP를 쓰면 2026년에도 구글 검색 노출에 도움이 될까요?

예전처럼 AMP만 쓴다고 해서 상단에 자동으로 노출되는 시대는 이미 지나갔습니다. 지금은 Core Web Vitals와 전체 사용자 경험이 더 중요하고, AMP는 그 안에서 속도를 끌어올리는 여러 방법 중 하나에 가깝습니다. 다만 워드프레스 환경이 무겁고 코드를 직접 손대기 어렵다면, AMP for WP로 모바일 버전을 가볍게 만드는 것만으로도 점수와 체감 속도는 충분히 개선됩니다.

AMP를 쓰지 않고도 모바일 점수를 올릴 수 있는 방법이 있나요?

있습니다. 가볍게는 이미지 최적화, 캐시 플러그인, 코드 압축만으로도 60~80점대를 만드는 것이 가능하고, 여기에 호스팅 성능이 받쳐 준다면 AMP 없이도 상위 점수를 유지할 수 있습니다. 다만 테마가 너무 무거운 편이라면 AMP를 한 번 거치고, 나중에 테마를 교체하면서 AMP를 빼는 방향으로 천천히 옮겨가는 것도 좋은 선택입니다.

AMP 페이지에서 애드센스 수익이 줄어드는 경우도 있나요?

광고 위치와 개수를 잘못 잡으면 수익이 줄어들 수 있습니다. AMP는 속도가 빠른 대신 레이아웃이 단순하다 보니, PC 버전에서 잘 먹히던 위치가 AMP에서는 애매해지는 경우가 많습니다. 그래서 제목 아래·본문 중간·본문 하단 정도로 위치를 한 번 정해 두고, 클릭률과 페이지 RPM을 보면서 조금씩 조정해 가는 편이 안정적이었습니다.

PWA를 꼭 AMP와 같이 써야 하나요?

반드시 그럴 필요는 없습니다. PWA는 AMP와 별개로 동작하기 때문에, AMP를 쓰지 않는 일반 워드프레스 사이트에도 그대로 적용할 수 있습니다. 다만 AMP for WP를 이미 쓰고 있다면 같은 개발사에서 제공하는 PWA 애드온을 연동하는 방식이 가장 편하고, 설정 화면도 비슷해서 적응하기 쉽습니다.

WP Rocket과 AMP for WP를 함께 쓰면 충돌이 나지 않나요?

서로 같은 역할을 하는 옵션을 동시에 켜두면 문제가 생길 수 있습니다.

예를 들어 JS 지연 로딩, CSS 결합 같은 기능은 한쪽에서만 담당하도록 정해 두는 것이 좋습니다. 저는 AMP에서는 최소한의 압축만 켜두고, 메인 최적화는 WP Rocket으로 처리하는 방식으로 쓰고 있고, 이 조합에서는 큰 충돌 없이 안정적으로 돌아가고 있습니다.

Core Web Vitals 점수를 올리려면 어디부터 손대야 할까요?

대부분 사이트에서 제일 먼저 문제되는 부분이 LCP(최대 컨텐츠 표시 시간)입니다.

메인 이미지 용량을 줄이고, 위쪽에 들어가는 광고를 조금 뒤에 로딩시키는 것만으로도 LCP가 눈에 띄게 줄어드는 경우가 많습니다. 그다음으로는 CLS를 떨어뜨리는 요소, 즉 화면이 갑자기 밀리게 만드는 광고나 이미지 위치를 손보는 순서가 체감상 효과가 컸습니다.

AMP 적용 후 디자인이 너무 심심해 보이는데 해결 방법이 있을까요?

AMP 특성상 화려한 애니메이션과 무거운 스크립트를 쓰기 어렵다 보니 처음에는 밋밋하게 느껴질 수 있습니다. 이럴 때는 폰트 선택, 여백, 썸네일 스타일만 잘 잡아도 분위기가 많이 달라집니다. AMP 전용 CSS에서 제목 크기와 행간만 조금 조정해도 모바일에서 읽는 느낌이 훨씬 좋아지기 때문에, 화려한 효과보다는 글을 읽기 편하게 만드는 쪽에 집중하는 편이 낫다고 느꼈습니다.

AMP와 SEO 플러그인 설정이 겹칠 때는 어떻게 맞추는 게 좋나요?

기본적으로는 SEO 플러그인을 기준으로 제목과 설명을 입력하고, AMP에서는 “기존 SEO 플러그인 사용” 옵션을 선택하는 것이 가장 깔끔합니다. 중복 설정을 피하고 싶다면, AMP 쪽에서 별도의 제목·설명을 입력하기보다는 정규 URL과 캐노니컬만 정확히 맞춰 주는 쪽으로 정리하는 것이 좋습니다.

모바일에서 사이트가 느리게 느껴질 때 바로 확인해 보면 좋은 항목이 있을까요?

체감상 가장 빠르게 확인할 수 있는 것은 이미지 용량과 캐시입니다. 스마트폰에서 개발자 도구로 네트워크 탭을 열어 보면 어떤 파일이 오래 걸리는지 바로 보이는데, 여기서 이미지가 대부분을 차지하고 있다면 이미지 압축부터 손보는 편이 좋고, HTML과 JS에 시간이 많이 걸린다면 캐시 플러그인 설정을 다시 확인해 보는 것이 좋습니다.

앞으로 AMP를 계속 가져가야 할지, 언젠가 빼야 할지 고민된다면?

가장 현실적인 방법은 AMP 버전과 일반 버전을 동시에 운영해 보면서 데이터를 보는 것입니다. AMP 트래픽 비중, 광고 수익, 이탈률을 한 번에 비교해 보고, 나중에 테마를 바꾸거나 호스팅을 업그레이드했을 때 AMP 없이도 충분히 빠르다면 그때 자연스럽게 정리해도 늦지 않습니다.

중요한 건 기술 자체보다 방문자가 내 사이트를 얼마나 편하게 이용하는지라, 그 지표를 기준으로 판단하는 편이 마음이 편했습니다.