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

Question

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.

Comments

[Varun Sharma]

@Joshua, I have done some thing for the "Eliminate render-blocking JavaScript and CSS in above-the-fold content" <noscript>...</noscript> . But only reflect on mobiles. Not in desktop. for this url winni.in/cake-delivery-in-bangalore

[x-yuri]

Can you clarify what the percents mean? Let's say PageSpeed reports that 55% of above-the-fold content can be rendered without waiting for external stylesheets to load. Which means that 45% of above-the-fold content are styled with rules from external stylesheets. But that's not the case.

[Tahi Reu]

This is correct. They should be defer or async loaded, or moved to the footer/before the closing </body> tag, since they are not crucial for the page. Crucial code, such as main page style or Bootstrap, must be loaded on the top of the page or you will experience FOUC (Flash Of Unstyled Content), so only thing than can be done about these crucial components is to minify them and merge them into fewer files, to reduce render blocking. This comment is support for CowboyWillie comment which is unfairly downvoted.

[Salvador Valencia]

That's correct, you defer, defer, defer so you just load the very top of your page. The pain of splitting your perfectly running javascript and css files is the price to pay for this new concept everyone is rushing to implement!