Performance tuning 2021

So you are just looking for a hot list of potential performance optimizations for your online store? Great – you found it.

Here is all that we can think of on how to get a high Pagespeed/Lighthouse result and a perfect page load time:

TL;DR: For a more detailed explanation, read up on “How we built UK’s fastest online fashion-store

~|icon_cogs~|elegant-themes~|solid

General Setup

Webserver & Infrastructure

Overarching considerations

  • Keep your pages small
  • Compress images & crop according to view-ports
  • Don’t dismiss accessibility! Use WAVE to optimize for screenreaders

Time to first byte

  • Cache everything! Ideally: cache entire pages & consider loading client specific content asynchroneously.
  • Remember to prewarm your caches after every restart (ie: crawl your page to refresh the cache before a customer accesses your site)
  • Can’t optimize your software caches? Try Varnish or nginx plus
}~|icon_clock_alt~|elegant-themes~|outline

Optimize Page Loading

Largest & First Contentful Paint

  • Optimize for above-the-fold-content
  • Lazyload images which aren’t in viewport on first load (load images directly otherwise)
  • Do not lazy load images that are in viewport when page is loading!
  • Optimize your images
    • Consider using Tinypng for additional compression
    • Serve WebP images for browsers that support it
    • Properly size images and serve according to viewport using the picture tag
  • Use defer and preload
    • Preload default fonts
    • Preload iconsets
    • Preconnect to external domains
    • DNS prefetch domains that might be used later
  • Move your all javascript, to footer, unless needed by above-the-fold
  • Experiment with selfhosting JQuery
    • If you use Cloudflare – Experiment with rocketloader
    ~|icon_mobile~|elegant-themes~|outline

    Optimize Client Rendering

    Cumulative Layout Shift

    ~|icon_loading~|elegant-themes~|outline

    Optimize Client Processing

    First Input Delay

    • Avoid using Bootstrap
    • Reduce your Javascript size
    • Load external resources on Demand
    • Self-host jQuery and consider migrating to native javascript, ZeptoJS or jQuery slim
    • Separate Javascript into chunks and load on demand (do it with jQuery, or  natively)
    • Try to load as many external libraries lazily (Use events or intersectionObserver whenever you can
    • Replace your slick-slider with glider.js which is loading faster
    • Consider replacing Google Analytics with Matomo
    • Add a separate javascript file for older browsers, removing the need for polyfills and other code in the main JS
    • Optimize proprietary code, avoide inline scripts and removed on-load listeners where possible
    • Start moving events back to HTML, to avoid unnecessary scanning of the DOM structure
    • Use const & let and global vars where possible
    • Avoid using jquery.each function

    What’s next?

    Hotwire Patterns“,  Svelte and Tailwind look really promising for the immediate future of web performance tuning. In addition with CSS Grid on the horizont and a broader acceptance of ES6 across all browsers, it has also become more feasible to develop faster javascript, generate smaller html DOM sizes and reduce overall repainting of the client screens. New browser features, such as loading=”lazy” or content visbility give us further control over the overall page rendering process.

     

    Leave your own performance optimization tricks in the comments below!  🙂