Web関連

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

 

昨年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)の使い方

ぶっちゃけ、iPhoneとXperiaどっちが良いの?前のページ

One to Oneマーケティングへの道(2)~個をターゲットにした広告「DSP」~次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. 新型コロナウイルスで日本の働き方改革が起こる
  3. AIに求められているものは、実は意外な物だった
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    休息 ~Web担当者のためになるサイト特集~

    コラムを書き続けていると色々なところから情報収集をするため、「ため」に…

  2. Web関連

    HTML5の最新技術を知ろう!

    今回は、html5の技術を使って作られたゲームを紹介させいただきます。…

  3. Web関連

    料理が上手い人は仕事も出来るのか

    今回はちまたでまことしやかに囁かれている「料理が上手い人は仕事もできる…

  4. Web関連

    趣味で生活!!youtuberという職業

    休日に料理をしようとチャーシューを作ったIAの加藤です。…

  5. Web関連

    地方が本気出してきた!やはり動画のインパクトは強い・・・!

    以前、こちらのコラムで、広島県尾道市が猫の目線で街をPRするおもしろマ…

  6. Web関連

    音楽だけじゃない!映像美にもこだわったミュージックビデオベスト5

    どうも、小学生の頃は音楽が好きで常にラジカセ10個とプレイヤーを携帯し…

おすすめ記事

最近の記事

  1. DX(デジタルトランスフォーメーション)・デジタルシフトへの…
  2. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  3. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  4. 非接触がこれからの常識。ウィズコロナ・アフターコロナはIoT…
  5. キャッシュレス決済はウィズコロナでのウイルス対策に繋がってい…

アーカイブ

  1. Web関連

    やっと追いついた!マンガやアニメで描かれた近未来のウェアラブルデバイスのご紹介。…
  2. Web関連

    楽にできる?!レスポンシブWEBデザイン
  3. Web関連

    なぜ2MBなの!?ビジネスマナーの意外な理由
  4. AI関連

    新しい時代のビジネスモデル「デジタルトランスフォーメーション(DX)」とは?
  5. Web関連

    進化する電子マネー
PAGE TOP