Googles Web Core Vitals Update for Clients

Action To Take For Google's Latest Update

What I’m doing on all your websites?

If the items or widgets are something that was added in the initial development or redesign of your website I will be working through each client's site and optimising those items. This won’t be a 5 minute process and I am only doing what would be too technical for clients OR with regard to items that were added at design time. If you have added images and/or widgets yourself, you will need to check those.

This could be for example a sign up box you have put on your website from code that you got from Mail Chiimp or Constant Contact. If that is above the fold on your website you will need to move it further down the page. 

Images - should be optimised (as below)

Video’s shouldn’t be in the header or top of the page (as below), etc etc.

So I can Ignore it?

NO! 

This is going to be Google's main focus moving forward and of course it doesn’t matter how great your content is if your page takes ages to load and users don’t stay. So as usual, it's a combination of factors.

For now, until the roll out is fully complete, your focus should be on placement of widgets on your pages, and ensuring that all your images are fully optimised for web before you upload them. 

The platform is working on ensuring that standards are met, however there are some things you can do in the meantime.

1. Move larger and more “heavy” widgets to further down the page. IE: If you have a video header, now is the time to move it below the fold (below the area that is shown prior to any scrolling - like a newspaper). If you have a large image in your header, make sure its optimised. IE: The smallest file size it can be to look good. There are lots of free image optimizers out there. Search and I’m sure you will find something that suits you and your budget. Free ones are everywhere now. 
2. Make sure that your mobile version images are not just optimised in file size but also in physical pixel size. If you have a 1920 wide image in your header for your desktop website, you will need to change that to a much smaller pixel size for mobile. To do this, the easiest way is to resize your image and then add the pixel size at the end of your file name. IE:  A header banner image might be called: MyBusinessHeader so call the mobile size one MyBusinessHeader320 (to represent that it is 320px wide). Make the full size one not show on mobile and the smaller one not to show on desktop. Try to leave your mobile images 800px wide as a lot of screen still use up this space. Try TinyPNG for your resizing and pay attention to the tip at the end of this post for image names. It's important.
3. Avoid having multiple heavy widgets on the same page. IE: Try not to have a mail sign up form (HTML Widget), a video widget and a map widget on the same page. 
4. The platform recommenda moving the main store widget below the fold which is a drama if you ask me, however I would assume they are working on this as they would have had a massive amount of pushback against this one. If you have a store, it will be a good idea to add a Product Gallery Widget above your store to compensate for this. I know it seems a double up but for now, that is their recommendation. Most online stores load via Javascript which uses a lot of resources so almost all ecommerce platforms will be experiencing the same drama. I will be contacting clients that have stores individually about this. 
5. If you have sliders in your header, limit it to 3 images or less.
6. They also want us to remove Google Tag Manager, but this is not something I’m going to do just yet. This is Googles preferred way of handling multiple tags (Facebook pixels, tracking etc) and I want to do some more research on this before I implement it. Some of you will have this and some will not.
7. Finally - they recommend that you only load a single image above the fold. This actually reflects Google’s love of white space (a clean crisp layout without too much going on) so this is something you could start with. 
8. Stick to 2 fonts for a website. This is how most of our websites are configured anyway, however I will be checking this for you. 
9. I would also consider moving any forms to the bottom of your page. They shouldn’t be too much trouble but they would lean toward being heavy widgets. 

Is it just the pages on my website?

It is every page on your website, which includes blog posts. If you have a heavy blog template (multiple images and comments sections) you might need to consider redoing your template. 

So there you have it, the basic to-do's for this Web Core Vitals update.

Finally - do not stress about this. Yes it is a serious update but everyone else also has to comply so it isn't something to give yourself a headache over.

Just start with one thing, like any images you've uploaded for example and resize them and reupload.

BIG TIP!! - When you resize your images, make sure you rename them BEFORE upload. Most good platforms (ours included) use something called a CDN. That stands for content delivery network. That means that they store your images on multiple servers around the globe so they can be delivered as quickly as possible to people in Iceland or Austalia. Each location refers to its closest server. The downside of this is that often these servers run cyclical updates on a preset schedule. If you upload your image with the same name, it won't overright that image on the other servers for days or even weeks so while it looks fine to you, its still using the old huge image because it has the same name. So add "opt" to the end of the file name, or even a letter, something that identifys it as the new improved image for both you and the system.



Comments On ---

Please leave any comments here and I will be sure to answer them asap I can.

While you do have to add your name and choose an avatar even if you don't choose to sign in, this is purely for differentiating commentors and won't be saved anywhere.