Core Web Vitals Explained: How To Fix Site Optimization Issues

Key Takeaways

in this video i'm going to be showing you everything there is to know about core web vitals including how to detect if your website has issues and how to fix those issues if you should have them or if you can't be bothered to fix it yourself i'll show you where to go to get all the stuff fixed for you quart web vitals is part of google's page experience score which also includes things like mobile optimization having https on your site and guidelines against overboard interstitial pop-ups page experience is part of google's effort to deliver the best possible experience for its users and that means recommending fast websites to its users in the search results but why should you care about this stuff first because core web vitals which we'll get into detail about shortly are part of the actual google ranking algorithm as of may 2021 second google wants happy users and when you make life easy for google they rank you higher third because nice web experiences better convert visitors into buyers google found that users are 24 less likely to abandon web pages when they meet the core web vital standards now do you need to stop everything it is that you're doing right now just to fix core web vitals probably not but as you know seo is a battle of edging out in front of your competitors using any advantage you can get everyone is using tools like surfer these days to optimize their content everyone is building good links but you're going to be one of the few people that optimizes for core web vitals giving you that edge understanding it can be a little bit tricky but that's what this video is for to make it very simple now before we get into the abcs of core web vitals can you optimize that like button just like core web vitals the like button needs to be optimized as well or else youtube hates my video just click on it until it turns blue nice and optimized now you can check core web vitals with various different methods but it's best to do it exactly the way google does google uses actual field data from what's called the chrome user experience report or crux they look at the google chrome data from actual users of your website in the past month so if you want to make changes that are going to fix corvette vitals issues it might not show up in the places that use crux reports for about 28 days but since this data is what google uses to inform their ranking decisions this is the data that you want to be looking at there's also various speed test tools that'll give you what's known as lab data or synthetic testing these simulate the experience of a real user which is indeed helpful but it has its limitations such as only simulating from one location like the us it's a synthetic test not the real deal here's the various places you can check your core web vitals for free for your field data crux-based reports my first suggestion is to set up a crux speed report for your website at https g dot co chrome ux dash start to fill this stuff out and eventually you'll be able to get a crux report and don't worry i'll explain what this stuff is later another place to get a crux report is from your trusty google search console just locate the nav bar on the left and scroll down until you find you guessed it core web vitals in the core web vital screen you can see that we're indeed using the chrome ux report you can also see a breakdown of mobile issues on the top and desktop issues at the bottom click on open report to get more information about the issues now here you can see i have a list of poor urls that have cls and lcp issues and don't worry i'm going to define all that stuff shortly finally you can also get crux field data from google's page speed insights tool here's a report on the hugely popular affiliate website gearhungry who is currently having some issues with core web vitals i did a full teardown of gear hungry in a video on my channel so make sure to check that out after you watch this video now let's get into some of the places to get quick synthetic testing data and don't dismiss the value of looking at this testing data even though that's not what google uses for their rankings even though it's not as crucial as the crux reports the problem with crux is that it's based on the last 28 days so if you make a change now you're gonna have to wait for 28 days to see if it worked but with the quick reports you can see change impacts now starting with the lighthouse reports in google chrome open up your web page and right click inspect or control shift i then find the lighthouse tab in the menus make sure performance and mobile are selected then generate report and then boom here's your report gt metrics can also spit out some core web vitals numbers and they're down here in their own little cute section just bear in mind the free gt metrics will only give you your desktop core web vital scores lastly i found this pretty sweet tool by retico that compares your website's core web vitals and speed statistics against the other people in your niche for a given keyword this is pretty cool because pretty much everything is niche dependent google isn't going to penalize a slow site if it's still the fastest site in the niche okay so i've just shown you a bunch of ways to check your core web vitals now let's start to understand those reports there's three main metrics you need to look out for largest contentful paint lcp first input delay fid and cumulative layout shift cls let's start with bulba i mean largest contentful paint lcp is basically your load time the time it takes from clicking on the website in the google search result and seeing a majority of the content above the fold this is when the user perceives the site to have mostly finished loading and you want this to be faster than 2.5 seconds the typical things that can slow down your largest contentful paint are scripts when you have a bunch of ads loading on the page or a bunch of videos popping up all over the place or lead magnet forms popping up you need to watch out for your lcp showing super large high quality images on your pages can definitely slow you down too also your host speed and server response time can definitely impact largest contentful paint there's more stuff for sure but i'll get to all the solutions very shortly but now it's time to talk about first input delay or fid first input delay measures the response time to an interaction so let's say you come to my site and you click on a link like this to get my free on-site seo guide which is awesome by the way fid delay would measure how long it takes for the email intake form to pop up you want to be faster than 100 milliseconds the major pain points here are almost exclusively related to the host that you choose and your server response time i'll also give you my recommended host options later as well lastly we have cumulative layout shift or cls cls is a new metric that attempts to measure how stable the page's layout is during the loading process you probably experience this yourself where you head to a site you go to click on something and a banner bar loads or the layout shifts slightly and you have to adjust where you're clicking that's a layout shift and a bad user experience now i don't really understand nor care how they calculate this but you basically just don't want your score greater than 0.1 now what can mess up your cls cls can boil down to slow css and javascript optimization it can also get slowed down by third-party pop-ups or widgets that insert themselves into your layout like opt-in forms also if you're using a super old theme sometimes they aren't optimized properly and the headers and the footers and the sidebars are pushing content all over the place as the page loads generally older themes typically have crappy optimized code one more source of cls issues is display ads all right let's get into how to solve all these problems the good thing is when it comes to lcp or fid the solutions are pretty much the same if you tackle one you're tackling both of them and if you're familiar with website speed optimization you're going to see a lot of similar strategies first you want to optimize your hosting for affiliate sites i'm going to recommend wpx hosting they're who i use for all my affiliate sites they're fast have great support and they're run by an seo named terry kyle who definitely knows the needs of seos you can use my coupon code digity90 to save 90 off on the first month for sites that need more processing power i'd use cloudways if you're using nitropak which i'll talk about later then cloudways is better because it can handle the beatdown that nitropak gives it step two you wanna set up some caching put it like this wordpress just doesn't go fast unless it has caching wp rocket is the go go-to plugin for the diy seo that just wants to get the job done without having to tink around through the depths of nerdum after that you want to implement lazy loading with lazy loading instead of loading the entire page when a user lands on it it only loads the portion of it that the user is looking at wp rocket has a lazy load feature auto optimize does as well next you want to get a cloud delivery network setup also known as a cdn let's say you have a us-hosted website but a visitor is looking at it from thailand a cdn is a global server network so it'll find a server near your visitor in thailand to load your website's content instead of traveling all the way from the us cloudflare is the industry standard for cdn and even their free plan is pretty damn awesome but if you're on wpx they already include their own cloud cdn service which includes edge caching which is awesome step 5 compress your images if you serve up ultra high quality images your site is going to take forever to load thus slowing down your largest contentful paint so compress them using short pixel or compressor.io both good now if you want to know the best file format for images dot webp is great it's the most speed friendly now it's time to optimize your scripts first just clean house and remove any scripts you don't need there's always some old plugins you don't use anymore remember those content locker plugins that were the rage years ago toss them out in fact uninstall and delete any plugins that you aren't using anymore for any third-party scripts that you simply can't part with use google tag manager if you set up the window loaded trigger it'll defer scripts from loading until after the page is loaded and then for any leftover scripts you can use cloudflare or wp rocket to defer them as well now for the last lcp and fid optimization you've probably already done this but upgrade to https it uses http 2 which is just faster than http1 now if all this sounds like a lot of work it kind of is so i have a couple options for you first you can use a speed optimization service like wp speed fix to optimize your site for you these are the guys i use to optimize all my sites and i like them because they're good it's a single payment and your site is fixed i left a link for them in the description and if you want a small discount you can use coupon code digity10 for 10 bucks off your optimization for sites that i really want to make lightning fast i use nitro pack nitro pack is a monthly fee and they essentially do many of the things we already mentioned but they take things to the next level they're just expensive so i reserved this for my mega authority sites hey what about cumulative layout shift our good old friend cls i haven't forgotten about you buddy as mentioned before a lot of cls issues rise up because you have one part of your layout that loads a lot slower than everything else does like an ancient theme or display ads the first step is diagnosing what part of your site is loading slow in the first place for this when you right-click inspect on your web page you can reload your page to see what's lagging using the setting brendan from wpspeedfix says most cls issues come from css problems and if you use a free tool like auto optimize these settings can often save the day or honestly just hire a company like wpspeedfix and be done with this with the single time fee if you do decide to do it all yourself gsc's core web vitals tools comes in handy you can look at each of your violations one by one try to fix them and then validate fix as you go along so you get an interactive debug experience so given all this hype around core web vitals how scared should you be how serious should you take it well they've publicly announced it so it's probably pretty important but is it going to be a huge ranking factor i personally doubt it this is pretty technical stuff and most everyday webmasters aren't going to know what the hell is going on when it comes to half of this stuff so i don't think google is going to penalize 80 of the internet that just doesn't get it but if you're watching this video you're probably a pretty good seo and you'd want to take advantage of every edge that you can get so optimize away just like i am and make sure to subscribe for more videos just like this