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
   

   View Slide

2. Philip Tellis
   Principal RUM Distiller @ Akamai
   Author of the OpenSource boomerang RUM
   library
   twitter:@bluesmoon ⦿ github:@bluesmoon
   speakerdeck:@bluesmoon
   

   View Slide

3. Agenda
   ● Image Optimization
   ● Compression
   ● Web Fonts
   ● JavaScript & CSS bundle sizes
   ● Preload Hints
   ● Web Workers
   ● Caching
   

   View Slide

4. Network Utilization By Asset Type
   Data collected and analysed with boomerang and Akamai mPulse
   

   View Slide

5. Image Optimization
   

   View Slide

6. https://imageoptim.com/
   

   View Slide

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/
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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/
    

    View Slide

11. Compression
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

14. Axxept-Endoding
    Many Windows anti-virus packages and
    firewalls will disable compression by munging the
    Accept-Encoding header on outgoing requests!
    

    View Slide

15. View Slide

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
    

    View Slide

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
    

    View Slide

18. Preload Hints
    
    
    
    
    https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
    

    View Slide

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
    

    View Slide

20. Caching
    Cache-control: public, max-age=31415926
    

    View Slide

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
    

    View Slide

22. Thank You!
    

    View Slide