Google、AMPに完全対応した爆速表示の広告 A4A を公開

[レベル: 上級]

Google (AMP Project) は、AMPページでも高速で表示される広告として、AMP for ads、略称 “A4A” を公開しました。
メインコンテンツの表示を遅らせることなく、広告のすばやい表示を A4A は実現しています。

広告表示も爆速

A4A広告 と A4A ではない広告の表示速度にどのくらいの違いがあるかをデモンストレーションしたアニメーションを、AMP Projectが公式ブログの記事で紹介しています。

左が A4A ではない普通の広告で、右が A4A 広告です。
ページの上部にデモ用の青いバナー広告が表示されます。

A4A vs. Non-A4A

検索結果をタップしてページに飛んだあと、A4A ではない普通の広告が完全に表示されるまでには3.12秒かかっています。
それに対して、A4A 広告は0.5秒で表示が完了しています。

訪問者に広告をしっかりと見てほしい広告出稿者と広告掲載者にとっては、広告がすばやく表示されることはとても重要です。
かといって、広告表示を優先するあまりページ本体の表示を遅くしてしまったのでは、「限りなく速く」というAMPの基本精神を無視してしまうことになります。

ページの表示速度を犠牲にすることなく広告の高速表示も可能にしたのが、A4A、つまり AMP for ads になります。

A4A を速くしている要素

AMP for ads の高速表示を可能にするために、いくつもの技術が用いられています。
簡単に説明します。

リクエストとレンダリングを分離

広告のリクエストとレンダリングを完全に分けています。

サーバー側では、広告のリクエストが発生するとオークションなどの処理が発生し時間がかかることがあります。
一方クライアント(ブラウザ)側では、受け取った広告のレンダリングのためにCPUやメモリなどのリソースを消費するので、ページのメインコンテンツのレンダリングを遅らせる原因になります。

A4A では、両者を分離することでページのレンダリングが遅くなることを防いでいます。

AMPの制限されたサブセット

A4A はAMPの仕様に従って構成されます。
しかし、すべての仕様が広告にとって必要というわけではありません。

A4A の場合は、必要な一部分だけに制限して、AMPの仕様に従っているかどうかの有効性を検証するので、バリデーションチェックの時間が短縮されます。

また一般的な広告は、その広告(のコード)がさまざまなことを自由に実行できますが、A4A においては何ができるかはAMPが完全にコントロールします。
スピードを落とすような余計なことはできないということですね。

AMP用解析の再利用

広告には、その広告専用の解析機能を実装することが珍しくありません。
3個の広告を1つのページに掲載したら、3つの解析ツール(つまりJavaScript)が稼働するかもしれません。
表示を遅くさせる原因になります。

A4A では、amp-analytics を利用して計測します。
amp-analytics を利用すれば1つのコードで複数の計測が可能です。

見えるときだけ開始

A4A 広告は、それがスクリーンの見える範囲にあるときだけに表示されます。

たとえば、ページのいちばん下にある広告は、ページを下までスクロールして表示領域に入ったたときに初めて掲載のための処理が始まります。

また状況に応じてアニメーションのフレームレートを抑えるなど、スクロールなどのユーザー体験を阻害しないような仕組みも実装しています。

AMP for adsは2週間前に公開されたばかりで、まだ正式に仕様が固まったわけではありません。
それでも、広告が重要なビジネスモデルになっているパブリッシャーにとっては、AMPで実現できる高速性を犠牲にせずに掲載できる A4A はとても魅力的に映るのではないでしょうか。

AMPはオープンソースなので、どの広告ベンダーでも A4A に対応した広告を配信できます。
これも優れた点といえます。

A4A の技術的な詳細は、Githubで確認してください。

- Google、AMPに完全対応した爆速表示の広告 A4A を公開 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki

Twitterが日本語版モーメントを開始、AMPサポートは不完全?

[レベル: 上級]

日本語版のTwitterが「モーメント (Moments)」 を開始しました
モーメントは、今話題になっているトピックに関係するツイートを”ストーリー”としてまとめて閲覧できるサービスです。

モーメントは、米国英国オーストラリアなどの国で展開していました。
新たに日本が加わったことになります。

AMPサポートは不完全?

Twitterは、GoogleとともにAMPプロジェクトで中心的な役割りを果たしています。
今年の3月には、モーメントでAMPのサポートを始めました。

日本語版のモーメントもAMPをサポートしているようなのですが、完全なサポートには至っていないようです。

AMP CDNからキャッシュを返さず

通常、AMPではコンテンツはAMP CDNからキャッシュが返されます。

しかしモーメントのAMPコンテンツは、キャッシュではなくウェブサーバーから直接返されます。

こちらは、モーメントに掲載されている産経ニュースの記事です。
産経ニュースはAMP対応しています。

AMP対応記事のモーメント

タップして元記事を読みに行くと……

モーメント経由で直接返されるAMPコンテンツ

AMPフォーマットの記事が表示されるのですが、キャッシュから返されるのではなく直接開いています。

