AMP (Accelerated Mobile PAges)

AMP

• Accelerated Mobile Pages
• AMP는 구글이 주도하는 오픈 소스 프로젝트이다.
• 웹 페이지가 모바일 장치에서 더 빠르고 효율적으로 로드되도록 설계되었다.
• AMP는 특히 모바일 환경에서 페이지 로딩 속도를 높여 사용자 경험을 개선하고 검색 엔진 순위를 향상시키는 데 중점을 둔다.

AMP의 주요 요소

AMP HTML

• AMP HTML은 기존 HTML을 기반으로 하지만, 성능을 향상시키기 위해 제한된 HTML 태그와 기능을 사용한다.
• 예를 들어, 일부 JS 기능을 사용할 수 없으며, 대신 AMP 프로젝트에서 제공하는 맞춤 태그를 사용한다.

AMP JS 라이브러리

• AMP JS 라이브러리는 AMP HTML 페이지의 빠른 렌더링을 보장한다. 이 라이브러리는 모든 외부 리소스가 페이지 로딩을 방해하지 않도록 비동기적으로 로드되며, 사용자 정의 요소와 애니메이션의 성능을 최적하한다.

AMP 캐시

• AMP 페이지는 자동으로 AMP 캐시라는 Google의 CDN에 캐시될 수 있다. 이 캐시는 AMP 페이지를 사전 렌더링하고 최적화 된 상태로 제공하여 로딩 속도를 더욱 향상시킨다.
• Google 검색 결과에서 AMP 페이지는 번개 아이콘과 함께 표시되며, 즉시 로드된다.

AMP의 원리

• 리소스 우선순위 지정
• 광고 및 분석 최적화
• 레이아웃 제

AMP의 장점

빠른 로딩 속도

• 모바일 장치에서 웹 페이지의 로딩 속도가 빠르기 때문에 사용자 이탈률이 줄어든다.

SEO 개선

• Google은 빠르게 로드되는 페이지를 선호하며 이는 검색 엔진 순위에 긍정적인 영향을 끼친다.

브랜딩과 사용자 경험

• AMP 페이지는 기본 페이지와 스타일이 다를 수 있어, 브랜드 정체성을 유지하기 어려울 수 있다.

AMP의 대안

• AMP 외의 다양한 웹 성능 최적화 방법 사용하기
  • PWA (Progressive Web App)
    • 오프라인 기능을 제공하면서 성능을 향상시키는 반면, 일반적인 성능 최적화 기법도 AMP의 대안으로 고려될 수 있다.

AMP 리소스

• 공식 사이트
  • https://amp.dev/