Optimizing WordPress for Core Web Vitals

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.

The following excerpt is taken from Optimizing WordPress for Web Core Vitals. You can read the introduction to the guide here.

Google’s PageSpeed Insights tool measures six key elements of site speed — we’ll get into each one in detail later — and compiles them into a PageSpeed score, which is graded on a 0-100 scale.

The general idea is that a site that scores 90, which is the benchmark for a “green light” from PageSpeed Insights, is in the 90th percentile of all sites on the Internet in terms of speed. In other words, that site is faster than 90 percent of all sites on the Internet. (Google has pegged specific speed thresholds to accomplish each score, but it is possible they will change these in the future — for example, if all sites on the web are faster two years from now, the 90th-percentile scores may require faster load times to achieve.)

Want to see how your site scores today? Just paste your URL into PageSpeed Insights and wait a few seconds for Google to work its magic. Your home page will generally score worse than mostly-text pages like blog posts, so try a few key pages to get a sense of where you stand overall.

I’m pretty proud of our scores, so I’ll share them here:

These are the scores that Google assigns based on the simulated experience on a 4G mobile device (which is probably slower than your current phone, especially if you’re on WiFi) — and it’s those mobile scores that will matter for your rankings. Desktop scores are also available, but it’s much easier to score high on desktop, and that score won’t matter for SEO rankings, so we’ll focus exclusively on mobile in this guide.

You may see your score vary by a few points each time you try it — this is usually a result of the response time of your web server changing from moment to moment. If you see dramatic shifts, that’s probably a sign you have a shaky infrastructure under your site (we’ll get to fixing that soon).

We were able to get our home page — which is a large, long page full of elaborate designs and imagery – scoring almost as high as our blog posts by following the steps I’ll be outlining in this guide. While I think it’s acceptable to score a little lower on a home page, since it’s typically not going to be your highest-traffic page in terms of organic search traffic, Google will be judging your site based on the aggregate score of all your pages so you can’t focus solely on your biggest SEO landing pages. You need to take a holistic approach and speed up every page on your site to get the biggest benefit from Core Web Vitals.

If you’re not in the 90th percentile or above, you’ll get a yellow or red score from Google and you’ll soon be demoted in the rankings as a result. As of this writing, we haven’t seen the exact way Google will “flag” sites as fast or slow, but you can count on it being significant. For example, a few years back they started adding a giant red “NOT SECURE” badge to sites that didn’t use modern SSL certificates, which, as you might imagine, really freaked people out. It would not surprise me if we saw similar labels for fast and slow sites in the future.

The 90th percentile is by no means impossible to achieve, but it’s very unlikely your site is in that zone now if you haven’t done explicit work on Core Web Vitals already. In fact, there’s a good chance that many of your pages are in the red (49th percentile and below) – so let’s get to work on making them lightning-fast instead.

The following excerpt is taken from Optimizing WordPress for Web Core Vitals. You can read the introduction to the guide here.

We’ve all done it — you click a link, the page stalls for a few seconds, and you click away before even reading a word. In the age of mobile devices and extremely short attention spans, making your site as snappy as possible is critical to engaging your users and providing the best possible experience with your brand.

In 2020, Google made it even more important — they announced that their Core Web Vitals measurements, which approximate how quickly a page loads on a mobile device, will become an essential feature of their ranking algorithm.

That means that slower sites will not only drive away users — they will also rank worse than their competitors on Google search. When Google rolls out this update in May 2021, a slow site will lose traffic from a drop in search rankings, and from users abandoning the site while they’re waiting for it to load. (And by the way, if you’re buying social media ads, you’re targeting the exact people who are most likely to abandon a slow-loading site.)

If your site generates any meaningful amount of revenue from search, mobile or social traffic, Google is essentially forcing you to make it lightning-fast, as soon as possible.

The good news — achieving top-notch Core Web Vitals scores is possible, and it’s possible using WordPress, the web’s most popular content management platform. In this guide, I’ll share our proven approach to achieving the highest possible Core Web Vitals scores — even on sites using out-of-the-box themes, and without a huge financial investment.

When your site is running lightning-fast, you’ll reap the SEO benefits, and your visitors will enjoy a cleaner, snappier experience and spend more time engaging more deeply with you and your brand.