During my two decades as a professional web developer, I’ve watched the Internet evolve from its simple and humble origins into a complex and ever-changing cocktail of browsers, devices and edicts from the major tech companies. It’s hard for anyone to keep up, and it seems like every few months, Google announces a big new change that will affect how your site is ranked in its search results and perceived by your customers.

Core Web Vitals is one of those pivotal changes. In 2021, Google will begin ranking your site — and potentially labeling it for visitors – based on whether it meets Google’s exacting standards for page speed on mobile devices. It’s an opportunity to get ahead of the competition – and you’re at risk of falling behind if you let your site languish rather than optimizing for the new rules.

I’ve spent more than a decade learning the ins and outs of optimizing WordPress, the web’s most popular content management system, and over the past year I’ve brought my site and many client sites up to lightning-speed, scoring in the coveted 90th percentile and higher on Google’s Core Web Vitals measurements. That means a better user experience and an opportunity to outdo the competition in rankings for valuable search keywords.

I’ve spent years learning the ins and outs of WordPress optimization, and I’ve picked up a lot of expensive and challenging lessons along the way.

In this guide, I’m sharing a complete overview of the process that I’ve used to optimize hundreds of WordPress sites, keeping them fast, secure and ahead of the technological curve. I want you to avoid the pitfalls and confusion that almost everyone struggles with when they first attempt to optimize their site, and skip straight to the payoff of happier users and increased organic search traffic.

Who this guide is for...

I wrote this guide for owners of creative agencies, web designers, and online entrepreneurs. If you earn traffic and revenue from organic search, social media or visitors using mobile devices, the speed and performance improvements in this guide will help you take your business to the next level – and ensure you don’t fall behind when Google introduces their new Core Web Vitals ranking system.

How to read this guide...

Optimizing WordPress for Core Web Vitals consists of nine short, self-contained chapters arranged in a logical narrative. You can read it start-to-finish (which will take about 20 minutes), or you can jump between the chapters that most interest you today. There’s no harm in skipping around or reading in reverse, especially if that means you’re more engaged and able to get valuable insights right away.

What are Google Core Web Vitals?

The Core Web Vitals system is a set of measurements that Google uses to calculate the speed of your web site — resulting in a score that ranges from 0 to 100. In 2021, Google will begin using this score as a factor in your rankings, which makes Core Web Vitals a new and pivotal component to your Search Engine Optimization (SEO) goals.

While we usually think of things like keyword optimization, backlinks, meta tags and content when we discuss SEO, Core Web Vitals signals Google’s shift towards prioritizing the on-page experience in their rankings.

In addition to being newly important for SEO, the Core Web Vitals score also indicates how well your site performs on mobile devices — in particular, they’re using the mobile score from a 4G device (which is a little slower than a modern iPhone or Android device) as their baseline. That means, in Google’s eyes, you’re measured by how well you perform on a lower-end device and they care much less about how your site looks on a fast computer with a large desktop monitor.

In some ways, this is a challenge, because many sites aren’t currently optimized for mobile visitors. In other ways, it gives us some unique optimization opportunities because you can get away with your site being a little “heavier” on desktop if you really speed it up on mobile – that is, you can show more content and imagery to users with larger screens and pare it down for users with smaller screens.

Achieving excellence on your Core Web Vitals scores means you’re setting yourself up for success with SEO as well as creating a better experience for your mobile users — which will often lead to better conversion rates, or users sticking around on your site for longer when they’re coming in via social media and other sources that are heavily tilted toward mobile visitors.

Here’s a quick outline of the three primary components of Core Web Vitals. Later in the guide, we’ll dig into the six scores that influence them and ultimately generate your 0-100 score for each page.

Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have an FID of less than 100 milliseconds.

Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

The links above go directly to Google’s definition of each of these measurements — and as you can see, it’s full of jargon! Even for a web developer, these metrics are kind of obtuse and difficult to understand. So, in this guide, I’ll introduce these concepts to you in layperson’s terms so you can easily assess which elements of your site need work without getting bogged down in overly fancy tech language.

Want to see how your site performs right now? Head over to Google’s PageSpeed Insights tool and give it a try. Then read on for a deep dive into how you can optimize your site, and how we can help if you get stuck.

Speed Matters

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.

Your Goal: The 90th Percentile

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

‘Above the Fold' is back!

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

Leveling-up Your Images

