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
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
2
4.7k
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
AI専用のリンターを作る #yumemi_patch
bengo4com
5
2.3k
OPENLOGI Company Profile
hr01
0
67k
OPENLOGI Company Profile for engineer
hr01
1
33k
asken AI勉強会(Android)
tadashi_sato
0
150
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
140
解析の定理証明実践@Lean 4
dec9ue
1
210
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
940
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
310
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
How Community Opened Global Doors
hiroramos4
PRO
1
130
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Docker and Python
trallard
44
3.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
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/