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.

3de01a0c1a9c0e55efc6ecfa72b4eab3?s=128

Philip Tellis

May 22, 2019
Tweet

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!
  15. None
  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!