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
Webフロントエンドパフォーマンスチューニング
Search
Ryo Maruyama
November 19, 2013
Technology
39
8.8k
Webフロントエンドパフォーマンスチューニング
Webフロントエンドのパフォーマンスチューニングについて全体的な話。javascript、Chrome DevToolsの紹介、ボトルネック、ポイントなど。
Ryo Maruyama
November 19, 2013
Tweet
Share
More Decks by Ryo Maruyama
See All by Ryo Maruyama
チームでプロダクト開発するための取り組み/cookpadtechconf2017
h13i32maru
15
11k
ESDoc - ES6時代のドキュメンテーションツール - Node学園祭2015
h13i32maru
15
8.4k
ESDoc - ES6時代のドキュメンテーションツール
h13i32maru
6
2.2k
Other Decks in Technology
See All in Technology
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
3
560
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1.1k
How to do well in consulting–Balkan Ruby 2024
irinanazarova
0
110
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
290
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
390
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
3
600
Gradle Build Scanを使ってビルドのことを知ろう potatotips #87
tomorrowkey
2
150
The AI Revolution Will Not Be Monopolized: Behind the scenes
inesmontani
PRO
1
150
Improve Your Development Workflow with Gemini Code Assist
meteatamel
0
120
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
690
アクセス制御にまつわる改善 / Improving access control
itkq
0
580
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
320
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
74
5.2k
Agile that works and the tools we love
rasmusluckow
325
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Atom: Resistance is Futile
akmur
260
25k
It's Worth the Effort
3n
180
27k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Done Done
chrislema
178
15k
Design by the Numbers
sachag
274
18k
Ruby is Unlike a Banana
tanoku
96
10k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Transcript
8FCϑϩϯτΤϯυ ύϑΥʔϚϯενϡʔχϯά ؙࢁ྄!IJNBSV
ࣗݾհ wؙࢁ྄!IJNBSV w,-BCגࣜձࣾॴଐ w+BWB4DSJQUॻ͓͘ࣄ ,OPDLPVU+4 #VTUFS+4 FUD wྉཧͱ৯ثूΊ͕झຯ IUUQTUXJUUFSDPNIJNBSV
+BWB4DSJQUॏ͍ ࣮ࡍͲΕ͘Β͍ॏ͍ͷʁ
+BWB4DSJQUWT$
+BWB4DSJQUWT$ +BWB4DSJQUୈ൛ ্Լ $ ΫΠοΫϦϑΝϨϯε ্Լ
+BWB4DSJQUWT$ +BWB4DSJQUୈ൛ ্Լ $ ΫΠοΫϦϑΝϨϯε ্Լ LH LH
ͱɺ+BWB4DSJQU͕ॏ͍ͷ͔ͬͨɻ Ͱ8FCϑϩϯτΤϯυ +BWB4DSJQU͚ͩͰͳ͍ͷͰɺ શମతͳ͓Λ͠·͢ɻ ͪͳΈʹ࠷େͷϘτϧωοΫʮୈষK2VFSZϥΠϒϥϦ ϖʔδ ʯ
ࠓͷ༰ wͱ͋ΔϞόΠϧҊ݅ͰߦͬͨύϑΥʔϚϯε νϡʔχϯάʹ͍ͭͯ "OESPJE J04 wεςοϓ wπʔϧ wϙΠϯτ
νϡʔχϯάͷεςοϓ ॏ͍ͱ͜ΖΛϦετΞοϓ ࣌ؒ'14Λଌఆ ϘτϧωοΫΛௐࠪ ରԠࡦΛߟ͑Δ ࣮ ޮՌଌఆ
νϡʔχϯάͷεςοϓ ॏ͍ͱ͜ΖΛϦετΞοϓ ࣌ؒ'14Λଌఆ ϘτϧωοΫΛௐࠪ ରԠࡦΛߟ͑Δ ࣮ ޮՌଌఆ Ͳ͏ͨ͠Β ͍͍ͷʁ
IUUQTEFWFMPQFSTHPPHMFDPNDISPNFEFWFMPQFSUPPMT $ISPNF%FW5PPMT
$ISPNF%FW5PPMT w/FUXPSL w ωοτϫʔΫΞΫηεʹ͍ͭͯͷใ w5JNFMJOF w ϒϥβ෦ͷΠϕϯτʹ͍ͭͯͷใ w$161SPpMF w ίʔϧελοΫͱ$16λΠϜʹ͍ͭͯͷใ
w3FNPUF%FCVHHJOHPO"OESPJE w ࣮ػ্Ͱͷσόοά
/FUXPSL
5JNFMJOF
$161SPpMF "OESPJE$ISPNF W ಈ͖͕͓͔͍͠ͷͰ"OESPJE$ISPNF#FUB W ͍·͠ΐ͏
3FNPUF%FCVHHJOHPO"OESPJE
ͭͷϘτϧωοΫ
ͭͷϘτϧωοΫ wωοτϫʔΫΞΫηε
ͭͷϘτϧωοΫ wωοτϫʔΫΞΫηε w+BWB4DSJQU࣮ߦ࣌ؒ
ͭͷϘτϧωοΫ wωοτϫʔΫΞΫηε w+BWB4DSJQU࣮ߦ࣌ؒ wϨΠΞτϖΠϯτ
ͭͷϘτϧωοΫ wωοτϫʔΫΞΫηε w+BWB4DSJQU࣮ߦ࣌ؒ wϨΠΞτϖΠϯτ ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ҆ఆͷࠃ࢈"OESPJEɹʻ ʉ?:?:?:?:?:?:?:?:?ʉ ࠓ্ͷͭʹ͍͚ͭͯͩɻ
ωοτϫʔΫΞΫηε
ωοτϫʔΫΞΫηε wసૹ͢ΔσʔλαΠζͳΔ͘খ͘͞ wNJOJGZ NBOHMF w ѹॖɺѹॖ͕࣌ؒΑ͍ͷͰ6HMJGZ+4͓͢͢Ί wςΩετσʔλH[JQѹॖ w1/(ը૾CJU1BMFUUF w ࣭͕ྑ͍ͷͰ0151J9͓͢͢Ί
σʔλαΠζ
ωοτϫʔΫΞΫηε w੩తίϯςϯπΛΩϟογϡ wΩϟογϡ༰ྔ"OESPJEܥͰ.# w ΞϓϦͷߏόʔδϣϯɺͰมΘΔ͔ w$BDIF$POUSPM w OPDBDIFJGNPEJpFETJODF w NBYBHF
w ӡ༻ΞϓϦͷߋ৽සͳͲʹؔ͘͢͢͝Δ Ωϟογϡ
ωοτϫʔΫΞΫηε wίωΫγϣϯͷઅΦʔόʔϔουܰݮ w"OESPJE 9QFSJB49 ͩͱಉ࣌ίωΫγϣϯຊ w,FFQ"MJWFΛ༗ޮʹͯ͠5$1ଓΛ࠶ར༻ ίωΫγϣϯ
+BWB4DSJQU࣮ߦ࣌ؒ
+BWB4DSJQU࣮ߦ࣌ؒ wϑΝΠϧΛϩʔυ͢Δ͚ͩͰ͕͔͔࣌ؒΔ wK2VFSZͰNT 9QFSJB(9 w K2VFSZϓϥάΠϯ'BTU$MJDL͍ΕΔͱNT w K2VFSZΛΊͯඞཁͳػೳ͚ͩΛͬͨK2VFSZ-JLFͳϥΠϒϥϦΛ࣮ w $MJDLΠϕϯτΊͯ5PVDIΠϕϯτͰ࣮
ϩʔυ࣌ؒ
+BWB4DSJQU࣮ߦ࣌ؒ wΠϕϯτΛॲཧ͢Δ࣌ؒΛ͘͢Δ wදࣔཁૉ͕ଟ͍ςϯϓϨʔτΛϑϨʔϜϫʔΫ ʹॲཧͤ͞Δͱॏ͍ ߹͕͋Δ w ,OPDLPVU+4ͰTFD͔͔Δॲཧ͕͋ͬͨ ίʔϧελοΫେྔ w ͦͷ෦ಠࣗͷςϯϓϨʔτॲཧΛ࣮ͯ͠TFDʹ͑ͨ
w 6*8FC7JFX J04 +*5͕ޮ͔ͳ͍ͷͰ"OESPJEΑΓ͍ w ࣮ݧతʹ8FC8PSLFSΛͬͨΒരʹͳͬͨ Πϕϯτॲཧ࣌ؒ
+BWB4DSJQU࣮ߦ࣌ؒ wλΠϚʔϧʔϓҰՕॴͰཧ͢Δ w .Z-PPQFSBEE DBMMCBDL ͱͯ͠λΠϚʔϧʔϓΛཧ͢Δ w ίʔϧόοΫͷྦྷੵ࣮ߦ͕࣌ؒ͘ͳͬͨ߹ɺॲཧΛதஅ͢Δ wεϖοΫʹԠͯ͡'14Λม͑Δ wSFRVFTU"OJNBUJPO'SBNF҆ఆͯ͠ͳ͍
w J04ͰSFRVFTU"OJNBUJPO'SBNF͕ൃՐ͠ͳ͍߹͕͋Δ λΠϚʔϧʔϓ
ϨΠΞτϖΠϯτ
ϨΠΞτϖΠϯτ wը໘ʹදࣔ͞Εͳ͍ͷEJTQMBZOPOF w %0.ϨΠΞτπϦʔ͔Βআ֎͢Δ wΞχϝʔγϣϯॲཧ(16Ͱߦ͏ w ͨͩ͠"OESPJEҎ্ͰͷΈ(16Λ༗ޮʹ͢Δ "OESPJE.BOJGFTU 8JOEPX.BOBHFS-BZPVU1BSBNT'-"(@)"3%8"3&@"$$&-&3"5&%
w %ܥ҆ఆͯ͠ͳ͍ͷͰΘͳ͍ w Կ͔ϨϯμϦϯά͕͓͔͍͠ͱࢥͬͨΒɺUSBOTGPSN PQBDJUZ USBOTJUJPO ! XFCLJULFZGSBNFT͋ͨΓΛٙ͏ ϒϥβʹ༏͘͠
ϨΠΞτϖΠϯτ w-8' $SFBUF+4 &EHF"OJNBUF+4 w4FODIB"OJNBUPS8FCLJU"OJNBUJPO w +4Ͱ੍ޚ͢ΔͷΑΓύϑΥʔϚϯε͕Α͍ w "OESPJE͝ΊΜͳ͍͞ Ξχϝʔγϣϯπʔϧ
·ͱΊ
·ͱΊ w$ISPNF%FW5PPMT͍͢͝ w ͨ͘͞Μͷػೳ͕͋ΔͷͰ͍͜ͳͤΔΑ͏ʹͳΔͷେม wௐࠪɺ࣮ɺଌఆͷ܁Γฦ͠ w ಓʹͭͭ͜͜ؤுΔ wϒϥβجຊతʹ༏ल w ϒϥβ͕࠷େݶͷྗΛൃش͢ΔΑ͏ʹαϙʔτ͢Δ
͓·͚ wύϑΥʔϚϯενϡʔχϯάϝϞ w ϲ݄ؒͷνϡʔχϯάաఔΛϖʔδͷϝϞͱͯ͠ެ։ ࣾݶఆ w$ISPNFUSBDJOH w 5JNFMJOFΞϚνϡΞ༻ɺ5SBDJOHϓϩ༻Β͍͠ w6*8FC7JFXͷΩϟογϡػߏ͜ΘΕͯΔ w
ϝϞϦ্ͷΩϟογϡΛফڈͰ͖ͳ͍ w 6TFS"HFOU͕ҟͳΔͱಉ͡63-ͰผͷΩϟογϡͱͯ͠ѻΘΕΔ
͓ΘΓ IUUQTUXJUUFSDPNIJNBSV