Google PageSpeed Insights Prioritize visible content

Question

I am just doing some testing on one of my random domains and when I run the domain through Google PageSpeed Insights with the following JavaScript being loaded:

$("[data-min-height]").each(function() {
     var dataHeight = $(this).data("min-height");
     var dataPercent = dataHeight / 100;
     $(this).css("min-height", function() {
          return $(window).height() * dataPercent;
     });
});

I get the error Prioritize visible content. If I take away the JavaScript, I no longer get the error. I am using matthiasmullie/minify to compress all my JavaScript together. Currently I have jQuery, PaulSpr/jQuery-Flex-Vertical-Center, and liabru/jquery-match-height. Everything is compiled into one file called path.js. I load that file right before the closing body element and I use defer.

So if anyone has any ideas as to why the above JavaScript would cause this error on PageSpeed, it would be much appreciated. Thank you.

Answer 1

Embed all the contents of path.js directly in your HTML document.

Read here about Prioritizing Visible Content

you scripts might be used to render contents

Answer 2

The reason for this error was because of jQuery each function. I rebuilt the same thing, but only using a JavaScript for loop (no jQuery) and the error went away.

var arr = document.querySelectorAll("[data-min-height]");
for (var i = 0; i < arr.length; i++){
    var currentWindowHeight = window.innerHeight;
    var dataHeight = arr[i].dataset.minHeight;
    var dataPercent = dataHeight / 100;
    var dataPercentHeight = currentWindowHeight * dataPercent;
    arr[i].style.minHeight=dataPercentHeight + "px";
}