35 tips to improve site speed

Tips on all the ways you can optimise site speed, filterable by difficulty.

  • January 16, 2020
  • Technical
Difficulty to implement
All
Easy
Average
Hard
  • 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
  • Hard

    Add critical CSS

    Load CSS for above-the-fold content within style > tags at the top of your HTML.
    Learn more
  • 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.
    Learn more
  • 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
  • Easy

    Implement text compression

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

    Resize images

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

    Apply lossy/lossless image compression

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

    Use a CDN

    Pick a CDN provider and implement them on your site.
    Learn more
  • 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.
    Learn more
  • Average

    Update your site to HTTP/2

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

    Remove unused CSS

    Scan your site for unused CSS and remove it.
    Learn more
  • Average

    Self-host 3rd party scripts

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

    Self-host webfonts

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

    Implement font-display 'swap'

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

    Minify HTML, JS & CSS

    Remove whitespace from assets to reduce their file size.
    Learn more
  • Average

    Use SVG files where possible

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

    Use WebP images

    Modern image formats like WebP can significantly reduce image file sizes and speed up page load times.
    Learn more
  • 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
  • Easy

    Pick a fast DNS solution

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

    Prerender potential next pages

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

    Use a fast host

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

    Use far-future browser caching

    Instruct browsers to cache your site's assets.
    Learn more
  • 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+).
    Learn more
  • Average

    Use Brotli text compression

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

    Use HTTP/2 server push

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

    Reduce DOM size

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

    Implement database caching on your site

    Cache responses from your database to speed up future database calls.
    Learn more
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Easy

    Use modern CSS

    Use modern CSS like grid and flexbox to implement popular layouts with minimal amount of code.
    Learn more
  • 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

Start your SEO project

Want to work with me?

Get in touch so I can learn more about your brand and project requirements. Unfortunately, I have limited availability, so book a call to make sure you don't miss out.

Contact