Splitting script loading into 4 stepsAccelerator for WordPress

The fewer scripts at each stage of loading, the higher its speed. Scripts are the hardest part of pages to optimize for. There are scripts that depend on their location (for example, advertising from Google AdWords). Therefore, the default optimization makes minimal changes. Many other optimizing plugins can “break” the scripts.

4 groups#

The most efficient way to optimize scripts is to delay their loading. But scripts are needed to display the page correctly. Therefore, they are divided into 4 groups:

  • Critical

    This includes everything that needs to be loaded before the main content of the page. This is usually empty. Scripts may be included here, which for some reason should remain unchanged and be loaded strictly in the place where they were originally located.

  • Critical special

    This includes everything that needs to be loaded after the main content of the page. This is usually empty. Scripts may be included here, which responsible for the primary display of page content (for example, for displaying individual elements) can be included here.

  • Non-critical

    Everything that can be loaded after the main content of the page with a delay. Usually, all the main scripts of the site are here.

  • Special

    Anything that can be loaded even later and does not affect the main rendering of the page. This includes, for example, scripts for tracking, advertising, social networks, etc.

Script optimization (JS)#

  • Delayed loading

    Highly strongly influences on indicators Total Blocking Time (TBT) and Time to Interactive (TTI). The loss can reach 30 points (in direct proportion to the volume of scripts).

    js-split-scheme

    By default, the non-critical and special group’s load latency times are set for the greatest compatibility and the best performance. For specific sites, these values can be empirically reduced.

  • Grouping

    By analogy with styles (CSS), it reduces the number of requests to the server, thereby reducing the page load time. But from experience, due to scripts being generally loaded on hold, then this does not give a tangible increase in the rating and the likelihood of disrupting their work increases. GTMetrix shows the number of requests, and by enabling this mode, you can try to increase the score on it.

  • Minification

    Reducing the size of scripts by removing extra spaces and line breaks.

The solution has been tested with the most popular plugins, does not “break” advertising scripts, analytics scripts, and video frames. According to statistics, about 20% of sites require additional configuration, most of which, of course, are related to scripts.

Leave a Reply