Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
性能に関する考え方
Search
Yosuke Furukawa
PRO
December 08, 2021
Programming
8
7.8k
性能に関する考え方
Yamagoya Fastly で発表した内容です。
Yosuke Furukawa
PRO
December 08, 2021
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Module Harmony について
yosuke_furukawa
PRO
3
870
LTのやり方
yosuke_furukawa
PRO
9
1.1k
AppRouter Panel Talk
yosuke_furukawa
PRO
2
560
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4.4k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
22
8.5k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
3.1k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.2k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
16
9.9k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.5k
Other Decks in Programming
See All in Programming
AFUP Day Lyon 2024 - DDD !== Archi hexagonale
bgalati
0
190
Does Ruby Parser dream of highly expressive grammar?
ydah
3
510
ruby.wasm 最前線 2024 - wasmでMockServerをつくる #rubykaigi
lnit
1
100
Go + GraphQL @ newmo
110y
3
230
RAGのretrievalの評価を “ranx”で行う / Evaluate retrival of RAG using "ranx"
kun432
1
190
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
360
Improved REXML XML parsing performance using StringScanner
naitoh
0
190
Vanilla JavaScript はマルチプラットフォームの夢を見るか
mitsuharu
0
120
GoでParserを書く
karupanerura
3
550
The Design of Everyday APIs - PyCon 2024
roguelynn
1
640
「正の影響力」を目指して書くこと
honey32
2
110
ウォンテッドリーでのKMPワークフロー / KMP workflow at Wantedly
kubode
0
120
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1025
450k
The Brand Is Dead. Long Live the Brand.
mthomps
49
32k
Fireside Chat
paigeccino
22
2.7k
Scaling GitHub
holman
457
140k
Rails Girls Zürich Keynote
gr2m
91
13k
Documentation Writing (for coders)
carmenintech
60
4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Automating Front-end Workflow
addyosmani
1357
200k
Building Applications with DynamoDB
mza
88
5.7k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
GraphQLの誤解/rethinking-graphql
sonatard
56
9.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Transcript
ੑೳʹؔ͢Δߟ͑ํ 2021/12/8 @ Yamagoya Fastly
Twitter: @yosuke_furukawa Github: yosuke-furukawa
ฐࣾʹαʔϏε͕ଟଘࡏ͢Δ • େখ߹Θͤͯ1000Ҏ্࣮֬ʹ͋Δɻ • ಛʹେ͖ͳͷͰ͋Ε Web ͔Βͷྲྀೖͷظ ͕େ͖͍ • ͜ΕΒͷྲྀೖ͕গͳ͘ͳΔ͜ͱආ͚͍ͨ
ݕࡧΤϯδϯ͔ΒͷධՁ͕ ͷ͘͢͝ॏཁ
ݕࡧΤϯδϯ Ͳ͏ͬͯධՁ͍ͯ͠Δ͔
%# 8FC4JUFT 8FC4JUFT 8FC4JUFT Crawler ͕αΠτΛ๚ͯ͠ɺϖʔδΛऩू ऩूͨ͠ϖʔδΛ֨ೲʢΠϯσΫγϯάʣ Crawler bot
%# 8FC4JUFT 8FC4JUFT 8FC4JUFT Crawler ͕αΠτΛ๚ͯ͠ɺϖʔδΛऩू ऩूͨ͠ϖʔδΛ֨ೲʢΠϯσΫγϯάʣ Crawler bot ͜ͷ࣌ʹ
Crawler ͕ߟ͍͑ͯΔ͜ͱԿ͔
Crawler ͕ؾʹ͍ͯ͠Δ͜ͱ • ͜ͷαΠτͲΕ͚ͩ๚ͯ͠େৎͳΜͩ Ζ͏͔ɾɾɾʁ • ͲΕ͘Β͍ͷසͰ๚͢Δͱྑ͍ͷͳΜ ͩΖ͏͔ɾɾɾʁ • αΠτ͕ͷ͍ͤͰམͪͪΌͬͨΒͩ
ͳ͊ɻɻɻ
8FC4JUFT Crawler bot GET /articles/1 500 Server Error ๚ͨ͠Βམͪ ͪΌͬͨʂ
͠Β͘๚ΊΑ͏
8FC4JUFT Crawler bot GET /articles/1 200 OK ΊͬͪΌ͍ɻॏ͍αΠτͳͷ͔ ͳɻͦΜͳʹ๚͠ͳ͍΄͏͕͍͍͔ ...
10ඵܦա ...
Crawler αΠτͷԠੑೳͱ Ԡ҆ఆੑΛݟ͍ͯΔ • ͦͷ্ͰɺαΠτʹ๚ͯ͠ྑ͍සɺ࠶๚ ظ͕ܾؒ·Δɻ • ͔ͬͨ͠ΓɺԠੑೳ͕ѱ͍ͱ๚͠ ͯ͘Εͳ͍ɻ •
Ұͷ๚ͰΠϯσοΫε͞ΕΔϖʔδ͕গ ͳ͘ͳΔ͜ͱΛҙຯ͢Δɻ
Crawler αΠτͷԠੑೳͱ Ԡ҆ఆੑΛݟ͍ͯΔ • ͦͷ্ͰɺαΠτʹ๚ͯ͠ྑ͍සɺ࠶๚ ظ͕ܾؒ·Δɻ • ͔ͬͨ͠ΓɺԠੑೳ͕ѱ͍ͱ๚͠ ͯ͘Εͳ͍ɻ •
Ұͷ๚ͰΠϯσοΫε͞ΕΔϖʔδ͕গ ͳ͘ͳΔ͜ͱΛҙຯ͢Δɻ ͜ͷ๚ՄೳͳසɺظؒΛαΠτͷ༧ࢉͱͯ͠ ܭࢉ͍ͯ͠Δɺ͜ΕΛ Crawl Budget ͱݺͿ
8FC4JUFT ϖʔδΛμϯϩʔυͨ͠ޙϨϯμϦϯάΛߦ͏ɻ Crawler bot IUNM +4 $44 Rendering
8FC4JUFT ϖʔδΛμϯϩʔυͨ͠ޙϨϯμϦϯάΛߦ͏ɻ Crawler bot IUNM +4 $44 Rendering Rendering݁ՌΛجʹίϯςϯπͷείΞ͚Λߦ ͍ɺ࠷ऴతʹΠϯσοΫεʹө͢Δ
8FC4JUFT ϨϯμϦϯάʹΊͬͪΌίετ͕͔͔Δͱͦ ΕͦΕͰධՁʹӨڹ͢Δ Crawler bot CMBOL IUNM +4 $44 Rendering
8FC4JUFT ϖʔδ͕ JavaScript ͳͲͰߏங͞ΕΔ߹ JSΛ࣮ߦͯ͠ϨϯμϦϯά͢Δɻ Crawler bot CMBOL IUNM +4
$44 Rendering ϖʔδʹίϯςϯπ͕ͳ͍ͷͰɺ+4 Λ࣮ߦͯ͠ίϯςϯπΛදࣔ͠Α͏ ͍ʂʂʂ͋·Γʹ͕͔͔࣌ؒΔ ͳΒεΩοϓ͢Δɻ
Crawler ϨϯμϦϯάʹ͔͔ Δ࣌ؒݟ͍ͯΔ • αΠτͷԠੑೳ͚ͩͰͳ͘ɺϨϯμϦϯάͷੑೳ ಉ༷ʹݟ͍ͯΔ • ͪ͜Βಉ༷ʹ͋·ΓʹϨϯμϦϯά͕͔͔࣌ؒΔͳ Β్தͰϨϯμϦϯάΛΊͯ͠·͏ •
ྫ͑ JS Ͱେͷ HTML Λߏங͢ΔͳͲɺϨϯμϦϯ ά͕͔͔࣌ؒΔαΠτʹؔͯ͠Ԡͨ͠ͷͷɺ్த ͰΊͯ͠·͏ɺ͘͠ޙʹճͯ͠ΠϯσοΫε͕ ͘ͳΔέʔε͋Δ
Crawler ϨϯμϦϯάʹ͔͔ Δ࣌ؒݟ͍ͯΔ • αΠτͷԠੑೳ͚ͩͰͳ͘ɺϨϯμϦϯάͷੑೳ ಉ༷ʹݟ͍ͯΔ • ͪ͜Βಉ༷ʹ͋·ΓʹϨϯμϦϯά͕͔͔࣌ؒΔͳ Β్தͰϨϯμϦϯάΛΊͯ͠·͏ •
ྫ͑ JS Ͱେͷ HTML Λߏங͢ΔͳͲɺϨϯμϦϯ ά͕͔͔࣌ؒΔαΠτʹؔͯ͠Ԡͨ͠ͷͷɺ్த ͰΊͯ͠·͏ɺ͘͠ޙʹճͯ͠ΠϯσοΫε͕ ͘ͳΔέʔε͋Δ ϨϯμϦϯάʹ͔͔Δ࣌ؒΛݟ͍ͯΔɻ͜Ε Rendering Budget ͱݺΕ͍ͯΔɻ
͞Βʹ
࠷ۙ Core Web Vitals ͱݺ ΕΔࢦඪଘࡏ͢Δ • ϢʔβʔͷϑϥετϨʔγϣϯΛܭଌ͢Δࢦඪ • Google
͕ఏএ
Core Web Vitals • Largest Contentful Paint: ϖʔδ্ͷҰ൪࠷େ໘ੵΛ࣋ͬͯ ͍ΔΤϦΞ͕දࣔ͞ΕΔ·Ͱͷ࣌ؒʢώʔϩʔը૾ͷදࣔ࣌ ؒͳͲʣ
• First Input Delay: ϨϯμϦϯά͕։࢝͞Ε͔ͯΒೖྗՄೳʹ ͳΔ·Ͱͷ࣌ؒʢԡͯ͠Ԡ͠ͳ͍ϖʔδͳͲʣ • Cumulative Layout Shift: ϨϯμϦϯά్தͰίϯςϯπ͕ ͣΕͨ߹ͷζϨ෯ʢޡλοϓૂ͍ͷࠂͳͲ͕Α͘Δ ͭʣ
Crawler bot ͕๚͢Δ࣌ʹؾ Λ͚ͭͳ͍ͱ͍͚ͳ͍͜ͱ • ͦͦԠੑೳΛߴ͘อͨͳ͍ͱ͍͚ͳ͍ • ๚தʹམ͍͚ͪͯͳ͍ • ๚ޙͷϨϯμϦϯάͷύϑΥʔϚϯεߴ͘ͳ
͍ͱ͍͚ͳ͍ • ͜ΕΒΛؾΛ্͚ͭͨͰɺ Core Web Vitals ͳͲ ͷ৽͍͠ࢦඪʹέΞ͕ඞཁ
Crawler bot ͕๚͢Δ࣌ʹؾ Λ͚ͭͳ͍ͱ͍͚ͳ͍͜ͱ • ͦͦԠੑೳΛߴ͘อͨͳ͍ͱ͍͚ͳ͍ • ๚தʹམ͍͚ͪͯͳ͍ • ๚ޙͷϨϯμϦϯάͷύϑΥʔϚϯεߴ͘ͳ
͍ͱ͍͚ͳ͍ • ͜ΕΒΛؾΛ্͚ͭͨͰɺ Core Web Vitals ͳͲ ͷ৽͍͠ࢦඪʹέΞ͕ඞཁ ؾΛ͚ͭͳ͍ͱ͍͚ͳ͍͜ͱଟ͍ɻ͔͠ఆৗ։ൃ ࡞ۀΛ͍ͯ͠Δ͚ͩͰதʑؾ͚ͮͳ͔ͬͨΓ͢Δ
ϦΫϧʔτࣾͰ֤αΠτ ͷঢ়گΛఆظతʹΞηεϝϯ τ͠ɺमਖ਼Ͱ͖Δͱ͜Ζ͔Β मਖ਼͍ͯ͠Δ
https://blog.recruit.co.jp/rtc/2021/09/22/core-web-vitals- %e3%81%ab%e5%af%be%e5%bf%9c%e3%81%99%e3%82%8b%e3%81%9f%e3%82%81%e3%80%81%e5%90%84% e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e6%94%b9%e5%96%84%e6%b4%bb%e5%8b%95%e3%82%92 %e5%ae%9f%e6%96%bd/
࣮ࡍʹ͋ͬͨέʔεͱ ͦͷղܾࡦ
έʔε1: CDNΛೖΕͨͷʹԠੑೳ͕ ҆ఆ͠ͳ͍έʔε
CDNΛಋೖ͢Δ͜ͱͰɺલड़ͷ Ԡੑೳͷ҆ఆԽΛਤͬͨ ※ CDNΛखલʹೖΕͯͱΓ͋͑ͣղܾ͢ΕOKͱ ࢥ͍ͬͯͨ࣌ظͷͰ͢ɻ
$%/ Crawler bot ҆ఆ͢Δ͔ͳʔͱࢥ͚ͬͨͲɺ͍͍࣌࣌͋ͬ ͨɻΑ͘Α͘ݟΔͱɺ origin ʹҰఆҎ্ͷϦΫΤε τ͕ඈΜͰ͠·͍ͬͯͨɻ 8FC4JUFT ૣ͔ͬͨΓ͔ͬͨΓ͢Δɻ
ͳΜ͔҆ఆ͠ͳ͍ͳɻɻɻ ΦϦδϯʹϦΫΤετ͕ߴසͰඈ ΜͰ͠·͏ɻ
QPE Crawler bot pod ͕ͨ͘͞Μ͋ΓɺΫϥΠΞϯτͷϦΫΤετઌ͕ ࢄ͞ΕΔࣄͰɺCDN෦ͷΩϟογϡ͕ଘࡏ͠ͳ͍ podʹߦ͘ͱɺoriginͷ͍߹Θ͕ͤ૿͍͑ͯͨɻ 8FC4JUFT QPE QPE
QPE͕ෳ͋ΓɺΩϟογϡ͕͋Δ ͱ͜Ζͱແ͍ॴͰ͍߹Θ͕ͤൃੜͯ͠͠·ͬ ͍ͯͨ
CDNΛೖΕͨͷʹԠੑೳ͕҆ ఆ͠ͳ͍ • ※ Fastly Ͱ͋Γ·ͤΜɻ • ͋·Γஶ໊Ͱͳ͍ɺผͳCDNΛ࠾༻͍ͯ͠ ͨɻ •
CDNͷpodͷ͕ଟ͋Γɺͦͷ pod શମʹ Ωϟογϡ͕ਁಁ͍ͯ͠ͳ͔ͬͨɻ
ղܾࡦ • CDN Λ Fastly ʹม্͑ͨͰɺ Origin Shield ͱݺΕΔ ػߏΛಋೖͨ͠ɻ
• origin ͷखલͰcacheΛ࣋ͭpodʹϦΫΤετΛҕৡ͢Δ QPE QPE QPE PSJHJO TIJFME 8FC4JUFT جຊతʹDBDIF͔ Βؼͬͯ͘Δɻ ҆ఆͨ͠Ϩεϙϯε͕͋Δɻ
ղܾࡦ • ͜ΕʹՃ͑ͯ Stale While Revalidate ͱݺΕΔɺҰ୴ݹ ͘ͳͬͨΩϟογϡΛฦͭͭ͠ɺཪଆͰΩϟογϡΛߋ ৽͢ΔΈΛಋೖͨ͠ɻ $%/
8FC4JUFT ݹ͍Ωϟογϡ͔͠ແ͍ͷͰɺҰ୴ݹ ͍ͷΛͦͷ··ฦͭͭ͠ɺ৽͍͠ίϯςϯ πΛཪͰߋ৽͢Δ request Ұ୴Ωϟογϡ͔Βฦ͢ Ϩεϙϯεޙʹ ίϯςϯπΛ࠶ߋ৽
CDNΛೖΕͨͷʹԠੑೳ͕҆ ఆ͠ͳ͍ • ͲΜͳCDNΛೖΕͨͱͯ͠Ԡੑೳ͕ྑ͘ͳΔΘ͚ Ͱͳ͍ • ಛʹίϯςϯπͷߋ৽͕සൟʹ͋ͬͨΓɺαΠτͷߋ ৽͕සൟʹ͋ΔΑ͏ͳαΠτͩͱCDNଆͷػೳͦΕ ʹ߹Θͤͨͷ͕ඞཁ •
ࠓճ Origin Shield ͱ Stale While Revalidate Λͬ ͯԠੑೳΛ҆ఆͤͨ͞
έʔε2: ڊେը૾͕৴͞Ε͍ͯͨ έʔε
ڊେը૾͕৴͞ΕΔέʔε • ฐࣾͷαΠτը૾͕ଟ͍ • ͔͠͠ɺը૾ͷϦαΠζ͕͍ͱ͜Ζ͕ଟ͍ • ख࡞ۀͷϦαΠζʹΑΓɺ͖ͪΜͱͨ͠ม͕ ͞Ε͍ͯͳ͍έʔε༗Δ • ·͍͔ͨͭ͘ͷαΠτదͨ͠ը૾ϑΥʔϚο
τ͕ΘΕ͍ͯͳ͔ͬͨΓ͢Δ
8FC4JUFT ը૾͕ॏ͍ͱԠੑೳѱ͍͕ɺϨϯμϦϯάύ ϑΥʔϚϯεѱ͘ͳΔɻ Crawler bot IUNM +4 $44 Rendering JNBHFT
JNBHFT JNBHFT
ղܾࡦ • Fastly ͷ Image Optimizer ʹΑΓɺCDN্Ͱ ը૾ͷ࠷దԽΛߦ͏Α͏ʹͨ͠ɻ • ͘͠ը૾ͷ࠷దԽΛӡ༻ʹ࣮֬ʹΈࠐ
ΉΑ͏ʹ͠ɺ͠࿙Εͨͱͯ͠ݕͰ͖ ΔΈΛ lighthouse CI ͳͲͰߏஙͨ͠ɻ
खલʹ͍ΔCDN͕ը૾ͷϑΥʔϚοτΛ࠷దԽ͠ɺ ΫϥΠΞϯτʹ߹Θͤͯ৴͢Δɻ JNBHFT XFCQ $%/ *NBHF0QUJNJ[FS JNBHFT BW Browser A
Browser B
Before => After • Before • After
Before => After • Before • After 3398ms => 1729ms
ʹLCPΛݮɺԠੑೳ҆ఆԽʹد༩
έʔε3: 3rd party resource ͷϦΫ Τετ͕ଟ͍
3rd party resource ͷϦΫΤ ετ͕ଟ͍ • ͣͬͱӡ༻͞Ε͖ͯͨ͜ͱͰɺ3rd party resource ͕ͷ͘͢͝ଟ͍ɻ
• A/BςετɺࠂɺੳπʔϧͳͲͳͲͷπʔϧ ྨΛಋೖͯ͠ޮՌΛଌఆͯ͠... • ͱ͍͏աఔͷதͰνϦπϞͰϦΫΤετ͕૿͑ͯ ͍ͬͯ͠·ͬͨɻ
3rd party resource ͷϦΫΤ ετ͕ଟ͍ ҰͭͷϚϧ͕ϦΫΤετઌΛද͢ɻ͜͜Ͱݴ͏ͱɺेݸͷ ϦιʔεΛμϯϩʔυ͍ͯ͠Δɻ
ղܾࡦ • ٕज़తͳϨΠϠͰͷղܾࡦͳ͍ • աڈʹͬͨͷͰࠓ͍ͬͯͳ͍ͷΛؔ࿈ ෦ॺʹώΞϦϯά͠ɺ͍ͬͯͳ͍ͷΛআ٫ • ঃʑʹݮΒ͢Α͏ʹ࿈བྷ͠ͳ͕ΒαΠζΛϞχ λϦϯά͍ͯ͠Δɻ •
·ͩ͜ͷ׆ಈܧଓதɻɻɻ
ੑೳվળڑͰͳ͍ɻ ڑͰͳ͍ɻ ϩϯάδϟʔχʔͰ͋Δɻ
ੑೳվળ • ΣϒΞϓϦέʔγϣϯʹ͓͍ͯࢸ্໋Ͱ͋Δ • ҰํͰڑͰαοͱͬͯҰճͰ์ஔͯ͠͠·͏ͱɺ݁ ہ͍ͰݟΔͱແҙຯͩͬͨΓ͢Δɻ • ࢦඪมΘΔ͠ɺྼԽ͢ΔϙΠϯτมΘΔ • ͣͬͱ͍ظؒΛ௨ͯ͠αʔϏεͷঢ়گΛϞχλϦϯά͠
ଓ͚Δඞཁ͕͋Δɻ • ͜͏͍͏νʔϜΛ࡞ΓɺࣾͷจԽʹ͢Δඞཁ͕͋Δɻ
·ͱΊ
·ͱΊ • Ϋϩʔϥ͔ΒݟΔͱ࣮৭ʑͱݕ౼͠ͳ͍ͱ͍͚ͳ͍͜ͱ͕ଟ͍ • ΫϩʔϦϯάόδΣοτ • ϨϯμϦϯάόδΣοτ • Core Web
Vitals • ͦͷ্Ͱ࠷దԽΛ͖ͯͨ͠ɻ • ੑೳվળ͕࣮ࢪͰ͖ͨ • ͨͩ͠ɺ·ͩಓɺಛʹٕज़తͳϨΠϠҎ্ͷͱ͜ΖͰࠓޙվળͷ༨͕͋Δ • ੑೳվળظεύϯͰऴΘΔΑ͏ͳͰͳ͘ɺதظΛݟਾ͍͑ͯεύϯͰͬͯ ͍͘ඞཁ͕͋Δ
ࢀߟจݙ • https://developers.google.com/search/docs/advanced/crawling/large-site- managing-crawl-budget?hl=ja • https://www.botify.com/blog/from-crawl-budget-to-render-budget • https://blog.recruit.co.jp/rtc/2021/09/22/core-web-vitals- %e3%81%ab%e5%af%be%e5%bf%9c%e3%81%99%e3%82%8b%e3%81%9f %e3%82%81%e3%80%81%e5%90%84%e3%82%b5%e3%82%a4%e3%83%8
8%e3%81%ae%e6%94%b9%e5%96%84%e6%b4%bb%e5%8b%95%e3%82 %92%e5%ae%9f%e6%96%bd/ • https://developers.google.com/search/docs/advanced/javascript/javascript- seo-basics • https://www.youtube.com/watch?v=XUOD6pcvnso