Ghost 블로그 AMP 적용하기 (Disqus, Google Analytics AMP에서 사용하기)

AMP

AMP(Accelerated Mobile Page)빠르게 렌더링되는 정적 콘텐츠용 웹페이지를 만드는 한 방법이다1. 최근에는 예전보다 더 많은 모바일 웹 페이지가 만들어지고 있고, 컨텐츠 역시 이전과 달리 대량의 컨텐츠가 전달되면서 모바일 웹 페이지의 성능 향항에 대한 연구가 많아지고 있다. 모바일 디바이스라는 제한된 환경에서 웹 페이지의 성능을 빠르게 하기 위해서 몇가지 제약사항을 만들어 그 제약사항 안에서 최적의 성능을 발휘하게 하는 것이다.

AMP가 성능을 향상시키는 방식

  • Allow on asynchronous scripts : 비동기 스크립트만 허용
  • Size all resources statically : 모든 리소스크기를 정적으로 지정
  • Don't let extension mechanisms block rendering : 확장 메커니즘이 렌더링을 차단하지 않음
  • Keep all third-party JavaScript out of the critical path : 모든 타사 JavaScript를 주요 경로에서 제거
  • All css must be inline and size-bound : 모든 CSS는 반드시 인라인으로 제한된 사이즈로 만듦
  • Font trigger must be efficent : 글꼴 트리거는 효율적이여야 함
  • Minimize style recalculations : 스타일 재계산 최소화
  • Only run GPU-accelerated animations : GPU 에니메이션만 실행
  • Prioritize resource loading : 리소스 로드의 우선순위 지정
  • Loading page in an instant : 즉시 페이지 로드

자세한 설명은 AMP Project 한글 문서 중 AMP가 성능을 향상시키는 방식을 참조하는 것으로 대신한다. 이미 AMP Project의 문서가 한글로 많이 번역이 되어 있는 상태이다.

Ghost에서 AMP 활성화

Ghost 블로그에 AMP를 적용하는 것은 매우 쉽다. 최신버전 Ghost에는 AMP Support 기능이 추가 되었기 때문이다. Ghost의 Dashboard에서 General 메뉴를 클릭하면 AMP Support 체크박스가 보인다. 이 것을 체크하고 저장하면 AMP가 활성화 된다. AMP 페이지 적용을 확인하려면 브라우저에 http://포스트slug/amp/ 로 접근해보면 된다. 예를 들어서 http://blog.saltfactory.net/ghost-s3-storage/ 글이 있다면 AMP 모드는 http://blog.saltfactory.net/ghost-s3-storage/amp/ 로 접근하면 된다.2

Google 검색 엔진에서는 AMP 페이지를 표시해준다. 여러분의 사이트가 AMP로 만들어졌다면 앞으로 검색 결과에서 확인할 수 있다. 이 사이트는 AMP를 지원하고 있고 해당 페이지를 검색엔진에서 확인하면 AMP로 만들어진 사이트인것을 확인할 수 있다.

Ghost에서 AMP URL로 접근하면 기존의 theme가 아닌 AMP 전용 theme가 적용되어 나타나는 것을 확인할 수 있다.

AMP는 위에서 잠시 살펴본대로 제한된 리소스를 사용해서 만들어진다. 기존의 다양한 JavaScript와 CSS로 페이지를 아름답게 만들었다면 AMP는 아주 미니멀하게 만들어져야한다. CSS도 50K 사이즈로 제한이 되어 있고, JavaScript로 제한이 있기 때문이다. Ghost에서는 기본적으로 AMP tempalte을 제공하고 있고 컨텐츠는 이 템플릿에 맞추어서 보여지게 된다.

Ghost AMP template 수정

만약 Ghost의 AMP 뷰를 수정하고 싶을 경우 A complete guide to AMP template 글을 참조하면 된다. AMP 뷰 템플릿 파일은 core/server/apps/amp/lib/views/amp.hbs에 존재하는데 이 파일을 열어서 수정하면 된다.

AMP 에서 Disqus Comments 문제 해결

AMP에서는 기존의 써드파티 JavaScript를 요청하듯 사용할 수 없다. 그래서 AMP 페이지 안에 Disqus Comments는 모두 비활성화 되어버려 사용할 수 없게 된다. 그래서 Disqus에서는 amp-iframe component를 사용하여 AMP 에서 Disqus를 사용할 수 있는 방법을 제시하고 있다3. 이 내용을 기반으로 Ghost의 AMP template을 수정하면 된다.

우선 core/server/apps/amp/lib/views/amp.hbs 파일을 열어 <section class="post-content">{{amp_component}}</section> 다음 코드를 추가한다.

<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"resizable src="{{url}}">  
</amp-iframe>

<div id="disqus_thread"></div>  
<script>  
window.addEventListener('message', receiveMessage, false);  
function receiveMessage(event)  
{
    if (event.data) {
        var msg;
        try {
            msg = JSON.parse(event.data);
        } catch (err) {
            // Do nothing
        }
        if (!msg)
            return false;

        if (msg.name === 'resize') {
            window.parent.postMessage({
              sentinel: 'amp',
              type: 'embed-size',
              height: msg.data.height
            }, '*');
        }
    }
}
</script>  
<script>  
    /**
     *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
     *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
     */
    var disqus_config = function () {
        this.page.url = window.location;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = window.location.hash; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    (function() {  // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');

        s.src = '//EXAMPLE.disqus.com/embed.js';

        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>  

Ghost의 AMP는 기본적인 AMP 컴포넌트를 기본적으로 로드하는데 글 내용 안에 iframe 이 있느지 판단하여 amp-iframe 을 사용하는 JavaScript를 <head></head>안에 자동으로 추가한다. 만약 Ghost를 사용하지 않는다면 다음 코드를 <head></head> 안에 추가해줘야 한다.

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

Google Analytics

Google Analytics 또한 JavaScript 코드를 추가해서 사용한다. Ghost 에서 Google Analytics 를 연동하여 사용하는 방법은 Ghost 블로그 방문자 분석을 위한 Google Analytics 연동하기 글에서 소개했다. 간단히 요약하면 Google Analytics JavaScript코드를 Ghost의 Code Injection을 사용하여 삽입하는 방법이다. 하지만 이런 방법은 AMP 페이지에는 사용할 수 없다. 이 문제는 비단 Google Analytics 뿐만이 아니다. 기존에 잘 사용하던 JavaScript 코드 기반의 서비스들은 모두 사용할 수 없는 문제를 갖게 된다. AMP는 이런 문제를 AMP Components를 사용하여 해결할 수 있다고 가이드하고 있다. AMP 컴포넌트에는 built-in 부터 다양한 컴포넌트가 존재한다.

AMP 컴포넌트 중에 amp-analytics 컴포넌트를 이용하여 Google Analytics를 사용할 수 있다. 또한 Google Analytics 공식 문서에서도 Adding Analytics to your AMP pages 에서 공식적으로 amp-analytics 를 사용하여 Google Analytics를 AMP에서 사용하는 방법을 소개하고 있다4.

우리는 앞에서 Ghost의 AMP 뷰를 수정하기 위해서 core/server/apps/amp/lib/views/amp.hbs 파일을 수정해야한다고 소개했다. 이번에도 이 파일을 열어서 다음 코드를 <body class="amp-template"></body> 안에 추가한다.

<amp-analytics type="googleanalytics">  
    <script type="application/json">
    {
    "vars": {
        "account": "구글 Analytics 트래킹 아이디"
    },
    "triggers": {
        "trackPageview": {
        "on": "visible",
        "request": "pageview"
        }
    }
    }
    </script>
    </amp-analytics>


여기서 account에는 Google Analytics에 등록한 사이트의 트래킹 아이디를 입력하면 된다. AMP 페이지가 아닌 곳에서 사용하던 이전 코드를 잠시 살펴보자. 이전 코드에서 사용하고 있는 트래킹 코드를 그대로 사용하면 된다.

<script>  
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-8647285-2', 'auto');
  ga('send', 'pageview');

</script>  

마지막으로 amp-analytics 컴포넌트를 사용하기 위해 <head></head> 안에 다음 코드를 추가한다.

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

모든 설정이 끝났다. 이제 시간이 지나면 AMP 페이지로 유입되는 트래픽정보도 Google Analytics 통계에 반영이 될 것이다.

결론

Ghost는 지속적인 업데이트가 진행되고 있다. 최근 Ghost는 모바일에 최적화된 성능을 보장하기 위해서 AMP(Accelerated Mobile Page)를 제공하기 시작했다. Ghost에서 AMP를 적용하는 것은 매우 간단하다. Dashboard에서 AMP Support에 체크만 하면된다. 하지만 만약 DisqusGoogle Analytics를 사이트에서 적용하고 있다면 AMP 페이지에서는 더이상 사용할 수 없다. 이 문제를 해결하기 위해서는 AMP Components 를 사용해야한다. Disqus는 amp-iframe 컴포넌트로 Google Analytics는 amp-analytics 컴포넌트로 사용할 수 있다.

참조