플랫폼 개발팀 기술 블로그

Google AMP 개요 편 본문

Article

Google AMP 개요 편

DevStream 2019. 5. 30. 11:55

Google AMP란?

 

AMP는 Accelerated Mobile Pages의 약자로 가속화된 모바일 페이지라고 직역 할 수 있다. Google에서 공개한 오픈소스 라이브러리로 특징으로는 정적 콘텐츠의 빠른 렌더링이 가능한 웹페이지를 제작 할 수 있도록 규격화된 기능을 지원한다. 기존의 웹 페이지 기술을 그대로 사용하고 있고 다양한 브라우저에서 지원되고 있다.

 

 

AMP를 왜 사용하는 것일까?

 

  • 웹 사이트의 성능최적화와 CDN을 무료로 사용 할 수 있다.
  • AMP가 적용된 웹 사이트는 구글 검색 순위에서 우선적으로 노출 될 수 있다.
  • 웹 사이트 제작 도구와 다양한 템플릿을 무료로 제공하고 있다.

 

 

AMP의 주요 기능

 

Google AMP는 웹 페이지를 빠른속도로 렌더링 하기위해 html코드를 작성하기 위한 규격이 있다. AMP HTML과 AMP JS라이브러리 Google AMP 캐시를 사용한다.

 

  • AMP HTML : AMP전용 HTML로 페이지 내의 태그의 형태는 보통의 HTML 코드와 같으나 일부 HTML 태그들은 AMP 전용태그가 사용되고 있다.
  • AMP JS : AMP JS 라이브러리는 모든 AMP 성능 권장사항을 구현하였고 리소스 로딩을 관리하며 맞춤 태그를 지원하고 있어 빠른 페이지 렌더링을 보장한다.
  • Google AMP 캐시 : AMP HTML페이지를 가져와 캐시하여 자동으로 페이지 성능을 개선한다. 문서와 모든 JS파일 및 이미지가 하나의 출처에서 로드되므로 효율성이 극대화 된다.

 

 

AMP의 작동 원리

 

AMP 페이지의 렌더링이 빠르게 이루어지는 이유는 AMP가 가지고 있는 일련의 규격에 맞추어 작동하고 있기 때문이다.

 

  • 비동기 스크립트만 허용 : 코드에 따라 DOM 구성을 차단하고 페이지 렌더링을 지연시키는 부작용이 있기때문에 규격화 된 커스텀 AMP 요소를 통해 구현해야 한다.
  • 모든 리소스의 사이즈를 정적으로 지정 : 외부 리소스 다운로드 전 HTML 요소들의 사이즈를 지정해주면 리소스 다운로드 여부와 관계없이 레이아웃먼저 로드할 수 있다.
  • 외부 리소스에 의한 렌더링 차단 방지 : AMP는 기본적으로 유튜브, 트위터, 인스타그램같은 외부 리소스의 로드를 위해 커스텀 태그를 지원하고 있고 커스텀 태그 사용 전 아래와 같이 스크립트를 로드 해주어야 한다.
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
  • 기본 페이지에서 모든 외부 자바스크립트 제외 : 외부에서 로드되는 자바스크립트는 동기식 로딩이 많아 페이지 로드에 지연을 발생 시킬 수 있다. 때문에 기본 페이지 내의 iframe에서만 외부 자바스크립트를 허용한다.
  • 모든 CSS는 Inline 방식이며 크기가 한정됨 : CSS는 모든 렌더링과 페이지 로드를 차단하고 용량이 과도하게 커지는 경향이 있다. 때문에 AMP에서는 CSS의 작성을 인라인 스타일만 허용하고 있고 용량 또한 50KB 이하로 제한하고 있다.
  • 효율적인 폰트 트리거 : 웹 폰트는 용량이 매우 크기때문에 성능을 위해서는 웹 폰트 최적화가 필수이다. AMP에서는 페이지 로드 시 폰트부터 다운로드 후 자바스크립트와 인라인 스타일 시트가 로드된다.
  • 스타일 재계산 최소화 : 요소의 크기를 지정할 때마다 스타일 재계산이 트리거 되는데 브라우저 페이지에서 전체 페이지를 다시 레이아웃해야 하기때문에 페이지 로드 속도가 느려진다. AMP 페이지에서는 DOM 읽기가 모두 끝난 후에 스타일이 재계산 되므로 프레임마다 최대 한 번만 재계산 되어 성능 저하를 방지 할 수 있다.
  • GPU 가속 애니메이션만 실행 : 성능 향상을 위해 레이어 애니메이션은 GPU에서 처리하도록 하고 페이지 레이아웃 업데이트 구간에서는 성능 저하가 발생할 수 있으므로 애니메이션에 관련하여 CSS에 대한 규칙을 지정하고 GPU 가속이 적용되는 애니메이션만 사용하도록 한다.
  • 우선순위별 리소스 로드 : AMP는 모든 리소스에 대한 다운로드를 제어하며 리소스 로드에 우선순위를 지정하여 필요한 리소스는 로딩하고 바로 로딩할 필요가 없는 리소스는 데이터를 미리 가져와서(prefetches) 로드 대기 한다.
  • 즉각적인 페이지 로드 : AMP는 대역폭과 CPU 사용량을 줄이도록 최적화 되어 있으며 사용자가 명시적으로 이동 의사를 밝히기 전에 목표 페이지를 렌더링해 두었다가 실제 페이지를 선택 할 때 즉시 로드 할 수 있다.

 

 

