Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Google AMP No Standalone対応前に知っておくべきポイント(2017年5月版)

LINEフロントエンドレンジャーのWeb開発術 第8回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/06/21 14:00

 本連載はLINEのフロントエンドエンジニアのチームがWeb開発において注目・活用している技術を紹介します。今回はGoogleのAMP(Accelerated Mobile Pages)対応についてお話します。実際の業務で「No Standalone AMP」実装をおこなう前にエンジニアが認識しておきたい、各種ポイントをまとめた記事となっています。

目次

注記

  • 本記事は2017年5月現在の情報です。
  • 「No Standalone AMP」は造語です。「Standalone AMP」に対してそれ以外の実装方式に名称がなかったため、本記事ではこの単語を使わせていただきます。
  •  先日LINE株式会社で行われた、Front-end Developer’s Workshopで発表した内容の改訂版となります。

はじめに

 AMPは「Accelerated Mobile Pages」の略称で、アンプと呼ばれています。AMPという単語の定義が広く実態が掴みづらいので、本記事では下記の定義で話しを進めます。

 
単語 定義
Accelerated Mobile Pages Project モバイル端末で画面を高速表示することを目的として、2015年10月にGoogleとTwitterが共同で発足したプロジェクト。
AMP Accelerated Mobile Pages Projectで高速化のために定義された仕様。
AMP HTML AMP実装時に利用するHTMLベースのフレームワーク(カスタム要素を使い機能拡張したHTML)。
AMPページ AMP HTMLで実装されているページ。
非AMPページ 通常のHTMLで実装されているページ。
AMP実装 「No Standalone AMP」「Standalone AMP」を含んだ、first-party対応。
AMP対応サービス Google SearchTwitter momentsはてなブックマークなどのAMPのサードパーティ対応を行っているサービス。

AMPとは?

 Accelerated Mobile Pages Projectはスマートフォン端末でWebページを高速表示するために発足されたプロジェクトです。AMPに基づきHTMLを作成することで、AMP対応サービスで高速にWebベージを表示することができます。

 対応方法はシンプルです。HTMLの変わりにAMP HTMLと呼ばれるAMPの仕様に基づいたHTMLを作成し、サーバーにアップロードすることで対応できます。

 AMP HTMLは通常のWeb browser上でも動作し閲覧できます。ChromeなどのWeb browserで挙動を確認しながら作業を進められます。

(引用元:『Google モバイル検索が Accelerated Mobile Pages に対応しました』)

 上記の設定が完了すると、GoogleはAMPページをクロールしHTMLや画像ファイルのキャッシュを専用のCDNサーバーに保存します。その後、Google検索結果に反映され、Google AMP Viewerで高速でページが表示されるようになります。

No Standalone AMPとは?

 AMPには2種類の実装方式があります。「No Standalone AMP」と「Standalone AMP」です。

 
単語 説明
No Standalone AMP 既存のページとは別にAMP HTML実装したページを用意して、AMPページをGoogleに認識させる手法です。2017年5月現在で主流になっている実装方法です。
Standalone AMP PC、SP(Mobile)AMPを1つのAMP HTMLで実装する手法です。2017年4月に公開された、AMP Startで実装されているものが「Standalone AMP」です。

 私が注目しているのは「Standalone AMP」です。

 簡単なランディングページは「Standalone AMP」で実装できる未来が来たらいいと思い、2016年10月ごろから検証を進めています。Googleのモバイルファーストインデックス対応が来年めどで実施される予定なので、まだ積極的にはおすすめできませんが今後に期待ですね。

AMP実装をするとどうなるのか?

 AMP実装を行うことで、下記の2点の効果が得られます。

パフォーマンス改善

 ページのレンダリングパフォーマンスが2~4倍程高速化されます。私の検証しているページでも約3倍のパフォーマンス改善がされました。

 AMP HTMLはHTMLの初回ロード時にネックとなる、各リソースのロードとCSSのレンダリングパフォーマンスにコミットしたフレームワークです。Webページの高速表示で高い効果を発揮します。さらに、各サービスでプリロードやCDNのキャッシュ対応を施してくれるので、表示パフォーマンスが95%改善されたという報告もでています。

Googleの検索結果に優遇表示

 リッチカード(carousel UI)で表示される特別枠にページ情報を追加で表示できます。この特別枠に表示されることでアクセス数の増加を見込めます。「AMP = SEO」と認識される理由の一つとなっています。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 姜 勝陽(LINE株式会社)(キョウ ショウヨウ)

    LINE株式会社に在籍しているフロントエンドエンジニア。LINE内Webアプリを担当。2002年からSEOの情報を趣味の一環として収集している。 最近はサーバーサイドレンダリング無しで、Single Page ApplicationをGoogleに認識させる為の検証を進めている。

バックナンバー

連載:LINEフロントエンドレンジャーのWeb開発術

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5