Things /
35 ways to improve site speed
Things to try when a site is slow, sorted by how hard each one is to implement. Easy wins first if you’re triaging; the harder ones usually need a developer.
- 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.
Learn more about Defer non-critical CSS - Hard
Add critical CSS
Load CSS for above-the-fold content within style > tags at the top of your HTML.
Learn more about Add critical CSS - 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.
Learn more about Defer non-critical JS - Easy
Implement text compression
Implement text compressions to reduce the size of text resources by up to 90%.
Learn more about Implement text compression - Easy
Resize images
Resize your images so that they match the size that they are displayed in the browser.
Learn more about Resize images - Easy
Apply lossy/lossless image compression
Reduce the size of your images by lowering the quality of them or applying lossless compression.
Learn more about Apply lossy/lossless image compression - Easy
Use a CDN
Pick a CDN provider and implement them on your site.
Learn more about Use a CDN - 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.
Learn more about Update your site to HTTP/2 - Hard
Remove unused CSS
Scan your site for unused CSS and remove it.
Learn more about Remove unused CSS - Average
Self-host 3rd party scripts
Self-host slower 3rd party scripts to improve caching and speed up asset delivery.
Learn more about Self-host 3rd party scripts - Average
Self-host webfonts
Test self-hosting your web fonts alongside a CDN to speed up delivery.
Learn more about Self-host webfonts - Average
Implement font-display 'swap'
Use the font display 'swap' attribute to improve page rendering times.
Learn more about Implement font-display 'swap' - Easy
Minify HTML, JS & CSS
Remove whitespace from assets to reduce their file size.
Learn more about Minify HTML, JS & CSS - Average
Use SVG files where possible
Use SVG images where possible for lower file sizes and better-looking graphics.
Learn more about Use SVG files where possible - Hard
Use WebP images
Modern image formats like WebP can significantly reduce image file sizes and speed up page load times.
Learn more about Use WebP images - 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.
Learn more about Lazy load images, iFrames and widgets - Easy
Pick a fast DNS solution
Use a fast DNS provider such as Google DNS or Cloudflare.
Learn more about Pick a fast DNS solution - Average
Prerender potential next pages
Use prerender to speed up subsequent page loads on your site.
Learn more about Prerender potential next pages - 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.
Learn more about Use far-future browser caching - Average
Use the latest version of PHP
The latest version of PHP is significantly faster, so make sure it is up to date (7.0+).
Learn more about Use the latest version of PHP - Average
Use Brotli text compression
Rather than GZIP, test using Brotli text compression to reduce the file size of text assets further.
Learn more about Use Brotli text compression - Hard
Use HTTP/2 server push
Push files to users via HTTP headers to start the loading of assets earlier.
Learn more about Use HTTP/2 server push - Average
Reduce DOM size
Reduce the number of DOM elements in your HTML for quicker browser parsing and faster layout reflows.
Learn more about Reduce DOM size - Hard
Implement database caching on your site
Cache responses from your database to speed up future database calls.
Learn more about Implement database caching on your site - 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.
Learn more about dns-prefetch or preconnect to third-party resources - Average
Load background images responsively based on device
Load CSS background images in different sizes based upon the device to reduce image file sizes.
Learn more about Load background images responsively based on device - 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.
Learn more about Load images in img tags responsively with srcset - Easy
Implement native lazy loading
Use loading=lazy to make the browser lazy load images and iframes without having to use a JavaScript library.
Learn more about Implement native lazy loading - 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.
Learn more about Add width and height attributes to images and videos - 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.
Learn more about Use the content-visibility CSS property - Easy
Use modern CSS
Use modern CSS like grid and flexbox to implement popular layouts with minimal amount of code.
Learn more about Use modern CSS - 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.
Learn more about Use a bloat-free page builder