Do you wish your website ranked a little higher in the search results? Are you looking for something you (or your web person) can do to improve your results that does not involve some sort of black magic or paying $25,000 a month?
Well, you have come to the right webpage because I am going to explain to you one of the key factors that effects how you get ranked by Google and other search engines (like Bing, but more on Bing later).
Ok, lets jump in and give the subject of “Google’s Core Web Vitals” a go.
Now before you scream, “NERD”, and run away, know that if you stick with me I promise you will understand this and you might even have a laugh or two along the way.
Google’s Core Web Vitals
First off, why are they called this? Well, Google created these metrics and the resulting standards which factor into ranking. Then, as nerds will do, they gave them all really terrible names preventing anyone but other nerds from understanding them.. You will understand why I say that in a moment.
Google’s Core Web Vitals are named as such because they are considered to be the most essential metrics for evaluating a website’s user experience. With Google owning 92% of the search market as of June of 2022, these “vitals” will be considered important by the other 8%.
Here is a good quote I found (using Google)
“These metrics measure key aspects of web page performance, including loading speed, interactivity, and visual stability. Together, they provide a comprehensive overview of how well a website performs for users, and help web developers identify areas for improvement.”
Google first announced the Core Web Vitals in May 2020, as part of its ongoing effort to make people like me scramble around and from their perspective “improve the user experience of the web.” The final implementation of these Core Web Vitals was in May 2021, when they were made a part of the ALGORITHM (cue the scary music). Who knew we would be using that word as much as we do today.
That is the back story. Now lets find out what these Core Web Vitals are. There are three, remember I warned you that the names are terrible. But hang in there we will get through this together.
Core Web Vital #1 – Largest Contentful Paint (LCP)
First up, we have Largest Contentful Paint (LCP). I told you these names suck.
Basically, LCP measures how long it takes for the biggest thing (image, video, text block) on your website to load. And let’s be real, size matters, especially when it comes to your website. Nobody wants to stare at a blank screen while your site loads. It’s like waiting for a bus in the pouring rain without an umbrella. Not fun. So, make sure your LCP is on point, or you’ll have a lot of angry visitors on your hands.
Now, if you are adventurous here are some tips for improving your sites LCP, here are some tips you can follow:
For Most People:
Optimize images: Big, fat images are like a traffic jam for your website’s LCP – they slow everything down! Give them a makeover by squishing them with tools like Kraken.io, TinyPNG, or Squoosh. And if you have too many of them, consider ditching a few to keep things moving smoothly.
Prioritize above-the-fold content: Above-the-fold content is like the fancy appetizers that come out first at a fancy dinner party – it’s the first impression you give to your guests. Make sure it looks sharp by optimizing how it loads, and your visitors will think you’re the host with the most!
For Nerds:
Minimize HTTP requests: An HTTP request is basically a message sent by the visitors web browser to your website. It’s how the browser asks for things like web pages, images, or videos from a website. Think of it like raising your hand to ask a question in class – the HTTP request is your way of asking the server for information. Lighten the load by minimizing files and setting it up so your visitors browser stores some of that so it doesn’t have to load on return visits.
Reduce server response time: Your server response time plays a crucial role in the overall loading time of your website. You handle this by choosing a reliable host for your site, reducing the number of requests (see above), and compressing files (also see above).
Eliminate render-blocking resources: Render-blocking resources are like grumpy bouncers at a party – they slow everything down and make people wait. Keep the party going smoothly by making these resources play nice. Provide the bouncers with a VIP list so they can prioritize the crowd making their job easier. Everyone wins.
Core Web Vital #2 – First Input Delay (FID)
Next, we have First Input Delay (FID). These names don’t get any better, trust me.
This one measures how long it takes for your website to respond when someone clicks on a button or tries to interact with it in some way. Think of it like a game of Red Light, Green Light. You want your website to be like Usain Bolt, ready to go at the drop of a hat. If it’s more like a sloth, you’re in trouble. Ain’t nobody got time for slow websites, so make sure your FID is fast and furious.
FID is unfortunately just nerdsville in terms of things you can do. I did un-nerd it a bit so don’t be afraid to give it a go. At least you will have a better understanding of it.
For Nerds (but rewritten for understanding):
Optimize JavaScript: JavaScript is a boss language, but it can be a hog and slow down your website. Make it behave by squishing it down and only using what you need. Also, let the non-important stuff wait until after the page is loaded.
Reduce third-party scripts: Beware of third-party script invaders! They can make your website feel like it’s stuck in molasses. Only let in the ones you really need and make sure they’re set up to be fast and efficient.
Use browser caching: Browser caching is like a squirrel hoarding nuts for winter – it stores your website’s goodies on your visitor’s computer, so they don’t have to go fetch them every time they visit. Make sure you cache the static stuff like images, stylesheets, and scripts to make your website faster than a rocket ship!
Optimize critical rendering path: The critical rendering path is like a traffic cop directing how your website gets to the user’s screen. Make sure it runs smoothly by using efficient code like HTML, CSS, and JavaScript. Put the most important stuff up top, and don’t let any resources get in the way of rendering.
Avoid long tasks: Long tasks are like a snail race for JavaScript – they take so long that your user can go make a sandwich and come back before it’s done. Avoid these by getting your code in shape, splitting big tasks into smaller ones, and sending some of the work to the background with web workers.
Core Web Vital #3 – Cumulative Layout Shift (CLS)
Last but not least, we have Cumulative Layout Shift (CLS). Probably the best named Core Web Vital, in my opinion.
This one measures how much your website jumps around and shifts as it loads. You know how annoying it is when you’re trying to read an article, and then suddenly the text jumps up or down, and you lose your place? Yeah, that’s what CLS is trying to prevent. It’s like trying to read a book while riding a rollercoaster. Not ideal. So, keep your CLS in check, or your visitors might lose their lunch.
CLS is also mostly the domain of your web person (do you have one? If not… give us a shout)
For Nerds (but I think by now non-Nerds will follow):
Here are some tips to help you improve Cumulative Layout Shift (CLS):
Use proper image and video dimensions: Images and videos that don’t have fixed dimensions can cause layout shifts when they load. Specify the dimensions of your images and videos in HTML or CSS to ensure that the page layout remains stable during loading.
Reserve space for ads and embeds: Ads, social media embeds, and other third-party content can cause layout shifts as they load. Reserve space for these elements in your layout so that they don’t push other content around when they load.
Avoid dynamic content: Dynamic content like carousels or content that changes size can cause layout shifts. Use fixed dimensions or animate them so that they don’t cause unexpected layout shifts.
Load web fonts properly: Web fonts can cause layout shifts if they don’t load quickly enough or if the font size changes during loading. Use the “font-display” property in CSS to specify how web fonts should load, and consider using system fonts as fallbacks to ensure that the layout remains stable.
Optimize JavaScript: JavaScript can cause layout shifts if it changes the layout of the page after it loads. Optimize your JavaScript to avoid layout shifts by using site blueprints and browser rules which help manage JavaScript to load without causing unexpected shifts.
By following these tips, you can significantly improve the CLS of your website, making it more visually stable and enjoyable for your visitors.
So, there you have it, folks. The Core Web Vitals in a nutshell. Remember, if you want your website to be successful, you need to make sure your LCP is big and impressive, your FID is quick on the draw, and your CLS is as stable as a rock. If you don’t, you might as well be serving up a pile of steaming hot garbage to your visitors. And nobody wants that, right? Right.
It’s worth noting that the Core Web Vitals are just one of many factors that Google considers when ranking websites. Other factors include relevance, authority, and the quality of the content. However, by optimizing your website for the Core Web Vitals, you can give yourself an important edge over your competitors and improve your organic ranking on Google’s search engine.
