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.
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.