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

51ec4d0a70f717097dc9c3d5bb94762f?s=47 Junya
November 27, 2021
3
1.8k

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

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

51ec4d0a70f717097dc9c3d5bb94762f?s=128

Junya

November 27, 2021
Tweet

More Decks by Junya

See All by Junya
SEO のためにエンジニアができること
51ec4d0a70f717097dc9c3d5bb94762f?s=48 ka2jun8
2
1.1k
Chrome Dev Summit 2019振り返り
51ec4d0a70f717097dc9c3d5bb94762f?s=48 ka2jun8
0
270
制約と誓約
51ec4d0a70f717097dc9c3d5bb94762f?s=48 ka2jun8
6
2.4k
エンジニアになろう
51ec4d0a70f717097dc9c3d5bb94762f?s=48 ka2jun8
0
280

Featured

See All Featured
Building a Scalable Design System with Sketch
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
448
30k
Clear Off the Table
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
79
290k
A designer walks into a library…
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
196
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1.1k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
44
9.7k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
29k
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k
Making the Leap to Tech Lead
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
113
7.4k
Java REST API Framework Comparison - PWX 2021
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
11
4.9k
Imperfection Machines: The Place of Print at Facebook
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
12k
Intergalactic Javascript Robots from Outer Space
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
25k
Scaling GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k

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 ͬͯͲ͏ͳͷʁ 

  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

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

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

  7. ໨࣍ • AMP ͷྺ࢙ΛৼΓฦΔ • AMP ΛֶͿ • AMP ͷಋೖ

    • AMP ಋೖͷৼΓฦΓ • AMP ͷ͜Ε͔Β 

  8. AMP ͷྺ࢙ΛৼΓฦΔ

  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/

  10. AMP ͷಛ௃ • AMP ͷ੍໿ • JavaScript / CSS ͷ੍ݶ

    • AMP Ωϟογϡ • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον 

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

  12. AMP ͷಛ௃ • AMP ͷ੍໿ • JavaScript / CSS ͷ੍ݶ

    • AMP Ωϟογϡ • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον 

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

    ݕࡧ݁Ռը໘ͷϓϦϑΣονʹΑΔѹ౗తͳߴ଎Խ • ϖʔδϥϯΫΛແࢹͨ͠τοϓετʔϦʔͷΧϧʔηϧදࣔ  ϥϯΫҐͷαΠτ ΄͛;͕΄͛;͕΄͛;͕΄͛; ͕΄͛;͕ʜ Google ݕࡧ݁Ռ ".1هࣄ ".1هࣄ

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

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

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

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

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

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

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

  18. ϋΠϒϦου AMP ͷฐ֐  • AMP ͷ੍໿ʹΑΓࣗ༝ʹ JS/CSS ͕ॻ͚ͳ͍ 


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

  19. AMP ʹΑΔݕࡧ݁ՌͷԚછ • େྔͷ࣭ૉͳ AMP ϖʔδ͕ݕࡧ݁ՌΛԚછ  ͜Εʹର͠ Google ͸….

    ".1εΫϦϓτͷొ৔ ".1ίϯϙʔωϯτͷߋͳΔϦονԽ

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

    ͜ͱ΋ • ϋΠϒϦου AMP ͸໿ 2 ഒͷӡ༻޻਺͕͔͔Δ • AMP Ωϟογϡ ʹͷͤΔͱϢʔβʔ෼ੳ͕Ͱ͖ͳ͍ (ޙड़) • Google ͕ AMP ͷ ༏۰Λ΍ΊΔ ͱݴ͍ग़͢ (࠷ۙ) 

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

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

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

  23. AMP ͷ͜ͱΛ ͳ͔ͬͨ͜ͱʹ͢Δͷ͸ ΋͍ͬͨͳ͍ʂʂ 

  24. AMP ΛֶͿ

  25. AMP ΛֶͿ • AMP ͷ໨తΛֶͿ • AMP ͷٕज़ΛֶͿ 

  26. AMP ͷ໨తΛֶͿ 

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

    ͷ੍ݶ • AMP Ωϟογϡ • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον 

  28. AMP ͷಛ௃ (࠶ܝ) • AMP ͷ੍໿ • JavaScript / CSS

    ͷ੍ݶ • AMP Ωϟογϡ • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον 

  29. AMP ͷ੍໿ͱ͸ʁ • ೚ҙͷ JavaScript ͕ར༻Ͱ͖ͳ͍ • CSS 75KB ҎԼʹ͠ͳ͚Ε͹ͳΒͳ͍

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

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

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

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

  33. AMP ͷ໨త • AMP ͷ੍໿ • JavaScript / CSS ͷ੍ݶ

    • AMP Ωϟογϡ • Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον  ͋͘·Ͱ΋ ͓·͚ ෆཁͳίʔυ ࢓༷ Λ 
 ؚ·ͤͳ͍

  34. AMP ͷ໨త • AMP ͷ੍໿ • JavaScript / CSS ͷ੍ݶ

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

  35. AMP ͷٕज़ΛֶͿ 

  36. Web αΠτΛӾཡ͢Δ·Ͱ  ϒϥ΢β ΦϦδϯ (PPHMFCPU (PPHMF 
 ݕࡧ݁Ռ ᶃΫϩʔϦϯά

    ᶄΠϯσοΫε ᶅΦϦδϯ΁ΞΫηε

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


    ݕࡧ݁Ռ AMP Valid

  38. AMP Valid  AMP AMP Valid AMP Invalid <html amp>

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

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


    ݕࡧ݁Ռ

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


    ݕࡧ݁Ռ ᶃΫϩʔϦϯά

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

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

  42. 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

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

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

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

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

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

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

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

  47. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1

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

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

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

  49. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1

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

  50. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1

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

  51. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1

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

  52. 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/

  53. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1

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

  54. AMP શମ૾  ϒϥ΢β ΦϦδϯ ".1Ωϟογϡ (PPHMFCPU AMP AMP ".1

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

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

  56. AMP ͷ͓͞Β͍ • AMP ͷ໨తΛֶͿ 
 → Web શମͷߴ଎Խ͕໨త •

    AMP ͷٕज़ΛֶͿ 
 → Web ϕετϓϥΫςΟεͷ٧Ί߹Θͤ 

  57. AMP ͷ͓͞Β͍ • AMP ͷ໨తΛֶͿ 
 → Web શମͷߴ଎Խ͕໨త •

    AMP ͷٕज़ΛֶͿ 
 → Web ϕετϓϥΫςΟεͷ٧Ί߹Θͤ  ར༻͢ΔϝϦοτ͋Γͦ͏

  58. AMP ͷಋೖ

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

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

    • ܭଌλάΛ૊ΈࠐΜͩࡍʹ Cookie ͕ Third Party ѻ͍ • ITP2 ܥͷฐ֐ • iOS Ϣʔβʔͷ࠶๚͕ܭଌͰ͖ͳ͍  ैདྷͷϚʔέςΟϯά͕Ͱ͖ͳ͍

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

  62. AMP ͷ࠶࣮૷ 

  63. AMP Λ࠶࣮૷͢Δ 

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

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

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

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

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

  68. 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 ͷΧελϜʹ͍ͭͯͷهड़Օॴ

  69. 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/

  70. AMP Λ࠶࣮૷͢Δ 

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

  72. AMP ࠶࣮૷ʹ࢒Δ՝୊  SSR஗͍

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

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

    ͰΩϟογϡΛ 
 ߋ৽͍ͨ͠  ΍Γ͍ͨ͜ͱ → SWR ʹରԠ͍ͯ͠Δ CDN ͷಋೖ

  75. Ωϟογϡઓུ(SWR) • CDN (Fastly) ͷಋೖ • Stale-While-Revalidate ʹରԠ͍ͯ͠Δ • ͞Βʹ

    Ωϟογϡώοτ཰ ͕ߴ͍ • ΦϦδϯγʔϧυ: ಛఆͷΤοδΛඞͣ௨͢  ΍ͬͨ͜ͱ Ұ౓୭͔͕ΞΫηεͯ͘͠ΕΕ͹ߴ଎഑৴Մೳʹ https://docs.fastly.com/ja/guides/shielding

  76. Ωϟογϡઓུ(SWR) • CDN (Fastly) ͷಋೖ • Stale-While-Revalidate ʹରԠ͍ͯ͠Δ • ͞Βʹ

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

  77. ΫϩʔϦϯά • ৗʹΩϟογϡ͕ଘࡏ͠࠷৽Խ͍ͨ͠ • AMP Ωϟογϡͷ৔߹ • Google ͷ AMP

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

  78. ΫϩʔϦϯά • Ωϟογϡ΢ΥʔϚʔͷ࣮૷ • ΩϟογϡΛৗʹ࠷৽Խ͢ΔΫϩʔϦϯάπʔϧ • ର৅ͷϖʔδΛߜͬͯޮ཰తʹࣗαΠτʹΞΫηε • αʔνίϯιʔϧ API

    ͰΞΫηεͷଟ͍ϖʔδ • αΠτϚοϓͰࣗ෼͕ͨͪ഑৴͍ͨ͠ϖʔδ  ΍ͬͨ͜ͱ Googlebot ΍Ϣʔβʔ͔Βͷ ॳճΞΫηε΋ߴ଎഑৴Մೳʹ

  79. ΫϩʔϦϯά • Ωϟογϡ΢ΥʔϚʔͷ࣮૷ • ΩϟογϡΛৗʹ࠷৽Խ͢ΔΫϩʔϦϯάπʔϧ • ର৅ͷϖʔδΛߜͬͯޮ཰తʹࣗαΠτʹΞΫηε • αʔνίϯιʔϧ API

    ͰΞΫηεͷଟ͍ϖʔδ • αΠτϚοϓͰࣗ෼͕ͨͪ഑৴͍ͨ͠ϖʔδ  ΍ͬͨ͜ͱ Googlebot ΍Ϣʔβʔ͔Βͷ ॳճΞΫηε΋ߴ଎഑৴Մೳʹ Ͱ΋·ͩ AMP Ωϟογϡͷ࠷େͷಛ௃͕…

  80. ϦιʔεϓϦϑΣον • CDN ͱΩϟογϡ΢ΥʔϚʔͰ͍ͩͿૣ͘ͳ͕ͬͨ… • Ϣʔβʔ͕ݕࡧ݁Ռը໘ʹདྷͨஈ֊ͰϦιʔεΛϓ ϦϑΣον͍ͤͨ͞ • υϝΠϯ͸ࣗࣾυϝΠϯͷ··ʹ͍ͨ͠ 

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

  81. ϦιʔεϓϦϑΣον Chrome ϒϥ΢βͰ͋Ε͹ 
 ݕࡧ݁Ռը໘͔ΒͷϓϦϑΣον ͕Մೳʹ  https://developers.google.com/search/docs/advanced/experience/signed-exchange?hl=ja AMP ·ͨ͸ඇ

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

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

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

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

  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Ͱॺ໊͢Δ

  86. 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ॺ໊͖ͭίϯςϯπΛฦ͢

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

    σϝϦοτ SXG ূ໌ॻ͸͓͕͔͔ۚΔ ӡ༻ίετ͕ߴ͍ 
 iPhone Ϣʔβʔ͸ର৅֎ ΍ͬͨ͜ͱ

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

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

  90. AMP ಋೖͷৼΓฦΓ

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

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

  93. ࠶ܝ 

  94. AMP ͷ੍໿ʹ͍ͭͯ੔ཧ  • ೚ҙͷ JavaScript ͕ར༻Ͱ͖ͳ͍ • CSS 75KB

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

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

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

    

  97. ࢓༷ ։ൃ ϦϦʔε (AMP Ͱ΋͜ͷ͘Β͍ͷॲཧ͸ Ͱ͖ͦ͏ͩͳ) ΋͏গ͠Ϧονʹ΋Ͱ͖·͢ʂ ͍· (AMP͔ͩΒ UX

    ͸γϯϓϧ ʹ͠Α͏) ͜ͷ࢓༷ͰͰ͖·͔͢ʁ 

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

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

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

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

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

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

    ϝσΟΞͱ AMP 

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

    Web ϝσΟΞͱ AMP 

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

    • ϢʔβʔΠϯλϥΫγϣϯ͕ଟ਺Ͱߴ͍ UX • ϢʔβʔʹΑΓྑ͍ମݧΛఏڙ͢Δ͜ͱ͕ॏཁ • UX ࢓༷͕ෳࡶ ".1 Web ΞϓϦͷొ৔ Web ͷଟ༷Խ 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  122. Ϣʔβʔʹͱͬͯ 
 ඞཁͳ࢓༷΋࡞Εͳ͍ 

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

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

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

    💦 

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

  127. AMP ͷ͜Ε͔Β

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

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

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

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

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

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

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

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

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

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

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

  139.  BNQJNHͷ-B[Z-PBE

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

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

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

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

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

  145. 

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

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

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

  149. ·ͱΊ

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

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

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

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

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