Back in the good old days of the Internet, there were only two types of images, JPG (pronounced jay-peg) and GIF (which I pronounce with a “j” sound, although controversy continues to rage between the “g” and “j” camps). JPGs are great for photos, GIFs are great for animations or images that contain text. The third “legacy” option, PNG (pronounced “ping”), is like a supercharged version of a GIF with better transparency and higher quality for similar file size.

Google says you can just throw all your JPGs, GIFs and PNGs in a dusty corner next to your DVD player and 14.4 modem because there are new and improved “next-gen” image formats in town.

The first is SVG, which means Scalable Vector Graphics. An SVG is not really an image file, but a textual map of the exact vector dimensions and colors you want to display on the site. (If you’ve used Photoshop or similar tools, a GIF is raster, while an SVG is vector.) This means it loads way faster, produces a crisper image, and can be resized more easily than a PNG or GIF.

Google loves SVGs, so you should use a modern design tool (or one of the many converters you can find on the web) to turn your logo and any other PNGs or GIFs into SVG files wherever possible.

The new photo format is WebP, which is intended to provide high quality with lower file size than the JPG. It’s quite time-consuming to convert all your JPGs to WebP, but it’s a necessity to get your Core Web Vitals scores to where they need to be. We use a tool called Imagify, which is both a WordPress plugin and a web interface where you can upload JPGs and download them as WebPs.

The irony here is that you’ll spend a lot of time converting images and your site won’t look any different to the naked eye. But it will load faster and score much higher on Google’s Core Web Vitals measurements.

A Strong Foundation: Your hosting and infrastructure

Earlier in the guide, I mentioned that your Core Web Vitals scores might change from moment to moment based on the response time of your web server. While many of the changes we discuss in this guide are generally “fixed” once you finish them – for example, changing your above-the-fold imagery or converting your JPGs to WebPs — you’ll need to keep a constant eye on the speed and quality of your web hosting provider and other pieces of your infrastructure.

If you’re struggling with your server’s “initial response time” or seeing consistently low scores on any of the key Core Web Vitals metrics, it makes sense to consider a migration to a faster web host.

For the vast majority of our clients, we recommend WP Engine. They have WordPress-specific security and performance optimizations, really great built-in caching and high-quality 24/7 live-chat support. They’re a little more expensive ($30/month rather than the $5/month you’ll get from a budget host), but unquestionably worth the investment for the speed improvements.

The second key piece of your infrastructure is Cloudflare, which provides a wide array of services, but for our purposes provides built-in caching and speed optimization, including automatically making your HTML, JavaScript and CSS files smaller. Cloudflare, which is free, will become your DNS provider and also add lots of helpful firewall and security features to make it less likely your site will suffer from downtime related to a cyberattack.

The combo of Cloudflare and WP Engine means you’ll have a strong foundation, and switching will probably boost your Core Web Vitals score immediately if you’re currently on a budget host.

The vast majority of our clients are running lightning-fast on WP Engine (that’s where we host our own site as well), but for some of our larger-scale clients we set up custom Amazon Web Services  (AWS) hosting environments. This usually doesn’t make sense until you’ve maxed out the higher-end WP Engine plans ($600+ per month), but if your traffic warrants it, a custom AWS stack can be a cost-effective upgrade to increase your site’s speed.

Optimizing Your Code

Once you’ve handled your images, above-the-fold layout and hosting, it’s time to crack open the hood and start working with your code. While some of the earlier improvements are accessible without full-stack web development skills, for this section you’ll likely need to work with a professional web developer to get to the finish line.

There are three major areas where you’ll need to streamline and optimize your code. Your HTML (hypertext markup language) is the core code that creates the structure of your site; the CSS (cascading stylesheet) is the code that applies colors, fonts and visual styles to your elements; and, the JavaScript (JS) is the code that makes your site interactive, handling animations, tracking scripts, some visual styles and some form-submission behavior.

I’ll talk about some handy tools in this section that usually help. However, as you get deeper into your code, you may find that some of these “automatic” optimizations actually break things on your site. If that happens, you’ll need to work with a web developer to modify your code so it can be optimized without any functionality falling apart.

For HTML optimization, the minification tool built into Cloudflare is a great first step — once you’re on Cloudflare, it’s as simple as checking a box. You can also experiment with two of our favorite WordPress plugins, Autoptimize and WP Rocket, which have similar features. In short, they carve out all the comments and unnecessary white space to slightly reduce the file size of your page when it is delivered to a visitor’s web browser.

