Improving Frontend Performance

There are many areas to work on when improving web performance. For every type of resource that makes up a page, there are different ways of optimising them. In this talk, we’ll look at several low hanging fruit – assets that can be optimised with very little work, most of which can be automated into your CI pipeline. We’ll then go into some more advanced front end topics that require development work, and humans to make a decision on whether it’s worth it or not.

Topics that we will cover are:

* Image Optimisation
* Compression
* Combining or Splitting CSS & JavaScript
* Whether to use domain sharding or not
* CSS & JavaScript considerations
* Service Workers
* Preload hints

At the end of this talk, attendees will have the skills needed to bring about immediate performance improvements to their sites, often with very little effort.

Transcript

1. Improving Frontend Performance Quick performance fixes with high impact
2. Philip Tellis Principal RUM Distiller @ Akamai Author of the OpenSource boomerang RUM library twitter:@bluesmoon ⦿ github:@bluesmoon speakerdeck:@bluesmoon
3. Agenda • Image Optimization • Compression • Web Fonts • JavaScript & CSS bundle sizes • Preload Hints • Web Workers • Caching
4. Network Utilization By Asset Type Data collected and analysed with boomerang and Akamai mPulse
5. Image Optimization
6. https://imageoptim.com/
7. Alternate Image Formats • WebP is a new, highly (lossy) compressed image format from Google • SVG is a fairly well tested, uncompressed image format that is easy to inline and use over the wire compression Beware though that with new compression formats, hardware decoders haven’t caught up yet. https://developers.google.com/speed/webp/
8. Use 4:2:0 Chroma Subsampling Chroma Subsampling takes advantage of the fact that the human visual system is less sensitive to changes in colour than luminance http://en.wikipedia.org/wiki/Chroma_subsampling
9. Use Client Hints to resize images Resizing Images for specific screen sizes could be the difference between 1.5s and 30ms https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/ https://httpwg.org/http-extensions/client-hints.html https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015
10. Accept-CH: DPR, Width, Viewport-Width • DPR: Device Pixel Ratio • Width: Actual image width • Viewport-Width: Width of viewport in CSS pixels • Downlink*: Client’s maximum download speed • Save-Data*: Whether client has data saver turned on or not Client Hints https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/
11. Compression
12. Enabling gzip is a no-brainer • Reduce bytes transferred… Better for the user, better for the provider • Dynamic content: use chunked transfer encoding with gzipped chunks, flush often. • Static content: use gzip_static or equivalent. Bill Scott – Improving Netflix Performance
13. Newer Compression Formats • ZopFli: Very good, gzip/deflate compatible, but slow to compress https://opensource.google.com/projects/zopfli • Brotli: Better deflate using dictionary https://opensource.google.com/projects/brotli • Detect browser support with the Accept-Encoding header @dougsillars https://medium.com/oyotech/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4 https://paulcalvano.com/index.php/2018/07/25/brotli-compression-how-much-will-it-reduce-your-content/
14. Axxept-Endoding Many Windows anti-virus packages and firewalls will disable compression by munging the Accept-Encoding header on outgoing requests!
16. Web Fonts • Compress over the wire • Reduce number of glyphs used • Cache aggressively • Use font-display: swap • Use font-style-matcher (https://meowni.ca/font-style-matcher/) to find alternate fonts https://parall.ax/blog/view/3072/tutorial-reducing-the-file-size-of-custom-web-fonts https://css-tricks.com/font-display-masses/ https://developers.google.com/web/updates/2016/02/font-display
17. Split or Combine? • Split JavaScript into smaller bundles, each under about 14 Kb (compressed). • Only load critical JavaScript in the HEAD, load the rest after onload has fired. • Keep CSS small, and inline critical parts. • Serve CSS off the root domain. https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/ http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html
18. Preload Hints <link rel="preload" href=“url" as="type"> <link rel="prefetch" href=“url"> <link rel="dns-prefetch" href=“url"> <link rel="preconnect" href="url"> https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
19. Moving work off the main thread fetch(imageURL) // Get the image as a blob. .then(response => response.blob()) // Decode the image. .then(blobData => createImageBitmap(blobData)) // Send it to the main thread .then(imageBitmap => { self.postMessage({ imageBitmap }, [imageBitmap]); }, err => { self.postMessage({ err }); }); https://github.com/googlechrome/offthread-image
20. Caching Cache-control: public, max-age=31415926
21. References • Chroma Subsampling • Understanding Chroma Subsampling • Essential Image Optimization • High Performance Images • Responsive Images with Client Hints • Client Hints • Mobile Image Processing • Bill Scott – Improving Netflix Performance • nginx gzip_static • 37% Latency improvement with Brotli • How much will Brotli reduce your content • Reducing the file size of custom fonts • font-display for the masses • font-display: swap • WebP • SVG Tutorial • ZopFli • Brotli • Font Style Matcher • ImageOptim • Preload Prefetch & Priorities in Chrome • JavaScript Code Splitting • Revisiting Cookieless Domains • Lazy Loading Images with a Service Worker • Service Worker Background Fetch • Best Practices for Cache Control • Cache Control for Civilians
22. Thank You!