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.
-
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 → -
Add critical CSS
Load CSS for above-the-fold content within style > tags at the top of your HTML.
Learn more → -
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.
Learn more → -
Implement text compression
Implement text compressions to reduce the size of text resources by up to 90%.
Learn more → -
Resize images
Resize your images so that they match the size that they are displayed in the browser.
Learn more → -
Apply lossy/lossless image compression
Reduce the size of your images by lowering the quality of them or applying lossless compression.
Learn more → -
Use a CDN
Pick a CDN provider and implement them on your site.
Learn more → -
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.
Learn more → -
Remove unused CSS
Scan your site for unused CSS and remove it.
Learn more → -
Self-host 3rd party scripts
Self-host slower 3rd party scripts to improve caching and speed up asset delivery.
Learn more → -
Self-host webfonts
Test self-hosting your web fonts alongside a CDN to speed up delivery.
Learn more → -
Implement font-display 'swap'
Use the font display 'swap' attribute to improve page rendering times.
Learn more → -
Minify HTML, JS & CSS
Remove whitespace from assets to reduce their file size.
Learn more → -
Use SVG files where possible
Use SVG images where possible for lower file sizes and better-looking graphics.
Learn more → -
Use WebP images
Modern image formats like WebP can significantly reduce image file sizes and speed up page load times.
Learn more → -
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 → -
Pick a fast DNS solution
Use a fast DNS provider such as Google DNS or Cloudflare.
Learn more → -
Prerender potential next pages
Use prerender to speed up subsequent page loads on your site.
Learn more → -
Use a fast host
Use a high-performance hosting provider to make everything faster.
-
Use far-future browser caching
Instruct browsers to cache your site's assets.
Learn more → -
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 → -
Use Brotli text compression
Rather than GZIP, test using Brotli text compression to reduce the file size of text assets further.
Learn more → -
Use HTTP/2 server push
Push files to users via HTTP headers to start the loading of assets earlier.
Learn more → -
Reduce DOM size
Reduce the number of DOM elements in your HTML for quicker browser parsing and faster layout reflows.
Learn more → -
Implement database caching on your site
Cache responses from your database to speed up future database calls.
Learn more → -
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 → -
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 → -
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 → -
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 → -
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 → -
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 → -
Use modern CSS
Use modern CSS like grid and flexbox to implement popular layouts with minimal amount of code.
Learn more → -
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 →