How to connect asynchronously to CSS and Javascript.

5/52 ratings

Greetings dear visitor. Today I would like to talk about such an important point as optimizing, speeding up the site. The speed of the site's download greatly affects its promotion, if a user comes to your site and does not wait for the page to load, it negatively affects the behavioral factor that the search engines pay very much attention to, respectively, each webmaster at developing the site is simply obliged to monitor the extent to which his child quickly and stably works.

Under the meaning of the word optimization and site acceleration there are many values and items that you need to perform with each site, this includes image optimization, optimization of database queries, page compression and much more.

Today we will not consider all this, but we'll talk about how to make Javascript styles and scripts asynchronous, that is, when a user visits the site, the user does not wait for a page load, where all styles and scripts are loaded first and only after your HTML is loaded, this method I often apply to some kind of individual css and js which are not important at the stage of loading the page of the site.

And so start and consider examples for both css and Javascript scripts:

Asynchronous CSS loading on the site:

Asynchronous loading of styles files css allows your site to load pages with your content faster, and only after the entire page is loaded will the CSS file with styles be loaded. It's especially useful to load css styles asynchronously on mobile devices, because not everyone has a super fast internet.

And so we'll start, in order to use the method of asynchronous loading of css files described below, you should have jQuery on your site. You can load css styles asynchronously using the following method:

$("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />")

1	$("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />")

This code must be loaded after loading jQuery and the page itself. For example, using the ready method, below is a full example of usage:

<script>
 $(document).ready(function() {
 $("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />");
 });
</script>

$(document).ready(function() {

$("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />");

});

</script>

This is not a complicated method of asynchronous css loading. I want to note at once that this method is not a panacea for all diseases, and for each site you need to individually look at each loadable style file.

Also in this method there is a small drawback, namely: Since you did a css download after downloading the html layout itself, your site would look awkward at the moment the page was loaded. To ensure that this does not happen you need or draw some basic styles straight in the body of the HTML page and thus you save the look of the site at the time of loading, or do not apply this condition to the main CSS file and leave it synchronous, and apply this condition exactly to those styles that do not matter much at the time the site is loaded.

Well, that's all, now you know how to make an asynchronous download of css files. In the network, you can certainly find other methods, but I always use this instruction itself to you and offer it.

Asynchronous javascript loading

As with CSS, asynchronous loading of Javascript scripts allows the browser not to wait for the loading of scripts, loading the main HTML code after which only Javascript will be loaded. Thanks to these actions, the pages of your site are loaded much faster. This action must again be applied to some separate JS scripts, especially for those who slow down the page load and who are scolded by Google PageSpeed.

And so that would make loading Javascript asynchronous all you need is to add the "asyc" property to the attached file for example:

<script async src="https://web-ukraine.com/main.js"></script>

1	<script async src="https://web-ukraine.com/main.js"></script>

Note that when using this method, you will not be able to run the usual consecutive script loading:

<script src="/jquery.js" async></script>
<script>$('a').addClass('ajax');</script>

1 2	<script src="/jquery.js" async></script> <script>$('a').addClass('ajax');</script>

This option will not work due to the fact that jQuery will be loaded in the background and the function "$" is not defined yet.

Therefore, for the correct operation of the script, it is recommended to use the onload event.

<script>function init() {
 $('a').addClass('ajax');
}</script>
<script src="/jquery.js" async onload="init()"></script>

$('a').addClass('ajax');

}</script>

Thus, the init function will be called immediately after jQuery is loaded. That's all, so you can make asynchronous download of javascript scripts on your site.

In general, try it, and you will succeed. Good luck to you in our not easy business.