AMP

AMP Accelerated Mobile Pages

AMPってなに？ Accelerated Mobile Pages コンテンツをほぼ瞬時に読み込めるようにしたHTML ページ Googleが主導のオープンソースプロジェクト

AMPはどうして早い？いくつか理由がある

1. 遅延読み込みリソースを「ユーザが見ようとしてるとき」または「アイドル状態」に読み込みをするリソースのダウンロードの優先順位をユーザが必要としている順に（画面外の画像の優先順位を下げてるとか）

2. JavaScriptは非同期普通のJavaScriptは読み込めない AMP JSってライブラリを使う事はできる

3. スタイルはインラインのみ HTMLと同時に読み込ませて、HTTPリクエストを減らすちなみに最大サイズがある（50KB?）注意！）<style amp-custom>は複数使用は不可

4. 外部リソースはサイズ指定画像、インラインフレームなどにはサイズ指定が必須ダウンロードしなくても最初にレイアウトをレンダリングできるから再計算が必要なくなる layout='responsive'を指定すれば、幅100%の画像も配置できる

5. 解析ツールはAMPで実施 AMP analyticsというものがある AMP analyticsを使うと複数の解析ツールを読み込みは1 つになるからリクエストも減るし、余計なことをしない

6. すべての文書はCDN Google AMP Cacheから配信されるプロキシベースのコンテンツデリバリネットワークだから早い　↑↑↑
! 何のことだかわからない !

#広告にも対応表示に影響が出ないようにされたAMP対応の広告のみインラインフレームで表示できるコンテンツより表示の優先順位は低いなど、表示への影響も少ない仕様

どのページをAMPにするか？静的なウェブコンテンツのみ有効 * ニュース * レシピ * 製品ページ * 動画
* ブログなど

AMPの導入方法 1. 通常ページを用意 2. AMPページを用意 3. AMPを検証 4. クローラーにAMPの存在を知らせる

実　例

1. 通常ページを用意 http://dev2.xtone.co.jp/kaneko/a mp/simple.html

2. AMPページを用意 http://dev2.xtone.co.jp/kaneko/a mp/simple.amp.html

見た目同じ

3. AMPを検証 Chromeで#development=1を付けて開くと consoleで確認できる AMP validation successful.

4. AMPの存在を知らせる通常ページ meta="amphtml" href="(AMPページURL)" AMPページ meta="canonical" href="(通常ページURL)"

表示速度の測定通常ページ・・・ 1.327s AMPページ・・・ 2.039s

表示速度の測定通常ページ・・・ 1.327s AMPページ・・・ 2.039s ？？？

CDN HTTPS https://cdn.ampproject.org/c/s/www.example.com/blog /amp/hoge.html HTTP https://cdn.ampproject.org/c/www.example.com/blog/a mp/hoge.html

表示速度の測定通常ページ・・・ 1.327s AMPページ・・・ 0.740s

できること

動画・Youtube ・Hulu ・Dailymotion ・Vimeo など

シェアボタン・Facebook ・Twitter ・Vine ・Reddit など

カルーセル・ライトボックス・アコーディオンなど

他にもたくさん ※ 多すぎて用意できませんでした

アクセスが増える？増えるかもしれない・・・ニュース記事であればGoogle検索でカルーセル表示されたり、表示が早いのでユーザ満足度があがったりとかが期待される（SEOには直接影響しないとGoogleは言ってます）今すぐに対応しなくても可

おまけモバイルファーストインデックスに向けて https://webmaster-ja.googleblog.com/2016/11/mobile-first-indexing.html 将来的に Google のアルゴリズムはモバイル版のコンテンツを主に使用するようになります。つまり、ページのランキングを決定したり、構造化データを理解したり、検索結果にスニペットを表示する際も、モバイル版のコンテン
ツが使用されるようになります。

AMP

AMP

Kaneko Takeshi

More Decks by Kaneko Takeshi

Other Decks in Programming

Featured

Transcript