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
1.3k
LTのやり方
yosuke_furukawa
PRO
14
1.7k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
600
Node.js v22 で変わること
yosuke_furukawa
PRO
13
4.6k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
24
8.7k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
3.3k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.4k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
18
10k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.6k
Other Decks in Programming
See All in Programming
dbt v1.8で追加された単体テストを触ってみた
k_data_analyst
2
270
あらゆるアプリをCompose Multiplatformで書きたい! -ネイティブアプリの「あの機能」を私たちはどう作るか-
subroh0508
1
910
プログラミングスクールのつながりがキャリアにつながるのかもしれない話 / Connections at programming schools may lead to a career
aiandrox
0
290
Breaking the Ceiling: Scaling Your Impact at the Staff-Plus Level (InfoQ-DevSummit-Boston)
thiagoghisi
0
130
Kotlin Collection関数をマスター
masayukisuda
0
3.5k
The Hotwire Landscape After Turbo 8 @ Brighton Ruby 2024
marcoroth
2
210
Adding Tests to Untestable Legacy Code
afilina
PRO
0
190
Kotlin Coroutinesで共有リソースに正しくアクセスする
moriatsushi
5
2.4k
スタートアップ企業が実践する「身の丈スクラム」の現在地 / Current State of 'Right-Sized Scrum' Practices in Startups
ar_tama
12
3.8k
自分好みの TS バンドラを Rust で作れる!Deno の内部ライブラリの活用 – Denoで変わるランタイムの景色 実践事例 Lunch LT
pizzacat83
4
550
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
0
120
キッティングツールによる自動化でセットアップ時間を1時間から3分に短縮
mot_techtalk
2
150
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.2k
Thoughts on Productivity
jonyablonski
62
4k
Building an army of robots
kneath
300
42k
Scaling GitHub
holman
457
140k
GitHub's CSS Performance
jonrohan
1025
450k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
23
1.5k
Principles of Awesome APIs and How to Build Them.
keavy
122
16k
Building Applications with DynamoDB
mza
89
5.8k
The Invisible Side of Design
smashingmag
294
50k
Six Lessons from altMBA
skipperchong
22
3.2k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Unsuck your backbone
ammeep
664
57k
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