AMP의 주요 구성 요소에는 AMP-HTML, AMP-JS, AMP-Cache 이렇게 세 가지가 있습니다. 아래에서 이 세 가지 주요 구성 요소에 대해서 살펴보겠습니다.
AMP-HTML
AMP-HTML은 AMP 콘텐츠를 작성하는 데 사용되는 HTML5 기반의 마크 업 언어입니다. 기본적으로 성능을 염두에 두고 설계된 HTML5의 또 다른 버전입니다. 안정적인 성능을 보장하기 위해 일부 HTML 태그 제한하고, 허용된 범위 내에서 다양한 기능을 제공하기 위해 AMP 구성 요소를 제공합니다.
HTML 기반이기 때문에 AMP 페이지는 모든 웹 브라우저와 호환되며 즉시 실행됩니다. 또한 AMP-HTML은 AMP 캐시에서도 제공될 수 있도록 설계되었으며, AMP 캐시에 제공되면 자동으로 최적화 기능을 적용할 수 있습니다.
AMP-JS
AMP-JS는 AMP 페이지를 지원하는 자바스크립트 라이브러리입니다. AMP 콘텐츠의 최적화된 로드 및 페이지의 렌더링을 조정합니다. 번개처럼 빠른 웹 페이지 로드를 위해 AMP-JS는 엄격한 웹 성능 규칙을 따라야 합니다.
AMP-HTML은 페이지를 렌더링 하는 데 필요한 정보를 미리 알 수 있도록 사용할 수 있는 태그를 제한합니다. AMP-JS는 페이지 크기를 계산하고 사용자가 정의한 AMP-HTML 태그를 브라우저가 이해할 수 있는 HTML로 변환합니다. 또한 사용자가 볼 수 있는 리소스의 우선순위를 지정할 수 있도록 브라우저에서 리소스 로드를 제어합니다.
AMP-Cache
AMP-CDN이라고도 하며 이것은 AMP 페이지를 즉시 렌더링 할 수 있도록 캐싱 하기 위한 핵심 구성 요소입니다. 무료 CDN으로 누구나 자유롭게 구현하고 사용할 수 있습니다. AMP 캐시를 사용함으로써 즉시 로드되는 사용자 경험을 제공합니다.
AMP 페이지가 캐시에 최적화되어 제공되면 더욱 빠른 페이지가 될 수 있습니다. 이러한 최적화에는 다음이 포함됩니다.
- 사용자의 뷰포트에 맞게 이미지 크기 조정 (페이지 크기 감소)
- HTML 및 CSS 축소 (페이지 크기 감소)
- 스크롤 없이 볼 수 있는 이미지 (HTTP 요청 감소)
- 인라인 CSS (HTTP 요청 감소)
- 구성 요소 사전 로드 (페이지 로드 시간 감소)
- 백그라운드에서 웹 페이지 사전 렌더링 (페이지 로드 시간 감소)
AMP-URLs
AMP 캐시의 단점은 AMP 페이지에 캐시된 버전에 대해 별도의 URL이 가진다는 것입니다. 실제로 AMP 페이지에는 세 가지 유형의 URL이 있습니다. example.com 도메인의 경우 URL 유형은 다음과 같습니다.
- Original URL
https://example.com/amp_doc.html
- AMP Cache URL
https://example-com.cdn.ampproject.org /c/s/example.com/amp_doc.html
- AMP Viewer URL (Google 검색 결과에서 AMP 페이지를 볼 때)
https://www.google.com/amp/s/example.com/amp_doc.html
약간 혼란스러울 수 있지만 3개의 URL 모두 AMP에서 캐싱 및 사전 렌더링에 필요합니다.