What is “above-the-fold content” in Google Pagespeed?

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.

Leave a Comment