{"id":4565,"date":"2021-02-22T13:37:58","date_gmt":"2021-02-22T13:37:58","guid":{"rendered":"https:\/\/www.dopinger.com\/blog\/?p=4565"},"modified":"2023-11-12T11:41:41","modified_gmt":"2023-11-12T11:41:41","slug":"how-to-load-css-asynchronously","status":"publish","type":"post","link":"https:\/\/www.dopinger.com\/blog\/how-to-load-css-asynchronously","title":{"rendered":"How to Load CSS Asynchronously"},"content":{"rendered":"\n

Asynchronous loading of external CSS and JS resources helps to increase the speed of website loading and display of web pages in the browser, ensuring that files are loaded and executed in the background without blocking rendering. The time it takes to Load CSS Asynchronously is short. <\/p>\n\n\n\n

<\/span>What is Asynchronous Loading?<\/span><\/h2>\n\n\n\n

Delays accompany the display page in the browser ( Render Blocking ) whenever the browser detects external CSS and JS resources in tags link and script. This leads to the fact that for some time, the user is waiting for the display of the web page on the screen until the files that prevent it from being displayed are loaded and executed.<\/p>\n\n\n\n

For example, a block of a headweb page has the following content:<\/p>\n\n\n\n

<head> <title> Bootstrap Agency Template <\/title> <link rel = \"stylesheet\" href = \"\/css\/bootstrap.css\"> <script src = \"\/js\/jquery-1.11.3.min.js\" > <\/script> <script src = \"\/js\/bootstrap.js\" > <\/script> <\/head><\/code><\/pre>\n\n\n\n
The results of the analysis of this page in the PageSpeed \u200b\u200bInsights service will necessarily contain the recommendation “Remove the code javascript and CSSblocking the display of the top of the page “:<\/p>\n\n\n\n
This means that the page will not start rendering in the browser until all external CSS and JS files specified in the tag head have been loaded and applied.<\/p>\n\n\n\n
To avoid page rendering delays, CSS and JavaScript files are loaded asynchronously to ensure that the page is rendered non-stop in the browser.<\/p>\n\n\n
\n
\"asynchronous<\/figure><\/div>\n\n\n
<\/span>Asynchronous JavaScript Loading<\/span><\/h2>\n\n\n\n
JS files can be loaded asynchronously using attributes defer or an async tag script. In both cases, loading JS files does not delay the display of the page. The difference lies at the moment the script is executed.<\/p>\n\n\n\n
SCRIPT Tag Without Attributes (Synchronous JS loading)<\/h3>\n\n\n\n
<head> <script src = \"\/jquery.js\" > <\/script> <\/head><\/code><\/pre>\n\n\n\n
If the tag script is applied without attributes deferor async, then loading the script delays the process of displaying (rendering) the page until it is loaded and executed.<\/p>\n\n\n\n
SCRIPT Tag With ASYNC Attribute (Asynchronous JS Loading)<\/h3>\n\n\n\n
<head> <script src = \"\/jquery.js\" async > <\/script> <\/head><\/code><\/pre>\n\n\n\n
The attribute asyncprovides an asynchronous loading of an external JS file: the file will be loaded and executed in the background without delaying the page display.<\/p>\n\n\n\n
When using tags scriptwith an attribute async, keep in mind that the order of the execution of scripts (if there are several JS files) is not preserved: they will be executed when they have finished loading, regardless of their order the HTML code. This can lead to errors and scripts failing.<\/p>\n\n\n\n
<head> <! -bootstrap.js using jquery.js will not function as scripts are executed asynchronously -> <script src = \"\/jquery.js\" async > <\/script> <script src = \"\/bootstrap.js\" async > <\/script> <\/head><\/code><\/pre>\n\n\n\n
The solution is to combine the code of all JS files into one or use the defer attribute if the problem concerns only external files.<\/p>\n\n\n
\n
\"script<\/figure><\/div>\n\n\n
SCRIPT Tag With DEFER Attribute (JS Lazy Loading)<\/h3>\n\n\n\n
<head> <script src = \"\/jquery.js\" defer > <\/script> <\/head><\/code><\/pre>\n\n\n\n
The attribute deferprovides lazy loading of an external JS file: the file will be loaded without delaying the page display and executed when rendering is complete.<\/p>\n\n\n\n
Also, the use of the attribute defer, unlike async, preserves the sequence of execution of external scripts:   <\/p>\n\n\n\n
<head><\/code><\/pre>\n\n\n\n
<script src = \"\/jquery.js\" defer > <\/script> <script src = \"\/bootstrap.js\" defer > <\/script> <\/head>  <\/code><\/pre>\n\n\n\n
It should be borne in mind that the attribute defer (as well as async) does not postpone the execution of scripts embedded in the page: they will be analyzed by the browser, and if the JS library file they use is not loaded and executed, then the scripts will be ignored:<\/p>\n\n\n\n
<head> <script href = \"\/jquery.js\" defer > <\/script> <script> \/\/ this script uses jquery.js and the browser will ignore it \/\/ because jquery.js will be deferred \n$ ( document ). ready ( function () { \n$ ( 'head' ). append ( '<link rel = \"stylesheet\" href = \"\/ style.css\">' ); }) <\/script> <\/head><\/code><\/pre>\n\n\n\n
<\/span>For Sites on CMS<\/span><\/h2>\n\n\n\n
An excellent solution providing asynchronous loading scripts for sites on the Joomla, the WordPress, Drupal is a plug- JCH the Optimize, allowing not only add attributes asyncand defertags script, but also to integrate all external JS-files into one, and place them before the closing body.<\/p>\n\n\n\n
<\/span>Asynchronous CSS Loading<\/span><\/h2>\n\n\n\n
Loading and processing external style files by the browser are also accompanied by blocking page rendering, which can be avoided by loading them asynchronously. The tricky part is that you cannot implement asynchronous CSS loading using tag attributes, unlike JS files. You can solve the problem in different ways using JavaScript.<\/p>\n\n\n
\n
\"css<\/figure><\/div>\n\n\n
<\/span>Through JS<\/span><\/h2>\n\n\n\n
You can use JavaScript to load external CSS files asynchronously without using third-party libraries.<\/p>\n\n\n\n
In order for you to do this, you can use the following JS function:<\/p>\n\n\n\n
function asyncCSS ( href ) { var css = document . createElement ( 'link' ); \n     css . rel = \"stylesheet\" ; \n     css . href = href ; \n     document . head . appendChild ( css ); } <\/code><\/pre>\n\n\n\n
After declaring a function in the code, you need to call it the number of times corresponding to the number of CSS files:<\/p>\n\n\n\n
\/\/ The URL of the file is specified in brackets \n asyncCSS ( 'style1.css' ); \n asyncCSS ( 'style2.css' ); \n asyncCSS ( 'style3.css' );<\/code><\/pre>\n\n\n\n
To use this method, place the function and its call (s) in a tag scriptbefore the closing tag body:<\/p>\n\n\n\n
<body>\n<script> function asyncCSS ( href ) { var css = document . createElement ( 'link' ); \n    css . rel = \"stylesheet\" ; \n    css . href = href ; \n    document . head . appendChild ( css ); } \nasyncCSS ( 'style1.css' ); \nasyncCSS ( 'style2.css' ); \nasyncCSS ( 'style3.css'     \n); <\/script> <\/body><\/code><\/pre>\n\n\n\n
<\/span>With jQuery<\/span><\/h2>\n\n\n\n
If your page uses the jQuery JS library , you can use the following code to Load CSS Asynchronously, with its files:<\/p>\n\n\n\n
<script> \n$ ( document ). ready ( function () { \n    $ ( 'head' ). append ( '<link rel = \"stylesheet\" href = \"\/ style.css\" \/>' ); }) <\/script> <\/code><\/pre>\n\n\n\n
This script determines that when the page completes the render, the head-specified tag link defining the CSS file must be in the block, which will ensure its asynchronous loading.<\/p>\n\n\n\n
If you need to load multiple style files asynchronously, you need to list them in the JS function:<\/p>\n\n\n\n
<script> \n$ ( document ). ready ( function () { \n    $ ( \"head\" ). append ( \"<link rel = 'stylesheet' href = 'style1.css'>\" ); \n    $ ( \"head\" ). append ( \"<link rel =' stylesheet 'href =' style2.css'> \" ); \n    $ ( \" head \" ). append ( \" <link rel = 'stylesheet' href = 'style3.css'> \" ); }) <\/script><\/code><\/pre>\n\n\n\n
It is important to understand that jQuery must preload to execute the above script. The tag scriptcontaining the link to the jQuery file must precede the specified script. Otherwise, it will not work, and the styles will not start setting to the page:<\/p>\n\n\n\n
<script href = \"\/jquery.js\" > <\/script> <script> \n$ ( document ). ready ( function () { \n    $ ( 'head' ). append ( '<link rel = \"stylesheet\" href = \"\/ style.css\">' ); }) <\/script><\/code><\/pre>\n\n\n\n
At the same time, if the JS file with jQuery is loading asynchronously (using the attribute asyncor defer), then the script for asynchronous CSS loading will also not work since the browser parser already bypasses this script, having no data to execute it ( jQuery at this moment will be only at the loading stage):<\/p>\n\n\n\n
<\nscript href = \"\/jquery.js\"\nasync > < \/script> <script> \/ \/ This script will not be executed because when jQuery loads asynchronously, the browser will\ncontinue processing the page data\n$(document).ready(function() {\n    $('head').append('<link rel = \"stylesheet\" href = \"\/ style.css\">');\n}) < \/script>  \nTo load JavaScript(jQuery) and CSS asynchronously, you can use the following trick:\n    <\n    script >\n    var js = document.createElement('script');\njs.src = 'jquery.js'; \/\/ quoted link to jQuery file \ndocument.head.appendChild(js);\njs.onload = function() {\n    $('head').append('<link rel = \"stylesheet\" href = \"\/ style.css\">');\n}; < \/script><\/code><\/pre>\n\n\n
\n
\"lazy<\/figure><\/div>\n\n\n