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
Tweet

More Decks by Philip Tellis

Other Decks in Technology

Transcript

  1. Improving Frontend
    Performance
    Quick performance fixes with high impact

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Image Optimization

    View full-size slide

  6. https://imageoptim.com/

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

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

    View full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

  16. Preload Hints




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

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide

  19. 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 full-size slide