What is "above-the-fold content" in Google Pagespeed?

Until recently, my site (www.heatexchangers.ca) scored 98% on Google Page Speed. There were a couple of things I could do nothing about such as the query string from web fonts. I was very happy with this as this represented all that I could do.

Recently Google added something else that affects the page speed score and I now only get 89% on Page Speed and get this suggestion:

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

The suggestion to fix this seems to involve trolling through all my .css and .js files and separating some parts of them and adding them inline to my html. This is causing me some confusion as I was under the impression we must keep as much JS and CSS out of the HTML as possible.

What exactly is "Above the Fold" content? If it is a few styles such as font, background colour etc; then I can see it might not be too big a deal to include inline. I have not been able to find a list of exactly what this is.

Solution 1:

This is because Google recently changed the page speed tool to better reflect an increasingly mobile web. Mobile data networks have different performance characteristics than wired or wifi so you need to do different things to optimize for them.

Above-the-fold (ATF) is simply the first screen's worth--anything you don't need to scroll to see. Obviously, this varies depending on the device and its orientation, so you may need to generalize and maybe find some workable common options, maybe one targeting smartphones, one for tablets, and one for larger desktops.

As for what CSS they are talking about, they are really intending all CSS needed to fully style whatever content is displayed ATF. To determine the load time of your ATF content, they are going to take a screen shot of the final version and compare that visually to the page as it loads and when it is alike enough, they'll consider that the point where the ATF content is loaded.

This is a video presentation from Google on this subject:

http://www.youtube.com/watch?v=YV1nKLWoARQ

The emphasis is on getting users something to do within the first second. The reasoning behind putting the CSS for the ATF content directly into the HTML reflects their research on mobile data performance showing that if the CSS isn't there, it won't get loaded soon enough to be within the first second.

They also provide links to tools that may be able to automate some of this. I have not tried them and YMMV.

Solution 2:

google page insights will tell you clearly how many % of css referring the content above the fold is being loaded too late and page could have been rendered earlier. Than you could move parts of css to achieve a green result. i can do it for you:goo.gl/GsRxNc

a link from Google describing 'above the fold' https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Solution 3:

Above-the-fold content is the portion of the webpage that is visible in a browser window when the page first loads. Google wants to see inline CSS extracted from your main CSS file and injected into the head tag, allowing everything you see first to be loaded first.

source - https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first.