이번 게시글에서는 AMP(Accelerated Mobile Pages)가 무엇인지에 대해서 알아보고 워드프레스에서 지원하는 AMP 플러그인을 적용하고 AMP가 왜 좋은지에 대한 페이지 로딩 속도 차이를 비교하도록 하겠습니다.
목차
AMP란?
AMP
AMP는 Accelerated Mobile Pages의 이니셜입니다. 직역하면 가속화된 모바일 페이지입니다. AMP의 목적은 웹 페이지 로딩 시간을 최소화하여 방문자의 이탈률을 줄이는 것으로 해당 기술을 적용하면 최소 10% 이상의 로딩 속도 상승을 보인다고 합니다.
AMP가 로딩 속도를 상승 시키는 방법은 아래와 같습니다.
- AMP HTML : HTML 파일에서 CSS 인라인화, 리소스 크기 정적 지정 및 로딩 속도에 지연을 발생시키는 요소들을 배제합니다.
- AMP JS : 랜더링 시간이 발생하는 CSS, 자바스크립트 요소의 대부분을 제외시키고 가벼운 CSS만 인리인 시킵니다.
- AMP 캐쉬 : AMP 조건을 만족시키는 페이지에 대해서 구글 서버에 미리 저장시켜 페이지 요청시 빠른 응답을 수행하는 방법입니다.
간략하게 요약하면 CSS와 JS를 이용하는 디자인적 요소를 최대한 배제하고 내용적인 부분만 전달한다고 이해하시면 됩니다.
아래 문단에서 적용 방법 및 적용시 장단점에 대해서 알아보겠습니다.
AMP 적용 방법
AMP를 적용하는 방법은 2가지 종류가 있습니다. 아래에서 간단한 방법부터 알려드리겠습니다.
- AMP 플러그인을 적용하여 자동으로 AMP 페이지가 생성되도록 하는 방법 (일부 블로그 서비스에서 지원)
- AMP 규격의 HTML 파일을 만들어 head 태그 내부에 amp meta 태그를 입력하여 검색 봇이 AMP 페이지임을 알게 하는 방법
가장 좋은 방법은 AMP 규정을 만족하는 HTML 파일을 제작하고 기존 버전과 적용 버전 모두 웹 사이트에서 제공하면 됩니다. 하지만 해당 작업을 하기까지 많은 시간과 비용이 소모되기 때문에 플러그인 사용도 추천드립니다.
이번 게시글에서는 워드프레스 블로그에서 지원하는 AMP 플러그인을 적용하는 방법에 대해서 알아볼 것 입니다.
AMP의 장/단점
AMP의 장점은 위에서 설명한 바와 같이 빠른 로딩 시간입니다. 기존 페이지 대비 최소 10% ~ 최대 80%까지의 로딩 시간 이득을 가지기 때문에 대부분의 페이지가 3초 이내로 로딩 된다고 보시면 됩니다.
AMP의 적용에 대해서 장점만 있지는 않습니다. AMP가 속도를 상승 시키는 방식은 디자인적 요소를 모두 배제하여 로딩 시간을 없애는 방법이기 때문에 웹 페이지의 시각적 요소가 매우 떨어지게 됩니다. 따라서 디자인 요소가 중요하게 작용하는 상품 페이지나 div 배치가 많은 웹의 경우 AMP 사용을 추천드리지 않습니다.
페이지 로딩 속도 개선
추가로 AMP와 같이 웹페이지 로딩 속도를 개선하는 목적을 가진 게시글이 저희 블로그에 있습니다. 아래 주소를 통해 해당 게시글을 확인하실 수 있습니다.
워드프레스 AMP 플러그인 적용
워드프레스에는 AMP 플러그인을 지원합니다. 이 플러그인을 사용할 경우 추가적인 AMP 문법 작업 없이 기존 페이지를 자동으로 AMP화 시켜줍니다. 작업된 페이지는 구글 모바일 검색결과에서 AMP 페이지로 로딩 됩니다.
AMP 플러그인
플러그인 적용을 위해 워드프레스 관리 페이지로 진입하셔야 합니다.
관리 페이지 좌측 카테고리를 확인하시면 “플러그인” 항목이 존재합니다. 여기서 “새로 추가” 항목으로 진입하신 후 검색창에 AMP를 검색하시면 아래와 같은 플러그인을 확인하실 수 있습니다.
“지금 설치”를 누르신 후 활성을 누르시면 AMP 플러그인이 워드프레스 블로그에 적용됩니다.
적용한 플러그인을 활용하여 게시글에서 AMP 페이지 설정을 선택하실 수 있습니다.
글 발행을 선택하신 후 게시글을 발행한다고 가정하고 아래 과정을 진행하시면 되겠습니다.
글 발행 설정창에서 글 관련 설정을 선택하신 후 중단부분을 확인하면 아래와 같은 속성이 있습니다.
Enable AMP를 선택하시면 AMP가 활성화됩니다.
작성된 게시글에서 AMP 버전을 확인하고 싶으시면 도메인 뒤에 amp 속성을 쿼리로 입력하시면 됩니다.
https://seo.tbwakorea.com/?ampEnable 상태일 경우 적용된 페이지로 전환됩니다.
Enable 상태의 페이지 화면입니다. 랜더링 시간에 많은 비중을 차지하는 배경 및 커버 사진이 제외 되었고 CSS 및 JS 속성도 거의 제외된 것을 확인할 수 있습니다.
AMP, non AMP 로딩 속도 비교
저희 TBWA DataLab 홈페이지에서 AMP가 적용된 페이지에 대해 Enable 상태일 경우와 아닐 경우에 대한 랜더링 시간 비교 통계입니다.
| 블로그 포스트 | 메인 페이지 및 중요 페이지 | |
| 미적용 상태 | 3733.159091 | 5220.7 |
| AMP 적용 상태 | 2105.227273 | 2670.333333 |
적용과 미적용에 따른 2배에 가까운 지연시간 차이를 보입니다. 따라서 심미적 요소가 없고 텍스트 문서가 많은 블로그 페이지 같은 경우 AMP 적용을 시켜 모바일 검색 결과에서 SEO (검색엔진최적화) 경쟁력을 갖추시는 것을 추천드립니다.
추가적으로 위 데이터는 Screaming Frog라는 분석 툴을 활용하여 값을 획득했고 단순하게 사이트 속도측정 사이트를 이용하셔서 속도 측정으로 비교하셔도 됩니다.
이번 게시글을 통해 AMP가 무엇인지 알아보았고 워드프레스 블로그에 AMP 플러그인을 활성화 시키는 방법에 대해서 알아보았습니다. 추가적인 SEO 방법은 저희 블로그에 많은 자료가 있으니 홈페이지 상단에 “블로그” 카테고리를 방문해 주시고 SEO 관련해서 문의 사항이 있으신 경우 아래 컨설팅 서비스 알아보기를 방문해 주시면 감하겠습니다.
TBWA DataLab에서 활동하고 있는 김지훈입니다. SEO 서비스에 대한 많은 정보를 제공하겠습니다.
핑백: 고객 경험 (CX)에 대한 모든 것 - 개선 팁 6가지 - TBWA 데이터랩
핑백: SEO(검색엔진최적화) 업체 선정 가이드 2023 - TBWA 데이터랩