AMP キャッシュを超えるシステムを自社ドメインで実現する方法   / How to implement a system that goes beyond amp-caching on your domain

AMP ΩϟογϡΛ௒͑Δγες ϜΛࣗࣾυϝΠϯͰ࣮ݱ͢Δํ๏     How to implement a system
that goes beyond amp- caching on your domain Մࣇ ५໵ @ka2jun8 2021/11/27 JSConf JP 2021

ࣗݾ঺հ ## @ka2jun8 / Juny / ͔ʹ   - Twitter:
@ka2jun8   - GitHub: @ka2jun8 ### ܦྺͱॴଐ   - 2014೥4݄ ৽ଔ F ͔Β͸͡·ΔձࣾʢR&Dʣ   - 2018೥4݄ גࣜձࣾϦΫϧʔτʢWeb FEʣ ### ΍ͬͯΔ͜ͱ   ۀ຿: Web ϝσΟΞαʔϏεͷάϩʔε   ໾ׂ: Web ։ൃνʔϜͷϦʔμʔ   ࠷ۙ: େن໛ FE ϦϓϨΠε͕ϗοττϐοΫ ্࢘ˢ

࠷ۙ AMP ͬͯͲ͏ͳͷʁ

όουχϡʔε͕ଓ͘… • 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

AMP ͬͯ΋͏   ࢖Θͳ͍ํ͕͍͍…ʁ

AMP ͬͯ΋͏   ࢖Θͳ͍ํ͕͍͍…ʁ ࣮ࡍͲ͏ͳͷʁʂ

໨࣍ • AMP ͷྺ࢙ΛৼΓฦΔ • AMP ΛֶͿ • AMP ͷಋೖ
• AMP ಋೖͷৼΓฦΓ • AMP ͷ͜Ε͔Β

AMP ͷྺ࢙ΛৼΓฦΔ

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/

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

AMP ͸ͳͥྲྀߦ͔ͬͨʁ

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

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

AMP = SEO Ұ࣌୅ͷ౸དྷ • AMP Ωϟογϡ ʹΑΔڧ͗͢Δ༏۰ • Google
ݕࡧ݁Ռը໘ͷϓϦϑΣονʹΑΔѹ౗తͳߴ଎Խ • ϖʔδϥϯΫΛແࢹͨ͠τοϓετʔϦʔͷΧϧʔηϧදࣔ • AMP ͸ SEO ʹޮ͘ͱ͍͏͕ᷚՃ଎౓తʹ޿·ͬͨ • ։ൃ෦ॺͰ͸ͳ͘ϚʔέςΟϯά෦ॺ SEO ୲౰͔Β   ʮSEO ࢪࡦͱͯ͠ AMP ΍Δͧʂʂʯͱ͍͏ଉר͍ͨཁ͕݅ग़Δ

ϋΠϒϦου AMP ʹΑΔಋೖ • ΦϦδφϧͷը໘Λ͍͖ͳΓ AMP Խ͢Δͷ͸೉͍͠ • ϋΠϒϦου AMP
ͷఏҊ • ಉ͡ը໘Λ AMP Խͯ͠ΧϊχΧϧϖʔδͰ༻ҙ͢Δ

ϋΠϒϦου 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 ΛผͰ༻ҙ

ϋΠϒϦου AMP ʹΑΔಋೖ • ΦϦδφϧͷը໘Λ͍͖ͳΓ AMP Խ͢Δͷ͸೉͍͠ • ϋΠϒϦου AMP
ͷఏҊ • ಉ͡ը໘Λ AMP Խͯ͠ΧϊχΧϧϖʔδͰ༻ҙ͢Δ • طଘͷγεςϜΛյ͢͜ͱͳ͘ AMP Խ͕Մೳ • ݕࡧ݁Ռ͔Βͷ LP ͷΈ AMP ʹͰ͖Δ • χϡʔε/ϒϩάهࣄܥ͕ͧͬͯ͜ϋΠϒϦου AMP Խ

ϋΠϒϦου AMP ͷฐ֐ • AMP ͷ੍໿ʹΑΓࣗ༝ʹ JS/CSS ͕ॻ͚ͳ͍  
→ Ϧονͳ UI Λ֬อ͢Δͷ͕೉͍͠ ΦϦδφϧͱൺֱ࣭ͯ͠ૉͳ".1ϖʔδʹ ྫɿݕࡧػೳͱ ϙοϓΞοϓɺ αΠυόʔ͸ ͳ͠

