AMP란?

Steve·2022년 5월 1일

Accerlated Mobile Pages

AMP는 구글에서 만든 모바일 최적화를 위한 표준이다. 뉴스나 블로그와 같이 정적인 HTML을 AMP 표준에 맞춰 작성하면 모바일 환경에서 15%~85%의 성능 향상을 가져올 수 있다고 구글은 주장한다.

데스크톱 환경에 맞추어진 HTML이 모바일 브라우저를 통해 호출될때 발생할 수 있는 속도를 저해하는 군더더기를 제거한 하나의 규격을 정의한 셈이다.

일반 HTML 페이지에서 동적 요소들을 제거하여 컨텐츠만 남겨둔 느낌이다. 웹사이트의 속도를 느리게 하는 요소들에 제약을 가해 속도를 빠르게 하는 방법을 사용했다.

그럼 어떤 특정 페이지는 쫌 빨리 열렸으면 좋겠다.하는 페이지는 amp전용 페이지로 만드는것인가?
그 전체 페이지를? 아니면 해당 컴포넌트만 amp로 만드는 것인가?
-> 코드 분석 ㄱ

구글 공식 문서에 다르면 AMP는 다음 3가지 요소로 구성된다.

AMP HTML은 기존의 HTML 문서에서 속도에 부담을 주는 요소를 배제하고 몇몇 확장 속성들을 추가한 일종의 HTML 확장.

AMP JS는 이런 AMP HTML을 읽고 렌더링하는 런타임(Runtime) 이다.

Google AMP Cache는 구글이 제공하는 AMP HTML 문서의 캐싱 서비스이다. 즉 AMP 문서를 만들어 올리면 구글이 자체 CDN을 통해 더 빠른 액세스를 할 수 있게 해주는 것이다.

인라인 스타일이 조금 더 빠르다.
그럼, 오직 그 코드에만 사용하는 스타일이면 따로 뺄 필요가 없겠네?

이렇게 작성된 AMP, 즉 “빠른 게재 모바일 페이지”는 모바일 디바이스 환경에서 구글 검색(Google Search)을 수행할 경우 기존의 웹페이지를 대체하여 보여지게 되고, 따라서 사용자는 보다 빠른 모바일 사용자 경험을 얻게 되는 것이다.

Front-Dev