Webページ高速化プロジェクトAMP│東京のWeb制作会社のAMP関連コラム

Columnコラム

SEO・SEM

モバイルページの超高速化!? AMP(Accelerated Mobile Pages)とは?

モバイルページの超高速化!? AMP(Accelerated Mobile Pages)とは?

2016/05/17
このエントリーをはてなブックマークに追加

kishizawa_201601_1_01.png

昨年4月のモバイルフレンドリーの導入から、Webサイトのスマートフォン対応が進んだのではないでしょうか。
また、Webサイトの高速化もSEOの重要な要素となっており、弊社のWebサイトでもGoogleページスピードインサイトからの改善提案に四苦八苦。リッチコンテンツと高層化は相反することもあり、苦戦を強いられました。

さて今回は、昨年後半から騒がれ始めた「AMP」について説明したいと思います。

"AMP Accelerated Mobile Pages (アクセラレイティッド・モバイル・ページ)とは、GoogleとTwitterが共同で立ち上げたモバイル端末でのWebページ高速化プロジェクトのこと https://www.ampproject.org/ "

AMPとは?

GoogleとTwitterが共同で立ち上げたモバイル端末でのWebページ高速化プロジェクトのことのことで、「 Accelerated Mobile Pages 」の略になります。
・AMP HTML
・AMP JS
・AMP CDN
で構成されます。

詳細は以下のサイトで確認することが出来ます。
https://www.ampproject.org/

といっても英語サイトしか無いですが、リファレンスなどがメインですのでなんとなく理解できるのでは。
AMPに対応しているページがGoogle、Twitterにキャッシュされ高速で表示されます。また、プレレンダリングにより読みこんだ時点でレンダリングされた状態になるため、表示処理も高速化されます。
JSもCDNから共通のJSを読み込むため、対応したページを既に見ている場合、キャッシュされるため読み込みにかかる時間が短縮されるなど、様々な技術により高速化を実現しているようです。

AMP対応させるには

実際に対応させるにはHTMLを書き換える必要があります。
かなり制約があるため、ニュースなどの単純フォーマットなニュースサイトに適しているようです。(Publisher向けのようですね)
日本では朝日新聞、毎日新聞、産経新聞などのサイトがAMP HTMLに対応しているようです。
WordPressでもプラグイン開発中とのこと。

仕様の詳細はGitHabを参考にしてください。
https://github.com/ampproject/amphtml

実際の制約ですが、、、
・JSが利用できない ※https://cdn.ampproject.org/v0.js 以外読み込めないです。
・link要素もcanonicalのみ ※必然的にCSSはインライン記述となります。
・formタグ禁止
・imgタグは専用のカスタムエレメンツを利用
などと、色々厳しいです。

基本構造は以下の通り

<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>

宣言が変わります。 なんと「 ⚡ 」稲妻が入ります!

その他、viewport、JSの読み込みも必須になります。
正しく書かないとエラーになります。

<img>タグも、<amp-img>と記述します。WidthとHeightの指定が必須となります。

GoogleAnalyticsはJSが利用できないので、<amp-pixel>タグを利用して画像ビーコンを読み込みます。詳しくはGoogleAnalyticsの「Measurement Protocol」を確認してみてください。

と言った具合に、制約が多く対応するには結構な手間がかかります。

日本ではまだ・・・

日本のGoogleではまだ未実装ですので、これからですね。
基本的に米国で実装されたものは日本に来ますので、動向をチェックして事前対応しておくことで、先取りできるのではないでしょうか。SEO関連では米国の動向をチェックするのが重要です。

以下の様な感じになるみたいです。
https://googleblog.blogspot.jp/2015/10/introducing-accelerated-mobile-pages.html

Web制作でお困りの方はWeb制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

SEO対策・SEMサービス

Webコンサルティングサービス

Webマーケティング支援

関連コラム

W3Cチェック(validator)の使い方

text_totop