The following excerpt is taken from Optimizing WordPress for Web Core Vitals. You can read the introduction to the guide here.
I got my start in the newspaper industry, where placing a story or image “above the fold” means giving it the most prestigious real estate of the day. In a newspaper, the space “above the fold” is what’s viewable on the top half of the front page — no need to open or unfold the paper to start reading.
Since many web designers transitioned from print design, I’d often have conversations in the early years of the web about whether we needed to apply the same “above the fold” concept to our web sites. In general, my position was no – because there are so many different device sizes and users are so accustomed to scrolling, the “above the fold” space on a web page was not really equivalent in terms of user-experience to being on the front page of the newspaper or on the cover of a magazine. You could count on users to scroll down, and you couldn’t really measure where the “fold” was across thousands of differently-sized devices anyway.
That’s changed a bit in the past few years. Although I still think “above the fold” is less important on the web than in print from a content-engagement perspective, the question of what lands on the first screen of a mobile device has become very important in terms of site speed and Core Web Vitals.
In Google’s parlance, the speed of the “above the fold” area is measured by the “First Contentful Paint” metric. Maybe I’m old fashioned, but I much prefer the newspaper jargon (which at least has some connection to a real, tangible object) to the Silicon Valley jargon, so I’ll stick with accessible language like “above the fold” wherever possible throughout this guide.
Side note: “Contentful” is a made-up word! Actually, it has an archaic definition, but it used to mean “full of contentment,” as in happiness, not “full of content,” as in the words on a web page. Hey, Silicon Valley coders: stop “consuming content” and start using real words!
Because what’s “above the fold” on mobile is really meaningful for your rankings now, there will be some design trade-offs in boosting your speed scores. The good news is that, for the most part, you can apply these changes only on mobile sizes. Because the rules are less stringent on desktop, it’s OK to use big images, for example, whereas I will encourage you not to do that on mobile.
As a quick example, we have a large hero background image on the desktop version of the Howard Development & Consulting home page. I think it looks awesome, but it was dramatically reducing our First Contentful Paint score on mobile so we replaced it with a similar CSS gradient (which requires no images whatsoever). It’s definitely a trade-off, but in my view, the higher ranking is worth sacrificing a small design flourish on mobile.
These decisions are different for every site, but we’ve consistently found that reducing imagery above the fold is a huge help for your Core Web Vitals score and the real-world experience of your mobile users. There are a lot of cool opportunities to use CSS styles to add color and flourish to your mobile pages without images, too.
But when you do use images, you’ll want to make sure they’re optimized in the newest formats. We’ll talk about that in the next chapter.
