30 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 to ensure there isn't anything you've missed.

Site speed has been all the craze over the past few years and with good reason. It's easily measurable, a sure-fire way of reducing user frustration on your site and it also improves how well you convert.

However, one thing I've noticed about site speed tips is there is information everywhere about it, but nothing that just lists everything you could possibly do to improve the speed of your site. So, I've taken on the challenge of creating the ultimate list of things you can do to improve the speed of your site.

As there are loads of ways to improve web performance, rather than spend the next 6 months writing up in detail how to do each tip individually, I am instead going to list them and link to the already never-ending list of great resources out there.

I've tried to categorise the below list based upon how difficult each speed tip is to implement. Obviously your specific site setup may make things that could be easy a lot harder. For example, if you're running a WordPress site some of these are as easy as installing a plugin.

Think I've missed something? Add a comment at the bottom of the page and I shall get it added to the list!

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

Leave a Reply

Your email address will not be published. Required fields are marked *

closetagpencilchevron-downcogsbullhornbarsquote-rightcodecalendar-olong-arrow-rightfile-code-oarea-chart linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram