JS and CSS optimization

views3432
Difficulty:

A common problem of unoptimized sites is a lot of additional plug-in files. Interestingly, from time to time I met a situation that these files were not even used. They just loaded the site for nothing. In this article we will talk about scripts (.js) and styles (.css).

Optimization of js scripts

I must say right away that optimization should not harm the full operation of the site. No need to deprive yourself of useful services, such as web analytics or online chat.

First of all, you need to do an analysis of whether each plug-in script is used on the site. Secondly, you need to check whether scripts are used on all pages or only on one or several. If a couple of scripts are used only on the main page, then you do not need to load them on all other pages of the site. In any CMS, you can create several templates for the head section, which will differ in the list of files to be connected.

So, you have made sure that the scripts are only necessary, and they are loaded only on the right pages. Next, we look inside these files. Is the code compressed there? If not, then simply reducing unnecessary characters can save tens of kilobytes. You can do this manually (for example, https://jscompress.com /), or you can use additional services that compress the code of all connected js files automatically (for example, in Modx it is MinifyX).

The next stage of optimization is to check the connection location of the js files. The higher the connection of scripts in the site template, the more their loading delays the display of the main content of the site. Not all scripts need to be connected in the head section, some can be moved to the very end of the document before the closing body tag.

Another technique is the use of asynchronous script loading, which does not block the loading of other site files. Again, not all scripts can work in this mode. Each needs to be checked separately.

<script async src="/path-to-file.js"></script>

Each individual script is loaded using a separate request. We know that the fewer requests, the faster the download of all files will take place. Accordingly, you can combine all the scripts into one or more. First, we break the scripts by type: do they need to be in the head section or can they be placed at the end of the document, can the scripts be loaded asynchronously or not. After merging, you may have a couple of scripts left instead of a couple dozen.

It is important to follow the sequence of joining. If you have a jquery plugin, then its code should go after jquery itself. You can merge files manually, but it's better to do it automatically (for example, in Modx, the plugin can do it MinifyX).

css style optimization

We also first check the need to connect specific styles. If you use libraries like Bootstrap, then choose only the necessary styles, you do not need to download what you do not use.

The principles of optimizing css file loading are similar to js:

  • Loading the necessary styles on the right pages
  • Compressing the code
  • Combining into one file

You can select the most important styles (description of 10-100 of the most basic elements) and embed them (inline) in the page code. Google recommends doing this to speed up the drawing of the template / page structure.

All css style optimizations are also better automated using plugins.

The above basic actions can significantly speed up page loading. That is, you will do this work once, and the number of requests that are required to load the site may be reduced by several dozen. The total size of all js and css files can be reduced several times after compression.

Unfortunately, many CMS (Wordpress, Bitrix) come with templates that are initially made as if they specifically want to slow down your site. Optimize the plug-in js and css files - this is a mandatory stage of work to speed up the loading speed of the site.

Video

Author: Aleksandr Dergunov
Published: 12/29/2019