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
8.1k
性能に関する考え方
Yamagoya Fastly で発表した内容です。
Yosuke Furukawa
PRO
December 08, 2021
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
150
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.4k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.3k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
270
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.9k
Strip Types と Storage
yosuke_furukawa
PRO
4
430
Module Harmony について
yosuke_furukawa
PRO
3
1.8k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
Serena MCPのすすめ
wadakatu
4
1k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
Devoxx BE 2025 Loom lab
josepaumard
0
100
Leading Effective Engineering Teams in the AI Era
addyosmani
7
470
CSC509 Lecture 03
javiergs
PRO
0
340
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
560
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.9k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
技術的負債の正体を知って向き合う
irof
0
190
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
526
40k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
RailsConf 2023
tenderlove
30
1.3k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Cult of Friendly URLs
andyhume
79
6.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
A Tale of Four Properties
chriscoyier
161
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Gamification - CAS2011
davidbonilla
81
5.5k
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