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
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
360
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
170
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
130
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
670
自動テストのコストと向き合ってみた
qa
1
220
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.3k
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
410
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
160
ComposeではないコードをCompose化する case ビズリーチ / DroidKaigi 2025 koyasai
visional_engineering_and_design
0
110
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
130
Adapty_東京AI祭ハッカソン2025ピッチスライド
shinoyamada
0
280
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
240
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
How to Think Like a Performance Engineer
csswizardry
27
2k
Music & Morning Musume
bryan
46
6.8k
Facilitating Awesome Meetings
lara
56
6.6k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Bash Introduction
62gerente
615
210k
Designing for humans not robots
tammielis
254
26k
Navigating Team Friction
lara
190
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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