スタンドアロンAMPのすゝめ

Slide 1

Slide 1 text

スタンドアロンAMPのすゝめ FRONTEND CONFERENCE 2017 - @t32k - 2017/03/18

Slide 2

Slide 2 text

● Koji Ishimoto ● id: t32k ● Front-end Developer ● Mercari, Inc. / Souzoh, Inc. 自己紹介

Slide 3

Slide 3 text

なんでも募集できる地域コミュニティアプリ https://www.mercariatte.com/jp/ メルカリアッテとは

Slide 4

Slide 4 text

1. AMPのメリット 2. 表現力について 3. テンプレート分散について 4. 構造化データについて 5. まとめアジェンダ

Slide 5

Slide 5 text

AMP Accelerated Mobile Pages

Slide 6

Slide 6 text

AMPとは？ AMPはオープンな仕様に沿って作成されたWebページです。検証された AMP ページは Google の AMP キャッシュに保存されます。キャッシュに保存することでページをこれまで以上にすばやく表示できるようになります。 AMP ページの Google 検索ガイドライン - Search Console ヘルプ

Slide 7

Slide 7 text

AMPを支える3本柱 - AMP HTML（amp-imgとかamp-***とか） - AMP JS（最適化処理されたJavaScript） - Google AMP Cache（Google CDNからの配信）

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

裏側でを読み込んでいる... AMPビューワーURL オリジナルAMPソースURL ATFのリソースしか読み込んでいない AMPキャッシュURLから配信されたコンテンツ

Slide 10

Slide 10 text

AMPのメリット - 検索ランキングが上がるわけではない（SEO忘れて！） - SERP*上でキャッシュが効いた状態でアクセスできる - ユーザー体験向上ヽ(=´▽`=)ﾉ * Search Engine Result Page 検索結果ページ

Slide 11

Slide 11 text

広がるAMPパートナー - Yahoo Japanが対応（導入時期未定、2017/03現在） - BaiduやSogouも！ - CloudflareはAccelerated Mobile Links 利用可能

Slide 12

Slide 12 text

AMPキャッシュの更新 AMPドキュメントが表示されると、更新リクエストがされます。そのため、次のユーザーは更新されたAMPドキュメントにアクセスすることになります。任意のタイミングで更新したい場合は、下記のようなAMPキャッシュURLに直接アクセスることで、更新できます。 https://example-com.cdn.ampproject.org/c/s/amp_document.html Google AMP Cache Overview | Google Developers

Slide 13

Slide 13 text

Breaking the 1000ms Mobile Barrier PageSpeed Insights でのモバイル解析 | Google Developers

Slide 14

Slide 14 text

無理じゃん！

Slide 15

Slide 15 text

- No bit is faster than one that is not sent; send fewer bits. - We can’t make the bits travel faster, but we can move the bits closer. High Performance Browser Networking Ilya Grigorik

Slide 16

Slide 16 text

16 Cash is King

Slide 17

Slide 17 text

17 Cash　is King Cache is King

Slide 18

Slide 18 text

Use AMP!

Slide 19

Slide 19 text

Problem:1

Slide 20

Slide 20 text

The New York Times Mercari The Guardian

Slide 21

Slide 21 text

iモードサイト？

Slide 22

Slide 22 text

AMPの速さの理由 - 非同期スクリプトしか認めない(野良JSの使用禁止) - リソースは予めサイズ指定する - 拡張コンポーネントに描画をブロックさせない - Third-Party JavaScript はクリティカルパスにいれない - CSSは全てインラインに記述し50KBまでに制限する - フォントの読み込みは適切に - スタイルの再計算は最小限に - GPUアニメーションしか認めない - リソース読み込みの優先づけ

Slide 23

Slide 23 text

AMPコンポーネントって知ってる?

Slide 24

Slide 24 text

https://www.ampproject.org/docs/reference/components

Slide 25

Slide 25 text

使えそうなコンポーネント - amp-carousel - amp-accordion - amp-sidebar - amp-iframe - amp-analytics - amp-social-share - amp-youtube

Slide 26

Slide 26 text

In development - 2017.03.18

Slide 27

Slide 27 text

AMPでもリッチインタラクションが可能

Slide 28

Slide 28 text

Problem:2

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

30 www.example.com/article.html mobile.example.com/article.html mobile.example.com/amp/article.html Paired

Slide 31

Slide 31 text

CSSって知ってる？

Slide 32

Slide 32 text

Media Queriesって知ってる？

Slide 33

Slide 33 text

33 www.example.com/article.html Standalone(AMP) Responsive Layout

Slide 34

Slide 34 text

モバイルで速いということはデスクトップでも速い

Slide 35

Slide 35 text

AMP isn’t mobile only , it’s mobile first. About that ‘mobile’ in Accelerated Mobile Pages – Medium Paul Bakaus

Slide 36

Slide 36 text

AMPはモバイル『専用』ではない

Slide 37

Slide 37 text

https://www.ampproject.org/

Slide 38

Slide 38 text

https://ampstart.com/

Slide 39

Slide 39 text

https://webmaster-ja.googleblog.com/2016/11/mobile-first-indexing.html

Slide 40

Slide 40 text

https://www.mercariatte.com/jp/

Slide 41

Slide 41 text

Problem:3

Slide 42

Slide 42 text

構造化データむずい

Slide 43

Slide 43 text

SERP上でAMPコンテンツとして表示するために - ValidなAMPで実装する - 適切な構造化データマークアップする - @type: Article or NewsArticle or BlogPosting

Slide 44

Slide 44 text

https://search.google.com/structured-data/testing-tool

Slide 45

Slide 45 text

https://offer.mercariatte.com/jp/6898226402064232/

Slide 46

Slide 46 text

これって『記事』？

Slide 47

Slide 47 text

最近『レシピ』に対応したとか

Slide 48

Slide 48 text

『プロダクト』はよ！

Slide 49

Slide 49 text

Wrap Up

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

(ms)

Slide 53

Slide 53 text

まとめ - ビジュアル表現を制限するものではない - RuleはあるがLimitではない - テンプレートの分散は避けるべき - AMPでResponsiveでFastサイトを作ろう - とはいえ、しんどい（Schema.orgの対応など） - 簡単なドキュメントサイトなら一考あり

Slide 54

Slide 54 text

Thank you! https://t32k.me/