How To Optimise Your Website For Core Web Vitals (2021 Edition)

Key Takeaways

[Music] there's the potential for cool web vitals to be a little bit boring but if we think of it as a boring checkpoint that we need to get through in order to get to the exciting stuff of ranking traffic and conversions then we'll be okay so we're in it together stick with me we've got this so first up what is core web vitals well cool web vitals is a set of measurements that forms part of google's page experience score along with side things like mobile optimization uh use of https and not using annoying interstitial pop-ups and the reason that we care about cool web vitals so much right now is that google has announced that from may 2021 it's gonna form part of their search ranking algorithm so whilst page experience has always been an important thing page experience score utilizing core web vitals is gonna be really important and it's only gonna get more important so at a time of worldwide pandemics and lockdowns and all the stress that we're going through why is google heaping yet more pressure on us poor webmasters well if we think about how google's business model works it relies on you me us being addicted to their search engine and in order to keep us addicted to the search engines so we keep clicking on those profitable ads for google it needs to give us websites very quickly otherwise we get bored and impatient because don't forget as a millennial every day that you own one of these your attention span drops by five percent so google needs to serve up websites quicker and quicker to its users in order to satisfy our goldfish-like short-term memories and in order to do that it's announced this kind of set of usability user experience standards which we're now being required to live up to in order to enjoy maximum google rankings so basically make your website fast get ranking right well it's a little bit more nuanced than this we'll be looking at the specifics in just a minute firstly let's talk about how important this thing really is because no one actually knows yet all google has announced is that this is gonna form part of their ranking algorithm there's 200 different ranking factors page experience is only one of them so we don't know how heavily it's going to be weighted google has given us prior warning and to be fair quite a lot of prior warning so we can read into this that this could potentially be quite an important update but there's actually no need to panic because if you think about it many website owners really don't know that this is going to happen and their websites are going to be totally unprepared when may 2021 comes around so what's going to happen are all of these websites just going to instantly disappear from google search results probably not what that does mean though is that if you conform to these usability standards then it's a good chance to get ahead against competitors that may not be so there's really no need to go into a blind panic after all as someone commented in one of our recent friday digital marketing workshops google's own website doesn't score a hundred percent on these core web vitals measurements okay so that's a little bit of context let's get into some of the specific areas of core web vitals the first area that we need to consider and the one that's probably going to be most significant for most websites is something called large content full paint or lcp really the names they give these things don't exactly help do they this is basically the time it takes from someone clicking on your website to the time when they can see the majority of your content this is a user timing metric and you can check it like all of the core web vitals metrics in google's page speed insights tool and this tool also gives you some really handy real-world user information from the chrome user experience report this isn't just you know lab type testing where they'll ping your site and see how long it takes this is actually real people using google's chrome spyware i mean browsing so all of this user data feeds back to google so google can understand how people are actually using your website in the experience that they're having in real time now in order for you not to find yourself in coreweb vitals jail your lcp or largest content for paint timing needs to be below 2.5 seconds so from when someone clicks on your site to seeing your content loaded needs to be 2.5 seconds or less now i know what you might be thinking this is hardcore it is if you have a site which has a lot of third-party scripts even if these third-party scripts are things like youtube google analytics stuff that google owns you're gonna find it really difficult to get that score underneath 2.5 seconds likewise if you have a website that has loads and loads of images particularly high resolution or large images for example used as backgrounds again this is going to be a very very difficult target to hit if you have a very long page potentially this could be difficult to hit but if you do find yourself falling foul of the lcp score and you end up in core web vitals jail fear not you'll be in some great company let's have a look at how some sites across the internet perform under the lcp category let's start with google.com now by the way google's page speed insight score on mobile is 55 out of 100 so not great largest content for paint as part of the field data from the google chrome user experience report actually has them winning 1.7 seconds so that's below the 2.5 second threshold interestingly under lab data it's failing 6.4 seconds let's take a look at another well-known site which seems to be doing okay bbc.com come on ouch all that license fee payer money and the largest contact for paint is happening within three seconds that's way above the 2.5 seconds threshold and actually means that the bbc's website does not pass core web vitals assessment it also fails on cumulative layout shift which if you thought largest content for paint was fun you wait till we get to cls let's see if the crane can pick up itself and let's go super meta let's put page speed insights through page speed insights oh dear well you can see here that page speed insights also does not pass the core web vitals assessment but the largest content full paint at 1.5 seconds is below the 2.5 seconds threshold unfortunately first input delay is 250 milliseconds instead of 100 milliseconds and cumulative layout shift is 0.5 instead of 0.1 sad times so stepping back to the big picture these sites are not going to see their ranking decimated overnight when this stuff comes out and becomes part of the search ranking algorithm page speed insights is going to rank for the stuff it ranks for bbc needs to rank for the phrases it's going to rank for so don't get into a blind panic thinking that this is going to be the end of your website if you can't get these metrics to where they need to be get as good as you can let's say that your largest content for paint score though is giving you the night sweats and you're a bit panicked about how it's going to impact your ranking how can you get around this how can you lower your score well there's a few key areas to look at firstly images if you're loading images on your site and you've just uploaded them in their super high res you don't have to reduce their resolution in order to reduce the file size we love using plugins like short pixel which works for wordpress and is a great image compression plug-in which basically compresses the image size without visibly decreasing the image quality another area to look at is reducing your use of third-party scripts and if you've got conversion tracking codes from you know back in the day when twitter ads were even considered to be a viable option then you might want to remove that stuff if you're using a content management system like wordpress you might also want to remove any unused plugins that you've got now for most wordpress sites a number of plugins are going to be necessary but anything that's not being used consider removing remember to back up first you might also want to consider implementing lazy loading now it's way beyond the scope of this video and to be honest me to talk you through the process of getting lazy loading implemented on your site but essentially what you're looking to do is only load the visible content on the site but then as someone scrolls down the page you'll load the information that they need to see this means they don't have to wait for the whole page to be loaded before they can start browsing around your website and the final thing to think about is your web hosting if pagespeed insights is giving you a load of jip about your website hosting and calling it all sorts of names including possibly slow then you might want to consider upgrading your hosting to one that is faster or that is better optimized to the website platform that you're using now i'm hesitant here to say that if you've got cheap hosting you need to get expensive hosting or that if your website is slow then you have cheap hosting because honestly we've seen cheap hosting and expensive hosting that's slow so the key here is to find a hosting which is fast enough to run your website as quickly as possible and if possible to get it over the core web vitals threshold for largest content contentful paint okay the next chapter in our thrilling foray into cool web vitals is something called first input delay or fid now this metric is essentially the time it takes for your website to respond when your user does something so when your user clicks on something or when they interact with your site in some way now what's really important is this is not the time it takes for your website to give them a response this is just the time it takes your website to respond to the action basically when someone clicks on your site google wants your website to respond within 100 milliseconds google wants your first input delay to be 100 milliseconds or less now i actually think this is very fair because in robert miller's 1968 report which i know you have as your bedtime reading called response time in man computer conversational transactions he found that 100 milliseconds was the length of time it took for something to appear to be instantaneous now i don't know whether google chose 100 milliseconds because robert miller discovered that 100 milliseconds is what it took to feel instantaneous not sure but the point is that your website essentially has to respond instantaneously that doesn't mean it has to load instantaneously it means that the stuff that's going on behind the scenes has to happen instantaneously now you might be thinking well when someone clicks on my website of course it responds instantaneously not so fast there could be scripts that are running in the user's browser which actually mean that when that user clicks the browser says sorry you must wait until i finish loading these scripts so repeat f id first input delay is not click on it and when it loads it's click on it and how long does it take for your website to respond to that click wait you're still watching this thank you on behalf of our audience retention metrics on youtube thank you okay let's look at the third and final metric cumulative layout shift now if you thought the largest contentful paint and first input delay were exciting then cumulative layout shift is gonna blow your mind now have you ever noticed that thing when you go on a website and you're reading through and all of a sudden the text moves it moves up you scroll up try to read it oh then it moves down and you're like what is going on here well what's often happening there is that there'll be some form of image or you know advert block on that page which is loading and it's automatically resizing to fit the content this is called layout shift and it's super super annoying so google is going to punish sites that do that so hopefully we'll see less of it basically every time that happens that's called a layout shift and google gives that layout shift a score don't really know how and i'm definitely not going to research it because it sounds super geeky and every time that layout shifts google gives it a score i don't really know how it scores and to be honest i don't care but the cumulative layout shift is the total score of all of the layout shifts that occur on a page basically do your pages do that annoying bouncing up and down thing now your total cumulative layout score in order to pass web vitals needs to be 0.1 or lower so we can see here the bbc failing at 0.3 because that needs to be 0.1 in order for them to pass core web vitals okay we made it so here's what you need to do in order to get yourself through core web vitals first thing go to google page speed insights you can just google that and see where your site is currently falling down it'll show you down here under opportunities it'll show you the different time savings that you can get through fixing some of these issues you're unlikely to be able to fix all of them and it's very difficult to get your site to 100 unless you are professional speed optimizer but it will show you the main areas to focus on to get your score up if you're failing call web vitals then have a look at first input delay cumulative layout shift and largest content full paint remember the largest contentful paint is about what's visible and how quickly it loads first input delay is how fast your website responds or what sort of scripts are running in the background in the browser which stop the website from responding quickly and cumulative layout shift is all about does your site do that annoying shift thing so can you put any kind of height locks on those sliders or on those ad blocks that might be loading with content in different sizes remember also crush your images down if you possibly can remove any unused scripts or plugins that you've got installed and also have a look at your server speed if it's not up to scratch if you need help with this the team here at exposure ninja are more than happy to help you you can either drop us a message through the contact form on our website exposureninja.com but as well as all the digital marketing stuff that we do we have a development team which fixes this stuff for our clients and for other businesses as well so drop us a message if you're struggling with core web vital stuff and we'll do our best to help you out you did it so i hope you've enjoyed this video and i hope you found it useful good luck with cool web vitals and don't forget if you enjoy learning about digital marketing then consider subscribing to our channel we put out a video every week of varying degrees of quality and also host a live digital marketing workshop every friday also don't forget to check out the exposure ninja podcast you can type exposure ninja into any of your podcast platforms and you will find us we share episodes about digital marketing last thing i'm going to suggest is if you need help with your digital marketing and you want to generate more leads and sales through your website then consider requesting a free digital marketing review from exposure ninja you can go to exposureninja.com forward slash review to request your review this is awesome by the way what will happen is we'll ask you a few questions about your business and your marketing goals will then go away and research what marketing you've done currently what your competitors are doing where they're leaving any gaps or where they're doing some good stuff that you might want to piggyback on we'll then combine all of our findings into a 15 minute video which we'll send directly to you via email this is a free service yes it's free yes free really and it's awesome so go to exposureninja.com to request your free website and digital marketing review today foreign