AMP ʹΑΔݕࡧ݁ՌͷԚછ • େྔͷ࣭ૉͳ AMP ϖʔδ͕ݕࡧ݁ՌΛԚછ ͜Εʹର͠ Google ͸….
".1εΫϦϓτͷొ৔ ".1ίϯϙʔωϯτͷߋͳΔϦονԽ

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

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

͜Ε͕ AMP ΁ͷ ͓͓ΑͦͷੈؒͷΠϝʔδ

AMP ͷ͜ͱΛ ͳ͔ͬͨ͜ͱʹ͢Δͷ͸ ΋͍ͬͨͳ͍ʂʂ

AMP ΛֶͿ

AMP ΛֶͿ • AMP ͷ໨తΛֶͿ • AMP ͷٕज़ΛֶͿ

AMP ͷ໨తΛֶͿ

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

AMP ͷ੍໿ͱ͸ʁ • ೚ҙͷ JavaScript ͕ར༻Ͱ͖ͳ͍ • CSS 75KB ҎԼʹ͠ͳ͚Ε͹ͳΒͳ͍
• ෼ੳ/޿ࠂλά͸ڐ༰͞Εͨ΋ͷҎ֎͸ར༻ෆՄೳ ͳͲͳͲ… ੍໿ΛΫϦΞͨ͠Β".1ΩϟογϡʹͷΔ

AMP ͷ໨తͬͯ   AMP Ωϟογϡʹ   ͷͤΔ͜ͱ͚ͩͬʁʁʁ

AMP ͷ໨తͬͯ   AMP Ωϟογϡʹ   ͷͤΔ͜ͱ͚ͩͬʁʁʁ /0

AMP ͷຊདྷͷ໨త Web ͱ͍͏ϓϥοτϑΥʔϜશମͷߴ଎Խ https://developers-jp.googleblog.com/2018/03/standardizing-lessons-learned-from-amp.html

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

AMP ͷ໨త • AMP ͷ੍໿ • JavaScript / CSS ͷ੍ݶ
• AMP Ωϟογϡ • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον ߴ଎ͳ΢Σϒϖʔδ͕࡞ΕΔ͜ͱ ͋͘·Ͱ΋ ͓·͚ ෆཁͳίʔυ ࢓༷ Λ   ؚ·ͤͳ͍

AMP ͷٕज़ΛֶͿ

