On this page
  1. Delay loading scripts when they don't have to be loaded on the initial page load
    1. Limit the number of HTTP connections
    2. Download and execution cost
    3. One line script is not equal to one HTTP request
    4. Carefully while using User Traffic Analytics
  2. Concatenation
  3. Brotli compression
  4. HTTP/2
  5. Update: Optimise multiple SVGs usage
Stopwatch

4 simple things you should do in optimising website loading performance

4 tips to improve website loading performance: 1. Delay loading scripts, 2. Concatenating scripts, and CSS files, 3. Brotli compression, 4. HTTP/2 protocol.

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 when they don’t have to be loaded on the initial page load

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>

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

Limit the number of HTTP connections

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.

Download and execution cost

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.

One line script is not equal to one HTTP request

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.

Carefully while using User Traffic Analytics

If you use user traffic analytics, e.g. Google Analytics, loading the analytics code as soon as possible helps ensure that your metrics are tracked even when a user doesn’t let the page finish loading. If a visitor to your site hits the page and then leaves it before the tracking code fires the Pageview, then you lose that visitor. However, these may not necessarily represent a high volume of data so you may still consider delaying loading the analytics code to get better initial loading performance. It is always a trade-off.

Concatenation

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

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.

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.

Update: Optimise multiple SVGs usage

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.

Related posts

Leave a Reply