AMPはそれだけでもそれなりに高速に表示されます。
しかし高速を本当に実現するにはCDNキャッシュは必須のコンポーネントです。

英語版のモーメントがAMPサポートを開始した当初も、AMPコンテンツをCDNキャッシュではなく直接返していました。
ですが、数日後にはきちんとキャッシュから返されるようになっていました。

ただこの記事を書いている時点では、英語版も再び直接表示するように変わっています。

AMPコンテンツの表示になぜTwitterはCDNを利用しないのでしょうか?
どんな理由があるのか知りたいものです(Twitterに知り合いがいる方は聞いてください)。

いずれにしても、Google以外でもAMPが利用される環境が少しずつですが増えてきました。
身近なところでは、はてなブックマークアプリもAMPをサポートするようになっています。

さまざまなプラットフォームで利用できるのは、AMPがオープンソースだからです。
AMP対応しているコンテンツ発行者はAMPの拡大に期待しましょう。

- Twitterが日本語版モーメントを開始、AMPサポートは不完全? -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki

次のAMPはECサイトの商品一覧ページか? Googleの協力のもとeBayがAMP対応の実験を開始

世界で最も大きいECサイトの1つ、eBayがAMP対応を始めた。eBayは、モバイル体験の向上に今年は注力しており、さらなる向上のために、”高速”がウリのAMPを利用することになった。eBayのAMP化にはGoogleも力を貸している。いつ頃、どのようにして検索結果に表示されるかは不明。

- 次のAMPはECサイトの商品一覧ページか? Googleの協力のもとeBayがAMP対応の実験を開始 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki

Google Play ニューススタンドがAMPをサポート開始

Google Play ニューススタンドのアプリがAMPをサポートするようになった。AMPに対応した記事をニュース発行者が配信している場合は、AMP記事をアプリ内で閲覧できる。

- Google Play ニューススタンドがAMPをサポート開始 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki

AMP対応で表示速度が22秒から0.7秒へ短縮、1億2500万のAMPページをGoogleはインデックスなど from #SMX Advanced 2016

米シアトルで先週参加したSMX Advanced 2016では、GoogleのAMPプロジェクトのプロダクトマネージャであるルディー・ガルフィ氏が AMPについてプレゼンしました。そのなかから、MP対応で表示速度が22秒から0.7秒へ短縮、1億2500万のAMPページをGoogleはインデックスなどのハイライトをこの記事では紹介する。

- AMP対応で表示速度が22秒から0.7秒へ短縮、1億2500万のAMPページをGoogleはインデックスなど from #SMX Advanced 2016 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki

AMP HTMLの有効性を検証するウェブUI版の公式バリデーションチェックツール

AMPプロジェクトは、AMP HTMLの有効かどうかを検証するウェブUI版のツールを公開した。これまでに提供されていた2つのバリデーションチェック方法に加わった新たなツール。validator.ampproject.orgからアクセスできる。

- AMP HTMLの有効性を検証するウェブUI版の公式バリデーションチェックツール -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki

日本のGoogleニュースもAMPサポートを開始

日本のGoogleニュースがAMP対応した記事の表示を始めまた。米国版のGoogleニュースは4月下旬にAMPをサポート開始していた。今月(6月)上旬には、英・仏・独など6か国のGoogleニュースもAMPをサポートするようになっている。なお、GoogleニュースからのAMP記事へのトラフィックはリファラーを送信せず、directとしてアクセス解析ツールに記録される。

- 日本のGoogleニュースもAMPサポートを開始 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki

AMP HTMLが有効かどうかを簡単にチェックできるChrome拡張、AMP Validatorが公開

AMPプロジェクトは、「AMP Validator」というAMPページのAMP HTMLが有効かどうかを簡単に調べられるChrome拡張を公開した。この記事では、AMP Validatorの使い方を説明する。

- AMP HTMLが有効かどうかを簡単にチェックできるChrome拡張、AMP Validatorが公開 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki

AMPページの広告成果はおおむね好調、3種類の新しい広告フォーマットを導入予定(1つはウザそう?なフライングカーペット広告)

AMPプロジェクトは、AMPページでの広告の成果と新しい広告フォーマットの導入について公式ブログでアナウンスした。AMPページに掲載した広告の成果に対するパブリッシャーの感触はおおむね良好。新たに3種類の広告フォーマットを近々導入する予定。ただ、そのうちの1つ「フライングカーペット広告」は非常にウザそうな印象。

- AMPページの広告成果はおおむね好調、3種類の新しい広告フォーマットを導入予定(1つはウザそう?なフライングカーペット広告) -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki

Google I/O 2016で発表されたGoogle検索の8つの最新情報

5月18〜19日に米サンフランシスコで開催されたGoogle I/O 2016で紹介・発表があった検索関連の8つの最新情報を過去記事を参照しながらチェックする。

- Google I/O 2016で発表されたGoogle検索の8つの最新情報 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki