35 tips to improve your site speed

Sam Underwood
Sam Underwood
January 16, 2020

Looking to improve your site performance? My ultimate list of site speed tips is a great place to start, all categorised by the difficulty to implement.

Hard

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.
Hard

Add critical CSS

Load CSS for above-the-fold content within < style > tags at the top of your HTML.
Hard

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.
Hard

Defer non-critical JS

Defer JS that isn't critical for page load so it loads after the browser has rendered the page.
Easy

Implement text compression

Implement text compressions to reduce the size of text resources by up to 90%.
Easy

Resize images

Resize your images so that they match the size that they are displayed in the browser.
Easy

Apply lossy/lossless image compression

Reduce the size of your images by lowering the quality of them or applying lossless compression.
Easy

Use a CDN

Pick a CDN provider and implement them on your site.
Average

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.
Average

Update your site to HTTP/2

Use HTTP/2 to make use of multiplexing and speed up asset delivery.
Hard

Remove unused CSS

Scan your site for unused CSS and remove it.
Average

Self-host 3rd party scripts

Self-host slower 3rd party scripts to improving caching and speed up asset delivery.
Average

Self-host webfonts

Test self-hosting your web fonts alongside a CDN to speed up delivery.
Average

Implement font-display 'swap'

Use the font display 'swap' attribute to improve page rendering times.
Easy

Minify HTML, JS & CSS

Remove whitespace from assets to reduce their file size.
Average

Use SVG files where possible

Use SVG images where possible for lower file sizes and better-looking graphics.
Hard

Use WebP images

Modern image formats like WebP can significantly reduce image file sizes and speed up page load times.
Easy

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.
Easy

Pick a fast DNS solution

Use a fast DNS provider such as Google DNS or Cloudflare.
Average

Prerender potential next pages

Use prerender to speed up subsequent page loads on your site.
Easy

Use a fast host

Use a high-performance hosting provider to make everything faster.
Easy

Use far-future browser caching

Instruct browsers to cache your site's assets.
Average

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+).
Average

Use Brotli text compression

Rather than GZIP, test using Brotli text compression to reduce the file size of text assets further.
Hard

Use HTTP/2 server push

Push files to users via HTTP headers to start the loading of assets earlier.
Average

Reduce DOM size

Reduce the number of DOM elements in your HTML for quicker browser parsing and faster layout reflows.
Hard

Implement database caching on your site

Cache responses from your database to speed up future database calls.
Easy

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.
Average

Load background images responsively based on device

Load CSS background images in different sizes based upon the device to reduce image file sizes.
Average

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.
Easy

Implement native lazy loading

Use loading=lazy to make the browser lazy load images and iframes without having to use a JavaScript library.
Easy

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.
Average

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.
Easy

Use modern CSS

Use modern CSS like grid and flexbox to implement popular layouts with minimal amount of code.
Average

Use a bloat-free page builder

If you're building a site with a page builder, use bloat-free ones with minimal unused code and small DOM trees. On WordPress, the best example of one is Oxygen Builder.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram