How to Optimize Core Web Vitals for WordPress Ultimate Guide

Key Takeaways

do you want to optimize the core web vitals of your wordpress website so the core web buyers are simply an initiative by google that will help you as the website owner improve say your speed and usability on your website to improve the user engagement and make users happy with interacting with your website hey there i'm christina with wpbeginner where we teach all about wordpress so you can grow your website and reach your audience if you find value in this video give it a like it really does help us out and all the links that i talk about you can find them in the description below so let's dive in so first let's cover a little bit about what exactly core web vitals are and how does it affect your website well google core web battles are a set of website performance metrics that google considers important for websites overall use and satisfaction and the interesting thing is and the reason why so many people are jumping on learning about this is because these web vital scores will be a part of google's overall experience score that can and will impact your seo rankings and honestly it just goes into the fact that nobody really likes a slow loading website or even if your website works and is loading can the user interact with your website so there's three main quality test that google is going to look at that altogether they form the core web vitals those are the largest content full paint or lcp you'll see that you also have the first input delay and you'll also have the cumulative layout shift now if you already know about all of this then you can just skip ahead and see how i show you how you can improve your speed on those but if not let's just cover them a little bit each so you understand exactly what these mean so the largest content full paint so that's when your website loads and it is like how quickly does that main content that the user came to consume how quickly did that load for them and that could be anything as a block of text or an image or a description anything that they have come to see how quickly did that load for them and so your website might load fast but that largest contentful paint or that block of text that your they came to look for it might not be on the screen yet for them the next one is the first input delay and this measures just how much time it takes for the user's browser to actually be able to begin processing whatever it is that the user did so for instance it could be as simple as the time when the user clicks on a link to the time their browser starts processing the next sequence of events and then the third one is the cumulative layout shift and i know you've probably seen this you've probably been frustrated by this before and that is it the cumulative layout shift measures the time it takes for a website to become visibly stable so if you ever go and i have one particular website that i go to i on my phone especially i need to log into it when i go to click on the login screen something shifts and what i'm going to click on moves and then i end up clicking on something else that i didn't want to do so how do you test your core web vitals well google has something called the page speed insights that you can go to so you can go to page speed insights and you want the developers.google.com forward slash page speed forward slash insights and you can enter your website you can enter anyone's website really and then you can search for it and analyze it and then google will come back and tell you how your website did with mobile also tell you how your website did with desktop and the scores that you need for each in order to pass is the large contentful paint you need at least 2.5 seconds the first input delay you need less than 100 milliseconds and the cumulative layout shift you need less than 0.1 now the page insights allows you to look at one at each time but what you can also do to see how all of your pages are doing is if you go to your google search console come down to core web vitals and it will tell you how all of your pages are doing it will give you poor needs improvement or good urls for it another way you can look at your core web vitals is if you go to your actual website and if you right click inspect element or control shift i or command shift i you will open up this area here that gives you a little bit more information about your website and you want if you don't see the tab up here you can click on the double icons and you can also go to lighthouse and from here you can generate a report and this will do it you can either choose for mobile or on desktop it'll go through and generate the same report for your site you want to make sure that you're logged out to get the best performance of it now that we know a little bit about what core web vitals are how do you improve it i'll walk you through seven different tips that you can use to improve your core web vitals tip number one is to optimize your wordpress hosting your wordpress hosting company plays a significant role in your website's performance it's just the same as if you're trying to speed up your car you're not going to start with an old clunker that already can't go very fast because of its limitations and its engine and things like that you're going to start with something that is already really ramped up to go fast and then you're going to add improvements on the car already that's why we recommend siteground they are officially one of the recommended wordpress hosting companies out there and wpbeginner we have moved our website over there and then personally i moved over to siteground in 2015 and love them as well number two is improving your largest content full paint so we talked about what it is it's basically when a user first comes to your site what's the first thing that they're going to interact with that is it is it an image on your site is it a wall of text that they need to see the largest contentful paint element will tell you what you need to do to improve it is it a wall of text can you break up that wall of text with more paragraphs is it an image can you move that image down a few paragraphs so it's not the first thing that comes up when the user comes to the site or can you make a smaller image number three is improving your first input delay score the first input delay score again is when somebody does something on your site like click on a button or a link or something and the time it takes between that when they do that and when their browser starts to interact with the elements on your site one of the most important tips on how to improve that is by using a really good hosting provider that might have caching already as a part of it for instance when we talked about siteground it has several caching like meme cache dynamic caching as well as a few other caching abilities for you now if you don't have that then you can use something like wp rocket and we go over in detail on how to install and set up wp rocket in this video if you want to see in the description below on how to do that tip number four is improving cumulative layout shift if you're a user and you're going to interact with a website and then it moves when you just when you go to interact with it and then you click on something else the cool thing is in the results of your page you can see something like avoid large layout shifts and this is what's telling you what is causing that the best way to make sure that visual layout of your page doesn't shift when other items load is you'll need to tell the browser about the dimensions say the width and the height of elements like images or video embeds or ads like google adsense and more wordpress will automatically add the height and width attributes to an image that you add but you can still check all other media embeds to make sure that they also have height and width number five is you want to eliminate render blocking elements so render blocking elements are just the elements that are slower to load but are blocking the other elements it's like going down the road you have somebody in the left-hand lane they're slower than everybody else but they won't move over so they are the render blocking element for you in traffic and this will affect your overall web vital score sometimes you really can't change those simply because they are being added by the third party plugins so it makes a little bit harder for beginners to remove them if your site is having an issue with render blocking elements you can also read our cool tutorial on how to eliminate render blocking elements without messing up any code or using any code on your website number six you want to properly size the images of your website another huge cause of core web vitals for a low core web vital score are very large images a lot of times we'll we'll take them off of our camera we'll upload them straight to our website and they are massive that will slow everything down so you want to properly size them before you even upload them now number seven is by using a cdn a cdn is simply a content delivery network and these are usually third-party services that allow you to serve static content on your website from multiple servers around the globe again if you are on siteground they automatically have an integration with cloudflare cdn you can either use the free version of cloudflare cdn or you can also upgrade to their a little bit more robust version if you're not on that or if you prefer to not use that you also can use something like a cloud firewall app like securi and this comes with a built-in cdn service it also helps you block malicious code and spam requests for your website so those are two different ones that you could use and then once you're working through all of these scores one of the best ways to see how your website is doing in terms of traffic and where your traffic is coming from and things like that is to install something like monster insights monster insights connects your website with google analytics so you can see exactly how everything is going right from your dashboard you don't have to log in anywhere else from here you can see your weekly traffic you can see things like the average session duration the bounce rate or how quickly did somebody bounce on your site and you can see top referrers and so much more to get started just head over to monsterinsights.com and make sure you use promo code wpb vip and you'll get the best discount on monster insights and now don't forget to check out this video next where i walk you through how to improve images on your website and i'll see you over there