AMP?

AMP (Accelerated Mobile Pages)

- 많은 사용자가 모바일 사이트의 느린 속도를 견디지 못하고 떠난다는 사실에서 탄생한 오픈 프로젝트

- 거의 즉각적인 로딩, 부드러운 스크롤링, 자유로운 스타일링 등을 지원하며, AMP HTML, JS, Cache 로 구성된다. 

AMP Makes Your Pages Fast

1. 비동기 스크립트만 허용

- JavaScript 는 DOM 생성을 차단할 수가 있고 페이지 렌더링을 지연시킬 수도 있음. 따라서 AMP는 비동기 JavaScript만 허용.

- 작성자가 작성한 JavaScript는 포함될 수 없음. 

- 타사 JS는 iframe 에서 허용가능.

2. 모든 리소스의 크기를 정적으로 지정

- 외부 리소스(iframe, image...)의 크기를 미리 html에 지정. AMP가 리소스의 다운을 기다리지 않고 페이지의 레이아웃을 로드.

- 리소스 레이아웃과 문서 레이아웃 분리. 값비싼 스타일 재계산과 레이아웃은 리소스가 로드되어도 재수행 안됨. (HTTP 요청 1번)

3. 확장 메커니즘이 렌더링을 차단하지 않도록 함

- AMP는 라이트박스, 인스타그램 삽입, 트윗 등에 대한 확장을 지원.

- custom-element 속성을 통해, 해당 페이지에 사용지 지정 태그가 포함될 것임을 AMP 시스템에 알려야함.

- ex) <script async custom-element="amp-iframe" src="~~/amp-iframe-0.1.js"></script>

4. 모든 타사 JavaScript 를 주요 경로에서 제거

- iframe 에서만 타사 JavaScript 허용. (기본페이지와 별개로 로딩)

- iframe 에서 스타일 재계산이나 페이지 레이아웃 재조정이 일어나더라도, DOM 사이즈가 작기 때문에 속도가 빠름.

5. 모든 CSS는 인라인이어야 하며 크기가 한정되어야 함

- AMP HTML 페이지에서는 인라인 스타일만 허용. (CSS는 모든 렌더링을 차단하고, 페이지 로드를 차단하며, 팽창되는 경향이 있음)

- 인라인 CSS 스타일은 1개만 허용되기 떄문에 다른 웹 사이트에 비해 최소 1개 이상의 HTTP 요청을 줄임

- 인라인 스타일 시트 최대 크기는 50KB

6. 글꼴 트리거는 효율적이여야 함.

- 웹 글꼴은 매우 크므로, 웹 글꼴 최적화는 성능에 매우 중요.

- 일반적인 웹 페이지에서는 타사 JavaScript 와 스타일 시트를 순차적으로 로딩한 후 폰트를 다운.

- AMP 시스템은 글꼴의 다운로드가 시작될 때까지 0개의 HTTP 요청을 선언 (AMP의 모든 JS가 비동기 이고, 인라인 스타일 시트만 허용되기 때문)

7. 스타일 재계산 최소화

- 무엇인가를 측정할 때마다 브라우저가 전체 페이지를 레이아웃해야 하기 때문에 값비싼 스타일 계산이 트리거됨.

- AMP 페이지에서는 모든 쓰기 동작보다 모든 DOM 읽기 동작이 먼저 발생함.

- 프레임당 최대 한 번의 스타일 재계산이 보장됨.

8. GPU 가속 애니메이션만 실행

- 빠른 최적화를 위한 방법은 GPU에서 실행하는 것.

- GPU의 단점은 페이지 레이아웃을 업데이트 할 수 없는 점.

- AMP는 변형 및 불투명에 대해서만 애니메이션과 전환을 허용하므로 페이지 레이아웃 업데이트 필요 없음.

9. 리소스 로드의 우선순위 지정

- AMP는 모든 리소스 다운로드를 제어하고, 리소스 로드의 우선순위를 지정하며, 필요한 리소스만 로드하고, 늦게 로드되는 리소스를 프리패치함.

- AMP는 리소스를 다운로드할 때 이 다운로드를 최적화하므로, 현재 가장 중요한 리소스가 먼저 다운로드 됨.

- 이미지 광고는 사용자가 볼 가능성이 있거나 사용자가 빠르게 스크롤할 가능성이 있는 경우에만 다운로드 됨.

- AMP는 리소스는 최대한 늦게 로드되지만 최대한 일찍 프리패치 됨.

- 로드는 매우 빨리 이뤄지지만, 실제로 리소스가 사용자에게 표시될 때만  CPU가 사용 됨.

10. 즉시 페이지 로드

- HTTP 요청 시 최대한 빠르게 수행되도록 보장하기 우해, 새 preconnect API 가 자주 사용됨. (탐색하기 원하는 내용을 사용자가 명시적으로 지정하기 전에 페이지를 렌더링 할 수 있음.) 

- 사전 렌더링은 모든 웹 콘텐츠에 적용될 수 있지만, 많은 대역폭과 CPU를 소모할 수도 있음.

- AMP는 이런 요인들을 줄이도록 최적화 되어있고, 사전 렌더링은 중요한 리소스만을 다운로드 하며, CPU를 많이 소모할 수 있는 리소스는 렌더링하지 않음.

- 즉시 로드하기 위해 AMP 문서를 사전 렌더링할 경우, 표시되는 리소스만 실제로 다운로드.

- 즉시 로드하기 위해 AMP 문서를 사전 렌더링할 경우, CPU를 많이 사용할 수도 있는 리소스 (ex) 타사 iframe)는 다운로드 되지 않음.