Render Blocking Javascript & CSS MVC4

Question

I am working on MVC 4 web application for best optimization possible.

Only the last thing bothers me now.

Problem: Eliminate render-blocking JavaScript and CSS

What I know:

1) In _Layout.cshtml, @Styles.Render("~/Content/css") & @Scripts.Render("~/bundles/modernizr") are written just below '/head' tag.

2) Javascript blocking can be removed by using 'async' & CSS should be written outside '/html' tag.

For CSS, this is not working in my code, for JS I don't know anything.

Question: How to make this page 100% optimized?

Thanks, in advance.

Below is the image:

Image from Google Speed Insights

It's probably detecting that modernizr is loaded in the head, not a footer so it's complaining that it'll slow the page load. You'll most likely end up removing modernizr in a lot of cases (or combining it into your final script file). — Christian Duvall

dee dee dee dee · Accepted Answer · 2018-11-07T05:17:05

to avoid blocking with content.css add this to your layout header

<script type="text/javascript">

function load_css_async(filename) {


    var cb = function () {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = filename;
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);


 }

</script>


@Styles.RenderFormat("<script type=\"text/javascript\">load_css_async('{0}')</script>", "~/Content/css")

Render Blocking Javascript & CSS MVC4

1 Answers