How to Defer parsing of JavaScript? - CSS-Tricks

This topic is empty.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
October 23, 2015 at 6:48 am #210085

Eva
Participant

Through GT-Metrix i have noticed several issues, one of them is “defer parsing of javascript”.
The site i am working with, is joomla platform. I have tried with the extensions of joomla, but nothing good at all. Any method how to do this manually for those .js files ?
I tried to implement this piece of code in head.php file :
$ex_src = explode(“/”,$strSrc);
$js_file_name = $ex_src[count($ex_src)-1];
$js_to_ignore = array(“mootools-core.js”,”mootools-more.js”,”core.js”,”other files i had to defer”);
if( in_array($js_file_name,$js_to_ignore) AND substr_count($document->baseurl,”/administrator”) < 1 AND $_GET[‘view’] != ‘form’)
continue;
but this one stops those files from loading automatically.
Thank you !

October 23, 2015 at 8:24 am #210088

Shikkediel
Participant

I’ve been using the async attribute on script tags for it here and there but you gotta beware what scripts you use it on. The jQuery library itself for example can’t have this, it has to be loaded synchronously for any other scripts using it to be executed correctly. But external scripts that are not intertwined will get a loading speed advantage from it, all loading together instead of one at a time.

Not much more I can offer on the subject myself…

January 7, 2016 at 12:44 pm #236495
Shikkediel
Participant
I’ve been messing around on my own pages with this and came to the conclusion that the defer attribute is a much better option. Using async seems to break document ready with jQuery and is unpredictable for the rest unless it’s a script that could be executed at any time. Instead of just putting the script links in the <head> section (where I like them for overview) and making them render block the rest of the page, giving them the defer attribute seems to work much better. It will have the same effect as putting all links at the bottom of the page. Google PageSpeed seems to like it a lot in any case.
```
<script defer src=" ... "></script>
```
Good support as well.

http://caniuse.com/#feat=script-defer

Deferring all scripts that depend on each other, will make them execute in the correct order.
August 13, 2018 at 1:28 am #275278

asdeideas
Participant

Hi! First thing I’ve tried to defer parsing of JavaScript in my site was to activate the option in the cache plugin I use (Litespeed Cache), but I had some visualization problems about Rev Slider and translation plugin also (Transposh), so I excluded the corresponding JS of deferring, but not fixing the error… After that, did the same but using Fast Velocity Minify plugin instead, same results. Maybe adding the code to functions.php skipping these problematic JS could be the solution but, how can I exclude it by code?

Many thanks!
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The forum ‘JavaScript’ is closed to new topics and replies.