Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Improving Frontend Performance

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.

Philip Tellis

May 22, 2019

More Decks by Philip Tellis

Other Decks in Technology


  1. Philip Tellis Principal RUM Distiller @ Akamai Author of the

    OpenSource boomerang RUM library twitter:@bluesmoon ⦿ github:@bluesmoon speakerdeck:@bluesmoon
  2. Agenda • Image Optimization • Compression • Web Fonts •

    JavaScript & CSS bundle sizes • Preload Hints • Web Workers • Caching
  3. 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/
  4. 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
  5. 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
  6. 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/
  7. 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
  8. 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/
  9. Axxept-Endoding Many Windows anti-virus packages and firewalls will disable compression

    by munging the Accept-Encoding header on outgoing requests!
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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