Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AMP キャッシュを超えるシステムを自社ドメインで実現する方法

 / How to implement a system that goes beyond amp-caching on your domain

Junya
November 27, 2021
2.6k

AMP キャッシュを超えるシステムを自社ドメインで実現する方法

 / How to implement a system that goes beyond amp-caching on your domain

Junya

November 27, 2021
Tweet

Transcript

  1. AMP ΩϟογϡΛ௒͑Δγες
    ϜΛࣗࣾυϝΠϯͰ࣮ݱ͢Δํ๏


    How to implement a system that goes beyond amp-
    caching on your domain
    Մࣇ ५໵ @ka2jun8


    2021/11/27 JSConf JP 2021

    View full-size slide

  2. ࣗݾ঺հ
    ## @ka2jun8 / Juny / ͔ʹ

    - Twitter: @ka2jun8

    - GitHub: @ka2jun8


    ### ܦྺͱॴଐ

    - 2014೥4݄ ৽ଔ F ͔Β͸͡·ΔձࣾʢR&Dʣ

    - 2018೥4݄ גࣜձࣾϦΫϧʔτʢWeb FEʣ


    ### ΍ͬͯΔ͜ͱ

    ۀ຿: Web ϝσΟΞαʔϏεͷάϩʔε

    ໾ׂ: Web ։ൃνʔϜͷϦʔμʔ

    ࠷ۙ: େن໛ FE ϦϓϨΠε͕ϗοττϐοΫ
    ্࢘ˢ

    View full-size slide

  3. ࠷ۙ AMP ͬͯͲ͏ͳͷʁ

    View full-size slide

  4. όουχϡʔε͕ଓ͘…


    https://www.suzukikenichi.com/blog/google-removes-amp-badge-from-search-results/
    https://gigazine.net/news/20210519-google-amp-no-longer-preferential-treatment/
    https://gigazine.net/news/20211108-google-amp-trust/
    https://ameblo.jp/staff/entry-12709589996.html

    View full-size slide

  5. AMP ͬͯ΋͏

    ࢖Θͳ͍ํ͕͍͍…ʁ

    View full-size slide

  6. AMP ͬͯ΋͏

    ࢖Θͳ͍ํ͕͍͍…ʁ

    ࣮ࡍͲ͏ͳͷʁʂ

    View full-size slide

  7. ໨࣍
    • AMP ͷྺ࢙ΛৼΓฦΔ


    • AMP ΛֶͿ


    • AMP ͷಋೖ


    • AMP ಋೖͷৼΓฦΓ


    • AMP ͷ͜Ε͔Β

    View full-size slide

  8. AMP ͷྺ࢙ΛৼΓฦΔ

    View full-size slide

  9. AMP ͱ͸
    • ݩʑ͸ Accelerated Mobile Pages ͷ಄จࣈ


    • 2015 ೥ʹొ৔ (6೥લ!!!)


    • WebαʔϏεͷύϑΥʔϚϯε޲্ͷͨΊͷGoogleओ
    ಋͰఏڙ͞Ε͍ͯΔٕज़

    https://ja.wikipedia.org/wiki/Accelerated_Mobile_Pages
    https://www.suzukikenichi.com/blog/host-speci
    fi
    c-carousel-for-news/

    View full-size slide

  10. AMP ͷಛ௃
    • AMP ͷ੍໿


    • JavaScript / CSS ͷ੍ݶ


    • AMP Ωϟογϡ


    • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον

    View full-size slide

  11. AMP ͸ͳͥྲྀߦ͔ͬͨʁ

    View full-size slide

  12. AMP ͷಛ௃
    • AMP ͷ੍໿


    • JavaScript / CSS ͷ੍ݶ


    • AMP Ωϟογϡ


    • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον

    View full-size slide

  13. AMP = SEO Ұ࣌୅ͷ౸དྷ
    • AMP Ωϟογϡ ʹΑΔڧ͗͢Δ༏۰


    • Google ݕࡧ݁Ռը໘ͷϓϦϑΣονʹΑΔѹ౗తͳߴ଎Խ


    • ϖʔδϥϯΫΛແࢹͨ͠τοϓετʔϦʔͷΧϧʔηϧදࣔ

    ϥϯΫҐͷαΠτ
    ΄͛;͕΄͛;͕΄͛;͕΄͛;
    ͕΄͛;͕ʜ
    Google ݕࡧ݁Ռ
    ".1هࣄ ".1هࣄ

    View full-size slide

  14. AMP = SEO Ұ࣌୅ͷ౸དྷ
    • AMP Ωϟογϡ ʹΑΔڧ͗͢Δ༏۰


    • Google ݕࡧ݁Ռը໘ͷϓϦϑΣονʹΑΔѹ౗తͳߴ଎Խ


    • ϖʔδϥϯΫΛແࢹͨ͠τοϓετʔϦʔͷΧϧʔηϧදࣔ

    • AMP ͸ SEO ʹޮ͘ͱ͍͏͕ᷚՃ଎౓తʹ޿·ͬͨ
    • ։ൃ෦ॺͰ͸ͳ͘ϚʔέςΟϯά෦ॺ SEO ୲౰͔Β

    ʮSEO ࢪࡦͱͯ͠ AMP ΍Δͧʂʂʯͱ͍͏ଉר͍ͨཁ͕݅ग़Δ

    View full-size slide

  15. ϋΠϒϦου AMP ʹΑΔಋೖ
    • ΦϦδφϧͷը໘Λ͍͖ͳΓ AMP Խ͢Δͷ͸೉͍͠


    • ϋΠϒϦου AMP ͷఏҊ


    • ಉ͡ը໘Λ AMP Խͯ͠ΧϊχΧϧϖʔδͰ༻ҙ͢Δ

    View full-size slide

  16. ϋΠϒϦου AMP

    AMP
    ΧϊχΧϧ
    ΦϦδφϧ












    ΋ͱ΋ͱͷ HTML ৽ͨʹ AMP HTML ΛผͰ༻ҙ

    View full-size slide

  17. ϋΠϒϦου AMP ʹΑΔಋೖ
    • ΦϦδφϧͷը໘Λ͍͖ͳΓ AMP Խ͢Δͷ͸೉͍͠


    • ϋΠϒϦου AMP ͷఏҊ


    • ಉ͡ը໘Λ AMP Խͯ͠ΧϊχΧϧϖʔδͰ༻ҙ͢Δ


    • طଘͷγεςϜΛյ͢͜ͱͳ͘ AMP Խ͕Մೳ


    • ݕࡧ݁Ռ͔Βͷ LP ͷΈ AMP ʹͰ͖Δ


    • χϡʔε/ϒϩάهࣄܥ͕ͧͬͯ͜ϋΠϒϦου AMP Խ

    View full-size slide

  18. ϋΠϒϦου AMP ͷฐ֐

    • AMP ͷ੍໿ʹΑΓࣗ༝ʹ JS/CSS ͕ॻ͚ͳ͍

    → Ϧονͳ UI Λ֬อ͢Δͷ͕೉͍͠
    ΦϦδφϧͱൺֱ࣭ͯ͠ૉͳ".1ϖʔδʹ
    ྫɿݕࡧػೳͱ
    ϙοϓΞοϓɺ
    αΠυόʔ͸
    ͳ͠

    View full-size slide

  19. AMP ʹΑΔݕࡧ݁ՌͷԚછ
    • େྔͷ࣭ૉͳ AMP ϖʔδ͕ݕࡧ݁ՌΛԚછ

    ͜Εʹର͠ Google ͸….
    ".1εΫϦϓτͷొ৔
    ".1ίϯϙʔωϯτͷߋͳΔϦονԽ

    View full-size slide

  20. AMP Ωϟογϡͷహ຤
    • AMP εΫϦϓτʹରԠͤ͞Δ΋ όά͕૿Ճ


    • ͦ΋ͦ΋ AMP ͦͷ΋ͷ͕όά͍ͬͯΔ ͜ͱ΋


    • ϋΠϒϦου AMP ͸໿ 2 ഒͷӡ༻޻਺͕͔͔Δ


    • AMP Ωϟογϡ ʹͷͤΔͱϢʔβʔ෼ੳ͕Ͱ͖ͳ͍ (ޙड़)


    • Google ͕ AMP ͷ ༏۰Λ΍ΊΔ ͱݴ͍ग़͢ (࠷ۙ)

    View full-size slide

  21. AMP Ωϟογϡͷహ຤
    • AMP εΫϦϓτʹରԠͤ͞Δ΋ όά͕૿Ճ


    • ͦ΋ͦ΋ AMP ͦͷ΋ͷ͕όά͍ͬͯΔ ͜ͱ΋


    • ϋΠϒϦου AMP ͸໿ 2 ഒͷӡ༻޻਺͕͔͔Δ


    • AMP Ωϟογϡ ʹͷͤΔͱϢʔβʔ෼ੳ͕Ͱ͖ͳ͍ (ޙड़)


    • Google ͕ AMP ͷ ༏۰Λ΍ΊΔ ͱݴ͍ग़͢ (࠷ۙ)

    ".1΍Ί͍ͨʜ

    View full-size slide

  22. ͜Ε͕ AMP ΁ͷ


    ͓͓ΑͦͷੈؒͷΠϝʔδ

    View full-size slide

  23. AMP ͷ͜ͱΛ


    ͳ͔ͬͨ͜ͱʹ͢Δͷ͸


    ΋͍ͬͨͳ͍ʂʂ

    View full-size slide

  24. AMP ΛֶͿ
    • AMP ͷ໨తΛֶͿ


    • AMP ͷٕज़ΛֶͿ

    View full-size slide

  25. AMP ͷ໨తΛֶͿ

    View full-size slide

  26. AMP ͷಛ௃ (࠶ܝ)
    • AMP ͷ੍໿


    • JavaScript / CSS ͷ੍ݶ


    • AMP Ωϟογϡ


    • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον

    View full-size slide

  27. AMP ͷಛ௃ (࠶ܝ)
    • AMP ͷ੍໿


    • JavaScript / CSS ͷ੍ݶ


    • AMP Ωϟογϡ


    • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον

    View full-size slide

  28. AMP ͷ੍໿ͱ͸ʁ
    • ೚ҙͷ JavaScript ͕ར༻Ͱ͖ͳ͍


    • CSS 75KB ҎԼʹ͠ͳ͚Ε͹ͳΒͳ͍


    • ෼ੳ/޿ࠂλά͸ڐ༰͞Εͨ΋ͷҎ֎͸ར༻ෆՄೳ ͳͲͳͲ…

    ੍໿ΛΫϦΞͨ͠Β".1ΩϟογϡʹͷΔ

    View full-size slide

  29. AMP ͷ໨తͬͯ

    AMP Ωϟογϡʹ

    ͷͤΔ͜ͱ͚ͩͬʁʁʁ

    View full-size slide

  30. AMP ͷ໨తͬͯ

    AMP Ωϟογϡʹ

    ͷͤΔ͜ͱ͚ͩͬʁʁʁ

    /0

    View full-size slide

  31. AMP ͷຊདྷͷ໨త
    Web ͱ͍͏ϓϥοτϑΥʔϜશମͷߴ଎Խ

    https://developers-jp.googleblog.com/2018/03/standardizing-lessons-learned-from-amp.html

    View full-size slide

  32. AMP ͷ໨త
    • AMP ͷ੍໿


    • JavaScript / CSS ͷ੍ݶ


    • AMP Ωϟογϡ


    • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον

    ͋͘·Ͱ΋
    ͓·͚
    ෆཁͳίʔυ ࢓༷
    Λ

    ؚ·ͤͳ͍

    View full-size slide

  33. AMP ͷ໨త
    • AMP ͷ੍໿


    • JavaScript / CSS ͷ੍ݶ


    • AMP Ωϟογϡ


    • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον

    ߴ଎ͳ΢Σϒϖʔδ͕࡞ΕΔ͜ͱ
    ͋͘·Ͱ΋
    ͓·͚
    ෆཁͳίʔυ ࢓༷
    Λ

    ؚ·ͤͳ͍

    View full-size slide

  34. AMP ͷٕज़ΛֶͿ

    View full-size slide

  35. Web αΠτΛӾཡ͢Δ·Ͱ

    ϒϥ΢β
    ΦϦδϯ
    (PPHMFCPU
    (PPHMF

    ݕࡧ݁Ռ
    ᶃΫϩʔϦϯά
    ᶄΠϯσοΫε
    ᶅΦϦδϯ΁ΞΫηε

    View full-size slide

  36. AMP શମ૾

    ϒϥ΢β
    ΦϦδϯ
    ".1Ωϟογϡ
    (PPHMFCPU
    AMP
    (PPHMF

    ݕࡧ݁Ռ
    AMP Valid

    View full-size slide

  37. AMP Valid

    AMP
    AMP Valid
    AMP Invalid






    ͜Ε·Ͱ௨Γͷ HTML ੍໿ΛΫϦΞͨ͠ AMP HTML

    View full-size slide

  38. AMP શମ૾

    ϒϥ΢β
    ΦϦδϯ
    ".1Ωϟογϡ
    (PPHMFCPU
    AMP
    (PPHMF

    ݕࡧ݁Ռ

    View full-size slide

  39. AMP શମ૾

    ϒϥ΢β
    ΦϦδϯ
    ".1Ωϟογϡ
    (PPHMFCPU
    AMP
    (PPHMF

    ݕࡧ݁Ռ
    ᶃΫϩʔϦϯά

    View full-size slide

  40. AMP શମ૾

    ϒϥ΢β
    ΦϦδϯ
    ".1Ωϟογϡ
    (PPHMFCPU
    AMP
    ".1
    όϦσʔλʔ
    (PPHMF

    ݕࡧ݁Ռ
    ᶃΫϩʔϦϯά
    ᶄ7BMJEJUZ֬ೝ

    View full-size slide

  41. AMP όϦσʔλʔ
    • AMP ͷ੍໿ΛΫϦΞ͍ͯ͠Δ͔֬ೝ


    • ύϑΥʔϚϯεόδΣοτ


    • JavaScript ར༻ېࢭ / CSS 75KB ҎԼ


    • ϨΠΞ΢τ่Εͷةݥੑ΋ճආ


    • ༷ʑͳܗࣜͰఏڙ͞Ε͍ͯΔ


    • Web App, Chrome Extension, CLI etc.

    https://validator.ampproject.org/
    ߴ଎ͳঢ়ଶΛҡ࣋͠ଓ͚ΔͨΊ
    ʹ Web ϦιʔεͷαΠζͷ༧ࢉ
    ؅ཧΛߦ͍ɺύϑΥʔϚϯεੑೳ
    ΛҰఆʹอͪଓ͚ΔࢼΈ
    https://developers-jp.googleblog.com/2019/03/blog-post_15.html
    Google Developers Blog ͰͷύϑΥʔϚϯεόδΣοτ঺հهࣄ AMP όϦσʔλʔͷ Web App

    View full-size slide

  42. AMP શମ૾

    ϒϥ΢β
    ΦϦδϯ
    ".1Ωϟογϡ
    (PPHMFCPU
    AMP
    ".1
    όϦσʔλʔ
    (PPHMF

    ݕࡧ݁Ռ
    ᶃΫϩʔϦϯά
    ᶄ7BMJEJUZ֬ೝ
    AMP Valid❤

    View full-size slide

  43. AMP શମ૾

    ϒϥ΢β
    ΦϦδϯ
    ".1Ωϟογϡ
    (PPHMFCPU
    AMP
    ".1
    όϦσʔλʔ
    (PPHMF

    ݕࡧ݁Ռ
    ᶃΫϩʔϦϯά
    ᶄ7BMJEJUZ֬ೝ
    ᶅΩϟογϡอ؅ 483

    AMP

    View full-size slide

  44. Ωϟογϡઓུ SWR
    • AMP Ωϟογϡ͸ CDN తͳ໾ׂΛແྉͰఏڙͯ͘͠ΕΔ


    • Stale-While-Revalidate (SWR) ϞσϧͷΩϟογϡߋ৽


    • Ϣʔβʔ͔ΒͷΩϟογϡΞΫηεͷͨͼʹίϯςϯπ͕࠷৽Ͱ͋Δ͔֬ೝ͢Δ


    • Ϣʔβʔʹ͸ʢΩϟογϡ͕࠷৽Ͱͳͯ͘΋ʣΩϟογϡΛฦ͢


    • ίϯςϯπ͕ݹ͔ͬͨΒΦϦδϯαʔόʔʹίϯςϯπͷߋ৽Λ֬ೝͯ͠ΩϟογϡΛ࠷৽Խ͢Δ


    • Ϣʔβʔ͕ΞΫηεͯ͘͠ΕΔϖʔδ͸ߋ৽ස౓͕ߴ͘ͳΔ

    https://blog.jxck.io/entries/2016-04-16/stale-while-revalidate.html
    Stale-While-Revalidate ϔομʹΑΔϒϥ΢βΩϟογϡͷඇಉظߋ৽ - blog.jxck.io

    View full-size slide

  45. AMP શମ૾

    ϒϥ΢β
    ΦϦδϯ
    ".1Ωϟογϡ
    (PPHMFCPU
    AMP
    ".1
    όϦσʔλʔ
    (PPHMF

    ݕࡧ݁Ռ
    ᶃΫϩʔϦϯά
    ᶄ7BMJEJUZ֬ೝ
    ᶅΩϟογϡอ؅ 483

    AMP

    View full-size slide

  46. AMP શମ૾

    ϒϥ΢β
    ΦϦδϯ
    ".1Ωϟογϡ
    (PPHMFCPU
    AMP
    AMP
    ".1
    όϦσʔλʔ
    ".1
    ΦϓςΟϚΠβʔ
    AMP
    (PPHMF

    ݕࡧ݁Ռ
    ᶃΫϩʔϦϯά
    ᶄ7BMJEJUZ֬ೝ
    ᶆ)5.-࠷దԽ
    ᶅΩϟογϡอ؅ 483

    View full-size slide

  47. AMP ΦϓςΟϚΠβʔ
    • AMP valid ͳঢ়ଶͷ HTML ͚ͩͰ͸·ͩ࠷దԽ͕଍Γͳ͍


    • AMP ΩϟογϡʹͷΔλΠϛϯάͰ͞Βʹ࠷దԽ͞ΕΔ


    ɹɹྫ:


    • AMPίϯϙʔωϯτͷαʔόʔαΠυϨϯμϦϯά(AMP SSR)

    →ϨΠΞ΢τΛࣄલܭࢉʹΑΓσόΠεͰͷॲཧෛՙΛܰݮ


    • ώʔϩʔը૾ͷϓϦϩʔυ

    →༏ઌతʹϩʔυ͢ΔͷͰॳظද͕ࣔ଎͘ͳΔ


    • ෆཁίʔυͷ࡟আɺϑΥϯτ࠷దԽ and more…

    →ϕετϓϥΫςΟε͕͍Ζ͍ΖೖͬͯΔ

    AMP
    ".1
    ΦϓςΟϚΠβʔ
    AMP
    ৄղ AMP Optimizer - Qiita

    https://qiita.com/sangotaro/items/a85da91164860bd679af

    View full-size slide

  48. AMP શମ૾

    ϒϥ΢β
    ΦϦδϯ
    ".1Ωϟογϡ
    (PPHMFCPU
    AMP
    AMP
    ".1
    όϦσʔλʔ
    ".1
    ΦϓςΟϚΠβʔ
    AMP
    (PPHMF

    ݕࡧ݁Ռ
    ᶃΫϩʔϦϯά
    ᶄ7BMJEJUZ֬ೝ
    ᶆ)5.-࠷దԽ
    ᶅΩϟογϡอ؅ 483

    View full-size slide

  49. AMP શମ૾

    ϒϥ΢β
    ΦϦδϯ
    ".1Ωϟογϡ
    (PPHMFCPU
    AMP
    AMP
    ".1
    όϦσʔλʔ
    ".1
    ΦϓςΟϚΠβʔ
    AMP
    (PPHMF

    ݕࡧ݁Ռ
    ᶃΫϩʔϦϯά
    ᶄ7BMJEJUZ֬ೝ
    ᶆ)5.-࠷దԽ
    ᶅΩϟογϡอ؅ 483

    View full-size slide

  50. AMP શମ૾

    ϒϥ΢β
    ΦϦδϯ
    ".1Ωϟογϡ
    (PPHMFCPU
    AMP
    AMP
    ".1
    όϦσʔλʔ
    ".1
    ΦϓςΟϚΠβʔ
    AMP
    (PPHMF

    ݕࡧ݁Ռ
    ᶃΫϩʔϦϯά
    ᶄ7BMJEJUZ֬ೝ
    ᶆ)5.-࠷దԽ
    ᶇϦιʔεϓϦϑΣον
    ᶅΩϟογϡอ؅ 483

    View full-size slide

  51. AMP ϦιʔεϓϦϑΣον
    • Google ͳͲͷݕࡧΤϯδϯͰϓϦϑΣον͞ΕΔ


    • ݕࡧ݁ՌΛ։͍ͨ࣌఺Ͱɺ͢ͰʹભҠઌͷ HTML Λ DL


    • ΦϦδϯʹΞΫηε͢Δ͜ͱͳ͘ϖʔδΛӾཡͰ͖Δ

    → ਺ेϛϦඵͰભҠ͕ՄೳʹͳΔͷͰΊͪΌͪ͘Ό଎͍

    AMP ϖʔδͷΩϟογϡͷ࢓૊Έ - amp.dev


    https://amp.dev/ja/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached/

    View full-size slide

  52. AMP શମ૾

    ϒϥ΢β
    ΦϦδϯ
    ".1Ωϟογϡ
    (PPHMFCPU
    AMP
    AMP
    ".1
    όϦσʔλʔ
    ".1
    ΦϓςΟϚΠβʔ
    AMP
    (PPHMF

    ݕࡧ݁Ռ
    ᶃΫϩʔϦϯά
    ᶄ7BMJEJUZ֬ೝ
    ᶆ)5.-࠷దԽ
    ᶇϦιʔεϓϦϑΣον
    ᶅΩϟογϡอ؅ 483

    View full-size slide

  53. AMP શମ૾

    ϒϥ΢β
    ΦϦδϯ
    ".1Ωϟογϡ
    (PPHMFCPU
    AMP
    AMP
    ".1
    όϦσʔλʔ
    ".1
    ΦϓςΟϚΠβʔ
    AMP
    (PPHMF

    ݕࡧ݁Ռ
    AMP
    ".1
    ίϯϙʔωϯτ
    ᶃΫϩʔϦϯά
    ᶄ7BMJEJUZ֬ೝ
    ᶆ)5.-࠷దԽ
    ᶇϦιʔεϓϦϑΣον
    ᶅΩϟογϡอ؅ 483

    ᶈ".1$43

    View full-size slide

  54. AMP ίϯϙʔωϯτ
    • JSαΠζɺ࣮ߦύϑΥʔϚϯεɺΞΫηγϏϦςΟɺCWV Λߟྀ

    ͲΜͳ։ൃऀͰ΋ Web ϕετϓϥΫςΟεΛڗडͰ͖Δ
    src="/static/inline-examples/
    images/sea.jpg"
    width="900"
    height="675"
    layout="responsive">

    https://amp.dev/ja/documentation/components/amp-img/
    ྫ: amp-img ͸ Web ʹਫ਼௨ͨ͠஌͕ࣝͳ͍։ൃऀͰ΋ IE / Safari Ͱ

    ɹ lazy load ͕࢖͑ΔΑ͏ʹͳ͍ͬͯΔ͠ɺCLS ΋ൃੜ͠ͳ͍Α͏ʹͳ͍ͬͯΔ

    View full-size slide

  55. AMP ͷ͓͞Β͍
    • AMP ͷ໨తΛֶͿ

    → Web શମͷߴ଎Խ͕໨త


    • AMP ͷٕज़ΛֶͿ

    → Web ϕετϓϥΫςΟεͷ٧Ί߹Θͤ

    View full-size slide

  56. AMP ͷ͓͞Β͍
    • AMP ͷ໨తΛֶͿ

    → Web શମͷߴ଎Խ͕໨త


    • AMP ͷٕज़ΛֶͿ

    → Web ϕετϓϥΫςΟεͷ٧Ί߹Θͤ

    ར༻͢ΔϝϦοτ͋Γͦ͏

    View full-size slide

  57. AMP ͷಋೖ

    View full-size slide

  58. ϦΫϧʔτͱ


    AMP Ωϟογϡ

    View full-size slide

  59. υϝΠϯ͕ Google ʹͳΔ
    • AMP Ωϟογϡ͸ Google ͔Β഑৴͞ΕΔͷͰυϝΠϯ͕ Google ʹ


    • ܭଌλάΛ૊ΈࠐΜͩࡍʹ Cookie ͕ Third Party ѻ͍


    • ITP2 ܥͷฐ֐


    • iOS Ϣʔβʔͷ࠶๚͕ܭଌͰ͖ͳ͍

    ैདྷͷϚʔέςΟϯά͕Ͱ͖ͳ͍

    View full-size slide

  60. AMP ΩϟογϡʹͷͤΒΕͳ͍

    View full-size slide

  61. AMP ͷ࠶࣮૷

    View full-size slide

  62. AMP Λ࠶࣮૷͢Δ

    View full-size slide

  63. AMP Λ࠶࣮૷͢Δ

    શ෦͢΂ͯ·ΔͬͱεϦͬͱΰϦͬͱ

    ΤϒϦγϯά࠶࣮૷ͩʂʂ

    View full-size slide

  64. Next.js
    https://github.com/vercel/next.js

    View full-size slide

  65. Next.js ͷ AMP ରԠ
    • Next.js ͸ 1ߦ௥Ճ͢Δ͚ͩͰ AMP Խ͕Մೳ

    • Ϗϧυ࣌ʹ AMP όϦσʔλʔ͕ಈ࡞͢Δ

    → ։ൃ͠ͳ͕Β੍໿ҧ൓Λ֬ೝͰ͖Δ


    • Ϗϧυ࣌ʹ AMP ΦϓςΟϚΠβʔ͕ಈ࡞͢Δ

    → AMP Ωϟογϡ૬౰ͷ࠷దԽ͕Ϗϧυ࣌ʹߦΘΕΔ
    export const config = { amp: true };

    View full-size slide

  66. Next.js Ͱͷ AMP Invalid Խ
    • AMP Ωϟογϡʹͷͤͳ͍ͨΊʹ͸ AMP Invalid Խ͢Δඞཁ


    • _document.tsx Ͱ؆қʹ AMP Invalid Խ͕Մೳ

    import { Html } from "next/document";




    render() {


    return (


    {children}


    );


    }

    Ϗϧυ݁Ռ Ϗϧυ݁Ռ
    // import { Html } from "next/document";




    render() {


    return (


    {children}


    );


    }

    View full-size slide

  67. Next.js ͷ AMP όϦσʔλʔ
    • Ϗϧυ࣌ʹ AMP όϦσʔλʔ͕ಈ࡞͢Δ


    • AMP όϦσʔλʔ͸ AMP Valid ͔Ͳ͏͔Λ֬ೝ͢Δ΋ͷ


    • ͔͠͠ ࣮͸ AMP όϦσʔλʔ͸ΧελϜͰ͖Δ

    → AMP Invalid Ͱ΋ AMP ૬౰ͷ੍໿Λ֬ೝ͢ΔͨΊʹ࢖͑Δ


    • next.con
    fi
    g.jsͰΧελϜϏϧυͨ͠ AMPόϦσʔλʔΛࢦఆ

    experimental: {


    amp: {


    validator: “./custom_validator.js"


    }


    }


    https://github.com/vercel/next.js/blob/canary/docs/advanced-features/amp-support/amp-validation.md
    https://github.com/vercel/next.js/tree/canary/test/integration/amphtml-custom-validator
    Next.js Ͱ amp-validator ͷΧελϜʹ͍ͭͯͷهड़Օॴ

    View full-size slide

  68. Next.js ͷ AMP ΦϓςΟϚΠβʔ
    • Ϗϧυ࣌ʹ AMP ΦϓςΟϚΠβʔ͕ಈ࡞͢Δ


    • ຊདྷ AMP Ωϟογϡ্Ͱ AMP ΦϓςΟϚΠβʔ͸ಈ࡞͢Δ


    • ͜ΕʹΑΓԾʹ AMP Ωϟογϡʹͷͤͳͯ͘΋

    ࠷దԽ͞Εͨ HTML ΛαʔϒͰ͖Δ


    • Ϗϧυ͕࣌ؒ஗͍ͷͰ௚ྲྀೖ΍αΠτ಺ճ༡Ͱ TTFB ͕஗͘ͳΔ


    • AMP Ωϟογϡ / Vercel ΩϟογϡʹͷΔ͜ͱ͕લఏͳͷͰɺ

    ΦϯσϚϯυʹ SSR ͞ΕΔ૝ఆͰ࡞ΒΕ͍ͯͳ͍

    React AMP AMP
    SSR SSR
    React
    AMP


    Optimizer
    (40msʙ) (250msʙ)
    https://engineer.recruit-lifestyle.co.jp/techblog/2020-09-11-perf-optim/

    View full-size slide

  69. AMP Λ࠶࣮૷͢Δ

    View full-size slide

  70. Next.js Ͱ AMP πʔϧΛ࢖͏

    AMP πʔϧͷར༻͸ Next.js ͰΧόʔ

    View full-size slide

  71. AMP ࠶࣮૷ʹ࢒Δ՝୊

    SSR஗͍

    View full-size slide

  72. AMP ΩϟογϡΛ࠶࣮૷
    • Ωϟογϡઓུ (SWR)


    • ΫϩʔϦϯά


    • ϦιʔεϓϦϑΣον

    View full-size slide

  73. Ωϟογϡઓུ(SWR)
    • AMP ͷ SSR ͸஗͍ͷͰຖճ SSR ͨ͘͠ͳ͍


    • Stale-While-Revalidate ͰΩϟογϡΛ

    ߋ৽͍ͨ͠

    ΍Γ͍ͨ͜ͱ
    → SWR ʹରԠ͍ͯ͠Δ CDN ͷಋೖ

    View full-size slide

  74. Ωϟογϡઓུ(SWR)
    • CDN (Fastly) ͷಋೖ


    • Stale-While-Revalidate ʹରԠ͍ͯ͠Δ


    • ͞Βʹ Ωϟογϡώοτ཰ ͕ߴ͍


    • ΦϦδϯγʔϧυ: ಛఆͷΤοδΛඞͣ௨͢

    ΍ͬͨ͜ͱ
    Ұ౓୭͔͕ΞΫηεͯ͘͠ΕΕ͹ߴ଎഑৴Մೳʹ
    https://docs.fastly.com/ja/guides/shielding

    View full-size slide

  75. Ωϟογϡઓུ(SWR)
    • CDN (Fastly) ͷಋೖ


    • Stale-While-Revalidate ʹରԠ͍ͯ͠Δ


    • ͞Βʹ Ωϟογϡώοτ཰ ͕ߴ͍


    • ΦϦδϯγʔϧυ: ಛఆͷΤοδΛඞͣ௨͢

    ΍ͬͨ͜ͱ
    Ұ౓୭͔͕ΞΫηεͯ͘͠ΕΕ͹ߴ଎഑৴Մೳʹ
    https://docs.fastly.com/ja/guides/shielding
    Ͱ΋·ͩॳճ๚໰͸஗͍…

    View full-size slide

  76. ΫϩʔϦϯά
    • ৗʹΩϟογϡ͕ଘࡏ͠࠷৽Խ͍ͨ͠


    • AMP Ωϟογϡͷ৔߹


    • Google ͷ AMP ༻ bot ͕Ϋϩʔϧͯ͠ϖʔδΛΠϯσοΫε


    • ΠϯσοΫε͞Εͨϖʔδ͕શͯ AMP ΩϟογϡʹͷΔ


    • ΦϦδϯΛ Google AMP bot ͕ͤͬͤͱຖ೔Ϋϩʔϧͯ͘͠ΕΔ


    • ཪΛฦͤ͹ɺ Google AMP bot ͕ΩϟογϡΛ͋ͨͨΊͯ͘Ε͍ͯΔ

    ΍Γ͍ͨ͜ͱ
    → ΩϟογϡΛ͋ͨͨΊͯ͘ΕΔ΍͕ͭ΄͍͠

    View full-size slide

  77. ΫϩʔϦϯά
    • Ωϟογϡ΢ΥʔϚʔͷ࣮૷


    • ΩϟογϡΛৗʹ࠷৽Խ͢ΔΫϩʔϦϯάπʔϧ


    • ର৅ͷϖʔδΛߜͬͯޮ཰తʹࣗαΠτʹΞΫηε


    • αʔνίϯιʔϧ API ͰΞΫηεͷଟ͍ϖʔδ


    • αΠτϚοϓͰࣗ෼͕ͨͪ഑৴͍ͨ͠ϖʔδ

    ΍ͬͨ͜ͱ
    Googlebot ΍Ϣʔβʔ͔Βͷ


    ॳճΞΫηε΋ߴ଎഑৴Մೳʹ

    View full-size slide

  78. ΫϩʔϦϯά
    • Ωϟογϡ΢ΥʔϚʔͷ࣮૷


    • ΩϟογϡΛৗʹ࠷৽Խ͢ΔΫϩʔϦϯάπʔϧ


    • ର৅ͷϖʔδΛߜͬͯޮ཰తʹࣗαΠτʹΞΫηε


    • αʔνίϯιʔϧ API ͰΞΫηεͷଟ͍ϖʔδ


    • αΠτϚοϓͰࣗ෼͕ͨͪ഑৴͍ͨ͠ϖʔδ

    ΍ͬͨ͜ͱ
    Googlebot ΍Ϣʔβʔ͔Βͷ


    ॳճΞΫηε΋ߴ଎഑৴Մೳʹ
    Ͱ΋·ͩ AMP Ωϟογϡͷ࠷େͷಛ௃͕…

    View full-size slide

  79. ϦιʔεϓϦϑΣον
    • CDN ͱΩϟογϡ΢ΥʔϚʔͰ͍ͩͿૣ͘ͳ͕ͬͨ…


    • Ϣʔβʔ͕ݕࡧ݁Ռը໘ʹདྷͨஈ֊ͰϦιʔεΛϓ
    ϦϑΣον͍ͤͨ͞


    • υϝΠϯ͸ࣗࣾυϝΠϯͷ··ʹ͍ͨ͠

    ΍Γ͍ͨ͜ͱ
    → ݕࡧ݁Ռը໘ͰϓϦϑΣον͍ͨ͠ʂʂ

    View full-size slide

  80. ϦιʔεϓϦϑΣον
    Chrome ϒϥ΢βͰ͋Ε͹

    ݕࡧ݁Ռը໘͔ΒͷϓϦϑΣον ͕Մೳʹ

    https://developers.google.com/search/docs/advanced/experience/signed-exchange?hl=ja
    AMP ·ͨ͸ඇ AMP Λ໰Θͣ΢ΣϒαΠτ͕ SXG ʹରԠ͍ͯ͠Δ৔
    ߹ɺGoogle ݕࡧͨ͠ͱ͖ʹฦ͞ΕΔɺؔ࿈͢Δ݁ՌͷओཁͳϦιʔ
    εͷ͍͔ͭ͘ʢHTMLɺJavaScriptɺCSSɺը૾ɺϑΥϯτͳͲʣΛɺ
    ϓϥΠόγʔʹ഑ྀͨ͠ܗͰϓϦϑΣονͰ͖·͢ɻ
    • SXG ΩϟογϡΛ׆༻
    ΍ͬͨ͜ͱ

    View full-size slide

  81. SXG Ωϟογϡͷ࣮૷

    ※2 https://github.com/google/webpackager
    (PPHMFCPU
    49(

    8FC
    1BDLBHFS
    4FSWFS
    ˞
    /HJOY
    'BTUMZ
    ΦϦδϯ
    ᶃ SXG ͷϦΫΤετ
    Web Packager Server Λ࢖͍ Googlebot ͔ΒͷಛఆͷϦΫΤετ
    ʹର͠ SXG ͷॺ໊͖ͭίϯςϯπΛฦ͢
    ※1 ྫ͑͹ Accept header ʹ application/signed-exchange;v=b3,*/*;q=0.1 ͕͋ΔϦΫΤετ
    ΍ͬͨ͜ͱ

    View full-size slide

  82. SXG Ωϟογϡͷ࣮૷

    ※2 https://github.com/google/webpackager
    (PPHMFCPU
    49(

    8FC
    1BDLBHFS
    4FSWFS
    ˞
    /HJOY
    'BTUMZ
    ΦϦδϯ
    SXG ?
    ᶃ SXG ͷϦΫΤετ
    Web Packager Server Λ࢖͍ Googlebot ͔ΒͷಛఆͷϦΫΤετ
    ʹର͠ SXG ͷॺ໊͖ͭίϯςϯπΛฦ͢
    ※1 ྫ͑͹ Accept header ʹ application/signed-exchange;v=b3,*/*;q=0.1 ͕͋ΔϦΫΤετ
    ΍ͬͨ͜ͱ

    View full-size slide

  83. SXG Ωϟογϡͷ࣮૷

    ※2 https://github.com/google/webpackager
    (PPHMFCPU
    49(

    8FC
    1BDLBHFS
    4FSWFS
    ˞
    /HJOY
    'BTUMZ
    ΦϦδϯ
    SXG ?
    ᶄॺ໊͢ΔͨΊʹΦϦδϯͷίϯςϯπΛ DL
    Web Packager Server Λ࢖͍ Googlebot ͔ΒͷಛఆͷϦΫΤετ
    ʹର͠ SXG ͷॺ໊͖ͭίϯςϯπΛฦ͢
    ※1 ྫ͑͹ Accept header ʹ application/signed-exchange;v=b3,*/*;q=0.1 ͕͋ΔϦΫΤετ
    ΍ͬͨ͜ͱ

    View full-size slide

  84. SXG Ωϟογϡͷ࣮૷

    ※2 https://github.com/google/webpackager
    (PPHMFCPU
    49(

    8FC
    1BDLBHFS
    4FSWFS
    ˞
    /HJOY
    'BTUMZ
    ΦϦδϯ
    SXG ?
    Web Packager Server Λ࢖͍ Googlebot ͔ΒͷಛఆͷϦΫΤετ
    ʹର͠ SXG ͷॺ໊͖ͭίϯςϯπΛฦ͢
    ※1 ྫ͑͹ Accept header ʹ application/signed-exchange;v=b3,*/*;q=0.1 ͕͋ΔϦΫΤετ
    ΍ͬͨ͜ͱ
    ᶅSXGͰॺ໊͢Δ

    View full-size slide

  85. SXG Ωϟογϡͷ࣮૷

    ※2 https://github.com/google/webpackager
    (PPHMFCPU
    49(

    8FC
    1BDLBHFS
    4FSWFS
    ˞
    /HJOY
    'BTUMZ
    ΦϦδϯ
    SXG ?
    Web Packager Server Λ࢖͍ Googlebot ͔ΒͷಛఆͷϦΫΤετ
    ʹର͠ SXG ͷॺ໊͖ͭίϯςϯπΛฦ͢
    ※1 ྫ͑͹ Accept header ʹ application/signed-exchange;v=b3,*/*;q=0.1 ͕͋ΔϦΫΤετ
    ΍ͬͨ͜ͱ
    ᶆSXGॺ໊͖ͭίϯςϯπΛฦ͢

    View full-size slide

  86. SXG Ωϟογϡ

    ϝϦοτ


    AMP Ωϟογϡͱ

    ಉ౳ͷޮՌΛ

    ಘΔ͜ͱ͕Մೳ
    σϝϦοτ


    SXG ূ໌ॻ͸͓͕͔͔ۚΔ


    ӡ༻ίετ͕ߴ͍

    iPhone Ϣʔβʔ͸ର৅֎
    ΍ͬͨ͜ͱ

    View full-size slide

  87. AMP Λ࠶࣮૷͢Δ

    Next.js
    Ωϟογϡ΢ΥʔϚʔ
    fastly
    SXG Ωϟογϡ
    Next.js
    Next.js

    View full-size slide

  88. ݁Ռ
    • Ұྫͷ঺հ


    • CWV ΦʔϧάϦʔϯ ྑ޷ URL 99.7%


    • ໿ 15 ສϖʔδͷΦʔϧάϦʔϯΛୡ੒


    • ݕࡧ݁Ռ͔ΒͷભҠ࣌


    • SXG ΩϟογϡʹΑΔϦιʔε DL


    • ίϯςϯπDL ໿ 5 ʙ 20 ϛϦඵ


    • ΦϦδϯͷυϝΠϯ΁ͷΞΫηε(௚ྲྀೖ/ճ༡࣌/iPhone౳)


    • CDN ͔ΒͷϨεϙϯε(PSI ʹΑΔϑΟʔϧυσʔλ)


    • FCP ໿ 0.8 ʙ 1.1 ඵ


    • ϢʔβʔώΞϦϯάͰ΋ʮදࣔ଎౓͕଎͍ʯͱ͍͏੠͕ଟ਺

    ※1 ϦϦʔεޙҊ݅ىҊ਺ 100 ݅ఔ౓ͷػೳΤϯϋϯε࣮૷ޙ 11/24 ݱࡏ
    ※2 Google Search Console ΢Σϒʹؔ͢Δओͳࢦඪʹͯܭଌ
    https://pagespeed.web.dev/
    ※3 Android Chrome ୺຤͔ΒͷಛఆͷΠϯσοΫεϖʔδͷΈ
    ※4 ओཁͳϖʔδ10ը໘ʹͯ֬ೝ
    ※1
    ※2
    ※3
    ※4

    View full-size slide

  89. AMP ಋೖͷৼΓฦΓ

    View full-size slide

  90. Α͔ͬͨ͜ͱͱ՝୊

    • ߴ଎ͳϖʔδΛ࡞Εͨ͜ͱ


    • શһͰ࢓༷ʹ޲͖߹͏จԽΛ࡞Εͨ͜ͱ
    Α͔ͬͨ͜ͱ
    ՝୊
    • ࢓༷΁ͷڧ੍͍໿͕͋ͬͨ͜ͱ

    View full-size slide

  91. Α͔ͬͨ͜ͱͱ՝୊

    • ߴ଎ͳϖʔδΛ࡞Εͨ͜ͱ


    • શһͰ࢓༷ʹ޲͖߹͏จԽΛ࡞Εͨ͜ͱ
    Α͔ͬͨ͜ͱ
    ՝୊
    • ࢓༷΁ͷڧ੍͍໿͕͋ͬͨ͜ͱ

    View full-size slide

  92. AMP ͷ੍໿ʹ͍ͭͯ੔ཧ

    • ೚ҙͷ JavaScript ͕ར༻Ͱ͖ͳ͍


    • CSS 75KB ҎԼʹ͠ͳ͚Ε͹ͳΒͳ͍


    • ෼ੳ/޿ࠂλά͸ڐ༰͞Εͨ΋ͷҎ֎͸ར༻ෆՄೳ
    → AMP ίϯϙʔωϯτ͔͠࢖͑ͳ͍
    → ࣗ༝ʹσβΠϯͷελΠϧΛ෇༩Ͱ͖ͳ͍
    → ͜Ε·Ͱͷ෼ੳ༻λάΛ࢖͍·Θͤͳ͍

    View full-size slide

  93. ࢓༷࣮ݱͷ೉͠͞ͷप஌
    AMP Ͱ͸ɺ

    ࣄۀతʹ࣮ݱ͍ͨ͠࢓༷Λ

    ஧࣮ʹ࣮૷Ͱ͖ͳ͍͜ͱ͕͋Δ

    69اըɾσβΠφʔɾ1.ʹप஌߹ҙ

    View full-size slide

  94. ࢓༷
    ։ൃ
    ϦϦʔε
    UX ΰϦΰϦͳ


    ੝Γ୔ࢁͳ࢓༷ͰΑΖʂ
    ࡞Δͷ೉͍͚͠Ͳɺ


    ࢓༷ʹॻ͍ͯ͋Δ͔Β


    ͕Μ͹ͬͯ࡞Δͧʂ
    ͜Ε·Ͱ

    View full-size slide

  95. ࢓༷
    ։ൃ
    ϦϦʔε
    (AMP Ͱ΋͜ͷ͘Β͍ͷॲཧ͸
    Ͱ͖ͦ͏ͩͳ)


    ΋͏গ͠Ϧονʹ΋Ͱ͖·͢ʂ
    ͍·
    (AMP͔ͩΒ UX ͸γϯϓϧ
    ʹ͠Α͏)


    ͜ͷ࢓༷ͰͰ͖·͔͢ʁ

    View full-size slide

  96. ࢓༷ΛΈΜͳͰ࡞ΔจԽ

    View full-size slide

  97. Α͔ͬͨ͜ͱͱ՝୊
    • ߴ଎ͳϖʔδΛ࡞Εͨ͜ͱ


    • શһͰ࢓༷ʹ޲͖߹͏จԽΛ࡞Εͨ͜ͱ
    Α͔ͬͨ͜ͱ
    ՝୊
    • ࢓༷΁ͷڧ੍͍໿͕͋ͬͨ͜ͱ

    View full-size slide

  98. ࢓༷࣮ݱͷ೉͠͞
    AMP Ͱ͸ɺ

    ࣄۀతʹ࣮ݱ͍ͨ͠࢓༷Λ

    ஧࣮ʹ࣮૷Ͱ͖ͳ͍͜ͱ͕͋Δ

    ఘΊ͟ΔΛಘͳ͍࢓༷΋ଟ਺

    View full-size slide

  99. ύϑΥʔϚϯε͕Α͚Ε͹


    ͍͍Μ͡Όͳ͍ͷʁ

    View full-size slide

  100. ͳͥ࢓༷ʹڧ੍͍໿͕͋Δͱ

    ໰୊ͩͱࢥ͔ͬͨʁ

    View full-size slide

  101. 8FCϝσΟΞ
    • هࣄͳͲͷӾཡػೳͰ࠷௿ݶͷ UX


    • Ϣʔβʔʹ੩తͳ৘ใΛಧ͚Δ͜ͱ͕ॏཁ


    • UX ࢓༷͕γϯϓϧ
    Web ϝσΟΞͱ AMP

    View full-size slide

  102. 8FCϝσΟΞ
    • هࣄͳͲͷӾཡػೳͰ࠷௿ݶͷ UX


    • Ϣʔβʔʹ੩తͳ৘ใΛಧ͚Δ͜ͱ͕ॏཁ


    • UX ࢓༷͕γϯϓϧ
    ".1
    Web ϝσΟΞͱ AMP

    View full-size slide

  103. 8FCΞϓϦ
    8FCϝσΟΞ
    • هࣄͳͲͷӾཡػೳͰ࠷௿ݶͷ UX


    • Ϣʔβʔʹ੩తͳ৘ใΛಧ͚Δ͜ͱ͕ॏཁ


    • UX ࢓༷͕γϯϓϧ
    • ϢʔβʔΠϯλϥΫγϣϯ͕ଟ਺Ͱߴ͍ UX


    • ϢʔβʔʹΑΓྑ͍ମݧΛఏڙ͢Δ͜ͱ͕ॏཁ


    • UX ࢓༷͕ෳࡶ
    ".1
    Web ΞϓϦͷొ৔
    Web ͷଟ༷Խ

    View full-size slide

  104. 8FCΞϓϦ
    8FCϝσΟΞ
    • هࣄͳͲͷӾཡػೳͰ࠷௿ݶͷ UX


    • Ϣʔβʔʹ੩తͳ৘ใΛಧ͚Δ͜ͱ͕ॏཁ


    • UX ࢓༷͕γϯϓϧ
    • ϢʔβʔΠϯλϥΫγϣϯ͕ଟ਺Ͱߴ͍ UX


    • ϢʔβʔʹΑΓྑ͍ମݧΛఏڙ͢Δ͜ͱ͕ॏཁ


    • UX ࢓༷͕ෳࡶ
    ".1
    AMP Ͱ͸࡞Γ͖Εͳ͍ UX ΁
    3FBDU
    Web ͷଟ༷Խ

    View full-size slide

  105. 8FCΞϓϦ
    8FCϝσΟΞ
    • هࣄͳͲͷӾཡػೳͰ࠷௿ݶͷ UX


    • Ϣʔβʔʹ੩తͳ৘ใΛಧ͚Δ͜ͱ͕ॏཁ


    • UX ࢓༷͕γϯϓϧ
    • ϢʔβʔΠϯλϥΫγϣϯ͕ଟ਺Ͱߴ͍ UX


    • ϢʔβʔʹΑΓྑ͍ମݧΛఏڙ͢Δ͜ͱ͕ॏཁ


    • UX ࢓༷͕ෳࡶ
    ".1
    AMP Ͱ͸࡞Γ͖Εͳ͍ UX ΁
    3FBDU
    UX ΁ͷϢʔβʔχʔζͷߴ·Γ

    View full-size slide

  106. ϑϩϯτΤϯυͷ࢓༷ͷෳࡶԽ
    • ࢓༷͕ෳࡶʹͳΕ͹ͳΔ΄Ͳɺ


    • ࢓༷ͷ࣮ݱ͕೉͍͠


    • ίʔυͷ඼࣭ͷ୲อ͕೉͍͠


    • ύϑΥʔϚϯεͷ୲อ͕೉͍͠

    View full-size slide

  107. ϑϩϯτΤϯυͷ࢓༷ͷෳࡶԽ
    • ࢓༷͕ෳࡶʹͳΕ͹ͳΔ΄Ͳɺ


    • ࢓༷ͷ࣮ݱ͕೉͍͠


    • ίʔυͷ඼࣭ͷ୲อ͕೉͍͠


    • ύϑΥʔϚϯεͷ୲อ͕೉͍͠

    ࢓༷ͷෳࡶੑͱٕज़తෛ࠴ͷτϨʔυΦϑ

    View full-size slide

  108. ࢓༷ ύϑΥʔϚϯε
    ࢓༷ͱύϑΥʔϚϯεͷτϨʔυΦϑ

    View full-size slide

  109. ࢓༷ ύϑΥʔϚϯε
    Web ΞϓϦͷొ৔ʹΑΓ่ΕΔۉߧ

    View full-size slide

  110. Web ΞϓϦͷొ৔ʹΑΓ่ΕΔۉߧ
    ύϑΥʔϚϯε
    ࢓༷
    💦

    View full-size slide

  111. ࢓༷ ύϑΥʔϚϯε
    AMP ͕໨ࢦͨ͠ੈք

    View full-size slide

  112. γϯϓϧͳ69࢓༷ ".1

    ෳࡶͳ69࢓༷ 3FBDU

    UX ΛϦονʹ͍ͨ͠

    View full-size slide

  113. γϯϓϧͳ69࢓༷ ".1

    ෳࡶͳ69࢓༷ 3FBDU

    ".1੍໿ʹΑΔ௒͑ΒΕͳ͍น

    View full-size slide

  114. ࢓༷ ύϑΥʔϚϯε
    AMP ͷཧ૝

    View full-size slide

  115. AMP ͷݱ࣮
    ࢓༷
    ύϑΥʔϚϯε
    💦

    View full-size slide

  116. AMP Λ࢖ͬͯ


    ύϑΥʔϚϯε͕޲্😄

    View full-size slide

  117. AMP Λ࢖ͬͯ


    ύϑΥʔϚϯε͕޲্😄
    ຊ౰ʹͦΕͰ͍͍ͷʁ

    View full-size slide

  118. ୭ͷͨΊͷύϑΥʔϚϯεʁ

    View full-size slide

  119. ϢʔβʔͷͨΊͷ


    ύϑΥʔϚϯε

    View full-size slide

  120. Ϣʔβʔʹͱͬͯ

    ඞཁͳ࢓༷΋࡞Εͳ͍

    View full-size slide

  121. Ϣʔβʔʹͱͬͯ

    ඞཁͳ࢓༷΋࡞Εͳ͍

    ݩ΋ࢠ΋ͳ͍

    View full-size slide

  122. ࢓༷ ύϑΥʔϚϯε
    ͋Δ΂͖࢟ʹ໭ͨ͢Ίʹ͸ʁ

    View full-size slide

  123. ۉߧΛอͭͷ͕೉͍͜͠ͱΛप஌
    ࢓༷ ύϑΥʔϚϯε
    ύϑΥʔϚϯεόδΣοτ
    69ཁ݅ͷ௥Ճ
    ࢓༷ͷγϯϓϧԽ ػೳ௥Ճ
    💦 💦
    💦
    💦

    View full-size slide


  124. ࢓༷ ύϑΥʔϚϯε
    ΈΜͳͰఱṝͷۉߧΛอͭ
    ٕज़తͳௐ੔
    ࢓༷ͷௐ੔
    ۉߧΛอͭͨΊͷҙࣝΛશһͰ࣋ͭจԽ

    View full-size slide

  125. AMP ͷ͜Ε͔Β

    View full-size slide

  126. AMP ࢖ͬͨํ͕͍͍ͷʁ

    View full-size slide

  127. ๻ͷճ౴


    ʮAMP Ͱ͋Δඞཁੑ͸ͳ͍ʯ

    View full-size slide

  128. https://www.suzukikenichi.com/blog/google-begins-to-show-non-amp-articles-on-top-stories/
    https://www.suzukikenichi.com/blog/google-removes-amp-badge-from-search-results/
    https://gigazine.net/news/20210519-google-amp-no-longer-preferential-treatment/
    AMP Λಛผࢹ͠ͳ͍ҙຯ

    View full-size slide

  129. AMP ʹཔΒͳͯ͘΋


    ߴ଎Խ͞ΕΕ͹

    ϥϯΩϯάʹޮՌత
    https://web.dev/i18n/ja/vitals/

    View full-size slide

  130. AMP ࢖ͬͨํ͕͍͍ͷʁ

    View full-size slide

  131. AMP ࢖ͬͨํ͕͍͍ͷʁ
    Web ϖʔδ͸஗ͯ͘΋͍͍ͷʁ

    View full-size slide

  132. AMP ࢖ͬͨํ͕͍͍ͷʁ
    Web ϖʔδ͸஗ͯ͘΋͍͍ͷʁ
    ͦΜͳΘ͚ͳ͍

    View full-size slide

  133. AMP ࢖ͬͨํ͕͍͍ͷʁ
    ".1ͷΤοηϯεΛऔΓೖΕͯ

    ߴ଎ͳ8FCϖʔδΛ࡞Δ

    View full-size slide

  134. ಠࣗ AMP ࣮૷͔Βߟ͑Δ


    AMP ͷΤοηϯε

    View full-size slide

  135. ύϑΥʔϚϯεόδΣοτ

    View full-size slide


  136. ώʔϩʔը૾ͷϓϦϩʔυ

    View full-size slide


  137. BNQJNHͷ-B[Z-PBE

    View full-size slide


  138. 49(Ωϟογϡ
    Ωϟογϡઓུ483

    View full-size slide


  139. ͨ͘͞Μͷ
    8FCϕετϓϥΫςΟε

    View full-size slide

  140. AMP ͸

    Ͳ͏͢Ε͹଎͞Λҡ࣋Ͱ͖Δͷ͔

    ॻ͍ͯ͋Δދͷר

    View full-size slide

  141. https://bentojs.dev/
    ".1#FOUP

    View full-size slide

  142. https://bentojs.dev/
    ".1#FOUP

    3FBDUίϯϙʔωϯτͰ
    ".1࢖͑Δ͔΋ʁ

    View full-size slide


  143. ·ͣ͸".1Ͱ

    ύϑΥʔϚϯεͷॏཁੑΛೝ஌͠
    ϢʔβʔϑΝʔετͳ
    ϓϩμΫτΛ࡞Γ্͛ΔจԽ

    View full-size slide

  144. AMP Λ༷ʑͳܗͰ׆༻͢Δ

    ".17BMJEͰ".1Ωϟογϡʹͷͤͯ࢖͏

    View full-size slide

  145. AMP Λ༷ʑͳܗͰ׆༻͢Δ

    ".17BMJEͰ".1Ωϟογϡʹͷͤͯ࢖͏
    ".1Ͱ8FCϕετϓϥΫςΟεΛֶͿ
    ".1#FOUPͰ෦෼తʹऔΓࠐΉ
    ڞ௨ೝࣝͷͨΊʹ".1Λ࢖͏

    View full-size slide

  146. ·ͱΊ
    • AMP ͷྺ࢙ΛৼΓฦΔ

    → AMP Ωϟογϡͷޭࡑ


    • AMP ΛֶͿ

    → AMP ͷ໨త͸ Web શମͷߴ଎Խ


    • AMP ͷಋೖ

    → AMP Λ࠶࣮૷͢Δํ๏Λ͝঺հ


    • AMP ಋೖͷৼΓฦΓ

    → AMP ͷڧ͍࢓༷΁ͷ੍໿Λڞ༗


    • AMP ͷ͜Ε͔Β

    → Web ͷϕετϓϥΫςΟεΛֶͼ׆༻͢Δ

    ɹ ϢʔβʔϑΝʔετͳจԽΛ࡞Δ

    View full-size slide

  147. ͝ਗ਼ௌ


    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    https://recruit-saiyo.jp/technology/
    We’re hiring!

    View full-size slide

  148. Next.js ͷ Static Generation ػೳ Λ

    ࢖͑͹଎͍ʁ
    ʲ݁࿦ʳYES


    ɹͨͩ͠...


    • ϦΫϧʔτͷΑ͏ͳେن໛ϝσΟΞͰԿඦສ݅ϖʔδΛ࣋ͭϝσΟ
    ΞαΠτͰɺSG ͢Δͷ͸ݱ࣮తͳ࣌ؒͰऴΘΒͳ͍


    • ISR ͩͱॳճ͸ SSR ͱಉ༷


    • ͞Βʹ node.js Λෳ਺୆ߏ੒Ͱಈ͔͍ͯ͠ΔͱɺΩϟογϡͷ
    HTML Λڞ༗Ͱ͖ͳ͍ͷͰɺΉ͠Ζݹ͍ HTML ͕࢒ΔՄೳੑ΋͋Δ


    • ݁ہ΋͏Ұஈ CDN Λ͔·͢͜ͱʹͳΓɺͦΕͳΒ SSR Ͱ΋มΘΒ
    ͳ͍

    ༨ஊ

    View full-size slide