.Net MVC adding async to bundles

Question

I am coming to the end of a project which entails speeding up pages. to do this I have been using page speed insights by google (developers.google.com/speed/pagespeed/insights/).

To appease the google gods, my last task is to:

"Eliminate render-blocking JavaScript and CSS in above-the-fold content".

Now I understand this, but whats catching me out is that I am bundling all my JS/CSS scripts so I get this:

Optimize CSS Delivery of the following:
http://myProjectSite/…iNLCI_VXqeQlOY11sPqvHktFt9zdFUTOQ0zWZ7M1

As a side note, I have inlined all the critical CSS/JS that builds my above fold content. (I can delete my bundles, and the top half(1800px high) renders perfect without it, so that seems fine).

So in order to allow my CSS/JS to parse without render blocking, I would like to attach the Async attribute to my <script/>, but I dont know how to manipulate the output of it, when its created via bundles.

I looked at these:

Async loading of javascript files using MVC4 Bundling and HTML5 async attribute

Why use @Scripts.Render("~/bundles/jquery")

Add an 'async' attribute to a JS include tag in asp.net web forms

Those links recommend using a format similiar to:

@Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\"></script>", "~/bundles/mybundle")

So I replace my @Scripts.Render("~/jscript/base"), which worked - with the code above.

But using that, I get an error:

Compiler Error Message: CS0117: 'System.Web.Optimization.Styles' does not contain a definition for 'RenderFormat'

I see that RenderFormat is not recognized by my project, could anyone supply a method of using @Scripts.Render("~/jscript/base"), but allow me to add the Async attribute?

Thanks very much.

Trying: @Scripts.Render("<script type=\"text/javascript\" async src=\"{0}\"></script>", "~/jscript/base") Gets an error in the console of: "myProject.com/%3Cscript%20type= " — Benji40
– Benji40, Commented May 29, 2015 at 11:15

Jerry Joseph · Accepted Answer · 2015-11-10 01:01:31Z

3

@Scripts.RenderFormat works for javascript bundles.

The compiler error you got occurs when you try to render css styles using @Scripts.RenderFormat.

To render styles use @Styles.Render("~/bundles/mybundle")

async attribute can be added using @Scripts.RenderFormat but only for javascript.

answered Nov 10, 2015 at 1:01

Jerry Joseph

1,0228 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

.Net MVC adding async to bundles

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related