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.
