Posts /

AMP(Accelarated Mobile Page)

05 Apr 2017

동작 원리

1. AMP에 포함되는 모든 JS는 비동기 방식으로 실행된다

2. 이미지, 광고, iframe같은 외부 리소스들의 사이즈와 위치 지정필요

3.커스텀 스크립트를 사용하는 경우 커스텀 태그를 지정해주어야 한다

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

4. 외부 라이브러리들이 렌더링 동작에 방해되지 않도록 한다

5. 모든 CSS스타일은 인라인이어야하고 사이즈가 제한되어 있다

6. 웹 폰트 요청은 효율적으로 해야 한다

7. 스타일 재계산 최소화

8. GPU가속화 애니메이션만 사용

9. AMP는 리소스 로딩 순서를 조정한다

10. 페이지 즉시 로딩하기

AMP 코드 예시

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    
    <!-- AMP 자바스크립트 라이브러리 로딩 --> 
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    
    <!-- AMP CSS 스타일 -->
    <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>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>
<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4" poster="myvideo-poster.jpg">
  <div fallback>
    <p>Your browser doesn’t support HTML5 video</p>
  </div>
  <source type="video/mp4" src="foo.mp4">
  <source type="video/webm" src="foo.webm">
</amp-video>
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

주의할 점


유효성 검사

• 해당 문서의 AMP규칙 준수 여부는 URL끝에 #development=1을 추가하여 개발자도구 콘솔에서 검사가능


AMP 검색과 배포

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">

Twitter Facebook Google+