Loading jQuery async

Archive
1

Following documentation in the Asset Manager section (http://learn.getgrav.org/themes/asset-manager) I modified my instance of antimatter theme with the Intent is to boost my PageSpeed Insights score.
Opened user version of base.html.twig and altered it:

 {% block javascripts %}
        {% do assets.addJs('jquery',101, {'loading':'async'}) %}
        {% do assets.addJs('theme://js/modernizr.custom.71422.js', {'priority':100, 'group':'bottom'}) %}
        {% do assets.addJs('theme://js/antimatter.js', {'priority':100, 'group':'bottom'}) %}
        {% do assets.addJs('theme://js/slidebars.min.js', {'priority':100, 'group':'bottom'}) %}
    {% endblock %}
    {{ assets.js() }}

Have cleared cache but the async loading directive is not being implemented. Page source in both localhost and production does not show that jQuery is being loaded asynchronously.
Could this be because jQuery is being loaded as a “named asset”? Something else? Suggestions? Thanks.

2

I think you’re right. Making a PR.

3

PR sent. If you can, test it: https://github.com/getgrav/grav/pull/623

4

Sorry. Swapping in those two lines had no apparent effect in <script>tag. Clearing Grav cache did not help. I’ll try browser cache after sending this reply.

5

Just saw, try

{% do assets.addJs('jquery',101, null, 'async') %}

not

{% do assets.addJs('jquery',101, {'loading':'async'}) %}

I think the second call style needs a fix, can’t get it to work. Looking at it.

6

Here again. I updated the PR code. Fixes your original use case, but your code has an error:

it’s

{% do assets.addJs('theme://js/example.js', {'priority':101, 'loading':'async'}) %}

not

{% do assets.addJs('jquery',101, {'loading':'async'}) %}

7

SOLVED @flaviocopes, thank you jQuery is now loading async.
FYI for others that may have a similar issue:

Swapped in your supplied code changes to

system/src/Grav/common/Assets.php.

Then edited my edits to

/user/themes/myTheme/templates/partials/base.html.twig

Final statement for jQuery:

{% do assets.addJs('/system/assets/jquery/jquery-2.1.4.min.js', {'priority':101, 'loading':'async'}) %}

Note that jQuery is stored in system folder not the user theme folder.

In turn, the relevant html is written:

<script src="/gravBlog/system/assets/jquery/jquery-2.1.4.min.js?g-f5cfa376" type="text/javascript" async></script>

BTW, I was concerned the other day about proper syntax for the priority bit. Glad you cleared that up for me. :slight_smile:

Even though the immediate issue is solved, I still have a lingering bit of confusion… Grav uses a convenient feature called named assets which allows users to group collections of assets (such as a bundle of similar .js or .css files) into one “named” asset. Out of the box, jQUery is pre-configured as a named asset. The solution above over-rides the named asset feature and treats jQuery as an ordinary citizen. Just curious about how this might be handled in the future. Don’t require a response… just my observation.

8

When jQuery is updated in Grav (probably in the next release of Grav, since 2.2 is out) and you update your site, your path will need to be updated or that version won’t be found any more.

When merged the changes,

{% do assets.addJs('jquery', {'priority':101, 'loading':'async'}) %}

should work fine!

9

You can still use any jQuery release you added somewhere in the user/ folder if you want.