Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
AMP キャッシュを超えるシステムを自社ドメインで実現する方法 / How to implement a system that goes beyond amp-caching on your domain
Junya
November 27, 2021
3
1.8k
AMP キャッシュを超えるシステムを自社ドメインで実現する方法 / How to implement a system that goes beyond amp-caching on your domain
Junya
November 27, 2021
Tweet
Share
More Decks by Junya
See All by Junya
SEO のためにエンジニアができること
ka2jun8
2
1.1k
Chrome Dev Summit 2019振り返り
ka2jun8
0
270
制約と誓約
ka2jun8
6
2.4k
エンジニアになろう
ka2jun8
0
280
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
448
30k
Clear Off the Table
cherdarchuk
79
290k
A designer walks into a library…
pauljervisheath
196
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
Code Review Best Practice
trishagee
44
9.7k
Faster Mobile Websites
deanohume
294
29k
4 Signs Your Business is Dying
shpigford
169
20k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
Intergalactic Javascript Robots from Outer Space
tanoku
260
25k
Scaling GitHub
holman
451
140k
Transcript
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 ### ܦྺͱॴଐ - 20144݄ ৽ଔ F ͔Β͡·ΔձࣾʢR&Dʣ - 20184݄ גࣜձࣾϦΫϧʔτʢ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 ͷಛ (࠶ܝ) • 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 (PPHMF
ݕࡧ݁Ռ
AMP શମ૾ ϒϥβ ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP (PPHMF
ݕࡧ݁Ռ ᶃΫϩʔϦϯά
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
AMP શମ૾ ϒϥβ ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP ".1 όϦσʔλʔ
(PPHMF ݕࡧ݁Ռ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ AMP Valid❤
AMP શମ૾ ϒϥβ ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP ".1 όϦσʔλʔ
(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
AMP શମ૾ ϒϥβ ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP ".1 όϦσʔλʔ
(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
AMP શମ૾ ϒϥβ ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1
όϦσʔλʔ ".1 ΦϓςΟϚΠβʔ AMP (PPHMF ݕࡧ݁Ռ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ ᶆ)5.-࠷దԽ ᶅΩϟογϡอ 483
AMP શମ૾ ϒϥβ ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1
όϦσʔλʔ ".1 ΦϓςΟϚΠβʔ AMP (PPHMF ݕࡧ݁Ռ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ ᶆ)5.-࠷దԽ ᶅΩϟογϡอ 483
AMP શମ૾ ϒϥβ ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1
όϦσʔλʔ ".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/
AMP શମ૾ ϒϥβ ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1
όϦσʔλʔ ".1 ΦϓςΟϚΠβʔ AMP (PPHMF ݕࡧ݁Ռ ᶃΫϩʔϦϯά ᶄ7BMJEJUZ֬ೝ ᶆ)5.-࠷దԽ ᶇϦιʔεϓϦϑΣον ᶅΩϟογϡอ 483
AMP શମ૾ ϒϥβ ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1
όϦσʔλʔ ".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 ͕͋ΔϦΫΤετ ͬͨ͜ͱ
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 ͕͋ΔϦΫΤετ ͬͨ͜ͱ
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 ͕͋ΔϦΫΤετ ͬͨ͜ͱ
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Ͱॺ໊͢Δ
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ॺ໊͖ͭίϯςϯπΛฦ͢
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 ͷଟ༷Խ
8FCΞϓϦ 8FCϝσΟΞ • هࣄͳͲͷӾཡػೳͰ࠷ݶͷ UX • Ϣʔβʔʹ੩తͳใΛಧ͚Δ͜ͱ͕ॏཁ • UX ༷͕γϯϓϧ
• ϢʔβʔΠϯλϥΫγϣϯ͕ଟͰߴ͍ UX • ϢʔβʔʹΑΓྑ͍ମݧΛఏڙ͢Δ͜ͱ͕ॏཁ • UX ༷͕ෳࡶ ".1 AMP Ͱ࡞Γ͖Εͳ͍ UX 3FBDU Web ͷଟ༷Խ
8FCΞϓϦ 8FCϝσΟΞ • هࣄͳͲͷӾཡػೳͰ࠷ݶͷ UX • Ϣʔβʔʹ੩తͳใΛಧ͚Δ͜ͱ͕ॏཁ • UX ༷͕γϯϓϧ
• ϢʔβʔΠϯλϥΫγϣϯ͕ଟͰߴ͍ 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 ͰมΘΒ ͳ͍ ༨ஊ