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

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

 / How to impl...

Junya
November 27, 2021
2.8k

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
  2. ࣗݾ঺հ ## @ka2jun8 / Juny / ͔ʹ 
 - Twitter:

    @ka2jun8 
 - GitHub: @ka2jun8 ### ܦྺͱॴଐ 
 - 2014೥4݄ ৽ଔ F ͔Β͸͡·ΔձࣾʢR&Dʣ 
 - 2018೥4݄ גࣜձࣾϦΫϧʔτʢWeb FEʣ ### ΍ͬͯΔ͜ͱ 
 ۀ຿: Web ϝσΟΞαʔϏεͷάϩʔε 
 ໾ׂ: Web ։ൃνʔϜͷϦʔμʔ 
 ࠷ۙ: େن໛ FE ϦϓϨΠε͕ϗοττϐοΫ ্࢘ˢ 
  3. ໨࣍ • AMP ͷྺ࢙ΛৼΓฦΔ • AMP ΛֶͿ • AMP ͷಋೖ

    • AMP ಋೖͷৼΓฦΓ • AMP ͷ͜Ε͔Β 
  4. 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/
  5. AMP ͷಛ௃ • AMP ͷ੍໿ • JavaScript / CSS ͷ੍ݶ

    • AMP Ωϟογϡ • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον 
  6. AMP ͷಛ௃ • AMP ͷ੍໿ • JavaScript / CSS ͷ੍ݶ

    • AMP Ωϟογϡ • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον 
  7. AMP = SEO Ұ࣌୅ͷ౸དྷ • AMP Ωϟογϡ ʹΑΔڧ͗͢Δ༏۰ • Google

    ݕࡧ݁Ռը໘ͷϓϦϑΣονʹΑΔѹ౗తͳߴ଎Խ • ϖʔδϥϯΫΛແࢹͨ͠τοϓετʔϦʔͷΧϧʔηϧදࣔ  ϥϯΫҐͷαΠτ ΄͛;͕΄͛;͕΄͛;͕΄͛; ͕΄͛;͕ʜ Google ݕࡧ݁Ռ ".1هࣄ ".1هࣄ
  8. AMP = SEO Ұ࣌୅ͷ౸དྷ • AMP Ωϟογϡ ʹΑΔڧ͗͢Δ༏۰ • Google

    ݕࡧ݁Ռը໘ͷϓϦϑΣονʹΑΔѹ౗తͳߴ଎Խ • ϖʔδϥϯΫΛແࢹͨ͠τοϓετʔϦʔͷΧϧʔηϧදࣔ  • AMP ͸ SEO ʹޮ͘ͱ͍͏͕ᷚՃ଎౓తʹ޿·ͬͨ • ։ൃ෦ॺͰ͸ͳ͘ϚʔέςΟϯά෦ॺ SEO ୲౰͔Β 
 ʮSEO ࢪࡦͱͯ͠ AMP ΍Δͧʂʂʯͱ͍͏ଉר͍ͨཁ͕݅ग़Δ
  9. ϋΠϒϦου AMP  AMP ΧϊχΧϧ ΦϦδφϧ <html amp>
 <head> <link

    rel=“canonical” href=“/”>
 </head> <amp-img… /> </html> <html>
 <head> <link rel=“amphtml” href=“/amp”>
 </head> <img… /> </html> ΋ͱ΋ͱͷ HTML ৽ͨʹ AMP HTML ΛผͰ༻ҙ
  10. ϋΠϒϦου AMP ʹΑΔಋೖ • ΦϦδφϧͷը໘Λ͍͖ͳΓ AMP Խ͢Δͷ͸೉͍͠ • ϋΠϒϦου AMP

    ͷఏҊ • ಉ͡ը໘Λ AMP Խͯ͠ΧϊχΧϧϖʔδͰ༻ҙ͢Δ • طଘͷγεςϜΛյ͢͜ͱͳ͘ AMP Խ͕Մೳ • ݕࡧ݁Ռ͔Βͷ LP ͷΈ AMP ʹͰ͖Δ • χϡʔε/ϒϩάهࣄܥ͕ͧͬͯ͜ϋΠϒϦου AMP Խ 
  11. ϋΠϒϦου AMP ͷฐ֐  • AMP ͷ੍໿ʹΑΓࣗ༝ʹ JS/CSS ͕ॻ͚ͳ͍ 


    → Ϧονͳ UI Λ֬อ͢Δͷ͕೉͍͠ ΦϦδφϧͱൺֱ࣭ͯ͠ૉͳ".1ϖʔδʹ ྫɿݕࡧػೳͱ ϙοϓΞοϓɺ αΠυόʔ͸ ͳ͠
  12. AMP Ωϟογϡͷహ຤ • AMP εΫϦϓτʹରԠͤ͞Δ΋ όά͕૿Ճ • ͦ΋ͦ΋ AMP ͦͷ΋ͷ͕όά͍ͬͯΔ

    ͜ͱ΋ • ϋΠϒϦου AMP ͸໿ 2 ഒͷӡ༻޻਺͕͔͔Δ • AMP Ωϟογϡ ʹͷͤΔͱϢʔβʔ෼ੳ͕Ͱ͖ͳ͍ (ޙड़) • Google ͕ AMP ͷ ༏۰Λ΍ΊΔ ͱݴ͍ग़͢ (࠷ۙ) 
  13. AMP Ωϟογϡͷహ຤ • AMP εΫϦϓτʹରԠͤ͞Δ΋ όά͕૿Ճ • ͦ΋ͦ΋ AMP ͦͷ΋ͷ͕όά͍ͬͯΔ

    ͜ͱ΋ • ϋΠϒϦου AMP ͸໿ 2 ഒͷӡ༻޻਺͕͔͔Δ • AMP Ωϟογϡ ʹͷͤΔͱϢʔβʔ෼ੳ͕Ͱ͖ͳ͍ (ޙड़) • Google ͕ AMP ͷ ༏۰Λ΍ΊΔ ͱݴ͍ग़͢ (࠷ۙ)  ".1΍Ί͍ͨʜ
  14. AMP ͷಛ௃ (࠶ܝ) • AMP ͷ੍໿ • JavaScript / CSS

    ͷ੍ݶ • AMP Ωϟογϡ • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον 
  15. AMP ͷಛ௃ (࠶ܝ) • AMP ͷ੍໿ • JavaScript / CSS

    ͷ੍ݶ • AMP Ωϟογϡ • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον 
  16. AMP ͷ੍໿ͱ͸ʁ • ೚ҙͷ JavaScript ͕ར༻Ͱ͖ͳ͍ • CSS 75KB ҎԼʹ͠ͳ͚Ε͹ͳΒͳ͍

    • ෼ੳ/޿ࠂλά͸ڐ༰͞Εͨ΋ͷҎ֎͸ར༻ෆՄೳ ͳͲͳͲ…  ੍໿ΛΫϦΞͨ͠Β".1ΩϟογϡʹͷΔ
  17. AMP ͷ໨త • AMP ͷ੍໿ • JavaScript / CSS ͷ੍ݶ

    • AMP Ωϟογϡ • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον  ͋͘·Ͱ΋ ͓·͚ ෆཁͳίʔυ ࢓༷ Λ 
 ؚ·ͤͳ͍
  18. AMP ͷ໨త • AMP ͷ੍໿ • JavaScript / CSS ͷ੍ݶ

    • AMP Ωϟογϡ • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον  ߴ଎ͳ΢Σϒϖʔδ͕࡞ΕΔ͜ͱ ͋͘·Ͱ΋ ͓·͚ ෆཁͳίʔυ ࢓༷ Λ 
 ؚ·ͤͳ͍
  19. AMP Valid  AMP AMP Valid AMP Invalid <html amp>

    <amp-img… /> </html> <html> <img… /> </html> ͜Ε·Ͱ௨Γͷ HTML ੍໿ΛΫϦΞͨ͠ AMP HTML
  20. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP ".1 όϦσʔλʔ

    (PPHMF 
 ݕࡧ݁Ռ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ
  21. 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
  22. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP ".1 όϦσʔλʔ

    (PPHMF 
 ݕࡧ݁Ռ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ AMP Valid❤
  23. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP ".1 όϦσʔλʔ

    (PPHMF 
 ݕࡧ݁Ռ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ ᶅΩϟογϡอ؅ 483 AMP
  24. Ωϟογϡઓུ 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
  25. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP ".1 όϦσʔλʔ

    (PPHMF 
 ݕࡧ݁Ռ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ ᶅΩϟογϡอ؅ 483 AMP
  26. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1

    όϦσʔλʔ ".1 ΦϓςΟϚΠβʔ AMP (PPHMF 
 ݕࡧ݁Ռ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ ᶆ)5.-࠷దԽ ᶅΩϟογϡอ؅ 483
  27. AMP ΦϓςΟϚΠβʔ • AMP valid ͳঢ়ଶͷ HTML ͚ͩͰ͸·ͩ࠷దԽ͕଍Γͳ͍ • AMP

    ΩϟογϡʹͷΔλΠϛϯάͰ͞Βʹ࠷దԽ͞ΕΔ ɹɹྫ: • AMPίϯϙʔωϯτͷαʔόʔαΠυϨϯμϦϯά(AMP SSR) 
 →ϨΠΞ΢τΛࣄલܭࢉʹΑΓσόΠεͰͷॲཧෛՙΛܰݮ • ώʔϩʔը૾ͷϓϦϩʔυ 
 →༏ઌతʹϩʔυ͢ΔͷͰॳظද͕ࣔ଎͘ͳΔ • ෆཁίʔυͷ࡟আɺϑΥϯτ࠷దԽ and more… 
 →ϕετϓϥΫςΟε͕͍Ζ͍ΖೖͬͯΔ  AMP ".1 ΦϓςΟϚΠβʔ AMP ৄղ AMP Optimizer - Qiita 
 https://qiita.com/sangotaro/items/a85da91164860bd679af
  28. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1

    όϦσʔλʔ ".1 ΦϓςΟϚΠβʔ AMP (PPHMF 
 ݕࡧ݁Ռ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ ᶆ)5.-࠷దԽ ᶅΩϟογϡอ؅ 483
  29. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1

    όϦσʔλʔ ".1 ΦϓςΟϚΠβʔ AMP (PPHMF 
 ݕࡧ݁Ռ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ ᶆ)5.-࠷దԽ ᶅΩϟογϡอ؅ 483
  30. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1

    όϦσʔλʔ ".1 ΦϓςΟϚΠβʔ AMP (PPHMF 
 ݕࡧ݁Ռ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ ᶆ)5.-࠷దԽ ᶇϦιʔεϓϦϑΣον ᶅΩϟογϡอ؅ 483
  31. 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/
  32. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1

    όϦσʔλʔ ".1 ΦϓςΟϚΠβʔ AMP (PPHMF 
 ݕࡧ݁Ռ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ ᶆ)5.-࠷దԽ ᶇϦιʔεϓϦϑΣον ᶅΩϟογϡอ؅ 483
  33. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1

    όϦσʔλʔ ".1 ΦϓςΟϚΠβʔ AMP (PPHMF 
 ݕࡧ݁Ռ AMP ".1 ίϯϙʔωϯτ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ ᶆ)5.-࠷దԽ ᶇϦιʔεϓϦϑΣον ᶅΩϟογϡอ؅ 483 ᶈ".1$43
  34. AMP ίϯϙʔωϯτ • JSαΠζɺ࣮ߦύϑΥʔϚϯεɺΞΫηγϏϦςΟɺCWV Λߟྀ  ͲΜͳ։ൃऀͰ΋ Web ϕετϓϥΫςΟεΛڗडͰ͖Δ <amp-img

    alt="A view of the sea" src="/static/inline-examples/ images/sea.jpg" width="900" height="675" layout="responsive"> </amp-img> https://amp.dev/ja/documentation/components/amp-img/ ྫ: amp-img ͸ Web ʹਫ਼௨ͨ͠஌͕ࣝͳ͍։ൃऀͰ΋ IE / Safari Ͱ 
 ɹ lazy load ͕࢖͑ΔΑ͏ʹͳ͍ͬͯΔ͠ɺCLS ΋ൃੜ͠ͳ͍Α͏ʹͳ͍ͬͯΔ
  35. AMP ͷ͓͞Β͍ • AMP ͷ໨తΛֶͿ 
 → Web શମͷߴ଎Խ͕໨త •

    AMP ͷٕज़ΛֶͿ 
 → Web ϕετϓϥΫςΟεͷ٧Ί߹Θͤ 
  36. AMP ͷ͓͞Β͍ • AMP ͷ໨తΛֶͿ 
 → Web શମͷߴ଎Խ͕໨త •

    AMP ͷٕज़ΛֶͿ 
 → Web ϕετϓϥΫςΟεͷ٧Ί߹Θͤ  ར༻͢ΔϝϦοτ͋Γͦ͏
  37. υϝΠϯ͕ Google ʹͳΔ • AMP Ωϟογϡ͸ Google ͔Β഑৴͞ΕΔͷͰυϝΠϯ͕ Google ʹ

    • ܭଌλάΛ૊ΈࠐΜͩࡍʹ Cookie ͕ Third Party ѻ͍ • ITP2 ܥͷฐ֐ • iOS Ϣʔβʔͷ࠶๚͕ܭଌͰ͖ͳ͍  ैདྷͷϚʔέςΟϯά͕Ͱ͖ͳ͍
  38. Next.js ͷ AMP ରԠ • Next.js ͸ 1ߦ௥Ճ͢Δ͚ͩͰ AMP Խ͕Մೳ

     • Ϗϧυ࣌ʹ AMP όϦσʔλʔ͕ಈ࡞͢Δ 
 → ։ൃ͠ͳ͕Β੍໿ҧ൓Λ֬ೝͰ͖Δ • Ϗϧυ࣌ʹ AMP ΦϓςΟϚΠβʔ͕ಈ࡞͢Δ 
 → AMP Ωϟογϡ૬౰ͷ࠷దԽ͕Ϗϧυ࣌ʹߦΘΕΔ export const config = { amp: true };
  39. Next.js Ͱͷ AMP Invalid Խ • AMP Ωϟογϡʹͷͤͳ͍ͨΊʹ͸ AMP Invalid

    Խ͢Δඞཁ • _document.tsx Ͱ؆қʹ AMP Invalid Խ͕Մೳ  import { Html } from "next/document"; render() { return ( <Html lang="ja">{children}</Html> ); } <html lang=“ja" amp> Ϗϧυ݁Ռ Ϗϧυ݁Ռ // import { Html } from "next/document"; render() { return ( <html lang="ja">{children}</html> ); } <html lang="ja">
  40. 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 ͷΧελϜʹ͍ͭͯͷهड़Օॴ
  41. 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/
  42. Ωϟογϡઓུ(SWR) • AMP ͷ SSR ͸஗͍ͷͰຖճ SSR ͨ͘͠ͳ͍ • Stale-While-Revalidate

    ͰΩϟογϡΛ 
 ߋ৽͍ͨ͠  ΍Γ͍ͨ͜ͱ → SWR ʹରԠ͍ͯ͠Δ CDN ͷಋೖ
  43. Ωϟογϡઓུ(SWR) • CDN (Fastly) ͷಋೖ • Stale-While-Revalidate ʹରԠ͍ͯ͠Δ • ͞Βʹ

    Ωϟογϡώοτ཰ ͕ߴ͍ • ΦϦδϯγʔϧυ: ಛఆͷΤοδΛඞͣ௨͢  ΍ͬͨ͜ͱ Ұ౓୭͔͕ΞΫηεͯ͘͠ΕΕ͹ߴ଎഑৴Մೳʹ https://docs.fastly.com/ja/guides/shielding
  44. Ωϟογϡઓུ(SWR) • CDN (Fastly) ͷಋೖ • Stale-While-Revalidate ʹରԠ͍ͯ͠Δ • ͞Βʹ

    Ωϟογϡώοτ཰ ͕ߴ͍ • ΦϦδϯγʔϧυ: ಛఆͷΤοδΛඞͣ௨͢  ΍ͬͨ͜ͱ Ұ౓୭͔͕ΞΫηεͯ͘͠ΕΕ͹ߴ଎഑৴Մೳʹ https://docs.fastly.com/ja/guides/shielding Ͱ΋·ͩॳճ๚໰͸஗͍…
  45. ΫϩʔϦϯά • ৗʹΩϟογϡ͕ଘࡏ͠࠷৽Խ͍ͨ͠ • AMP Ωϟογϡͷ৔߹ • Google ͷ AMP

    ༻ bot ͕Ϋϩʔϧͯ͠ϖʔδΛΠϯσοΫε • ΠϯσοΫε͞Εͨϖʔδ͕શͯ AMP ΩϟογϡʹͷΔ • ΦϦδϯΛ Google AMP bot ͕ͤͬͤͱຖ೔Ϋϩʔϧͯ͘͠ΕΔ • ཪΛฦͤ͹ɺ Google AMP bot ͕ΩϟογϡΛ͋ͨͨΊͯ͘Ε͍ͯΔ  ΍Γ͍ͨ͜ͱ → ΩϟογϡΛ͋ͨͨΊͯ͘ΕΔ΍͕ͭ΄͍͠
  46. ΫϩʔϦϯά • Ωϟογϡ΢ΥʔϚʔͷ࣮૷ • ΩϟογϡΛৗʹ࠷৽Խ͢ΔΫϩʔϦϯάπʔϧ • ର৅ͷϖʔδΛߜͬͯޮ཰తʹࣗαΠτʹΞΫηε • αʔνίϯιʔϧ API

    ͰΞΫηεͷଟ͍ϖʔδ • αΠτϚοϓͰࣗ෼͕ͨͪ഑৴͍ͨ͠ϖʔδ  ΍ͬͨ͜ͱ Googlebot ΍Ϣʔβʔ͔Βͷ ॳճΞΫηε΋ߴ଎഑৴Մೳʹ
  47. ΫϩʔϦϯά • Ωϟογϡ΢ΥʔϚʔͷ࣮૷ • ΩϟογϡΛৗʹ࠷৽Խ͢ΔΫϩʔϦϯάπʔϧ • ର৅ͷϖʔδΛߜͬͯޮ཰తʹࣗαΠτʹΞΫηε • αʔνίϯιʔϧ API

    ͰΞΫηεͷଟ͍ϖʔδ • αΠτϚοϓͰࣗ෼͕ͨͪ഑৴͍ͨ͠ϖʔδ  ΍ͬͨ͜ͱ Googlebot ΍Ϣʔβʔ͔Βͷ ॳճΞΫηε΋ߴ଎഑৴Մೳʹ Ͱ΋·ͩ AMP Ωϟογϡͷ࠷େͷಛ௃͕…
  48. ϦιʔεϓϦϑΣον Chrome ϒϥ΢βͰ͋Ε͹ 
 ݕࡧ݁Ռը໘͔ΒͷϓϦϑΣον ͕Մೳʹ  https://developers.google.com/search/docs/advanced/experience/signed-exchange?hl=ja AMP ·ͨ͸ඇ

    AMP Λ໰Θͣ΢ΣϒαΠτ͕ SXG ʹରԠ͍ͯ͠Δ৔ ߹ɺGoogle ݕࡧͨ͠ͱ͖ʹฦ͞ΕΔɺؔ࿈͢Δ݁ՌͷओཁͳϦιʔ εͷ͍͔ͭ͘ʢHTMLɺJavaScriptɺCSSɺը૾ɺϑΥϯτͳͲʣΛɺ ϓϥΠόγʔʹ഑ྀͨ͠ܗͰϓϦϑΣονͰ͖·͢ɻ • SXG ΩϟογϡΛ׆༻ ΍ͬͨ͜ͱ
  49. 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 ͕͋ΔϦΫΤετ ΍ͬͨ͜ͱ
  50. 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 ͕͋ΔϦΫΤετ ΍ͬͨ͜ͱ
  51. 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 ͕͋ΔϦΫΤετ ΍ͬͨ͜ͱ
  52. 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Ͱॺ໊͢Δ
  53. 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ॺ໊͖ͭίϯςϯπΛฦ͢
  54. SXG Ωϟογϡ  ϝϦοτ AMP Ωϟογϡͱ 
 ಉ౳ͷޮՌΛ 
 ಘΔ͜ͱ͕Մೳ

    σϝϦοτ SXG ূ໌ॻ͸͓͕͔͔ۚΔ ӡ༻ίετ͕ߴ͍ 
 iPhone Ϣʔβʔ͸ର৅֎ ΍ͬͨ͜ͱ
  55. ݁Ռ • Ұྫͷ঺հ • 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
  56. AMP ͷ੍໿ʹ͍ͭͯ੔ཧ  • ೚ҙͷ JavaScript ͕ར༻Ͱ͖ͳ͍ • CSS 75KB

    ҎԼʹ͠ͳ͚Ε͹ͳΒͳ͍ • ෼ੳ/޿ࠂλά͸ڐ༰͞Εͨ΋ͷҎ֎͸ར༻ෆՄೳ → AMP ίϯϙʔωϯτ͔͠࢖͑ͳ͍ → ࣗ༝ʹσβΠϯͷελΠϧΛ෇༩Ͱ͖ͳ͍ → ͜Ε·Ͱͷ෼ੳ༻λάΛ࢖͍·Θͤͳ͍
  57. 8FCΞϓϦ 8FCϝσΟΞ • هࣄͳͲͷӾཡػೳͰ࠷௿ݶͷ UX • Ϣʔβʔʹ੩తͳ৘ใΛಧ͚Δ͜ͱ͕ॏཁ • UX ࢓༷͕γϯϓϧ

    • ϢʔβʔΠϯλϥΫγϣϯ͕ଟ਺Ͱߴ͍ UX • ϢʔβʔʹΑΓྑ͍ମݧΛఏڙ͢Δ͜ͱ͕ॏཁ • UX ࢓༷͕ෳࡶ ".1 Web ΞϓϦͷొ৔ Web ͷଟ༷Խ 
  58. 8FCΞϓϦ 8FCϝσΟΞ • هࣄͳͲͷӾཡػೳͰ࠷௿ݶͷ UX • Ϣʔβʔʹ੩తͳ৘ใΛಧ͚Δ͜ͱ͕ॏཁ • UX ࢓༷͕γϯϓϧ

    • ϢʔβʔΠϯλϥΫγϣϯ͕ଟ਺Ͱߴ͍ UX • ϢʔβʔʹΑΓྑ͍ମݧΛఏڙ͢Δ͜ͱ͕ॏཁ • UX ࢓༷͕ෳࡶ ".1 AMP Ͱ͸࡞Γ͖Εͳ͍ UX ΁ 3FBDU Web ͷଟ༷Խ 
  59. 8FCΞϓϦ 8FCϝσΟΞ • هࣄͳͲͷӾཡػೳͰ࠷௿ݶͷ UX • Ϣʔβʔʹ੩తͳ৘ใΛಧ͚Δ͜ͱ͕ॏཁ • UX ࢓༷͕γϯϓϧ

    • ϢʔβʔΠϯλϥΫγϣϯ͕ଟ਺Ͱߴ͍ UX • ϢʔβʔʹΑΓྑ͍ମݧΛఏڙ͢Δ͜ͱ͕ॏཁ • UX ࢓༷͕ෳࡶ ".1 AMP Ͱ͸࡞Γ͖Εͳ͍ UX ΁ 3FBDU UX ΁ͷϢʔβʔχʔζͷߴ·Γ 
  60. 

  61. ·ͱΊ • AMP ͷྺ࢙ΛৼΓฦΔ 
 → AMP Ωϟογϡͷޭࡑ • AMP

    ΛֶͿ 
 → AMP ͷ໨త͸ Web શମͷߴ଎Խ • AMP ͷಋೖ 
 → AMP Λ࠶࣮૷͢Δํ๏Λ͝঺հ • AMP ಋೖͷৼΓฦΓ 
 → AMP ͷڧ͍࢓༷΁ͷ੍໿Λڞ༗ • AMP ͷ͜Ε͔Β 
 → Web ͷϕετϓϥΫςΟεΛֶͼ׆༻͢Δ 
 ɹ ϢʔβʔϑΝʔετͳจԽΛ࡞Δ 
  62. Next.js ͷ Static Generation ػೳ Λ 
 ࢖͑͹଎͍ʁ ʲ݁࿦ʳYES ɹͨͩ͠...

    • ϦΫϧʔτͷΑ͏ͳେن໛ϝσΟΞͰԿඦສ݅ϖʔδΛ࣋ͭϝσΟ ΞαΠτͰɺSG ͢Δͷ͸ݱ࣮తͳ࣌ؒͰऴΘΒͳ͍ • ISR ͩͱॳճ͸ SSR ͱಉ༷ • ͞Βʹ node.js Λෳ਺୆ߏ੒Ͱಈ͔͍ͯ͠ΔͱɺΩϟογϡͷ HTML Λڞ༗Ͱ͖ͳ͍ͷͰɺΉ͠Ζݹ͍ HTML ͕࢒ΔՄೳੑ΋͋Δ • ݁ہ΋͏Ұஈ CDN Λ͔·͢͜ͱʹͳΓɺͦΕͳΒ SSR Ͱ΋มΘΒ ͳ͍  ༨ஊ