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. 新しい販売形態であるDtoCについて考えてみる
  3. AIに求められているものは、実は意外な物だった
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    整理術を磨くと仕事だけでなくWeb制作の効率も上がる?!佐藤可士和から学ぶ仕事の取り組み方~第1回~…

    私たちの身の回りにはデザインされているもので溢れています。商品…

  2. Web関連

    Web制作にも使えるかもしれない面白い心理学を集めてみました。No,2

    前回はWeb制作にも使えそうな面白い心理学を紹介しました。今回は営業に…

  3. Web関連

    気づけないWEBサイトの欠点をAIが分析・提案!

    WEBサイトの分析はAIにお任せ!Webサイトを運用していくには、…

  4. Web関連

    「お客様は神様!」と言うのはクレーマーだけ~では顧客満足度はどう上げる?~

    「お客様は神様」というのはクレーマーの常套句だ、という話があります。…

  5. Web関連

    Web制作会社に働く担当者のつぶやき。フルスピードで仕事をするには・・・。

    年末年始も終わり、年明けの挨拶をしてひと段落という時期ですね。皆様…

  6. Web関連

    WordPressの予約公開終了・予約上書きが出来るプラグイン「Advanced Schedule …

    WordPressの素晴らしいプラグインを紹介している岸沢です。今…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    Web制作工程におけるジオターゲティング(Geo Targeting)について考…
  2. AIさくらさん

    【人工知能(AI)×販売店】店員がいなくても!?人工知能(AI)が接客
  3. Web関連

    Webアクセシビリティの重要性
  4. Web関連

    WordPressのプラグイン PS Disable Auto Formatti…
  5. Web関連

    知らずに利用しているキュレーションサービス!
PAGE TOP