fbpx

Web Core Vitals Crash Course


Web Core Vitals Crash Course by our SEO Director

Below are seven main points that summarize web core vitals and how you can make them work for your business.

On Thursday, August 5th, 2021, at Pubcon Florida in Miami, Patrick Stox led the “Core Vitals Page Experience Crash Course” session. As the Product Advisor, Technical SEO, and Brand Ambassador at Ahrefs, Patrick understands the importance of understanding Google Web Core Vitals. Below are seven main points that summarize web core vitals and how you can make them work for your business.

 

  1. Page experience ranking is coming to desktopWeb Core Vitals has strictly focused on mobile over the past year. Jeffrey Jose, Product Manager at Google, made a statement back in May that Google “believes page experience is critical no matter the surface the user is browsing the web.” As marketers, we should be considering the speed of both mobile and desktop. With the delay of the mobile page experience update being pushed until the end of August, we can also expect the desktop rollout to be pushed further. However, this must-have has always been in the plan for Google Core Web Vitals. Google has been tracking desktop and mobile within Search Console for over a year now. It is not expected that Google will add to Search Console if it’s not a permanent critical feature for all websites.  
  2. Don’t block CSS and JavaScript – This seems like a pretty straightforward concept. Blocking was discussed back in 2015 when websites were being flagged in Search Console for not allowing Google crawl bots from crawling these files. Blocking these files is still a problem in 2021 because websites are trying to avoid getting hit with lower rankings due to the page experience update. However, blocking these files is NOT a suitable way to fix this problem. A simple tip that can help your Web Core Vital Scores is to make sure you reduce files’ size as part of optimization for web core vitals. When the page is loading, there can be delays that prevent the user from clicking an action. If the user gets any kind of delay, this is considered a decrease in First Input Delay, one of the three factors within Web Core Vitals. Cutting up your JavaScript code can prevent your websites from getting bad scores in FID.
  3. Set height and width of images – This has to be the number one reason why websites are getting negative scores for Cumulative Layout Shift (CLS). When the width and height of the image are not set with distinct measurements, it forces the browser to load the image based on the device. This shift within the design layout of the image can force other elements on the screen like text blocks and other images to push past the screen that the user is viewing. To put this more clearly, it forces the browser to reload the text block all over again once the user continues to scroll. Each time this happens, it has a negative effect on your total score for CLS. Setting your images and text blocks is vital to keeping your CLS scores in green.
  4. Loading Non-critical CSS later – All critical JavaScript (JS) and cascading style sheets (CSS) should be loaded at the beginning of the website. There are elements of CSS that can be loaded later within the user’s page experience. It’s important to prioritize your CSS. Carefully choose what is needed now and what can be loaded once the user has scrolled to the bottom of the screen.
  5. Preload images above the fold – Any images that are located at the initial part of the page that a user can visually see should be preloaded, so the user does not have to wait to visually see them. You don’t want to be loading footer images at the start because very few people will automatically start scrolling to the end of the page upon getting to the website. Knowing what you have to load first is key to success with Web Core Vitals.
  6. Don’t load custom fonts – System fonts are always a better way to go for a website page experience because they don’t require “fetching” a new font from a server. System fonts are more readily available and thus won’t slow down the loading of your text blocks. If you have no choice and your client MUST have custom fonts, load them earlier at the beginning of your website so that the user doesn’t see blank text blocks while still loading.
  7. Lazy loaders will not save you all the time – A lot of developers try to combat website core vitals with lazy loaders, also known as on-demand loading, because they allow images to load as the user continues to scroll. Lazy loading entails images at the bottom near the website’s footer not loading until the user gets there. However, images placed above the fold when the website first loads need immediate loading, making lazy loaders not as effective here. Do not rely on using lazy loaders for the beginning images near the primary navigation.

 

If your business needs assistance understanding Google Web Core Vitals, Google Analytics, or Google Search Console, the busy bees at Tandem Buzz are here to help. As a boutique digital marketing agency located in South Florida, we are experts on SEO, PPC, email marketing, and more! Contact us today to learn how we can get your business buzzing.