Web αΠτΛӾཡ͢Δ·Ͱ ϒϥ΢β ΦϦδϯ (PPHMFCPU (PPHMF   ݕࡧ݁Ռ ᶃΫϩʔϦϯά
ᶄΠϯσοΫε ᶅΦϦδϯ΁ΞΫηε

AMP શମ૾ ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP (PPHMF  
ݕࡧ݁Ռ AMP Valid

AMP Valid AMP AMP Valid AMP Invalid <html amp>
<amp-img… /> </html> <html> <img… /> </html> ͜Ε·Ͱ௨Γͷ HTML ੍໿ΛΫϦΞͨ͠ AMP HTML

ݕࡧ݁Ռ

ݕࡧ݁Ռ ᶃΫϩʔϦϯά

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

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

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

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

Ωϟογϡઓུ 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

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

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

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

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

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

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/

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

όϦσʔλʔ ".1 ΦϓςΟϚΠβʔ AMP (PPHMF   ݕࡧ݁Ռ AMP ".1 ίϯϙʔωϯτ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ ᶆ)5.-࠷దԽ ᶇϦιʔεϓϦϑΣον ᶅΩϟογϡอ؅ 483 ᶈ".1$43

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 ΋ൃੜ͠ͳ͍Α͏ʹͳ͍ͬͯΔ

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

AMP ͷ͓͞Β͍ • AMP ͷ໨తΛֶͿ   → Web શମͷߴ଎Խ͕໨త •
AMP ͷٕज़ΛֶͿ   → Web ϕετϓϥΫςΟεͷ٧Ί߹Θͤ ར༻͢ΔϝϦοτ͋Γͦ͏

AMP ͷಋೖ

ϦΫϧʔτͱ AMP Ωϟογϡ

υϝΠϯ͕ Google ʹͳΔ • AMP Ωϟογϡ͸ Google ͔Β഑৴͞ΕΔͷͰυϝΠϯ͕ Google ʹ
• ܭଌλάΛ૊ΈࠐΜͩࡍʹ Cookie ͕ Third Party ѻ͍ • ITP2 ܥͷฐ֐ • iOS Ϣʔβʔͷ࠶๚͕ܭଌͰ͖ͳ͍ ैདྷͷϚʔέςΟϯά͕Ͱ͖ͳ͍

AMP ΩϟογϡʹͷͤΒΕͳ͍

AMP ͷ࠶࣮૷

AMP Λ࠶࣮૷͢Δ

AMP Λ࠶࣮૷͢Δ શ෦͢΂ͯ·ΔͬͱεϦͬͱΰϦͬͱ   ΤϒϦγϯά࠶࣮૷ͩʂʂ

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

Next.js ͷ AMP ରԠ • Next.js ͸ 1ߦ௥Ճ͢Δ͚ͩͰ AMP Խ͕Մೳ
• Ϗϧυ࣌ʹ AMP όϦσʔλʔ͕ಈ࡞͢Δ   → ։ൃ͠ͳ͕Β੍໿ҧ൓Λ֬ೝͰ͖Δ • Ϗϧυ࣌ʹ AMP ΦϓςΟϚΠβʔ͕ಈ࡞͢Δ   → AMP Ωϟογϡ૬౰ͷ࠷దԽ͕Ϗϧυ࣌ʹߦΘΕΔ export const config = { amp: true };

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">

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 ͷΧελϜʹ͍ͭͯͷهड़Օॴ

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/

AMP Λ࠶࣮૷͢Δ

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

AMP ࠶࣮૷ʹ࢒Δ՝୊ SSR஗͍

AMP ΩϟογϡΛ࠶࣮૷ • Ωϟογϡઓུ (SWR) • ΫϩʔϦϯά • ϦιʔεϓϦϑΣον

Ωϟογϡઓུ(SWR) • AMP ͷ SSR ͸஗͍ͷͰຖճ SSR ͨ͘͠ͳ͍ • Stale-While-Revalidate
ͰΩϟογϡΛ   ߋ৽͍ͨ͠ ΍Γ͍ͨ͜ͱ → SWR ʹରԠ͍ͯ͠Δ CDN ͷಋೖ

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

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

ΫϩʔϦϯά • ৗʹΩϟογϡ͕ଘࡏ͠࠷৽Խ͍ͨ͠ • AMP Ωϟογϡͷ৔߹ • Google ͷ AMP
༻ bot ͕Ϋϩʔϧͯ͠ϖʔδΛΠϯσοΫε • ΠϯσοΫε͞Εͨϖʔδ͕શͯ AMP ΩϟογϡʹͷΔ • ΦϦδϯΛ Google AMP bot ͕ͤͬͤͱຖ೔Ϋϩʔϧͯ͘͠ΕΔ • ཪΛฦͤ͹ɺ Google AMP bot ͕ΩϟογϡΛ͋ͨͨΊͯ͘Ε͍ͯΔ ΍Γ͍ͨ͜ͱ → ΩϟογϡΛ͋ͨͨΊͯ͘ΕΔ΍͕ͭ΄͍͠

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

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

ϦιʔεϓϦϑΣον • CDN ͱΩϟογϡ΢ΥʔϚʔͰ͍ͩͿૣ͘ͳ͕ͬͨ… • Ϣʔβʔ͕ݕࡧ݁Ռը໘ʹདྷͨஈ֊ͰϦιʔεΛϓ ϦϑΣον͍ͤͨ͞ • υϝΠϯ͸ࣗࣾυϝΠϯͷ··ʹ͍ͨ͠
΍Γ͍ͨ͜ͱ → ݕࡧ݁Ռը໘ͰϓϦϑΣον͍ͨ͠ʂʂ

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

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 ͕͋ΔϦΫΤετ ΍ͬͨ͜ͱ

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

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

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

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

SXG Ωϟογϡ ϝϦοτ AMP Ωϟογϡͱ   ಉ౳ͷޮՌΛ   ಘΔ͜ͱ͕Մೳ
σϝϦοτ SXG ূ໌ॻ͸͓͕͔͔ۚΔ ӡ༻ίετ͕ߴ͍   iPhone Ϣʔβʔ͸ର৅֎ ΍ͬͨ͜ͱ

AMP Λ࠶࣮૷͢Δ Next.js Ωϟογϡ΢ΥʔϚʔ fastly SXG Ωϟογϡ Next.js Next.js

݁Ռ • Ұྫͷ঺հ • 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

AMP ಋೖͷৼΓฦΓ

Α͔ͬͨ͜ͱͱ՝୊ • ߴ଎ͳϖʔδΛ࡞Εͨ͜ͱ • શһͰ࢓༷ʹ޲͖߹͏จԽΛ࡞Εͨ͜ͱ Α͔ͬͨ͜ͱ ՝୊ • ࢓༷΁ͷڧ੍͍໿͕͋ͬͨ͜ͱ

AMP ͷ੍໿ʹ͍ͭͯ੔ཧ • ೚ҙͷ JavaScript ͕ར༻Ͱ͖ͳ͍ • CSS 75KB
ҎԼʹ͠ͳ͚Ε͹ͳΒͳ͍ • ෼ੳ/޿ࠂλά͸ڐ༰͞Εͨ΋ͷҎ֎͸ར༻ෆՄೳ → AMP ίϯϙʔωϯτ͔͠࢖͑ͳ͍ → ࣗ༝ʹσβΠϯͷελΠϧΛ෇༩Ͱ͖ͳ͍ → ͜Ε·Ͱͷ෼ੳ༻λάΛ࢖͍·Θͤͳ͍

࢓༷࣮ݱͷ೉͠͞ͷप஌ AMP Ͱ͸ɺ   ࣄۀతʹ࣮ݱ͍ͨ͠࢓༷Λ   ஧࣮ʹ࣮૷Ͱ͖ͳ͍͜ͱ͕͋Δ 69اըɾσβΠφʔɾ1.ʹप஌߹ҙ

࢓༷ ։ൃ ϦϦʔε UX ΰϦΰϦͳ ੝Γ୔ࢁͳ࢓༷ͰΑΖʂ ࡞Δͷ೉͍͚͠Ͳɺ ࢓༷ʹॻ͍ͯ͋Δ͔Β ͕Μ͹ͬͯ࡞Δͧʂ ͜Ε·Ͱ

࢓༷ ։ൃ ϦϦʔε (AMP Ͱ΋͜ͷ͘Β͍ͷॲཧ͸ Ͱ͖ͦ͏ͩͳ) ΋͏গ͠Ϧονʹ΋Ͱ͖·͢ʂ ͍· (AMP͔ͩΒ UX
͸γϯϓϧ ʹ͠Α͏) ͜ͷ࢓༷ͰͰ͖·͔͢ʁ

࢓༷ΛΈΜͳͰ࡞ΔจԽ

Α͔ͬͨ͜ͱͱ՝୊ • ߴ଎ͳϖʔδΛ࡞Εͨ͜ͱ • શһͰ࢓༷ʹ޲͖߹͏จԽΛ࡞Εͨ͜ͱ Α͔ͬͨ͜ͱ ՝୊ • ࢓༷΁ͷڧ੍͍໿͕͋ͬͨ͜ͱ

࢓༷࣮ݱͷ೉͠͞ AMP Ͱ͸ɺ   ࣄۀతʹ࣮ݱ͍ͨ͠࢓༷Λ   ஧࣮ʹ࣮૷Ͱ͖ͳ͍͜ͱ͕͋Δ ఘΊ͟ΔΛಘͳ͍࢓༷΋ଟ਺

ύϑΥʔϚϯε͕Α͚Ε͹ ͍͍Μ͡Όͳ͍ͷʁ

ͳͥ࢓༷ʹڧ੍͍໿͕͋Δͱ   ໰୊ͩͱࢥ͔ͬͨʁ

8FCϝσΟΞ • هࣄͳͲͷӾཡػೳͰ࠷௿ݶͷ UX • Ϣʔβʔʹ੩తͳ৘ใΛಧ͚Δ͜ͱ͕ॏཁ • UX ࢓༷͕γϯϓϧ Web
ϝσΟΞͱ AMP

8FCϝσΟΞ • هࣄͳͲͷӾཡػೳͰ࠷௿ݶͷ UX • Ϣʔβʔʹ੩తͳ৘ใΛಧ͚Δ͜ͱ͕ॏཁ • UX ࢓༷͕γϯϓϧ ".1
Web ϝσΟΞͱ AMP

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

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

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

ϑϩϯτΤϯυͷ࢓༷ͷෳࡶԽ • ࢓༷͕ෳࡶʹͳΕ͹ͳΔ΄Ͳɺ • ࢓༷ͷ࣮ݱ͕೉͍͠ • ίʔυͷ඼࣭ͷ୲อ͕೉͍͠ • ύϑΥʔϚϯεͷ୲อ͕೉͍͠

ϑϩϯτΤϯυͷ࢓༷ͷෳࡶԽ • ࢓༷͕ෳࡶʹͳΕ͹ͳΔ΄Ͳɺ • ࢓༷ͷ࣮ݱ͕೉͍͠ • ίʔυͷ඼࣭ͷ୲อ͕೉͍͠ • ύϑΥʔϚϯεͷ୲อ͕೉͍͠
࢓༷ͷෳࡶੑͱٕज़తෛ࠴ͷτϨʔυΦϑ

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

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

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

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

γϯϓϧͳ69࢓༷ ".1 ෳࡶͳ69࢓༷ 3FBDU UX ΛϦονʹ͍ͨ͠

γϯϓϧͳ69࢓༷ ".1 ෳࡶͳ69࢓༷ 3FBDU ".1੍໿ʹΑΔ௒͑ΒΕͳ͍น

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

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

AMP Λ࢖ͬͯ ύϑΥʔϚϯε͕޲্😄

AMP Λ࢖ͬͯ ύϑΥʔϚϯε͕޲্😄 ຊ౰ʹͦΕͰ͍͍ͷʁ

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

ϢʔβʔͷͨΊͷ ύϑΥʔϚϯε

Ϣʔβʔʹͱͬͯ   ඞཁͳ࢓༷΋࡞Εͳ͍

Ϣʔβʔʹͱͬͯ   ඞཁͳ࢓༷΋࡞Εͳ͍ ݩ΋ࢠ΋ͳ͍

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

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

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

AMP ͷ͜Ε͔Β

AMP ࢖ͬͨํ͕͍͍ͷʁ

๻ͷճ౴ ʮAMP Ͱ͋Δඞཁੑ͸ͳ͍ʯ

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 Λಛผࢹ͠ͳ͍ҙຯ

AMP ʹཔΒͳͯ͘΋ ߴ଎Խ͞ΕΕ͹   ϥϯΩϯάʹޮՌత https://web.dev/i18n/ja/vitals/

AMP ࢖ͬͨํ͕͍͍ͷʁ

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

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

AMP ࢖ͬͨํ͕͍͍ͷʁ ".1ͷΤοηϯεΛऔΓೖΕͯ   ߴ଎ͳ8FCϖʔδΛ࡞Δ

ಠࣗ AMP ࣮૷͔Βߟ͑Δ AMP ͷΤοηϯε

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

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

BNQJNHͷ-B[Z-PBE

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

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

AMP ͸   Ͳ͏͢Ε͹଎͞Λҡ࣋Ͱ͖Δͷ͔   ॻ͍ͯ͋Δދͷר

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

https://bentojs.dev/ ".1#FOUP 3FBDUίϯϙʔωϯτͰ ".1࢖͑Δ͔΋ʁ

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

AMP Λ༷ʑͳܗͰ׆༻͢Δ ".17BMJEͰ".1Ωϟογϡʹͷͤͯ࢖͏

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

·ͱΊ

·ͱΊ • AMP ͷྺ࢙ΛৼΓฦΔ   → AMP Ωϟογϡͷޭࡑ • AMP
ΛֶͿ   → AMP ͷ໨త͸ Web શମͷߴ଎Խ • AMP ͷಋೖ   → AMP Λ࠶࣮૷͢Δํ๏Λ͝঺հ • AMP ಋೖͷৼΓฦΓ   → AMP ͷڧ͍࢓༷΁ͷ੍໿Λڞ༗ • AMP ͷ͜Ε͔Β   → Web ͷϕετϓϥΫςΟεΛֶͼ׆༻͢Δ   ɹ ϢʔβʔϑΝʔετͳจԽΛ࡞Δ

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

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

AMP キャッシュを超えるシステムを自社ドメインで実現する方法 / How to implement a system that goes beyond amp-caching on your domain

AMP キャッシュを超えるシステムを自社ドメインで実現する方法 / How to implement a system that goes beyond amp-caching on your domain

More Decks by Junya

Featured

Transcript

AMP キャッシュを超えるシステムを自社ドメインで実現する方法   / How to implement a system that goes beyond amp-caching on your domain

AMP キャッシュを超えるシステムを自社ドメインで実現する方法   / How to implement a system that goes beyond amp-caching on your domain