These are metrics that you can see in Google Search Console that attempt to measure how usable your site is. They cover things like page load time, how much your content shuffles around as the page loads, how long before the user can actually click on something, etc. These have always been part of the Google ranking algorithm, but in the past year, it seems like Google has really turned up the dial on how much impact these factors have. Where you might have seen a study 2-3 years ago that said as long as you don’t fail TWO OR MORE of the Core Web Vitals factors, you’re fine…you can throw that idea out the window now, as I’m seeing failing just ONE factor impact rankings significantly.
Oh, the Hypocrisy of it all!
Given that Google punishes sites for failing the Core Web Vitals tests, it might surprise you to find out that many of the third-party components that cause you to fail them come from…you guessed it, Google! Here’s a short list of some of the more common Google components that make it nearly impossible to pass the tests:
- Google ReCaptcha
- Google Tag Manager
- Embedded YouTube videos
- Google Ads components
- Google Maps
Late-Loading (not deferring!) to the Rescue
The good news is, I have come up with a way to late-load many of these, so that you can have all these kinds of components in your pages and have them load AFTER the page load is complete, so they don’t affect your Core Web Vitals scores. Tell your web developers to look at this page from my travel website, which despite having an embedded Google Map, 5 embedded videos, an embedded Google Streetview, and 40 hi-res photos, loads in 3.6 seconds on mobile, with PageSpeed Insights scores of 94 mobile, 98 desktop. Here’s the waterfall diagram of how the page loads from Webpagetest.org:
Where’d You Hide the 40 Photos?
But… you said there were 40 hi res photos? I don’t see them in the waterfall diagram…. Good catch! That’s because I’m lazy-loading these a bit differently than the usual tagging of the img tag with loading=”lazy”. Instead, I have all my photos in a Javascript array, and clicking on the next/prev photo buttons simply grabs the next image URL, caption, and ALT text from 3 JS arrays, grabs the current photo div element, and replaces those attributes on-the-fly.
Google Tag Manager
For an example of how to late-load Brontosaurus GTM, have a look at the source for this web page you’re on right now. Check out these two little functions in the Javascript:
- appendGTM ()
- callGTag ()
AppendGTM() adds the JS file for GTM, and that’s called by the body tag’s onload() function. It then sets a timer to call callGTag () 1/2 second later. callGTag () then adds a couple of lines of JS to the DOM and calls the gtag() function twice, just as it would in a normal GTM example.
YouTube Embedding Tool
For a quick way to embed a YouTube video with late-loading AND automatically build VideoObject schema, check out my fast YouTube Embedder tool here.
Bonus Tip: Auto-Sizing Images for Mobile
Using the same big image for mobile that you’re using for desktop? Oh, your LCP is gonna SUCK!
If you’re on WordPress, there are tools like Imagify that handle this all for you.
If you’re NOT, then you could do what I’m doing in that travel webpage above, and use Joe Lencioni’s SLIR (Smart Lencioni Image Resizer). It will resize, compress, and cache the compressed image–on the fly. In my HTML source, look for the Javascript function checkResizeHeroForMobile (). Basically you pass /slir/ the image filename and some parameters about how big you want it, cropping, etc. It’s pretty sweet!
I’d be happy to walk your team through any of this, and/or help them troubleshoot any page loading issues. It doesn’t have to be a major engagement, and you don’t have to be an existing customer. I track my time and bill by the minute, no minimums or retainers, so it’s pretty cost-effective for you. Contact me here.