Why You Need to Educate Yourself on Core Web Vitals and Google’s New Update
The way websites are ranked is changing, as Google plans on introducing Core Web Vitals as a ranking factor later this spring. To ensure your website is ready, it’s important to learn about the more technical aspects of the overall user experience.
Whether we like it or not, Google is a gatekeeper of the web. So, if your website is not optimized to its ever-changing standards, then prospective customers will find it that much harder to discover you. Google's forthcoming update is to Page Experience, which involves metrics Google considers valuable for a good user experience on your site.
The key to this update is something Google is calling Core Web Vitals. And if your website is not already taking these into account, then you will need to make some changes to streamline your site to fit with these updates.
Mobile Friendliness & Core Web Vitals: The Four Main Goals
Google’s new Page Experience Update will introduce a new set of ranking signals, including things like safe browsing and SSL certification. But the four main goals here are mobile-friendliness and the three Core Web Vitals. These are the things you should prioritize as you prepare your website for the upcoming change.
1) Mobile Friendliness
It used to be that making your site mobile-friendly was an optional extra. But in early 2020, mobile devices accounted for more than half (56%) of organic search engine visits, and this appears to be climbing further.
Not only will Google penalize your site for not being mobile-friendly, but there are very real-world opportunity costs to not ensuring that your site loads well on Android and iOS devices.
2) Largest Contentful Paint (LCP)
Largest Contentful Paint is one of the Core Web Vitals mentioned previously. In basic terms, it measures the loading performance of your site. And it does this by taking the largest item visible (often an image or video) and measuring how long it takes for it to load.
This is a newer metric that works better than older ones, such as load or First Contentful Paint, which measures the speed to load the first item the user sees.
The Largest Contentful Paint should occur within 2.5 seconds of the page starting to load. It considers the viewport, which is the part of the page the user can see. Lazy loading, where images only load when the user scrolls down, can help by keeping large images further down the screen out of the equation and increasing load speed in general.
The elements considered are as follows:
- Straight-up images
- Image elements inside a scalable vector graphics segment.
- Videos
- An element with a background image
- Block-level elements with text.
On most pages it will be an image or a video, but if you have a lot of tight text on a page, that can end up being the largest element.
3) First Input Delay (FID)
The First Input Delay is another one of the Core Web Vitals that measures the speed of interactivity. Thus, it is not used on all pages (and note these metrics are by page, not by site). If the page is, for example, a long article, then FID becomes irrelevant.
It measures how long it takes for the page to respond when the user interacts with it, such as by clicking on a button or link, or using some kind of control. This should be less than 100 milliseconds. Input latency can be a big deal, and you can reduce it by being very careful with large JavaScript files.
The First Input Delay is most important because…
- It's the first impression, and we all know how important those are.
- It measures interactivity at the time when it's going to be slowest, during initial page load. Many users will click on a link or button before the page has fully finished loading.
- It helps developers by allowing them to target solutions.
Again, a key thing is to reduce unnecessary JavaScript. Code splitting, or, instead, deferring running of the script/asynchronously running the script using HTML5 ‘async’/’defer’ attributes, can also help here. Reducing input delay reduces user frustration and lowers the risk of bouncing and users going elsewhere.
4) Cumulative Layout Shift (CLS)
Few things annoy web users more than a web page suddenly jumping as they try to click or tap on something, resulting in them hitting, say, an ad instead of the link they wanted to go to. It can cause them to lose their place when reading an article. Or, it can result in them selecting more things for an e-commerce order than desired.
This is called Cumulative Layout Shift, and it's one of the Core Web Vitals caused when widgets or images load and move other content around the screen. It usually happens when resources are loaded asynchronously. So, the text of the page loads, then the header image. This might seem like a good idea for page load, but when it causes layout shift, it causes problems.
An easy way to reduce layout shift is to ensure that the placeholder is the same size as the actual image. This results in white space but reduces layout switch. This refers to an unexpected layout shift that doesn't result from user input when layout shift might be expected.
How to Prepare for the Update and Introduction of Core Web Vitals
So, how do you prepare? If you already have a well-designed and optimized site you should not have to do very much work and will, in fact, get an advantage over your competition. But there are some things you can and should do.
Preparing for Google’s update and prioritization of the Core Web Vitals starts with assessing your site and working out what you need to work on.
- Audit your website based on the Core Web Vitals. Google's own Search Console includes tools that will help assess these new vitals, along with other things Google takes into account.
- Do some actual testing, particularly on mobile devices, to see how the user experience feels.
Once you’ve determined where your site is at now, you can start making improvements. It’s worth noting that making your site faster with regard to the Core Web Vitals won’t suddenly drive your site to position one in the search results, per Google’s John Mueller. However, applying the tips below can help optimize your site and improve the overall user experience.
Tips to Apply to Your Site:
- Avoid using large JavaScript elements. These tend to increase FID and load speed in general. The browser cannot respond to the input while it is running another script. Minify your code and remove anything that is not being used.
- Remember that LCP counts things that are “above the fold,” that is, on the first screen.
- Make sure all images have defined heights and widths. This includes widgets and ads.
- Lazy load non-critical assets and below-the-fold images.
- Pre-render and pre-cache resources and assets properly.
- Optimize CSS files and remove any unused CSS.
- Keep image file sizes as small as possible, ideally under 100kB. Use next-gen image formats. Use HTML5 attributes ‘srcset’ and ‘sizes’ to load the correct size of image for the display device.
- Try to use as little third-party code as possible, removing anything redundant and which is not adding value.
- Use code-splitting to only send the code your users need.
- Never insert content above other content except as a response to the user.
- Use transform animations rather than ones that cause layout changes.
Takeaway
If you need help, don't be afraid to get it. You should stay informed on Google updates and make sure that your web developer is aware of these issues. While they seem daunting, they are easier to understand than you think and are useful for ensuring a good user experience and keeping customers on your site. And if you’re feeling overwhelmed, request a free website audit. We will tell you if your site is prepared or will need some more work to ensure your site is in a good place with these Core Web Vitals. And more importantly, that the new update won’t damage your search rankings.
At Viral Solutions we are committed to seeing YOU succeed. It is our goal to grow your business with proven digital marketing strategies that will help your business for the long haul.
Stay Up To Speed in the Ever Changing World of Marketing!
Sign-up today for FREE, monthly marketing tips, loopholes, and news to EXPLODE your Return on Investment!
Share your knowledge and gain exposure by becoming a guest author on our blog! Learn how to write for us.
