Web Performance Tuning Checklist 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“

Webserver & Infrastructure

• Consider using a CDN; or build your own using Gluster
• Consider using Cloudflare (they also work as a CDN and do most of the webserver steps for you)
• Use HTTP/2
• Use Brotli and Gzip compression
• Make use of client side caches by setting appropriate cache headers to all static files
• Optimize load balancing and set servers to use round-robin on static file requests
• Replace your Extended Validation Certificate
• Optimized SSL configuration and buffer sizes & experiment with session caches
• Experiment with tuning your proxy buffer size

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

Largest & First Contentful Paint

• Optimize for above-the-fold-content
• Lazyload images which aren’t in viewport on first load (load images directly otherwise)
  • Add loading=”lazy” for browsers that support it
  • Use a javascript library for all other browsers or use the javascript intersectionobserver
• 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

Cumulative Layout Shift

• Check your page templates with this awesome tool (alternatively use your browser developer tools)
• Generate your critical path CSS; optimize manually (Here’s what this is about)
• Load your main css file asynchronously (requires inline critical path ^see above)
• Add woff2 to all your fonts (generate if necessary)
• Remove unused fonts
• Load fewer font files & Prevent layout shifts
• Optimize fonts
• Use Fontawesome? Consider loading lazily & use the SVG font. For above-the-fold-content, create your own SVG with symbols and reference these instead. (Believe me, fontawesome is huge!)
• Use SVG for your logo and compress 
• Reduce your DOM size (Check Tailwind or create your own CSS grid)

• Avoid using Bootstrap
• Reduce your Javascript size
  • If you use Bootstrap – migrate to bootstrap.native
• 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