Css/js loader defer Question

[chadlly2003]

I am using the css/js Loader plugin.
https://www.zen-cart.com/downloads.php?do=file&id=1774

I have some issues with performance on my website.
A suggestion was to async the css and defer the JavaScript.

I was wondering if it was possible to aysnc the css using the css/ js loader?

[lat9]

I'm pretty sure (read not absolutely sure) that the current version from Numinix's website supports javascript deferrals.

[chadlly2003]

I'm pretty sure (read not absolutely sure) that the current version from Numinix's website supports javascript deferrals.

yes it does support the javascript. But its the css i am having trouble with

[simon1066]

Following your original post I thought I would take a look at this - as currently I only defer the jscript.

in templates/MY_TEMPLATE/auto_loaders/loader_css.php (create it if it doesn't exist), add this (you can also wrap a conditional statement around this as mentioned in the plugins Readme)

<?php
  $loaders[] = array('conditions'    => array('pages' => array ('*')),
                   'css_files' => array(
		'defer/something.css' => array(
      'order' => 1,
      'defer' => true
    )
		)
                    );
?>

and, for example, add something.css to templates/MY_TEMPLATE/css/defer/

then at/near the bottom of your page code you should see the deferred css as:

<script type="text/javascript" async>
						var elm = document.createElement("link");
						elm.rel = "stylesheet";
						elm.type = "text/css";
						elm.href = "min/?f=/includes/templates/MY_TEMPLATE/css/defer/something.css&1570615485";
						
						var links = document.getElementsByTagName("link")[0];
						links.parentNode.appendChild(elm);
					</script>

There will also be a noscript entry near the top of the page:

<noscript><link rel="stylesheet" type="text/css" href="min/?f=/includes/templates/MY_TEMPLATE/css/defer/something.css&1570615485" /></noscript>

Pretty sure this works.

[chadlly2003]

That seems to do the trick... What if I wanted to add multiple css files. How would I change the code.

How come you don't defer your css?

[simon1066]

Tried a couple of things to defer multiple css files - none seem to work, so I don't know. Maybe someone else can chime in.

I just never got round to deferring css, Google no longer complains or asks me to defer css - I may look at it in the future but am happy with the performance of my site at the moment.