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

Transcript

1. 1.

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

2. 2.

   • Koji Ishimoto • id: t32k • Front-end Developer •

   Mercari, Inc. / Souzoh, Inc. 自己紹介
3. 3.

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

4. 4.

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

   アジェンダ
5. 5.

   AMP Accelerated Mobile Pages

6. 6.

   AMPとは？ AMPはオープンな仕様に沿って作成されたWebページです。検証 された AMP ページは Google の AMP キャッシュに保存されま す。キャッシュに保存することでページをこれまで以上にすばやく

   表示できるようになります。 AMP ページの Google 検索ガイドライン - Search Console ヘルプ
7. 7.

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

   Cache（Google CDNからの配信）
8. 8.

   None
9. 9.

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

10. 10.

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

    Result Page 検索結果ページ
11. 11.

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

    利用可能
12. 12.

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

    Overview | Google Developers
13. 13.

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

    Developers
14. 14.

    無理じゃん！

15. 15.

    - 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
16. 16.

    16 Cash is King

17. 17.

    17 Cash　is King Cache is King

18. 18.

    Use AMP!

19. 19.

    Problem:1

20. 20.

    The New York Times Mercari The Guardian

21. 21.

    iモードサイト？

22. 22.

    AMPの速さの理由 - 非同期スクリプトしか認めない(野良JSの使用禁止) - リソースは予めサイズ指定する - 拡張コンポーネントに描画をブロックさせない - Third-Party JavaScript

    はクリティカルパスにいれない - CSSは全てインラインに記述し50KBまでに制限する - フォントの読み込みは適切に - スタイルの再計算は最小限に - GPUアニメーションしか認めない - リソース読み込みの優先づけ
23. 23.

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

24. 24.

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

25. 25.

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

    amp-analytics - amp-social-share - amp-youtube
26. 26.

    In development - 2017.03.18

27. 27.

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

28. 28.

    Problem:2

29. 29.

    None
30. 30.

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

31. 31.

    CSSって知ってる？

32. 32.

    Media Queriesって知ってる？

33. 33.

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

34. 34.

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

35. 35.

    AMP isn’t mobile only , it’s mobile first. About that ‘mobile’

    in Accelerated Mobile Pages – Medium Paul Bakaus
36. 36.

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

37. 37.

    https://www.ampproject.org/

38. 38.

    https://ampstart.com/

39. 39.

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

40. 40.

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

41. 41.

    Problem:3

42. 42.

    構造化データむずい

43. 43.

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

    or BlogPosting
44. 44.

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

45. 45.

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

46. 46.

    これって『記事』？

47. 47.

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

48. 48.

    『プロダクト』はよ！

49. 49.

    Wrap Up

50. 50.

    None
51. 51.

    None
52. 52.

    (ms)

53. 53.

    まとめ - ビジュアル表現を制限するものではない - RuleはあるがLimitではない - テンプレートの分散は避けるべき - AMPでResponsiveでFastサイトを作ろう -

    とはいえ、しんどい（Schema.orgの対応など） - 簡単なドキュメントサイトなら一考あり
54. 54.

    Thank you! https://t32k.me/