4 simple things you should do in optimising website loading performance

Discover four simple yet powerful techniques to optimize your website's loading performance for better SEO results.

Everyone wants their site to be loaded fast. It’s not only good from the SEO perspective but also from the user experience perspective. However, achieving fast loading website it’s that easy quite often. Some use a one-click solution to magically resolve all loading performance issues. Use that with caution as those won’t resolve all issues you may have.

Based on our experience let’s look into 4 simple things you can do in order to increase your site loading performance.

Delay loading scripts for improved performance

You may have on your site scripts that don’t have to be loaded immediately. In most cases, it’s related to the 3rd party scripts. We use to use 3.5 seconds delay for all scripts that don’t have to be loaded right after the initial page load. You can wrap 3rd party scripts into the following code:

<script>
  window.setTimeout(() => {
    // place scripts you want to delay in load here
  }, 3500);
</script>

Lighthouse flags pages that have third-party code that blocks the main thread for 250 ms or longer.

Reduce the impact of third-party code. Third-party code blocked the main thread for 250 ms.

By delaying loading third-party code like Google Tag Manager, you may resolve the issue with Total Blocking Time (TBT).

You can go even further and use requestIdleCallback() method and run the script code during a browser’s idle periods:

<script>
  window.requestIdleCallback(() => {
    // place scripts you want to delay in load here
  }, { timeout: 3500 });
</script>

The timeout option description:

If the number of milliseconds represented by this parameter has elapsed and the callback has not already been called, then a task to execute the callback is queued in the event loop (even if doing so risks causing a negative performance impact). timeout must be a positive value or it is ignored.

But the question is: what are the benefits of delaying loading scripts by 3.5 seconds?

Reduce HTTP connections and download cost

Every browser limits the number of concurrent connections to a single domain as well as has a limit for overall concurrent connections. By simply delaying loading some scripts you’ll not open too many HTTP connections at once, usually at page load.

Consider download and execution costs

Downloading scripts is just a first step. Once downloaded, one of JavaScript’s heaviest costs is the time for a browser engine to parse/compile the code. By delaying loading some scripts you’ll give a chance for a browser for faster downloading and executing code that is more important to be run at initial page loading.

Multiple scripts in one line can still result in multiple HTTP requests

Many scripts, especially 3rd party scripts, are coming with a very small code that is responsible for loading its features, e.g. chat, analytics, etc. However, when you look more closely at what’s happening after that script is executed then you may notice a lot of HTTP requests that load additional code and assets. Therefore that impacts your initial loading and executing performance and hence deserves a loading delay.

Be cautious when utilizing User Traffic Analytics

Concatenation for efficient script delivery

The goal of concatenation is to minimize the number of requests made to the server by concatenating multiple scripts or CSS into one file. Server requests are costly. The amount of time needed to establish an HTTP connection is sometimes more expensive than the amount of time necessary to transfer the data itself. Sometimes it is not possible to do that because you aren’t the owner of the code.

Here is a small tip on how to merge internal WordPress scripts into one file and compress it:

function bundle_scripts() {
  if ( is_user_logged_in() ) {
    return;
  }

  global $compress_scripts, $concatenate_scripts;

  $compress_scripts = 1;
  $concatenate_scripts = 1;

  define('ENFORCE_GZIP', true);
}

add_action('wp_enqueue_scripts', 'bundle_scripts');

Put above code in the functions.php file.

Brotli compression for faster page loading

Use brotli compression for your static assets instead of gzip. Google’s case study on Brotli has shown compression ratios of up to 26% smaller than current methods, with less CPU usage.

Boost website performance with HTTP/2

HTTP/2 protocol speeds up page load significantly and is widely supported by all major browsers and servers. In HTTP/2, when the browser sends a request, the server returns all necessary static assets in response to a single TCP connection at the same time. In this way, the download speed of your website is increased.

Faster loading also impacts crawling. Crawlers have time limits to crawling the page. The faster page loading the bigger chance you have that your page will be fully crawled and indexed.

Latest update: Optimize the use of multiple SVGs

Sometimes we have multiple SVGs within 1 file. While this keeps all images, and icons in one file and allows to use it later using reference (example: <svg><use xlink:href="#edit"></use></svg> then it impacts the page loading because they are embedded on all pages. It might be worth reviewing all SVGs inside the file and determining which are used and which aren’t used. Those that are used once could be moved to a separate file or embedded only on the page where it is used.

Too big HTML impacts also SEO and basically means that if the page size is too big, a search engine may not be able to get all of the content or may end up not fully caching it.