We’ve published content about Google’s Core Web Vitals before, from a general overview to comprehensive deep dives. But if you’re looking for an easy-to-reference list of ways to improve your site’s Core Web Vitals and achieve tangible results, you’re in the right place.
Ahead, we’ve gathered 25 effective actions you can use to take your site’s Core Web Vitals to the next level (and boost your rankings in the process).
- 1. Minify JavaScript and CSS
- 2. Adopt Lazy Loading
- 3. Specify Image and Video Dimensions
- 4. Specify Ad, IFrame, and Embed Dimensions
- 5. Use a Web Worker
- 6. Eliminate Unnecessary Code
- 7. Update Plugins and Themes
- 8. Get Rid of Unused Plugins
- 9. Reduce Font Instability
- 10. Take Control of Dynamic Content
- 11. Use rel=preconnect
- 12. Adopt Signed HTTP Exchanges
- 13. Compress Images and Videos
- 14. Embrace Caching
- 15. Break Up Long Tasks
- 16. Use a Content Delivery Network
- 17. Validate Your Code
- 18. Consider a New Hosting Plan
- 19. Extract Critical CSS
- 20. Simplify Your Background
- 21. Add defer and async JavaScript Attributes
- 22. Reduce Third-Party Scripts
- 23. Use Scalable Vector Graphics (SVGs)
- 24. Ensure Mobile-Friendliness
- 25. Adopt GZIP Compression
1. Minify JavaScript and CSS
Code bloat doesn’t just sound bad, it is bad: When you use a large amount of code (namely JavaScript and CSS) to enhance your site’s pages, you risk slowing down your site and thus harming its Core Web Vitals scores as a result.
To ensure that your site’s code doesn’t take up too much space, try compressing it using a free minification tool such as Minifier.org
or Minify Code.
2. Adopt Lazy Loading
Laziness isn’t always a bad thing, especially when it comes to increasing page speed and improving Core Web Vitals. Let us explain.
Lazy loading is a loading method that focuses on loading only what’s needed at the moment, instead of simply loading the entire page at once. The following graphic from Imperva illustrates this concept well:
This way, resources are conserved until they’re actually needed and users get a snappier page experience.
For a technical and in-depth look at the ways in which you can implement lazy loading, check out Mozilla’s documentation on the topic.
3. Specify Image and Video Dimensions
Ever visit a web page and see one of its images suddenly balloon up into a much larger version of itself before shrinking back to a reasonable size? That’s what can happen when you don’t specify your site’s image and video dimensions, and it’s bad news for your Cumulative Layout Shift (CLS) score.
Fortunately, the solution is simple—just edit your page’s source code to include width and height attributes. Not sure how? W3Schools provides an easy-to-follow example:
4. Specify Ad, IFrame, and Embed Dimensions
Other elements of your site can benefit from size parameters too, namely ads, IFrames, and embeds. By specifying the dimensions of each one, you’ll be doing even more to lower your site’s CLS score.
Here’s how to do so for each component:
- Ads: Adhere to Google’s ad size guidelines to create either fixed-size or multi-size ads.
- IFrames: Insert width and height attributes into the iframe tag.
- Embeds: Insert width and height attributes into the embed tag.
5. Use a Web Worker
Put simply, web workers make it possible for scripts to run in background threads. This means that the main thread is free to run the scripts that are most crucial to the user experience. Don’t know what a thread is? Not to worry: in computing, a thread just refers to a path along which tasks are executed.
So by implementing a web worker, you’ll be enabling your site’s pages to divide tasks between multiple threads, thereby leaving the user interface intact and your visitors happy.
6. Eliminate Unnecessary Code
If your pages contain code that isn’t serving a functional purpose, then it may instead be serving to slow down your site, negatively affecting the user experience, and ultimately degrading your Core Web Vitals.
To avoid this problem, you (or your site’s developers) should begin identifying and removing unnecessary code across your entire site. You can do so in many different ways, with one of the most straightforward being Lighthouse’s ability to automatically detect unused JavaScript:
Once your site’s unused code has gone the way of the dodo, your site’s resources will be free to load what matters most to users.
7. Update Plugins and Themes
If you’ve ever tried to find the perfect WordPress plugin or site theme, then you know how disheartening it is to come across a promising option only to see that it hasn’t been updated in months or even years.
But what if you downloaded one when it was freshly updated, forgot about it, and let it run on your site indefinitely while it became increasingly outdated? If you haven’t pruned your site’s plugins and themes in an extended amount of time, then that might already be happening.
To prevent and remedy such a frustrating situation, be sure to browse through your site’s plugins and themes every month and either update them or, if you can’t find an updated version, delete them.
8. Get Rid of Unused Plugins
Outdated plugins aren’t the only type of plugin that can negatively affect CLS — unused plugins can also turn out to be a thorn in your side.
That’s because even if you’re not actively using the plugins you’ve installed, they can still eat up your site’s resources in the background. So if you switch from one spam-blocking plugin to another, but fail to uninstall the old one, it may stick around and affect your Core Web Vitals for the worse.
So be sure to review your installed plugins on a regular basis, and always remove any that aren’t in use.
9. Reduce Font Instability
When you’re trying to pinpoint the source of your site’s Cumulative Layout Shift, its fonts may be the last thing on your mind. But it turns out that those seemingly-innocuous typefaces can cause some major issues for your site’s layout.
That’s because fonts designed to be displayed on the web, aptly known as web fonts, have to be loaded by a user’s browser each time they visit one of your pages. When the web font does load, it can cause the page’s elements to shift in position and size.
To prevent fonts from wreaking havoc on your CLS, try:
- adding the font-display property to your site’s CSS (and attaching the optional value to it);
- implementing Google’s Font Loading application programming interface (API); and
- adding the preload HTML value to your site’s code.
10. Take Control of Dynamic Content
There’s no doubt that dynamic content has myriad benefits. By automatically changing to suit users’ devices, locations, behavior, and preferences, dynamic content makes it easy to address visitors’ individual needs. For example, the following graphic from Adobe illustrates how dynamic content can provide personalized product recommendations:
But there’s a downside to dynamic content too—since it shifts around to accommodate users’ needs, it can also shift your page’s layout as a result, thereby increasing your site’s CLS.
To proactively avoid this, you can simply specify the amount of space that your site’s dynamic content will occupy.
11. Use rel=preconnect
When a server needs to make third-party connections in order to load your site’s content, that can mean longer loading times for visitors.
Fortunately, the rel=preconnect attribute can speed things up by informing the user’s browser that a third-party connection will be made.
That way, the browser can start initiating a connection with that third-party origin as quickly as possible, reducing load times in the process.
12. Adopt Signed HTTP Exchanges
As Google puts it, a signed exchange (SXG) “is a delivery mechanism that makes it possible to authenticate the origin of a resource independently of how it was delivered.”
While this may sound complicated, the result isn’t: with SXGs, content is more easily cached and can therefore be loaded faster. In fact, Google will sometimes even prefetch SXGs (i.e., download content in the background), making them especially useful for sites receiving a significant portion of their traffic from Google.
For help implementing SXGs for the first time, check out Google’s documentation on the topic.
13. Compress Images and Videos
Slow-loading page elements can greatly increase your site’s text Largest Contentful Paint (LCP), sometimes to the point where users are just staring at a blank screen waiting for something to appear.
The good news is that if the slow-loading piece of content in question is an image or video, you can speed it up almost instantaneously by implementing effective compression.
Additionally, if you’re using WordPress, you can easily do this by installing a compression plugin such as Smush or EWWWW.
14. Embrace Caching
When data is cached, that means it’s stored in a temporary location so that it can be quickly and easily accessed at a later time.
When you enable caching on your server, it doesn’t need to convert a web page into an HTML file every time someone visits it. Instead, it stores a copy of the page’s HTML file in its own memory, so that the next time someone visits the page, it can simply send over the HTML file on the spot.
If you have a WordPress-based site, you’ll be glad to know that, just as with image compression, implementing caching is as effortless as installing a plugin. Some of the most commonly used include:
And if you’d like to learn more about the technical side of web caching, Mozilla’s guide to HTTP caching is a helpful place to start.
15. Break Up Long Tasks
When a page is executing JavaScript-based tasks, it’s often unresponsive to user input. So if a user clicks a button or tries to open a menu, the page has to finish completing its tasks before it can respond. This can take a serious toll on your site’s Core Web Vitals by increasing its First Input Delay (FID).
To ensure that your site stays responsive while still loading all necessary JavaScript files, you can break up any Long Tasks (these are defined as tasks which occupy the main UI thread for 50 milliseconds or longer).
Once a page’s Long Tasks are broken up into smaller, more manageable chunks, the main thread will be free to respond to a user’s input much sooner.
16. Use a Content Delivery Network
It makes sense that for someone located in the U.S., a server that’s also located in the U.S. can provide faster loading times than one located in Switzerland.
That’s the principle behind Content Delivery Networks (CDNs). These networks of servers improve page speed by using visitors’ location information to load the site via the server nearest to them:
So when you use a comprehensive CDN, you can ensure that all your site’s visitors enjoy lightning-fast performance, regardless of where they live.
To get started, check out the offerings from popular CDN providers such as Cloudflare, Akamai, and Fastly.
17. Validate Your Code
With a variety of web browsers available for users to choose from, it’s important to ensure that your website is compatible with all of them. An effective way to achieve this is through code validation, which refers to the process of making sure that your site’s source code is correctly formatted and, well, valid.
Our favorite tool for code validation is W3C’s Markup Validation Service. To use it, all you need to do is either enter a URI, upload a file, or copy and paste your Markup directly.
18. Consider a New Hosting Plan
If you’ve used every server optimization trick in the book but are still getting excessive CLS, FID, or LCP scores, it may be time to consider upgrading your hosting plan. Doing so can allocate more resources for your site, which means faster loading times for your users.
If you’re on a shared hosting plan as most people are, you can improve performance either by:
- switching to a plan in which your server is shared by fewer sites; or
- switching to a dedicated hosting plan in which your site has its own server.
And if you’re already on a dedicated hosting plan, you might want to upgrade to one with increased storage, bandwidth, and power.
19. Extract Critical CSS
How does CSS affect your Core Web Vitals? As Google puts it:
But with a technique called Critical CSS, you can prioritize the CSS used in above-the-fold content so that site visitors can view it as quickly as possible.
To implement Critical CSS and start making your site faster and more responsive, you can use tools like Critical, CriticalCSS, and Penthouse, all of which are available for free on GitHub.
20. Simplify Your Background
Back in the 90s and early aughts, sites with busy backgrounds were all the rage. From glitter GIFs to MIDI players to spinning logos, minimalist web design was a long way away.
It’s no coincidence that those early sites also took what felt like forever to load: When a page’s background is competing with its main content for resources, it can severely slow things down.
So with that in mind, be sure to simplify your site’s background if at all possible. When in doubt, you can always go with a solid color for a clean, modern, and on-brand look. But if you’d prefer to use an image, you’d be wise to read WordPress’ advice on specifying optimal dimensions, choosing the right overlay, and ensuring browser compatibility.
21. Add defer and async JavaScript Attributes
In addition to breaking up Long Tasks, you can further reduce the impact that unused and non-essential JavaScript has on your site by using the defer and async attributes.
The defer attribute tells a user’s browser that it doesn’t need to wait for the specified JavaScript file to load before loading the rest of the page. Meanwhile, the async attribute allows multiple JavaScript files to load simultaneously (i.e., asynchronously).
Both attributes can be easily added to any JavaScript file, as this example from W3Schools shows:
By implementing either or both methods, you can certify that no pesky JavaScript files are harming your site’s user experience.
22. Reduce Third-Party Scripts
There are plenty of reasons why you might choose to add third-party scripts to your site, from adding a simple social media button to implementing additional analytics. But what might not be immediately apparent is that those seemingly-innocuous pieces of code can negatively affect your site’s page speed, Core Web Vitals, and overall performance.
To make sure that doesn’t happen, regularly use tools like Lighthouse to identify third-party scripts that are eating up valuable resources. Google’s tutorial on how to do so shows the type of valuable information that Lighthouse can uncover:
Once you’ve pinpointed the third-party scripts making your website sluggish, you can either remove them entirely or replace them with better-optimized alternatives.
23. Use Scalable Vector Graphics (SVGs)
If you’re up to date with image optimization tactics, then you already know about common image file formats such as JPEG, PNG, and GIF.
But one you might not be quite as familiar with is Scalable Vector Graphics (SVGs). Unlike other file formats that are made up of pixels, SVGs are made up of smooth lines and rounded curves. This means they can be scaled up or down indefinitely without losing any of their detail or becoming pixelated and blurry. Thus, SVGs are ideal for things like complex diagrams, vector images, illustrations, and animations.
In terms of Core Web Vitals, SVGs are beneficial because they support lossless compression. In other words, image files can be compressed to a fraction of their original size without losing any detail, meaning it takes less time to load images.
24. Ensure Mobile-Friendliness
The Core Web Vitals guidelines may not specifically mention mobile-friendliness, but if you want great Core Web Vitals scores then your site absolutely needs to be mobile-friendly.
Why? Google now uses mobile-first indexing, which means that the mobile version of your site will be the version that Google primarily uses for ranking and indexing purposes. As such, it’s crucial to ensure that your site performs just as well on mobile devices as it does on laptops and desktop computers.
A few tactics you can use to do so include:
- implementing responsive design;
- creating a streamlined navigation experience;
- placing a page’s most important content above the fold;
- using a clear and legible font;
- using buttons that are large and easy to click on touchscreen devices; and
- testing your site’s mobile-friendliness using tools like Google’s Mobile-Friendly Test.
25. Adopt GZIP Compression
GNU zip, more commonly known as GZIP, is both a lossless compression program and a file format. But for the purposes of optimizing your site for Google’s Core Web Vitals, it’s the lossless compression program that matters most.
That’s because after implementing GZIP compression, you may see a measurable increase in page speed. One test conducted by Pingdom found that with GZIP compression enabled, a site’s page load time was reduced by 48 milliseconds:
If you’d like to see similar results for your site, you can implement GZIP compression by tweaking your site’s server settings. If you’re using WordPress, this process becomes exponentially easier with the help of plugins like WP Fastest Cache and Hummingbird.
Optimize for Core Web Vitals to Optimize for the Future
Since Google’s long-term commitment to Core Web Vitals is clear, it’s essential for all SEO practitioners to prioritize their optimization. This is true whether your site gets 1,000 unique visitors per day or 1,000,000, and regardless of the niche it’s in.
Fortunately for SEO pros everywhere, optimizing for Core Web Vitals doesn’t have to be rocket science. By combining the 25 straightforward tactics outlined here, you can be well on your way to achieving higher rankings, a better user experience, and a site that’s ready for the future of search.
Image credits
Imperva / Accessed October 2021
Screenshots by author / October 2021
web.dev / July 2020
Adobe Marketo / April 2021
Cloudflare / Accessed November 2021