The tools above will also help you “lazy load” your images, ensuring that large image files aren’t downloaded until the user actually scrolls far enough to see them on the page. This reduces the total load time of your page and improves your Core Web Vitals score.

With CSS, things get a bit trickier. You can and should minify your CSS using the tools above, but carefully check that nothing breaks, such as complex animations or areas that use unique or out-of-the-box design elements. Taking your CSS optimization to the next level can also include breaking your CSS into separate files and only calling styles when they’re actually used on a page – for example, if you have an elaborate member-login area, there’s no need to call styles for that area on your home page when people aren’t logged in. Breaking apart your CSS can mean that less CSS is loaded on any given page, which is usually a plus for your Core Web Vitals scores.

A web developer can also help you generate “critical CSS,” which goes hand-in-hand with your above-the-fold optimizations. This ensures that the styles for the content above the fold on your pages loads almost instantly since it’s separated from the other, less critical styles that are used for elements lower on the page. In other words, the stuff you need first is separated so that it loads faster.

JavaScript is where things can get really rough because it’s much more fragile than HTML and CSS. Your goal is to “defer” as much of your JavaScript as possible until the end of your page’s loading sequence. However, you need to think about using a scalpel rather than a sledgehammer when you do this because loading things in the wrong sequence will sometimes break all the scripts on your page. We spend a lot of time parsing through JavaScript to determine which pieces we can fully remove, which we can defer to the end of the loading sequence, and which are truly essential. Again, you can often make some progress on this with automated tools like the ones I mentioned above, but if stuff starts to break or you can’t quite get PageSpeed Insights to stop complaining about scripts on your page, you’ll want to work with a developer.

There’s one more big trade-off about JavaScript — it’s used for almost all tracking tools, including Google Analytics, the Facebook Pixel and similar tracking scripts from just about every social network and software-as-a-service tool under the sun. We often find clients with a dozen or more of these scripts on their site, and unfortunately, that really hurts their Core Web Vitals scores.

You should be continuously assessing which of these tracking scripts are essential for your business needs and removing the ones that aren’t. (Alternatively, you can put some scripts on just one or two pages, rather than adding them globally to all your site pages, to reduce their impact.) For example, we use only Google Analytics on our site. Clients who purchase social media ads might need the Facebook Pixel, but could eliminate tracking from Twitter, LinkedIn or Hotjar. This will be different for every site, but the bottom line is that the more tracking scripts you have on your site, the worse your pages will perform.

Likewise, anything you embed on your site – such as a YouTube video, an animation from GIPHY or an e-mail subscription form from Mailchimp — is going to generate JavaScript and sometimes add heavy elements that will slow down your page load. As with tracking scripts, some of these are necessary (and we use well-optimized signup forms on our site while still achieving scores in the high 90s), but too many will inevitably bog you down.

Making the most of custom fonts

In the heady days of my youth, I spent hours debating the virtues of Times New Roman, Arial and Verdana. It was a simpler time, with three universally available web fonts.

Today, we have thousands of fonts at our fingertips – but they’re not all created equal when it comes to your site’s speed. First, I encourage you to use fonts from a top-tier provider, such as Google Fonts or Adobe Fonts (formerly Typekit). As you venture beyond those two, you’re more likely to encounter fonts that will slow down your site more than they spice up your design. Both Google and Adobe provide most of their fonts for free, and they’re generally well-optimized or able to be optimized with a few lines of code added by a developer.

Fonts contribute to your overall page time, and can also have a significant influence on several of the Core Web Vitals metrics. They can cause a layout shift, they can make your page take longer before it becomes interactive and they can slow you down in other ways that affect your score. When you’re working with your developer on font optimization, they should be able to set up your fonts to “swap” after they’ve loaded, but show a fallback font (such as trusty old Times New Roman) for the first second or two, ensuring that readers can still see your page in full while they’re waiting for the custom font.

There are other custom fonts out there that are used solely as icon sets. These are super cool and I love them for their ease of implementation, but they’re generally bad news for Core Web Vitals. If you’re using a font icon set, you should work with your developer to replace the icons with SVGs to avoid loading an additional and unnecessary font on your site.

The Core Web Vitals Cheat Sheet

In our final section, I’ll dig into each of the six Core Web Vitals metrics and show you which elements of your website are usually to blame for poor performance.

