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

FRONTEND CONFERENCE 2017 | 関西フロントエンドUG
http://kfug.jp/frontconf2017/

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. AMP
   Accelerated Mobile Pages
   

   View Slide

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

   View Slide

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

   View Slide

8. View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. 無理じゃん！
    

    View Slide

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
    

    View Slide

16. 16
    Cash is King
    

    View Slide

17. 17
    Cash　is King
    Cache is King
    

    View Slide

18. Use AMP!
    

    View Slide

19. Problem:1
    

    View Slide

20. The New York Times Mercari The Guardian
    

    View Slide

21. iモードサイト？
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. In development - 2017.03.18
    

    View Slide

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

    View Slide

28. Problem:2
    

    View Slide

29. View Slide

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

    View Slide

31. CSSって知ってる？
    

    View Slide

32. Media Queriesって知ってる？
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. https://www.ampproject.org/
    

    View Slide

38. https://ampstart.com/
    

    View Slide

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

    View Slide

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

    View Slide

41. Problem:3
    

    View Slide

42. 構造化データむずい
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. これって『記事』？
    

    View Slide

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

    View Slide

48. 『プロダクト』はよ！
    

    View Slide

49. Wrap Up
    

    View Slide

50. View Slide

51. View Slide

52. (ms)
    

    View Slide

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

    View Slide

54. Thank you!
    https://t32k.me/
    

    View Slide