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
Optimising Webpage Performance
Search
Thomas Stapleton
November 06, 2017
Technology
1
21
Optimising Webpage Performance
Basics + Chrome Developer Tools
Thomas Stapleton
November 06, 2017
Tweet
Share
More Decks by Thomas Stapleton
See All by Thomas Stapleton
Optimising Website Performance
tomsta93
1
79
Other Decks in Technology
See All in Technology
研究開発と製品開発、両利きのロボティクス
youtalk
1
530
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
980
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
310
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
300
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
人工衛星のファームウェアをRustで書く理由
koba789
15
8.2k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
480
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
110
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
190
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
Featured
See All Featured
Done Done
chrislema
185
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
How to train your dragon (web standard)
notwaldorf
96
6.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
How STYLIGHT went responsive
nonsquared
100
5.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Fireside Chat
paigeccino
39
3.6k
Transcript
Optimising Webpage Performance Basics + Chrome Developer Tools
Webpage Performance • How fast does the webpage load? •
How fast can a user interact? • How fast does the application respond?
Navigation Timing API (W3C)
Navigation Timing API (W3C) HTML Parsing Complete 500 milliseconds
Navigation Timing API (W3C) Interaction 700 milliseconds
Navigation Timing API (W3C) Page Load 1 second
Client Side Optimisation “If your application is slow, people won’t
use it.” - Fred Wilson
Client Side Optimisation • Minify HTML • Load critical content
over the server • Use async templates for non-critical components • Make sure your HTML is valid
• Minify CSS (PostCSS & cssnano) • Bundle common SCSS/LESS
into one stylesheet • Inline styles for critical/non-critical components • Make sure your CSS is valid Client Side Optimisation
• Minify JavaScript • Remove blocking JavaScript • Use a
module loader • Make sure your JavaScript is versioned Client Side Optimisation
Client Side Optimisation • Only load scripts if they are
required on the page • Create JavaScript bundles that make sense • Use DRY, KISS & SOLID principles • Inline JavaScript for critical components
Client Side Optimisation • Utilise a CDN • Version your
images • Optimise them • Lazy Load non-critical • Use SVGs where appropriate
Client Side Optimisation • Blocking fonts slow page speed •
Load fonts async • Avoid FOUT, FOIT, FOFT • Maximum 2X fonts & 2X weights
Serving Static Assets • Use HTTPS, enable HTTP2, HTTP2 server
push • Two way proxy • Proxy cache • Correct headers e.g. e-tags, gzip/brotli, expiry
Serving Static Assets Headers are important, make sure they’re set.
Serving Static Assets Before After ab -n 1000 -c 100
http://192.168.99.100/
Proxy Cache 10x Faster! • Time Taken: 1s - 0.1s
• Individual Requests:10ms - 1ms • Transfer Rate: 38.6kb - 393.4kb Respond with 1000 ‘304’ requests a second
Developer Tools Make sure you have some experience using different
developer tools!
Chrome Developer Tools Preview Production “it's designed for developers and
early adopters, and can sometimes break down completely”
Chrome Developer Tools Powered by HTML, CSS and JavaScript
Overview • Elements - DOM nodes • Console - Errors,
logging & debugging • Audits/Lighthouse - PWA tester • Sources - Downloaded files, snippets & debugging • Network - Latency & requests • Performance (Timeline) - FPS, FMP, JS exec time • Memory - Memory allocations DOM, functions & timeline • Application - Service workers, browser stores & cache • Security - Request protocol type, SSL certificate & HTTPS status
• Elements - DOM nodes • Console - Errors, logging
& debugging • Audits/Lighthouse - PWA tester • Sources - Downloaded files, snippets & debugging • Network - Latency & requests • Performance (Timeline) - FPS, FMP, JS exec time • Memory - Memory allocations DOM, functions & timeline • Application - Service workers, browser stores & cache • Security - Request protocol type, SSL certificate & HTTPS status Overview Outline performance issues
Audits • Overview - Passed/failed • PWA - PWA Checklist
• Performance - FMP • Accessibility - Semantics • Best Practices - Perf pitfalls • Download & Share
Lighthouse Viewer https://googlechrome.github.io/lighthouse/viewer/
Network • See screenshots of progress • Replicate connection speed
• Network queue overview • Protocol Type • Status • DOMContentLoaded • Load time • Breakdown of request processes
Performance • Paint times • FPS • JS Evaluating &
Execution • Summary • Memory • Event Listeners
Time To First Paint • A white page can be
a valid ‘time to first paint’. • Large amounts of JavaScript execution blocking paint render. • The above is cause by poor code executing on scroll.
Memory • Memory Allocation • Usage/script breakdown • Memory usage
& breakdown
Application • Service Workers • Data/Web Stores • Sessions •
Cache
Service Workers (https://developers.google.com 2017) Cache, falling back to network
Service Workers https://www.youtube.com/watch?v=Cjo9iq8k-bc (jakearchibald.com 2016)
Streams (jakearchibald.com 2016)
Thomas Stapleton @tomsta93 Thank you https://www.surveymonkey.co.uk/r/SDC9W78
Useful Links • https://developers.google.com/web/tools/chrome-devtools/ • https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp • https://docs.google.com/document/d/18GmrZjkpA8fxmCehjgMUg2_ujQs04a7RXlm7m_YcxVM/ mobilebasic •
https://jakearchibald.com/2016/streams-ftw/#creating-one-stream-from-multiple-sources-to- supercharge-page-render-times • https://w3c.github.io/ServiceWorker/ • https://developers.google.com/web/fundamentals/performance/ • http://techblog.netflix.com/2015/08/making-netflixcom-faster.html • https://www.webpagetest.org/ • https://tools.pingdom.com/ • https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
• http://caniuse.com/#search=brotli • https://github.com/google/brotli • https://www.smashingmagazine.com/2017/04/guide-http2-server-push/ • https://medium.com/reloading/javascript-start-up-performance-69200f43b201 • https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
• https://www.youtube.com/watch?v=W4zp79QyDXA • https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common- memory-leaks-3f28b94cfbec • https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized- code-ac089e62b12e • https://github.com/GoogleChrome/lighthouse • https://googlechrome.github.io/lighthouse/viewer/ • https://developers.google.com/web/progressive-web-apps/checklist • https://github.com/GoogleChromeLabs/sw-precache More useful links
References • https://www.w3.org/TR/navigation-timing/timing- overview.png • https://jakearchibald.com/2016/streams-ftw/ • https://www.w3.org/TR/service-workers/#cache • https://developers.google.com/web/fundamentals/
instant-and-offline/offline-cookbook/