4 simple things you should do in optimising website loading performance

    Table of contents

    1. Before everything
    2. 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
    3. Concatenation
    4. Brotli compression
    5. HTTP/2

    Stopwatch

    Before everything

    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 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 it 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.

    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.

    Leave a Reply