js(), bootstrap(), jquery() View Helpers > Async Attribute

[Marc-pi]

I worked at optimizing my page loading time and first byte time i was able to defer JQuery and Boostrap correctly, loading time boost incredibly, making the over the fold content being displayed first much more quicker.

// Load jQuery
$this->jquery('jquery.min.js',
        array('defer' => true)
);

// Load Bootstrap css/js and font-awesome
$this->bootstrap(array(
    'js/bootstrap.min.js' => array('defer' => true),
    'font-awesome/css/font-awesome.min.css'
));

I still have issue with plugins, so i wanted to async jquery instead of defering it. I tried to replace defer with async, but it did not work, seems this attribute is not recognized.

either

// Load jQuery
$this->jquery('jquery.min.js',
        array('async' => true)
);

or

// Load jQuery
$this->jquery('jquery.min.js',
        array('async' => '')
);

@taiwen it is supposed to work like the other attributes?

[Marc-pi]

btw, just in case you need, there are js loaders that helps set js launch/load priorities and dependencies

• Modernizr.load() from modernizr lib we already have
• RequireJS http://requirejs.org/
• LABjs = > https://github.com/getify/LABjs

but i do think we don't need such loader yet, if we manager well defer/async attributes, we can do already a lot.

[taiwen]

At this stage, it is hard to support defer or async since script loading is open to third-party modules thus dependency is not guaranteed.

[Marc-pi]

since script loading is open to third-party modules

you mean third part libs (nested scripts), i guess. because i noticed bootstrap and jquery are in term of loading tidily linked

But the first step is to be able to use either defer either async as attributes in our helpers. i don't know why async does not work, but i need it ! async is usefull also when you have standalone js.

[Marc-pi]

@taiwem, did you have a look?

[Marc-pi]

up !

[Marc-pi]

i tested last week the footer load of all jquery and his friends (boostrap, other plugins). worked (i changed some helpers to change loading to footer), but i'm not convinced it is the best solution. seems the loading time are not faster, i had better result with defer and async. i need to test other solutions from the list i gave above

    Modernizr.load() from modernizr lib we already have
    RequireJS http://requirejs.org/
    LABjs = > https://github.com/getify/LABjs

@taiwen, did you ever thest some of them ? what do you recommend ? NB : http://searchengineland.com/google-testing-red-slow-label-search-results-slower-sites-215483 NB2 : we dont have http2 implemented on servers yet :-)

[Marc-pi]

Just in case you missed it, mobile friendlyness well be a ranking factor, starting from Apr 21th. This includes site speed of course

http://googlewebmastercentral.blogspot.fr/2015/02/finding-more-mobile-friendly-search.html?m=1

[Marc-pi]

@taiwen i think the definitive solution is to make use of http://requirejs.org/, a script loader, that fits well for loading asynchronisely Jquery, Bootstrap and other jquery plugins (it as dependency management) can you have a look so we implement it in core by default, to speed it up? NB : but the usage of the async attribute is still needed, for standalone scripts !

[Marc-pi]

very important, keep it open, we have to improve over the flow content display