워드프레스 모바일웹 속도개선 플러그인 AMP

홈페이지 제작, 운영에서 페이지의 로딩속도 단축은 매우 중요한 부분입니다.
현재 대다수의 사람들이 LTE를 사용하는 상황에서 웹페이지 로딩속도 차이가 얼마나 있을까 싶지만, 로딩속도가 100분의 1초만 늦어져도 이탈률이 크게 늘어나는 것이 현실입니다.

기껏 흥미로운 제목과 이미지, 컨텐츠를 이용해 클릭을 유도했다고 해도 로딩속도가 길어지면 사용자는 이탈하는 것이죠.
최근 공개된 구글의 '가속 모바일 페이지(AMP)'를 이용하면 이 모바일웹 속도를 효과적으로 향상시킬 수 있습니다.

AMP(Accelerated Mobile Page)란, AMP html이라는 새로운 오픈프레임워크를 이용하여 모바일웹사이트의 페이지를 경량화해주는 웹기술입니다. 워드프레스 사이트도 AMP 플러그인을 활용하면 모바일웹 페이지의 로딩속도를 빠르게 개선시킬 수 있습니다.

구글은 뉴스나 블로그 같은 정적인 콘텐츠를 만들어 배포하는 온라인 매체가 이 AMP 표준에 맞춰 콘텐츠를 작성하여 게시하면 기존의 모바일 콘텐츠보다 약 15%~85%의 성능 향상을 가져올 수 있다고 밝혔는데요.

또한, AMP를 적용한 페이지는 로딩속도 개선 뿐만아니라 모바일데이터도 훨씬 적게 쓰는 것으로 나타났습니다. IOS와 안드로이드 앱에서 AMP테스트를 하고 있는 핀터레스트가 AMP 페이지가 기존 모바일 최적화 페이지와 비교했을 때 로딩은 4배 빠르면서도 데이터 사용량은 8분의 1수준이라고 밝혔습니다.

워드프레스에 AMP html 적용하기

그렇다면 워드프레스 사이트들은 어떻게 이 AMP 기술을 적용할 수 있을까요?
바로 'AMP' 플러그인만 설치해주면 됩니다.

워드프레스 AMP 플러그인은 워드프레스 관리자 > 플러그인에서 해당 플러그인을 검색하거나,
워드프레스닷컴에서 직접 다운로드 받아 설치할 수 있습니다.

플러그인을 설치한 후에도 활성화만 시켜주면 별다른 설정을 할 필요가 없습니다.
플러그인만 설치하면 모바일에 최적화된 AMP html이 워드프레스 사이트에 적용되는 것이지요:)
다만, 일부 테마의 숏코드나 기타 플러그인들과 충돌이 발생할 수도 있다고 알려져 있어 적용 후 테스트 작업이 필요합니다.

BBS e-커뮤니티(http://www.bbsetheme.co.kr/)에 적용해 본 결과 별 문제없이 적용되는 것으로 확인하였습니다. 워드프레스를 기반으로 사이트를 운영하고 계신다면 모바일 로딩속도 개선을 위한 AMP 플러그인을 설치해보시기 바랍니다.

AMP(ACCELERATED MOBILE PAGE)의 작동 원리

• 페이지 구성 단순화
   : 자바스크립트 코드를 최소화한다. 필요한 기능은 태그컴포턴트로 만들어둡니다.
  구글은 'AMP 자바스크립트'라는 라이브러리를 제공합니다.

• 대역폭 최적화
  : 최적화된 해상도 이미지를 찾아 기기에 최적화된 콘텐츠를 노출하고 비동기 로딩을 통해 뉴스 소비 경험을 개선합니다. 비동기 로딩이란 우선 뉴스를 읽는데 핵심이 되는 텍스트를 먼저 로딩하고 크기가 큰 이미지를 나중에 받는 방식입니다.
  
  
• 페이지 캐싱(Caching)
  : 구글이 AMP를 적용한 뉴스 데이터를 저장(캐싱)합니다. 사용자가 뉴스를 읽겠다고 요청하면 언론사의 서버가 아니라 미리 캐싱한 데이터를 보여줌으로써 로딩 시간을 획기적으로 줄일 수 있습니다.