Estimated Time to Accomplish: 30-60 minutes
Are you looking for a cumulative layout shift WordPress fix? Well let me tell you one way to fix your Core Web Vital CLS report and SEO – by fixing your custom fonts. Keep reading.
A Quick Summary:
Cumulative Layout Shift (CLS) is a Google metric that measures a user’s experience on a webpage. CLS is the unexpected shifting of webpage elements while the page is still downloading, and can be caused by fonts, images, videos, buttons, and other content. A good CLS value is 0.1 or less, while a poor value is greater than 0.25.
If your value is low, fixing fonts might help!
What you need to know:
There are MANY factors that Google looks at to determine your CLS – fonts, ads, images, HTML scripts, etc. But fonts are a common issue that can cause websites to shift upon load. If you are seeing this reflected in your CLS value, you can fix it!
My recommendation:
Check out your cumulative layout shift WordPress score in Google Search Console, identify your main issues, and fix your fonts the easy way.
Your next steps:
If you already have a WordPress site, read this!
If you want to learn more, keep reading.
Your Cumulative Layout Shift WordPress Score
If you have been keeping up with Google’s Core Web Vital changes, than you know that CLS is very important to keep an eye on and improve. Your CLS score measures the shift that happens when a page loads in view of a reader. If the page load includes the shift of images, ads, large blocks and even fonts to detract from the user experience, Google will increase your score – which is bad.
How do you find your CLS score?
Google Search Console Issues
- First, go to Google Search Console and click your domain name.
- On the left sidebar under “Experience” click “Core Web Vitals”
- This is the best place to start. You will be able to see how your URLs rank for each core web vital for mobile and desktop.
- If you have poor-ranking URLs for CLS, keep reading!
Core Web Vitals Test
- Use WebPageTest.org – a free Core Web Vitals Test to examine your site
- After the test has run, click “View as a Filmstrip”
- This filmstrip view will tell you every instance of something shifting on your site – image dimensions, dynamic content, iframes, and even font display
- If your fonts are causing a change with CLS, the frame where they change will be highlighted.
Web Vitals Chrome Extension
To find your specific Core Web Vitals metric, download the Web Vitals Chrome Extension here.
- When the extension opens up on your specific web page you are testing (I recommend testing your homepage and a post page), click the Settings gear in the bottom right hand corner.
- Check all the options that are available with this extension. This will turn on a live test while you re-load your page.
- Re-load your page and take note of your current cumulative layout shift score.
- Other metrics that will load: Largest Contentful Paint, Interaction to Next Paint, First Input Delay (no longer being used), First Contentful Paint, and Time to First Byte.
Fixing your Custom Fonts
If you have a high CLS score, and if the Filmstrip shows a shift when your fonts load, then it’s time to fix your custom fonts!
Web Fonts vs Built-In Fonts
First, check to see if have a custom fonts plugin that is loading custom fonts that load after the default fonts in your theme. These are custom web fonts that are probably slowing down your page load.
If possible, I would recommend removing the Custom Fonts plugin, and instead choose local free built-in Google fonts that are available with your theme. These aren’t as pretty, but they load your fonts locally and load them fast.
If you want to keep your current font setup, I would recommend seeing if your plugin can load the fonts locally. This will host your fonts on your site and load them faster.
Use Theme Fonts
Depending on your theme it may be hard or easy to change your fonts. Most themes include local and built-in Google fonts that easily load and prevent CLS shift.
Here is a cool website that shows modern font stacks that are quick to load and provide awesome font combinations.
Some themes allow you to upload custom fonts to the theme and load them locally.
If you are using the Astra theme (my recommendation) and want to keep your custom fonts, here is an easy guide to load custom fonts directly to your theme so they are hosted locally.
The goal is to preload fonts, or completely switch to free Google fonts in order to avoid the late-loading fonts that cause shift.
Using Fallback Fonts
If you have fonts that are called out in the CSS using @font-face (see below), then make sure you have fallback faces loading as well.
@font-face {
font-family: 'pacifico';
}You would find a similar Google font that matches Pacifico and add to your CSS like this:
@font-face {
font-family: 'pacifico', 'Times New Roman Fallback';
}This calls “Times New Roman as a fallback if Pacifico isn’t available. (Just to be obvious, Times New Roman and Pacifico aren’t anything alike haha! Find a font you like instead.)
If you are unsure about your theme and your fonts, leave your question below and I’ll help you out!
Validate Your CLS Changes
To verify your CLS changes, first run the Web Vitals Chrome Extension and the WebPageTest.org test to see if your metric is lowered and appears green. If so, you can register your changes with Google be complete!
If not, try to identify the filmstrip frame that is still showing shift and see if it’s a font issue – or something else like an image, ad, or HTML embed block.
- If you are ready to verify with Google, go to Google Search Console and click “Core Web Vitals” on the left sidebar.
- Open the report for the correct browser.
- Click the CLS line item below “Why URLs aren’t considered good” and then click the “Validate” button.
Google can take up to 28 days to validate your changes. But I’ve also seen validations happen in 2-3 days!
