If we use Google’s PageSpeed Insights tool to analyze our WordPress it is quite likely that among the elements to be corrected is the following:
Remove display-blocking JavaScript and CSS from the content of the top half of the page
What does this mean?
Our website loads CSS files to style the pages and Javascript files to generate dynamic elements, among other things. Normally, these types of files are placed in the header of the web, so the browser will load these contents before the code of the page itself, causing a longer wait until the contents are displayed in the browser.
To solve this, Google recommends placing only in the header the Javascript and CSS code to be used in the page to be displayed or perform a deferred loading of the code. The first option is not very viable in WordPress, since it would be very complicated to find out the specific code that is loaded on each page, but you can do something with the deferred loading.
Lazyload CSS upload
First of all, lazyloading of CSS style sheets is not recommended because, if it is done, the page will initially be displayed without any layout, only to be laid out at the end of loading, which often causes a strange effect on loading.
Lazyload JavaScript (JS) loading
The lazyload of Javascript can be tested, taking into account that this deferred loading can sometimes generate problems on the web, especially if we are using plugins with dynamic operation as image galleries, or the WordPress theme itself has these elements. Therefore, you can test the lazyloading, and only if we see that everything is still working fine on the web we should leave it activated.
The first way to achieve this lazyloading of Javascript is to add the following code to the functions.php file of the theme we are using:
function footer_enqueue_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');
Code language: JavaScript (javascript)To check if the applied code has worked we can load our website and view the source code, to analyze if the .js files are loaded at the end. Keep in mind that not necessarily all .js files will move to the bottom of the web.
If we do not want to modify the code there are several plugins for WordPress that also serve to add lazyloading of Javascript at the bottom of the web.
One option would be the plugin SG Optimizer or WPRocket.
On them we can configure some aspects: combine Javascript and CSS, add exceptions to the optimization, etc..
That way, in case there are problems after activating the plugin we can always apply changes in the configuration to see if the problem is solved.
There are other plugins that do the same thing, with more or less added options, but these 2 are the ones we recommend.
Asynchronous loading of JavaScript (JS)
Another way to defer the loading of Javascript or CSS is to make an asynchronous loading in parallel to the rest of the contents of the web, instead of making a sequential loading (one element after another).
To do this, we can use a plugin such as Async JavaScript.
Always test
Remember again that in case of trying any of these plugins or code modifications we will have to test on the front end of the web to verify that everything is still working as it should.
In case of problems, it is preferable not to postpone the loading of Javascript and CSS.
It is also important to note that this lazyloading does not always translate into an improvement in the score we get in PageSpeed, it may even be the case that the score drops.
In such cases, it is also advisable to deactivate these plugins.
