Site Speed Tips
35 tips to improve your site speed
Tips on all the ways you can optimise site speed.
Defer non-critical CSS
Defer your CSS that is not required for above the fold content so that it loads after the browser renders the page.
Add critical CSS
Load CSS for above-the-fold content within < style > tags at the top of your HTML.
Implement page caching
Cache the HTML outputted by your site to reduce the load on your server and improve page speed. Using server-side caching via Varnish, Nginx FastCGI, or Redis rather than application-level.
Defer non-critical JS
Defer JS that isn't critical for page load so it loads after the browser has rendered the page.
Implement text compression
Implement text compressions to reduce the size of text resources by up to 90%.
Resize your images so that they match the size that they are displayed in the browser.
Apply lossy/lossless image compression
Reduce the size of your images by lowering the quality of them or applying lossless compression.
Implement page caching on the edge
If you have a CDN, ensure you are caching HTML and other assets on the edge to speed up TTFB.
Update your site to HTTP/2
Use HTTP/2 to make use of multiplexing and speed up asset delivery.
Self-host 3rd party scripts
Self-host slower 3rd party scripts to improving caching and speed up asset delivery.
Implement font-display 'swap'
Use the font display 'swap' attribute to improve page rendering times.
Use SVG files where possible
Use SVG images where possible for lower file sizes and better-looking graphics.
Use WebP images
Modern image formats like WebP can significantly reduce image file sizes and speed up page load times.
Lazy load images, iFrames and widgets
Use lazy load to delay the loading of images, iFrames or widgets (like Facebook comments) that are below-the-fold.
Use the latest version of PHP
The latest version of PHP boasts significant speed improvements, so make sure it is up to date (7.0+).
Use Brotli text compression
Rather than GZIP, test using Brotli text compression to reduce the file size of text assets further.
Use HTTP/2 server push
Push files to users via HTTP headers to start the loading of assets earlier.
Reduce DOM size
Reduce the number of DOM elements in your HTML for quicker browser parsing and faster layout reflows.
Implement database caching on your site
Cache responses from your database to speed up future database calls.
dns-prefetch or preconnect to third-party resources
When you have known requests to third-party resources, establish the connection early using preconnect or a dns-prefetch.
Load background images responsively based on device
Load CSS background images in different sizes based upon the device to reduce image file sizes.
Load images in img tags responsively with srcset
Use the srcset attribute on img tags to prevent the loading of large imagery on smaller screens.
Implement native lazy loading
Add width and height attributes to images and videos
Improve your cumulative layout shift by adding both the width and height attribute to images and video in the HTML rather than with CSS.
Use the content-visibility CSS property
Use the content-visibility CSS property to tell the browser to skip rendering of elements below the fold, speeding up initial rendering times.
Use modern CSS
Use modern CSS like grid and flexbox to implement popular layouts with minimal amount of code.