• Skip to primary navigation
  • Skip to main content
HDC

HDC

  • Products
    • MasterWP
    • Press The Issue
    • Understrap
    • WP Wallet
  • Services
  • Portfolio & Process
  • Team & Mission
  • Work With Us

‘Above the Fold’ is Back

By Rob Howard, Founder & CEO

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.

HDC home page on desktop and 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.

By Rob Howard, Founder & CEO Filed Under: Articles, Optimizing WordPress for Core Web Vitals

About Rob Howard, Founder & CEO

Rob is the founder and CEO of Howard Development & Consulting in Denver. His work has been featured in Wired, Entertainment Weekly, Newsweek, U.S. News & World Report and Techcrunch, and his clients have included Harvard, MIT and The World Bank. Download Rob's free Agency Owner's Guide to Hiring Web Developers.

Let's get started. Request a Quote

HDC

Copyright © 2023 Howard Development & Consulting, LLC
1624 Market St., Ste. 226, Denver CO 80202
(720) 900-1030 • [email protected]