AMP 페이지의 기본구조

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script type="application/ld+json">
    {
     "@context": "http://schema.org",
     "@type": "NewsArticle",
     "mainEntityOfPage":{
       "@type":"WebPage",
       "@id":"https://example.com/my-article.html"
     },
     "headline": "My First AMP Article",
     "image": {
       "@type": "ImageObject",
       "url": "https://example.com/article_thumbnail1.jpg",
       "height": 800,
       "width": 800
     },
     "datePublished": "2015-02-05T08:00:00+08:00",
     "dateModified": "2015-02-05T09:20:00+08:00",
     "author": {
       "@type": "Person",
       "name": "John Doe"
     },
     "publisher": {
       "@type": "Organization",
       "name": "⚡ AMP Times",
       "logo": {
         "@type": "ImageObject",
         "url": "https://example.com/amptimes_logo.jpg",
         "width": 600,
         "height": 60
       }
     },
     "description": "My first experience in an AMPlified world"
    }
    </script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

 

 

AMP 페이지 필수 요소 설명

 

  • AMP 페이지임을 명시
    • 최상위 태그로 <html ⚡ > 또는 <html amp>을 선언하여 AMP 문서로 인식 될 수 있도록 한다.
<html ⚡> 
<!-- 또는 -->
<html amp>
  • AMP JS 라이브러리 로드
<script async src="https://cdn.ampproject.org/v0.js"></script>
  • AMP 보일러플레이트 코드 추가
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

 

 

AMP 이미지 태그 설정

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
  • AMP에서는 이미지를 추가 하기 위해서는 전용 태그를 사용해야 한다.
  • 이미지를 추가 할 때 사이즈(width, height)는 반드시 지정해야 한다.
  • 이미지 표기를 위해 frame, object, param, embed 등 일부 html태그는 AMP에서 사용 할 수 없다.

 

 

AMP 커스텀 CSS 설정

<style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }
</style>
  • AMP 페이지에서 사용하기 위한 커스텀 CSS를 설정한다.
  • 커스텀 CSS는 <head> 태그 내부에 인라인으로 설정 되어야 한다.
  • 커스텀 CSS는 최대 50KB를 넘을 수 없다.
  • !important를 사용할 수 없으며 외부 스타일 참조가 불가능하다.

 

 

AMP Link 페이지 연결

 

  • AMP가 적용된 페이지와 적용되어있지 않은 페이지를 둘 다 가진 사이트가 존재하고 Google 검색에서 AMP가 적용되어있지 않은 페이지를 찾았을 때 AMP가 적용된 페이지로 연결 할 수 있는 기능이다.
  • AMP가 적용되어있지 않은 페이지에 amp페이지를 링크하고 amp 페이지에는 non-amp페이지를 링크한다.
<!-- 아래 코드를 NON-AMP 페이지에 추가 -->
<link rel="amphtml" href="/article.amp.html">
<!-- 아래 코드를 AMP 페이지에 추가 -->
<link rel="canonical" href="/article.html">
  • AMP 페이지 하나만 존재하더라도 canonical 링크를 반드시 페이지에 시켜주어야 한다.
<link rel="canonical" href="/article.html">

 

 

AMP 샘플 페이지 구동

 

  • 상단에 게재한 샘플 페이지 코드 실행 결과

 

 

결론

 

  • 장점
    • 웹 페이지의 최적화를 통해 성능 향상을 기대 할 수 있다.
    • 구글 검색에서 상단에 노출될 확률이 높다.
    • 다양한 템플릿 제공으로 빠르게 웹 사이트를 만들어낼 수 있다. (흡사 부트 스트랩 같은 느낌)
    • 구글 애널리틱스 연동을 amp-analytics 스니펫으로 제공하고 있고 수집 정보를 유연하게 설정 할 수 있다.

  • 단점
    • 거의 모든 태그가 규격화 되어있고 일부는 AMP전용 태그를 사용해야 한다.
    • AMP 전용 JS 라이브러리를 사용하고 커스텀하게 자바스크립트를 사용 할 수 없다.
    • 커스텀 CSS는 인라인으로만 사용해야 하며 50KB를 넘지 않아야 하고 !important같은 일부 요소는 사용이 금지 되어있다.
    • 복잡한 자바스크립트 코드 또는 역동적인 애니메이션 효과가 포함된 페이지는 AMP화 시키기 어렵다.

 

 

Google AMP 개요 편

끝.

 

'Article' 카테고리의 다른 글

Slack File Upload API 발송 횟수 제한(Rate Limit) 해결하기  (5) 2020.11.22
Scouter Slack Plugin 알림 설정하기  (2) 2020.06.03
Docker : Docker Compose 편  (0) 2019.04.05
자연어처리 - 데이터 정제  (0) 2019.03.22
REST API 디자인 가이드 적용기  (1) 2019.03.08
'Article' Related Articles more
Comments