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
8k
性能に関する考え方
Yamagoya Fastly で発表した内容です。
Yosuke Furukawa
PRO
December 08, 2021
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
7
3.5k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
220
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
400
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
800
Other Decks in Programming
See All in Programming
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.5k
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
110
人には人それぞれのサービス層がある
shimabox
3
460
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
600
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
120
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
310
漸進。
ssssota
0
1.1k
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
380
がんばりすぎないコーディングルール運用術
tsukakei
1
180
Doma で目指す ORM 最適解
nakamura_to
1
160
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
230
OpenTelemetryで始めるベンダーフリーなobservability / Vendor-free observability starting with OpenTelemetry
seike460
PRO
0
160
Featured
See All Featured
Become a Pro
speakerdeck
PRO
28
5.4k
RailsConf 2023
tenderlove
30
1.1k
Being A Developer After 40
akosma
91
590k
Done Done
chrislema
184
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
Navigating Team Friction
lara
186
15k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Thoughts on Productivity
jonyablonski
69
4.7k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
A Tale of Four Properties
chriscoyier
159
23k
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