Optimising Website Performance

Optimising Website Performance & Chrome Dev Tools

Transcript

1. Optimising Website Performance By Thomas Stapleton @tomsta93
2. Web Performance • How Fast does your webpage load • How Fast can a user interact with the page • How Fast does the application respond
3. Client Side Optimisation “If your application is slow, people won’t use it.” - Fred Wilson • Versioning (fingerprint) assets • Compress and minify files
4. Client Side Optimisation • Minify HTML • Only load critical content server side • Use async templates for non-critical components • Make sure your HTML is valid
5. 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
6. Client Side Optimisation • Minify JavaScript • Remove blocking JavaScript • Use a module loader • Make sure your JavaScript is versioned (fingerprinted)
7. 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
8. 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
9. Client Side Optimisation • Blocking fonts slow page speed • Load fonts async • Avoid FOUT, FOIT, FOFT • Use only two fonts and two weights of each
10. Serving Static Assets • If you’re using HTTPS, enable HTTP2 • Two way proxy • Proxy cache • Correct headers e.g. e-tags, gzip, expiry
11. Serving Static Assets Headers are important, make sure they’re set. X-* Headers are custom and like data- for HTML attributes
12. Serving Static Assets Before After
13. 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
14. Navigation Timing API (W3C)
15. Navigation Timing API (W3C) HTML Parsing Complete 500 milliseconds
16. Navigation Timing API (W3C) Interaction 700 milliseconds
17. Navigation Timing API (W3C) Page Load 1 second
18. Developer Tools Get familiar with all types of developer tools you may need to use them one day!
19. Chrome Developer Tools Build with HTML, CSS and JavaScript and arguable the most used and best developer tools in any browser to date.
20. 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
21. • 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
22. Network • See screenshots of progress • Replicate connection speed • Network queue overview • Protocol Type • Status • DOMContentLoaded • Load time • Breakdown of request processes
23. Timeline • Paint times • FPS • JS Evaluating & Execution • Summary • Memory • Event Listeners
24. 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.
25. Profiles • Function Execution Times • Memory Allocation • Memory Usage & Monitoring • Direct JavaScript Function Monitoring
26. Application • Service Workers • Data/Web Stores • Sessions • Cache
27. Service Workers https://www.youtube.com/watch?v=Cjo9iq8k-bc (jakearchibald.com 2016)
28. Questions Thank you for your time, any questions? WHO’S AWESOME? You’re Awesome!
29. 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/
30. 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