Optimising Webpage Performance

Basics + Chrome Developer Tools

Transcript

1. Optimising Webpage Performance Basics + Chrome Developer Tools
2. Webpage Performance • How fast does the webpage load? • How fast can a user interact? • How fast does the application respond?
3. Navigation Timing API (W3C)
4. Navigation Timing API (W3C) HTML Parsing Complete 500 milliseconds
5. Navigation Timing API (W3C) Interaction 700 milliseconds
6. Navigation Timing API (W3C) Page Load 1 second
7. Client Side Optimisation “If your application is slow, people won’t use it.” - Fred Wilson
8. Client Side Optimisation • Minify HTML • Load critical content over the server • Use async templates for non-critical components • Make sure your HTML is valid
9. • 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
10. • Minify JavaScript • Remove blocking JavaScript • Use a module loader • Make sure your JavaScript is versioned Client Side Optimisation
11. 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
12. Client Side Optimisation • Utilise a CDN • Version your images • Optimise them • Lazy Load non-critical • Use SVGs where appropriate
13. Client Side Optimisation • Blocking fonts slow page speed • Load fonts async • Avoid FOUT, FOIT, FOFT • Maximum 2X fonts & 2X weights
14. Serving Static Assets • Use HTTPS, enable HTTP2, HTTP2 server push • Two way proxy • Proxy cache • Correct headers e.g. e-tags, gzip/brotli, expiry
15. Serving Static Assets Headers are important, make sure they’re set.
16. Serving Static Assets Before After ab -n 1000 -c 100 http://192.168.99.100/
17. 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
18. Developer Tools Make sure you have some experience using different developer tools!
19. Chrome Developer Tools Preview Production “it's designed for developers and early adopters, and can sometimes break down completely”
20. Chrome Developer Tools Powered by HTML, CSS and JavaScript
21. 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
22. • 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
23. Audits • Overview - Passed/failed • PWA - PWA Checklist • Performance - FMP • Accessibility - Semantics • Best Practices - Perf pitfalls • Download & Share
24. Lighthouse Viewer https://googlechrome.github.io/lighthouse/viewer/
25. Network • See screenshots of progress • Replicate connection speed • Network queue overview • Protocol Type • Status • DOMContentLoaded • Load time • Breakdown of request processes
26. Performance • Paint times • FPS • JS Evaluating & Execution • Summary • Memory • Event Listeners
27. 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.
28. Memory • Memory Allocation • Usage/script breakdown • Memory usage & breakdown
29. Application • Service Workers • Data/Web Stores • Sessions • Cache
30. Service Workers (https://developers.google.com 2017) Cache, falling back to network
31. Service Workers https://www.youtube.com/watch?v=Cjo9iq8k-bc (jakearchibald.com 2016)
32. Streams (jakearchibald.com 2016)
33. Thomas Stapleton @tomsta93 Thank you https://www.surveymonkey.co.uk/r/SDC9W78
34. 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/
35. • 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
36. 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/