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 Website Performance
Search
Thomas Stapleton
November 07, 2016
Technology
1
79
Optimising Website Performance
Optimising Website Performance & Chrome Dev Tools
Thomas Stapleton
November 07, 2016
Tweet
Share
More Decks by Thomas Stapleton
See All by Thomas Stapleton
Optimising Webpage Performance
tomsta93
1
22
Other Decks in Technology
See All in Technology
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
140
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
680
Git in Team
kawaguti
PRO
3
340
Azure Well-Architected Framework入門
tomokusaba
1
350
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
3
620
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
180
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
290
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
130
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
2
220
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
310
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
250
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
79k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Designing for humans not robots
tammielis
254
26k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
It's Worth the Effort
3n
187
28k
Building Adaptive Systems
keathley
43
2.8k
Navigating Team Friction
lara
190
15k
Transcript
Optimising Website Performance By Thomas Stapleton @tomsta93
Web Performance • How Fast does your webpage load •
How Fast can a user interact with the page • How Fast does the application respond
Client Side Optimisation “If your application is slow, people won’t
use it.” - Fred Wilson • Versioning (fingerprint) assets • Compress and minify files
Client Side Optimisation • Minify HTML • Only load critical
content server side • Use async templates for non-critical components • Make sure your HTML is valid
Client Side Optimisation • Minify CSS (PostCSS -> cssnano) •
Bundle common SCSS/LESS into one stylesheet • Inline styles used 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 (fingerprinted)
Client Side Optimisation • Only load scripts if they are
required on the page • JavaScript bundles help… but don’t bundle everything • Use DRY, KISS & SOLID principles • Inline JavaScript if necessary
Client Side Optimisation • Upload onto CDN if available •
Version (image-v1.jpg) • Optimise images on upload (CMS) • Lazy Load images below window.innerHeight • Use SVGs where appropriate
Client Side Optimisation • Blocking fonts slow page speed •
Load fonts async • Avoid FOUT, FOIT, FOFT • Use only two fonts and two weights of each
Serving Static Assets • If you’re using HTTPS, enable HTTP2
• Two way proxy • Proxy cache • Correct headers e.g. e-tags, gzip, expiry
Serving Static Assets Headers are important, make sure they’re set.
X-* Headers are custom and like data- for HTML attributes
Serving Static Assets Before After
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
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
Developer Tools Get familiar with all types of developer tools
you may need to use them one day!
Chrome Developer Tools Build with HTML, CSS and JavaScript and
arguable the most used and best developer tools in any browser to date.
Overview • Elements - DOM nodes • Console - Errors
& logging • Sources - Downloaded files, snippets & debugging • Network - Latency & requests • Timeline - Time to first paint & processing • Profiles - Memory & execution time • Application - Cached files & browser data stores • Audits - Recommendations for network & performance improvements
• Elements - DOM nodes • Console - Errors &
logging • Sources - Downloaded files, snippets & debugging Overview • Network - Latency & requests • Timeline - Time to first paint & processing • Profiles - Memory & execution time • Application - Cached files & browser data stores • Audits - Recommendations for network & performance improvements Outline performance issues
Network • See screenshots of progress • Replicate connection speed
• Network queue overview • Protocol Type • Status • DOMContentLoaded • Load time • Breakdown of request processes
Timeline • 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 scrolling.
Profiles • Function Execution Times • Memory Allocation • Memory
Usage & Monitoring • Direct JavaScript Function Monitoring
Application • Service Workers • Data/Web Stores • Sessions •
Cache
Service Workers https://www.youtube.com/watch?v=Cjo9iq8k-bc (jakearchibald.com 2016)
Questions Thank you for your time, any questions? WHO’S AWESOME?
You’re Awesome!
Useful Links • 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/
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