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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

࠷ۙ AMP ͬͯͲ͏ͳͷʁ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

AMP ͷྺ࢙ΛৼΓฦΔ

Slide 9

Slide 9 text

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/

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

AMP ͸ͳͥྲྀߦ͔ͬͨʁ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

ϋΠϒϦου AMP AMP ΧϊχΧϧ ΦϦδφϧ         ΋ͱ΋ͱͷ HTML ৽ͨʹ AMP HTML ΛผͰ༻ҙ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

AMP ΛֶͿ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

AMP ͷ໨తΛֶͿ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

AMP ͷٕज़ΛֶͿ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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/

Slide 53

Slide 53 text

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

AMP ίϯϙʔωϯτ • JSαΠζɺ࣮ߦύϑΥʔϚϯεɺΞΫηγϏϦςΟɺCWV Λߟྀ ͲΜͳ։ൃऀͰ΋ Web ϕετϓϥΫςΟεΛڗडͰ͖Δ https://amp.dev/ja/documentation/components/amp-img/ ྫ: amp-img ͸ Web ʹਫ਼௨ͨ͠஌͕ࣝͳ͍։ൃऀͰ΋ IE / Safari Ͱ   ɹ lazy load ͕࢖͑ΔΑ͏ʹͳ͍ͬͯΔ͠ɺCLS ΋ൃੜ͠ͳ͍Α͏ʹͳ͍ͬͯΔ

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

AMP ͷಋೖ

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

AMP ͷ࠶࣮૷

Slide 63

Slide 63 text

AMP Λ࠶࣮૷͢Δ

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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} ); }

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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/

Slide 70

Slide 70 text

AMP Λ࠶࣮૷͢Δ

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

AMP ಋೖͷৼΓฦΓ

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

࠶ܝ

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

࢓༷ΛΈΜͳͰ࡞ΔจԽ

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

AMP ͷ͜Ε͔Β

Slide 128

Slide 128 text

AMP ࢖ͬͨํ͕͍͍ͷʁ

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

AMP ࢖ͬͨํ͕͍͍ͷʁ

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

BNQJNHͷ-B[Z-PBE

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

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

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

·ͱΊ

Slide 150

Slide 150 text

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

Slide 151

Slide 151 text

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

Slide 152

Slide 152 text

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