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

関連記事

  1. Web関連

    ABテストでより良いサイトに!

    皆さんはABテストをご存知でしょうか?名前を聞いて、大体の予想がつ…

  2. Web関連

    初心者Webデザイナーおすすめ!Webデザインのコツ

    今回は、初心者Webデザイナーの方々に向けて、Webデザインのコツをご…

  3. Web関連

    見ているだけでお腹が空く!?バレンタインにちなんだWebサイトまとめ

    こんにちは。先日またTwitterアカウントが1つ増えました、SNS大…

  4. Web関連

    QRコードとO2Oマーケティング

    今や街中で見かけるQRコードですが、実際にどのようなものなのでしょうか…

  5. Web関連

    テレビCMとは違う?動画広告の面白さとは

    皆さんは1日にテレビ以外の動画をどれぐらい見ていますか?1時間も見…

  6. Web関連

    健康診断を行う理由と未来

    健康診断といえば年に一度の行事レベルと考えている従業員の方もいらっしゃ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    システム開発で大事なテストプロセス改善のポイント
  2. Web関連

    iPhone 6sが気になる!!
  3. Web関連

    ターゲットを見極めてWebサイトの売り上げ大幅アップ!「男女」のニーズを把握する…
  4. AI関連

    AIをブラックボックスにしないために〜透明性を確保するためには
  5. Web関連

    【Web制作】Googleが推奨するレスポンシブはホントにいいの?「レスポンシブ…
PAGE TOP