웹페이지 고속 랜더링 기술, 구글 AMP

Posted in SW 아키텍처 // Posted at 2016.12.08 16:03

올해 구글 IO 2016에서 '구글이 제시한 미래의 웹'에서 PWA와 같이 언급된 것이 AMP(Accelerated Mobile Pages)이다.

AMP는 웹 페이지의 고속 처리를 위한 구글의 Best Practice가 집약된 기술이다.

구글 AMP가 집중하는 것은 오직 성능이다.

성능을 위해 외부 JS 삽입도 불허하고 인라인 CSS의 크기도 제한한다.
굳이 AMP 페이지에 이런 것들이 구현되어야 한다면 iframe으로 분리하라고 권고한다.

AMP Components

AMP 페이지에서는 HTML 태그에 대응되는 몇 가지 커스텀 Component를 제공하며 이를 반드시 사용해야 성능이 개선된다.

AMP Cache

AMP 페이지는 구글 봇에 의해 자동으로 구글 CDN에 캐싱되어 Middle mile 경유를 최소화하여 응답속도를 향상시키다.

AMP Validation

지금 개발하고 있는 페이지가 AMP 제약사항을 따르는지 검사해 주는 도구이다.
URL 뒤에 #development 해시태그를 추가하면 크롬 개발자 도구를 통해 그 유효성 검사 결과를 보여준다.


중요한 것은, (앞서 언급했듯이) AMP 페이지를 만들기 위해 강제되어야 하는 제약사항이 비현실적일 수도 있다는 것이다. 특히 사용자와의 상호작용이 많은 복잡한 웹 페이지를 만든다면 AMP적용이 녹록치 않을 것이다.

결국 "단순한 정적페이지의 고속화에 초점을 맞춘 기술"이니 만큼 취사 선택하길 권장한다.

자세한 것은 구글 사이트를 참고.
=> https://www.ampproject.org/
=> https://www.ampproject.org/learn/about-amp/
=> https://www.ampproject.org/docs/get_started/create/basic_markup


저작자 표시 비영리 변경 금지
신고

'SW 아키텍처' 카테고리의 다른 글

UI 디자인트렌드  (0) 2016.12.13
HTTP2-over-QUIC  (0) 2016.12.08
웹페이지 고속 랜더링 기술, 구글 AMP  (0) 2016.12.08
웹의 Native 化, PWA(Progressive Web Apps)  (0) 2016.12.08
HTTP/2 (고성능 HTTP)  (0) 2016.12.05
[DA] 데이터 품질인증  (0) 2016.11.19
Tags