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

View Slide

ࣗݾ঺հ
## @ka2jun8 / Juny / ͔ʹ
 
- Twitter: @ka2jun8
 
- GitHub: @ka2jun8

### ܦྺͱॴଐ
 
- 2014೥4݄ ৽ଔ F ͔Β͸͡·ΔձࣾʢR&Dʣ
 
- 2018೥4݄ גࣜձࣾϦΫϧʔτʢWeb FEʣ

### ΍ͬͯΔ͜ͱ
 
ۀ຿: Web ϝσΟΞαʔϏεͷάϩʔε
 
໾ׂ: Web ։ൃνʔϜͷϦʔμʔ
 
࠷ۙ: େن໛ FE ϦϓϨΠε͕ϗοττϐοΫ
্࢘ˢ

View Slide

࠷ۙ AMP ͬͯͲ͏ͳͷʁ

View Slide

όουχϡʔε͕ଓ͘…
•

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 Slide

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

View Slide

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

࣮ࡍͲ͏ͳͷʁʂ

View Slide

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

• AMP ΛֶͿ

• AMP ͷಋೖ

• AMP ಋೖͷৼΓฦΓ

• AMP ͷ͜Ε͔Β

View Slide

AMP ͷྺ࢙ΛৼΓฦΔ

View Slide

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 Slide

AMP ͷಛ௃
• AMP ͷ੍໿

• JavaScript / CSS ͷ੍ݶ

• AMP Ωϟογϡ

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

View Slide

AMP ͸ͳͥྲྀߦ͔ͬͨʁ

View Slide

AMP ͷಛ௃
• AMP ͷ੍໿


• AMP Ωϟογϡ


View Slide

AMP = SEO Ұ࣌୅ͷ౸དྷ
• AMP Ωϟογϡ ʹΑΔڧ͗͢Δ༏۰

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

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

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

View Slide

AMP = SEO Ұ࣌୅ͷ౸དྷ
• AMP Ωϟογϡ ʹΑΔڧ͗͢Δ༏۰

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

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

• AMP ͸ SEO ʹޮ͘ͱ͍͏͕ᷚՃ଎౓తʹ޿·ͬͨ
• ։ൃ෦ॺͰ͸ͳ͘ϚʔέςΟϯά෦ॺ SEO ୲౰͔Β
 
ʮSEO ࢪࡦͱͯ͠ AMP ΍Δͧʂʂʯͱ͍͏ଉר͍ͨཁ͕݅ग़Δ

View Slide

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

• ϋΠϒϦου AMP ͷఏҊ

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

View Slide

ϋΠϒϦου AMP

AMP
ΧϊχΧϧ
ΦϦδφϧ
 

 

 

 

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

View Slide

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

• ϋΠϒϦου AMP ͷఏҊ

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

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

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

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

View Slide

ϋΠϒϦου AMP ͷฐ֐

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

View Slide

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

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

View Slide

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

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

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

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

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

View Slide

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

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

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

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

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

".1΍Ί͍ͨʜ

View Slide

͜Ε͕ AMP ΁ͷ

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

View Slide

AMP ͷ͜ͱΛ

ͳ͔ͬͨ͜ͱʹ͢Δͷ͸

΋͍ͬͨͳ͍ʂʂ

View Slide

AMP ΛֶͿ

View Slide

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

• AMP ͷٕज़ΛֶͿ

View Slide

AMP ͷ໨తΛֶͿ

View Slide

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


• AMP Ωϟογϡ


View Slide

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

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

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

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

View Slide

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

View Slide

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

/0

View Slide

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

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

View Slide

AMP ͷ໨త
• AMP ͷ੍໿


• AMP Ωϟογϡ


͋͘·Ͱ΋
͓·͚
ෆཁͳίʔυ ࢓༷
Λ
 
ؚ·ͤͳ͍

View Slide

AMP ͷ໨త
• AMP ͷ੍໿


