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
20
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
77
Other Decks in Technology
See All in Technology
Operating Operator
shhnjk
1
460
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
950
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
490
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
290
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
120
AI導入の理想と現実~コストと浸透〜
oprstchn
0
190
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
260
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
180
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
3
3.2k
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
120
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
190
ビギナーであり続ける/beginning
ikuodanaka
3
700
Featured
See All Featured
A better future with KSS
kneath
239
17k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
A designer walks into a library…
pauljervisheath
207
24k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Language of Interfaces
destraynor
158
25k
Visualization
eitanlees
146
16k
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/