First Contentful Paint and Largest Contentful Paint

These two metrics are all about your above-the-fold content on the typical mobile device. (If you need help determining the location of “the fold,” Google’s PageSpeed Insights tool will show you a screenshot of what it thinks your page looks like on mobile.) Google measures how long it takes for the first text or imagery above the fold to be visible and uses that as your “First Contentful Paint” score. Then it looks at how long it takes for the largest single element (an image, headline or paragraph) above the fold to be visible.

You can speed up your First Contentful Paint score by improving your hosting infrastructure since your server’s response time is a big factor in when that first visible element is displayed. If your Largest Contentful Paint element is an image, you can either optimize your images or simply remove images entirely from the above-the-fold area on the mobile version of your site.

Speed Index

This is a similar metric to First Contentful Paint, but it measures the timing for all of the page’s content to become visible. This “fully visible” event generally takes place after First Contentful Paint but before the Time to Interactive marker described below.

Cumulative Layout Shift

This metric measures how much the layout of your site changes as each element loads. For example, if you have a big image that’s zero pixels tall when it hasn’t yet loaded, but then grows to 200 pixels when it finally downloads, that’s going to cause a big shift in how your page looks over the course of the loading sequence. Resolve this by ensuring that your HTML, CSS and JavaScript don’t cause this “jumpy” behavior, especially on mobile devices above the fold. This one may not be easy to solve without a developer, since it often involves getting under the hood with the code, but tightening up your above-the-fold design on mobile is a good start.

Time to Interactive and Total Blocking Time

Time to Interactive attempts to measure when a page is functional for the user. It doesn’t have to be 100% fully loaded, but the vast majority of JavaScript and other interactivity is up and running, so you can scroll, click buttons, interact with forms, and do everything a user might expect to do on a typical page. Because this is usually the last event in the loading sequence, this is usually the metric with the highest raw number (i.e. the number of seconds it takes your page to become fully interactive). Total Blocking Time is a simple matter of arithmetic — it’s the difference between your Time to Interactive and your First Contentful Paint values. In other words, Total Blocking Time is the duration from the point when the user sees content to the point where the user can interact with the page.

‘What should I do next?’

You’ve just read more than 5,000 words on how to optimize your site for Core Web Vitals – which means you’re already better equipped for the challenges ahead than 99 percent of your competitors.

So, what’s next?

Based on my experience over the past 20 years helping hundreds of agency owners find the right web solution, it’s highly likely that one of these paths will be right for you:

If you’re starting with a DIY WordPress site...

There are some decent tools out there to do some Core Web Vitals without a developer, so check out our recommendations from the Leveling Up Your Images chapter as a starting point. You may also be able to get a big speed boost if you most from a budget host (i.e. if you’re paying less than $10 per month) to a higher-end hosting provider like the ones we recommend in the chapter on Improving Your Infrastructure.

If you’re already working with a web developer...

If you have a team member with full-stack development skills, you can take the next level on your Core Web Vitals optimization journey. Check out our recommendations for Optimizing Your Code and improving the performance of your Custom Fonts. You can also work with your developer to streamline your Above-the-Fold content, which has an outsized impact on your mobile Core Web Vitals scores.

If you want an expert to get your site to the top of the Core Web Vitals charts...

We’ve worked with dozens of clients on boosting Core Web Vitals scores, allowing them to get ahead of the curve before Google updates its algorithm to make mobile Core Web Vitals a major factor in search rankings.

This includes everything from relatively small WordPress sites to expansive magazine-style sites receiving hundreds of thousands of monthly visitors. If you’ve got a WordPress site, we can help you take it to the top of the charts and reap as much benefit as possible from a better user experience and a higher score on the newest factor that influences your search rankings.

If you’d like to work with a hands-on expert to rebuild and optimize your WordPress site to maximize your Core Web Vitals score, get in touch with us. We’ll work with you to craft a project that fits your specific goals and needs, and you’ll have my 20+ years of expertise and the experience of the whole Howard Development & Consulting team on your side.

Questions?

If you have any questions about anything I covered in the guide, I invite you to reach out to me. I’ll get back to you right away and I, or a member of my team, will help you solve your specific challenge.

Rob Howard is the founder and CEO of Howard Development & Consulting, the web development firm that creative agencies trust when every pixel matters. His startups have been featured in Entertainment Weekly and Newsweek, and his clients have included The World Bank, Harvard and MIT.