• AMP Ωϟογϡ


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

View Slide

AMP ͷٕज़ΛֶͿ

View Slide

Web αΠτΛӾཡ͢Δ·Ͱ

ϒϥ΢β
ΦϦδϯ
(PPHMFCPU
(PPHMF
 
ݕࡧ݁Ռ
ᶃΫϩʔϦϯά
ᶄΠϯσοΫε
ᶅΦϦδϯ΁ΞΫηε

View Slide

AMP શମ૾

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

View Slide

AMP Valid

AMP
AMP Valid
AMP Invalid

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

View Slide

AMP શମ૾

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

View Slide

AMP શମ૾

ϒϥ΢β
ΦϦδϯ
".1Ωϟογϡ
(PPHMFCPU
AMP
(PPHMF
 
ݕࡧ݁Ռ
ᶃΫϩʔϦϯά

View Slide

AMP શମ૾

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

View Slide

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 Slide

AMP શମ૾

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

View Slide

AMP શମ૾

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

AMP

View Slide

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

AMP શମ૾

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

AMP

View Slide

AMP શମ૾

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

View Slide

AMP ΦϓςΟϚΠβʔ
• AMP valid ͳঢ়ଶͷ HTML ͚ͩͰ͸·ͩ࠷దԽ͕଍Γͳ͍

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

ɹɹྫ:

• AMPίϯϙʔωϯτͷαʔόʔαΠυϨϯμϦϯά(AMP SSR)
 
→ϨΠΞ΢τΛࣄલܭࢉʹΑΓσόΠεͰͷॲཧෛՙΛܰݮ

• ώʔϩʔը૾ͷϓϦϩʔυ
 
→༏ઌతʹϩʔυ͢ΔͷͰॳظද͕ࣔ଎͘ͳΔ

• ෆཁίʔυͷ࡟আɺϑΥϯτ࠷దԽ and more…
 
→ϕετϓϥΫςΟε͕͍Ζ͍ΖೖͬͯΔ

AMP
".1
ΦϓςΟϚΠβʔ
AMP
ৄղ AMP Optimizer - Qiita
 
https://qiita.com/sangotaro/items/a85da91164860bd679af

View Slide

AMP શମ૾

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

View Slide

AMP શମ૾

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

View Slide

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 Slide

AMP શମ૾

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

View Slide

AMP શମ૾

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

ᶈ".1$43

View Slide

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 Slide

AMP ͷ͓͞Β͍
 
→ Web શମͷߴ଎Խ͕໨త

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

View Slide

AMP ͷ͓͞Β͍
 
→ Web શମͷߴ଎Խ͕໨త

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

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

View Slide

AMP ͷಋೖ

View Slide

ϦΫϧʔτͱ

AMP Ωϟογϡ

View Slide

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

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

• ITP2 ܥͷฐ֐

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

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

View Slide

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

View Slide

AMP ͷ࠶࣮૷

View Slide

AMP Λ࠶࣮૷͢Δ

View Slide

AMP Λ࠶࣮૷͢Δ

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

View Slide

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

View Slide

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

• Ϗϧυ࣌ʹ AMP όϦσʔλʔ͕ಈ࡞͢Δ
 
→ ։ൃ͠ͳ͕Β੍໿ҧ൓Λ֬ೝͰ͖Δ

• Ϗϧυ࣌ʹ AMP ΦϓςΟϚΠβʔ͕ಈ࡞͢Δ
 
→ AMP Ωϟογϡ૬౰ͷ࠷దԽ͕Ϗϧυ࣌ʹߦΘΕΔ
export const config = { amp: true };

View Slide

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 Slide

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 Slide

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 Slide

AMP Λ࠶࣮૷͢Δ

View Slide

Next.js Ͱ AMP πʔϧΛ࢖͏

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

View Slide

AMP ࠶࣮૷ʹ࢒Δ՝୊

SSR஗͍

View Slide

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

• ΫϩʔϦϯά

• ϦιʔεϓϦϑΣον

View Slide

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

• Stale-While-Revalidate ͰΩϟογϡΛ
 
ߋ৽͍ͨ͠

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

View Slide

• CDN (Fastly) ͷಋೖ

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

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

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

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

View Slide

• CDN (Fastly) ͷಋೖ

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

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

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

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

View Slide

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

• AMP Ωϟογϡͷ৔߹

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

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

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

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

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

View Slide

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

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

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

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

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

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

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

View Slide

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

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

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

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

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

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

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

View Slide

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

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

• υϝΠϯ͸ࣗࣾυϝΠϯͷ··ʹ͍ͨ͠

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

View Slide

ϦιʔεϓϦϑΣον
Chrome ϒϥ΢βͰ͋Ε͹
 
ݕࡧ݁Ռը໘͔ΒͷϓϦϑΣον ͕Մೳʹ

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

View Slide

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 Slide


(PPHMFCPU
49(

8FC
1BDLBHFS
4FSWFS
˞
/HJOY
'BTUMZ
ΦϦδϯ
SXG ?
ᶃ SXG ͷϦΫΤετ
΍ͬͨ͜ͱ

View Slide


(PPHMFCPU
49(

8FC
1BDLBHFS
4FSWFS
˞
/HJOY
'BTUMZ
ΦϦδϯ
SXG ?
ᶄॺ໊͢ΔͨΊʹΦϦδϯͷίϯςϯπΛ DL
΍ͬͨ͜ͱ

View Slide


(PPHMFCPU
49(

8FC
1BDLBHFS
4FSWFS
˞
/HJOY
'BTUMZ
ΦϦδϯ
SXG ?
΍ͬͨ͜ͱ
ᶅSXGͰॺ໊͢Δ

View Slide


(PPHMFCPU
49(

8FC
1BDLBHFS
4FSWFS
˞
/HJOY
'BTUMZ
ΦϦδϯ
SXG ?
΍ͬͨ͜ͱ
ᶆSXGॺ໊͖ͭίϯςϯπΛฦ͢

View Slide

SXG Ωϟογϡ

ϝϦοτ

AMP Ωϟογϡͱ
 
ಉ౳ͷޮՌΛ
 
ಘΔ͜ͱ͕Մೳ
σϝϦοτ

SXG ূ໌ॻ͸͓͕͔͔ۚΔ

ӡ༻ίετ͕ߴ͍
 
iPhone Ϣʔβʔ͸ର৅֎
΍ͬͨ͜ͱ

View Slide

AMP Λ࠶࣮૷͢Δ

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

View Slide

݁Ռ
• Ұྫͷ঺հ

• 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 Slide

AMP ಋೖͷৼΓฦΓ

View Slide

Α͔ͬͨ͜ͱͱ՝୊

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

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

View Slide

࠶ܝ

View Slide

AMP ͷ੍໿ʹ͍ͭͯ੔ཧ

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

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

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

View Slide

࢓༷࣮ݱͷ೉͠͞ͷप஌
AMP Ͱ͸ɺ
 
ࣄۀతʹ࣮ݱ͍ͨ͠࢓༷Λ
 
஧࣮ʹ࣮૷Ͱ͖ͳ͍͜ͱ͕͋Δ

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

View Slide

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

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

࢓༷ʹॻ͍ͯ͋Δ͔Β

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

View Slide

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

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

͜ͷ࢓༷ͰͰ͖·͔͢ʁ

View Slide

࢓༷ΛΈΜͳͰ࡞ΔจԽ

View Slide

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

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

View Slide

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

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

View Slide

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

͍͍Μ͡Όͳ͍ͷʁ

View Slide

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

View Slide

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

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

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

View Slide

8FCϝσΟΞ


".1
Web ϝσΟΞͱ AMP

View Slide

8FCΞϓϦ
8FCϝσΟΞ


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

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

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

View Slide

8FCΞϓϦ
8FCϝσΟΞ




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

View Slide

8FCΞϓϦ
8FCϝσΟΞ




".1
AMP Ͱ͸࡞Γ͖Εͳ͍ UX ΁
3FBDU
UX ΁ͷϢʔβʔχʔζͷߴ·Γ

View Slide

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

• ࢓༷ͷ࣮ݱ͕೉͍͠

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

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

View Slide

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

• ࢓༷ͷ࣮ݱ͕೉͍͠

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

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

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

View Slide

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

View Slide

Web ΞϓϦͷొ৔ʹΑΓ่ΕΔۉߧ

View Slide

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

View Slide

AMP ͕໨ࢦͨ͠ੈք

View Slide

γϯϓϧͳ69࢓༷ ".1

ෳࡶͳ69࢓༷ 3FBDU

UX ΛϦονʹ͍ͨ͠

View Slide

γϯϓϧͳ69࢓༷ ".1

ෳࡶͳ69࢓༷ 3FBDU

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

View Slide

AMP ͷཧ૝

View Slide

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

View Slide

AMP Λ࢖ͬͯ

ύϑΥʔϚϯε͕޲্😄

View Slide

AMP Λ࢖ͬͯ

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

View Slide

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

View Slide

ϢʔβʔͷͨΊͷ

ύϑΥʔϚϯε

View Slide

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

View Slide

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

ݩ΋ࢠ΋ͳ͍

View Slide

͋Δ΂͖࢟ʹ໭ͨ͢Ίʹ͸ʁ

View Slide

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

View Slide

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

View Slide

AMP ͷ͜Ε͔Β

View Slide

AMP ࢖ͬͨํ͕͍͍ͷʁ

View Slide

๻ͷճ౴

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

View Slide

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 Slide

AMP ʹཔΒͳͯ͘΋

ߴ଎Խ͞ΕΕ͹
 
ϥϯΩϯάʹޮՌత
https://web.dev/i18n/ja/vitals/

View Slide


View Slide

Web ϖʔδ͸஗ͯ͘΋͍͍ͷʁ

View Slide

Web ϖʔδ͸஗ͯ͘΋͍͍ͷʁ
ͦΜͳΘ͚ͳ͍

View Slide

".1ͷΤοηϯεΛऔΓೖΕͯ
 
ߴ଎ͳ8FCϖʔδΛ࡞Δ

View Slide

ಠࣗ AMP ࣮૷͔Βߟ͑Δ

AMP ͷΤοηϯε

View Slide

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

View Slide

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

View Slide

BNQJNHͷ-B[Z-PBE

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

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

View Slide

View Slide

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

View Slide

AMP Λ༷ʑͳܗͰ׆༻͢Δ

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

View Slide

AMP Λ༷ʑͳܗͰ׆༻͢Δ

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

View Slide

·ͱΊ

View Slide

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

• AMP ΛֶͿ
 
→ AMP ͷ໨త͸ Web શମͷߴ଎Խ

• AMP ͷಋೖ
 
→ AMP Λ࠶࣮૷͢Δํ๏Λ͝঺հ

• AMP ಋೖͷৼΓฦΓ
 
→ AMP ͷڧ͍࢓༷΁ͷ੍໿Λڞ༗

• AMP ͷ͜Ε͔Β
 
→ Web ͷϕετϓϥΫςΟεΛֶͼ׆༻͢Δ
 
ɹ ϢʔβʔϑΝʔετͳจԽΛ࡞Δ

View Slide

͝ਗ਼ௌ

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

View Slide

Next.js ͷ Static Generation ػೳ Λ
 
࢖͑͹଎͍ʁ
ʲ݁࿦ʳYES

ɹͨͩ͠...

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

• ISR ͩͱॳճ͸ SSR ͱಉ༷

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

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

༨ஊ

View Slide

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

Junya

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

Junya

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