What is Divi
What are Google Core Web Vitals
TLDR: Core Web Vitals (CWV) are the main metrics Google uses to gauge the user experience (UX) of your website. While Google uses a handful of other metrics to quantify your site’s UX, the CWVs hold the most weight.
CWVs Three Main Metrics
- Largest contentful paint
- First input delay
- Cumulative layout shift
Largest Contentful Paint (LCP)
How long it takes for your site to load from the perspective of the user. Specifically, how long it takes for a user to fully see the web page.
A good score is 1.2 seconds or less.
First Input Delay (FID)
How long it takes for the user to interact with the website. This includes actions like clicking buttons, entering emails, or using the menu.
You want your FID score under 100 milliseconds.
Cumulative Layout Shift (CLS)
How long it takes for the page to be stable. This is especially important on mobile. This metric records how long it takes for your page blocks to stop loading in.
A good CLS score is under 0.1.
What is Divi
Divi is an easy-to-use WordPress Theme and Visual Pagebuilder from Elegant Themes. You can create unlimited unique pages simply by dragging and dropping one of the builder’s 46 premade modules.
Divi allows creators to build a completely customized website without requiring any codding knowledge (although a little CSS knowledge never hurt nobody ;p).
Interested in trying out the builder? Get started with Divi by clicking the link below!
How to Get a Better Core Web Vitals Score
1. Turn on Dynamic CSS
Dynamic CSS is one of Divi’s “Anti-Bloat Features” that Elegant Themes released with its 2021 Performance Update. This beautiful feature simply dynamically generates a new style sheet that only pulls in the CSS that is actually used on a particular page.
Toggle this feature on by going to Divi > Theme Options in your WordPress admin area. In the general tab, click the “Performance” sub tab, and ensure “Dynamic CSS” is turned on.
Turning on Dynamic CSS is my number one (and simplist) recommendation for improving your Divi site’s CLS value. Since this feature removes all unnecessary CSS, it significantly reduces the time it takes for the page to get set and stop moving. See the below pictures for the before and after turning on Dynamic CSS:
Dynamic CSS Turned Off
Dynamic CSS Turned On
As you can see from the images above, Dynamic CSS also helps the Largest Contentful Paint and Total Blocking Time (TBT) values. Total Blocking Time is the main metric used to create the First Input Delay metric. This happens because Dynamic CSS removes unnecessary CSS so each page loads faster which allows your users to see and interact with the page quicker.
Dynamic CSS is the quickest and easiest way to improve your Divi site’s Core Web Vitals.
Free CWV
Infographic
2. Turn on and Clear Divi’s Static File Generation
The Static File Generation feature in Divi was one of the first updates they did to improve its CWV score. When this is turned on, it creates a static style sheet for all the styles you create using the builder. Without this turned on, Divi will input your styles as inline HTML. Having inline CSS makes it more difficult for Dynamic CSS to work properly as it pulls styles from all the stylesheets on your website, not your HTML.
This feature can be a little buggy at times. This style sheet acts as a sort of cache for the Divi theme, so it can often conflict with other plugins on your site – especially other caches. As noted by Pee-Aye Creative, if you have a problem with your site, clearing this feature would be the first place I’d look.
Static File Generation has much the same global effect Dynamic CSS has. It lifts all the CWV metrics but is specifically really good at reducing the CLS value. See the difference between when I turn Static File Generation off and on.
Static File Generation Turned Off
Static File Generation Turned On
3. Optimize your images
Since a lot of CWVs are tied to the speed of which the user gets to see and interact with your website and because images are often the largest files on your site, optimizing them will have a significant impact on your CWV. You can optimize images in the following ways:
Size images in the exact dimensions you need them
Don’t use more than you need here. I’d recommend a max-width of 1920px on all your images as this is the size of the average desktop screen and a max-height of 1080px for the same reason.
I use Photoshop to resize all my images because I already have the program for my work, and I love the ease of its functionality. If you are looking to try Photoshop, support the site by buying through my affiliate link.
All that being said, there are tons of free online tools that can allow you to resize a photo without breaking the bank. I like FastStone, but you can’t really go wrong with anyone you choose.
Run your images through an optimizer
High-resolution photos often have significant amounts of extra data packed in the file that’s just not needed on a website. There are many different programs that can scan through your image, remove what’s unnecessary, and deliver you back a file that is up to 80% smaller without compromising on the quality of the image.
If you are using a Mac, I’d highly recommend ImageOptim. If you’re using PC, then use Pinga. Both interact directly with your file system so that once you’ve dragged and dropped images into the program, it saves the optimized images back into the folder the files were originally in. Both programs are also free.
There are also many plugins and themes that allow you to do this dynamically on your website. Imagify is a great example of this.
Set static height and widths
Images can specifically be a big burden on your CLS if not sized correctly. A browser will load your image at its natural size first, and then dynamically resize it base on the view port of your users’ devices. This can cause you page to jump around a bit until the browser can resize the image correctly.
To avoid this, you can use CSS to set specific sizes for your image.
As you likely already know (I can feel you rolling your eyes already) setting specific heights and widths can be an issue with resposive design. If you set an image to be 550px wide it may look great on desktop, but it will be too big for most mobile devices.
You have two options to solve this:
- Use media queries to set specific widths at various break points. This is the most effective technique, but is quite laborious.
- Use max-widths/max-heights so that smaller screens are not limited to what works on desktop.
Lazy Loading your images
Finally, my last recommendation for optimizing images is to use what’s called Lazy Load. Lazy Loading is a common technique used to prioritize how your site loads. This technique loads all the assets and code used above the fold of your page first so it allows your users to see and interact with your page faster (aka helps your LCP and FID scores). Once above the fold is loaded it sequentially loads the rest of your page.
There are many Lazy Loading plugins. If you are using a caching plugin (which I would highly recommend further down in the article), then it is likely this plugin comes with a Lazy Load feature.
I use WP Rocket for caching and use its Lazy Loading feature.
4. Set a fixed height on your ads
Ads are the most likely culprit of a bad CLS score. Your page layout will often shift as your ad network (such as Google AdSense) switches the ads that are shown on your page. This constant shifting drives up CLS scores significantly and is overall a bad experience for your user.
Fix this constant shifting by simply setting a static height and width for all the ad containers on your page. This way the containers occupy the same space as the adds switch in and out.
5. Ensure you use a fast host
Trying to make your site pass Google’s Core Web Vitals with a slow host is like trying to box Mike Tyson with one hand behind your back. That’s just not a fight you are ever going to win, no matter how else you’ve prepared.
I like using KnownHost. They have multiple different plans to fit your different needs and it has passed every speed test I could through at it.
6. Adding a Cache
A cache is software that stores an optimized copy of your entire website on your server so that your user won’t need to load each page as if its a completely new thing. This helps your page load significantly faster, therefore improving your LCP and FIP values.
WP Rocket is the industry leader of WordPress cache plugins. It is a premium plugin but if there was ever a time to invest in a plugin, this is it. Your caching plugin helps every piece of your website’s health. I’ll let the following before and after turning on WP Rocket photos speak for its self:
How to Check your Core Web Vital Score
Now that you’ve gone to the effort of making your website as efficient as possible with all the above tips, its time to check your score. Simply copy and paste your URL here and GTmetrics will take care of the rest!
Happy optimizing!
