Optimizing Your Website for Google Core Web Vitals
I’ve spent the better part of two decades in the web development industry and I’ve watched it evolve into a complex and ever-changing cocktail of browsers, devices, and edicts from the major tech companies of the time. And now, with Google dominating the internet, every time they announce an algorithm change (which seems to be every few months), it will affect how your website is ranked in their search results — and perceived by your customers.
Core Web Vitals is one of those changes.
Later this year, Google will begin ranking your site — and potentially labeling it for visitors – primarily based on whether it meets their specific standards for page speed on mobile devices. Think of it as an opportunity to get ahead of your competitors, but also know that you’re at risk of falling behind if you don’t optimize your website for these new rules.
The speed of your website has always mattered, but now Google made it even more important. With the release of their Core Web Vitals measurements, which approximate how quickly a page loads on a mobile device, they announced that it will become an essential feature of their ranking algorithm.
That means that slower sites will not only drive away users, they’ll also rank worse than their competitors. When Google rolls out this update, 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.
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 specifics of what Google will be looking for have already been discussed on this blog, so in this article we’ll share an overview of how you can optimize your website to keep it fast, secure, and ahead of your competition.
Your Goal: the 90th Percentile
Once you’ve optimized your website for Google Core Web Vitals, you can use their PageSpeed Insights tool to check your score. Your goal is a score of 90 or above.
The general idea is that a score of 90, which is the benchmark for a “green light” from PageSpeed Insights, is in the 90th percentile of all websites on the Internet in terms of speed. In other words, it’s 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.)
If you score below a 90, you can click on the “see calculator” link below the Lab Data subheading to see how they calculated your score. Moving these sliders will re-calculate your score so you can see where you’re falling short and which changes will have the greatest impact.
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.
‘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.
Although I 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. By Google’s metrics, the speed of the “above the fold” area is measured by “First Contentful Paint.”
Because First Contentful Paint 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.
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 next.
Leveling-up Your Images
You’re probably familiar with three main types of image formats — JPGs, which are great for photos; GIFs, which are better for animations or images that contain text; and, PNGs, which are like a supercharged version of a GIF with better transparency and higher quality for similar file size.
However, Google now says that your JPGs, GIFs, and PNGs belong on a dusty shelf next to your CDs, DVDs, and dial-up modem because they’ve been replaced with two new next-generation image formats.
The first of these is SVG, which stands for Scalable Vector Graphics. An SVG is not really an image file, but rather a textual map of the exact vector dimensions and colors you want to display on the site. This means it loads much faster, produces a crisper image, and can be resized more easily than a PNG or GIF.
Google loves SVGs, so you should use convert your logo and any other PNGs or GIFs on your website into SVG files wherever possible.
The second is a new photo format called WebP, which is intended to provide higher quality with lower file size than a JPG. It’s quite time-consuming to convert all your JPGs to WebP format, but it’s a necessity to get your Core Web Vitals scores to where they need to be. I 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.
This process can feel a little frustrating because for all the time you’ll spend doing it, there’s no discernable difference to the eye. However, it’s one of the more important things you can do to score much higher in Google’s eyes.
Optimizing Your Code
Next, it’s time to pop 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.
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 website. 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. Basically, they carve out all of the comments and unnecessary white space to slightly reduce the file size of your page.
These tools will also help you “lazy load” your images, ensuring that large image files aren’t downloaded until the user actually scrolls far enough down the page to see them. 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 minimize 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. Breaking apart your CSS can mean that less 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 load almost instantly since it’s separated from the other, less critical styles that are used for elements lower on the page.
Hear From Industry Experts
Read the latest tips, research, best practices, and insights from our community of expert B2B service providers.
A Strong Foundation: Hosting and Infrastructure
While many of the changes we discuss in this article 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, I 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 than a budget host at around $30 per month, but worth the investment for the speed improvements.
The combo of WP Engine and Cloudflare means you’ll have a strong foundation, and switching is likely to boost your Core Web Vitals score immediately if you’re currently on a budget host.