AMP는 어떻게 웹 페이지의 성능을 높일 수 있나

이 글은 모바일 웹 환경에서 사용자 경험을 향상시키기 위한 AMP(Accelerated Mobile Page)의 원리와 구성 요소를 설명합니다. 모바일 기기 성능 향상에도 불구하고 최적화되지 않은 웹 페이지는 사용자 경험 저하, 트래픽 낭비, 배터리 소모 등의 문제를 야기합니다.

AMP는 빠른 페이지 렌더링을 위한 규칙과 내장/확장 컴포넌트를 제공하여 이러한 문제를 해결합니다. AMP HTML은 표준 HTML을 확장한 형태로, 특정 태그 사용을 제한하고 AMP 커스텀 엘리먼트(예: `<amp-img>`)를 사용하도록 강제합니다.

또한 외부 JavaScript 및 CSS 사용을 제한하고 CSS는 50KB로 제한하여 리소스 다운로드 시점과 렌더링 시점을 제어하고 레이아웃 계산을 최소화합니다. AMP JS는 AMP HTML 페이지의 성능을 최적화하는 데 기여합니다.

AMP는 Google AMP Cache를 통해 페이지를 저장하여 로딩 속도를 더욱 높입니다.