AMPとプログレッシブウェブアプリの連携でウェブをさらに爆速に from #GDSTokyo

[レベル: 上級]

東京都港区のコクヨホールで4月26日に開催された『 Google Developers Summit Tokyo 2016』に参加してきました。

開発者向けのイベントですが、テーマは「Progressive Web Apps(プログレッシブ ウェブ アプリ、以下PWA)」で、ウェブに関連してくる注目の技術です。
Googleがプッシュしていることもあり、Googleのエキスパートたちの講演を聴きに行くことにしました。

この記事では、山口能迪(やまぐち よしふみ)氏によるAMPをトピックにしたセッションのなかから、特に、僕の興味を引いた2つをレポートします。

Google Developers Summit Tokyo 2016で講演する山口能迪さん

AMPキャッシュさせるには構造化データが必須

AMPコンテンツとしてGoogle検索に表示されるには、有効なAMP HTMLでページをマークアップすることが大前提です。
そして、有効な構造化データも必要になります。

もっとも、これは新しい情報ではありません。
このブログで触れたことがあります。

気を付けたいのは、AMP用の構造化データが正しく設定されていないとGoogleのAMP CDNにキャッシュされない点です。
Googleが公開しているAMP CDNにキャッシュされなければ、当然Googleのモバイル検索には表示されていません。

しかしGoogle以外のプラットフォームでも、AMPコンテンツとして利用してもらえないことがありえます。

たとえば、TwitterはてなブックマークはアプリでAMPコンテンツを表示するようになっています。
しかしバックグラウンドでは、TwitterもはてブもGoogleのAMP CDNからAMPキャッシュを取得しています。

GoogleのAMP CDNにキャッシュされるには有効なAMP HTMLと構造化データが要求されると先ほど説明しました。
したがって、この2つの要件を満たしていなければGoogleのAMP CDNにキャッシュされないので、Twitterでもはてブでも利用されないということになります。
TwitterのAMPは日本ではまだ提供されていないのでほとんど関係しないとしても、はてブでもAMPページを表示させたいのであればやはり構造化データは必須です。

となると、GoogleだけでけではなくTwitterでもはてなブックマークでもAMPコンテンツとして利用されるのは、今のところは、ニュースやブログの記事だけに限られますね。
Google以外のプラットフォームでも、Googleが定めたAMP仕様に従わないといけないケースが増えてきそうです。

AMP + PWAでさらに爆速に

AMPとほかのテクノロジーを組み合わせることで、さらに高速化を目指す取り組みも山口氏は紹介しました。
今回のイベントの主テーマであるPWAとの連携です。

AMPページでService Workerを登録させることが可能です。
amp-install-serviceworker カスタムタグを使います。

どんな点で効果を発揮するかというと、”アプリ シェル”のプリフェッチやキャッシュが可能になることです。
“アプリ シェル”はどのコンテンツにも共通しているページの枠(普通のウェブページでいうなら、ヘッダーやフッター、サイドバーなどの共通テンプレート部分と考えてください)です。

Service Workerが稼働していると、あなたのAMPサイトにユーザーが再度アクセスしたときに、AMP HTMLを取得するよりも前にアプリ シェルをService Workerの機能によって返すことが可能になります。
ただでさえ高速な表示のAMPが、Service Workerの力を借りてさらに高速になります。

ただし、AMPでのService Workerはまだ実験中とのことです。
正式に実装可能になるかどうかはわかりませんが、PWAとAMPの両方を導入しているのであれば期待できる拡張になりそうです。

amp-install-serviceworker タグの詳細はAMPプロジェクトの公式サイトで確認できます。

おまけ: AMP対応パブリッシャーとして紹介

ここはおまけです。

山口さんのセッションで、AMP対応しているパブリッシャー紹介のスライドの中にこの海外SEO情報ブログが含まれていました。

AMP対応したパブリッシャー

僕以外はだれも気にもとめなかったと思いますが、名だたる大手のメディアの中に混ぜていただいて光栄なことでございます。
山口さん、ありがとうございました。:)