Web関連

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

0

 

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

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    【Web制作】Googleが推奨するレスポンシブはホントにいいの?「レスポンシブに適するサイト/適さ…

    食事を健康的な物に切り替えて、最近少し痩せてきた吉田です。今回はW…

  2. Web関連

    【Web制作】モバイルファーストとは?スマホが手放せない現代でのWeb設計

    こんにちは!デザイナーの勇希です。普段は主にスマートフォンサイ…

  3. Web関連

    これだけは覚えておいてほしい、地味に使えるExcelの時短ワザ3選。

    こんにちは!ティファナコラム編集部 担当の秋田です。今回のテーマは「…

  4. Web関連

    Web制作会社に発注するときはここに注意!!ベスト5

    今回はWeb制作を制作会社に発注する際にぜひ気を付けておきたい5つのポ…

  5. Web関連

    ティファナも使っているCMS、Movable Typeの特徴とは?

    CMSを使えば、Webサイトの運用・管理が簡単にできます。ただ、C…

  6. Web関連

    One-to-Oneマーケティングの新しい形、注目のweb接客とは

    みなさん御用達のECサイトですが、様々な趣味趣向の…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    顔までも分かる!?DNAの可能性とは。
  2. Web関連

    身近なWebビジネスを考えてみた。~飲食店のタッチパネル注文~
  3. Web関連

    オウンドメディアの参考にも? ついつい読みたくなるwebサイトのコラムを書くコツ…
  4. Web関連

    就活生目線から見た!こんなリクルートサイトが使いやすい!
  5. Web関連

    ビッグデータってどう活用されているの?医療業界での活用方法とは
PAGE TOP