Get a demo
Request a personalized demo with a digital experience expert!
The do’s and don’ts of Core Web Vitals with iProspect
Ric Riley, Associate Director – Optimization, iProspect, spoke at our latest CX Circle event about Google’s Core Web Vitals algorithm update, providing useful tips to help prioritize your website task list for maximum impact.
Riley highlighted the work iProspect is doing around Core Web Vitals, demonstrating the importance of the upcoming update. Riley said, “I’ve been working with many clients on their site speed over the last eight years, so I wanted to share some of my useful experiences on the topic”.
Drawing from his experience working with leading brands to optimize their websites’ technical performance, Riley showcased some of the common themes surrounding Core Web Vitals and their impact on site performance. “Some of these may surprise you!” said Riley.
It’s all about site speed
Site speed is a topic that’s often been overlooked in the past, but Core Web Vitals changed that with many businesses now prioritizing site speed above all else.
For iProspect, approaching client conversations around Core Web Vitals begins by first analyzing impact versus effort. Of course, everyone wants the highest impact with the least amount of effort – but do people understand where each task sits? The answer is: typically, no they don’t.
So, let’s take a look at some common projects surrounding site speed metrics and see how impactful they actually are…
High effort, low impact tasks
Riley has found the same high-effort, low-impact tasks coming up time and time again with his clients.
However, many of these tasks don’t make much of a difference to site speed, so should be deprioritized behind other high-impact driving projects. Here are the top four:
Tag managers
- Impact: 1/5
- Effort: 4/5
According to Riley, many clients think that a busy tag management system is what’s slowing down their site speed, often citing this as a priority in preparation for Core Web Vitals. But that’s often not the case.
“I’m not saying you shouldn’t do this, but if you’re strictly looking at Core Web Vitals, in our experience [tag management systems] rarely have an impact on the render metrics you’d be looking to improve.”
Why? Because Google Tag Manager runs asynchronously in the background. What’s more, auditing a tag manager account is a high effort task, with clients often sifting through multiple years’ worth of tags to see which are still applicable on their website. It’s a slow process that could take anything from days to weeks to complete.
“There’s a lot of effort there, but not much gain. So, it’s something we’ll look at, but will pretty quickly deprioritize,” says Riley.
Content delivery networks (CDNs)
- Impact: 2/5
- Effort: 4/5
Again, this one comes back to a lot of people’s perception that it’s the server slowing down their site, this is rarely true.
“Content delivery networks are great for heavy content, such as BBC’s iPlayer service,” says Riley. But if it’s a simple product image that’s likely to sit at the top of the page, using a CDN can slow down your Largest Contentful Paint (LCP). “So, I’d be careful about using CDNs on critical content,” he says.
Despite this, auditing your CDN can be a manual and slow process, with the impact on your site likely to be minimal. Unless you have plenty of time and resources for this, it’s worth focusing on other higher-impact tasks first.
Image compression
- Impact: 1/5
- Effort: 3/5
Image compression is commonly touted as one of the top priority items for speeding up your site, but this isn’t an issue that iProspect sees amongst many of their clients.
“It depends on how bad your images are compressed, to be honest,” says Riley. “But typically, most sites […] have decent compression already” so this won’t have much of an impact on your metrics.
For large images that require compression, Riley recommends using a web application called Squoosh.
Replatforming
- Impact: 0/5
- Effort: 5/5
“Core Web Vitals focuses on your site’s front-end performance,” says Riley. “We’ve worked with a lot of different platforms […], and we’ve managed to optimize all of these platforms to the point where they’re achieving ‘Pass’ grades for Core Web Vitals.”
Unless your page speed analytics show a noticeably slow time to first byte (TTFB) – anything over one second – changing platforms is a waste of time and effort. “It’s not the underlying platform that’s the issue, it’s the front-end and how that’s built,” he says.
Key takeaways
Low effort/high impact tasks
There are, however, plenty of tasks that require minimal effort that have a big impact on site speed. These are often overlooked in favor of lower-impact tasks.
If you want to get the best results, here are the tasks you’ll want to prioritize:
<head> tag
- Impact: 5/5
- Effort: 1/5
“The <head> tag is the single most render-blocking element across all pages,” says Riley. “You’d be surprised at how much of an impact a simple prioritization within the <head> tag can have on things like your Largest Contentful Paint (LCP).”
Riley’s advice? “Make sure your <head> tags have only the most essential and critical scripts that are loading on the page.” Prioritize scripts that make a difference to render too (especially for things like A/B tests).
Cookie banners
- Impact: 1/5
- Effort: 4/5
“Next up is a surprising one for many: cookie banners!” says Riley. “There’s not much we can do about them; they have to be there in most cases. But you need to make sure they appear for the user as fast as they possibly can.”
Riley has seen clients with cookie banners that trigger on page load, causing delays of up to 15 seconds between the user landing on the page and the cookie banner being displayed. Unsurprisingly, this isn’t a great user experience and can cause frustration as the cookie banner appears after the user has settled into their browsing session.
Dynamic content
- Impact: 4/5
- Effort: 2/5
Dynamic content often loads after the page has loaded, which can cause a huge amount of layout shift.
“The simple solution to this is to create a placeholder for that content and an area for it to load into.” This results in a set place and size being built into the page, so when the content loads it doesn’t move anything around. That way, you can keep dynamic content on your pages, without it affecting your Core Web Vitals metrics.
Largest pieces of content
- Impact: 5/5
- Effort: 1/5
To optimize your largest pieces of content, you must understand what they are. Although, these might not be what you expect them to be.
“Go away and do your due diligence,” advises Riley. “Look at your key pages/templates in WebPageTest to highlight what your largest piece of content is, then optimize and ensure this content is prioritized in terms of load speed.”
Inline CSS
- Impact: 5/5
- Effort: 4/5
“If there are any developers in the room, I’m sure there’ll be some groans coming my way at this one,”. While difficult to manage for developers, Riley asserts this is one of the quickest ways to get the best performance out of your page.
“Most developers have been taught that all of your CSS should be sat in a separate CSS file. But by doing that you’re slowing down the render of your page.”
Including CSS within your HTML will dramatically improve your render times. Without it, CSS is pulled in as a separate asset which can only start once the HTML has been processed.
Riley’s advice? Put CSS styles inline for your above-the-fold content.
Key takeaways
Get a demo
Core Web Vitals made simple
At Contentsquare, we’re committed to building better digital experiences for everybody. And this includes helping brands monitor and improve their performance against Core Web Vitals with our brand new Speed Analysis monitoring tool.
“Being able to use this data to actively improve how a site is built and how it works is invaluable,” says James Fearne, Lead Customer Success Manager at Contentsquare. “There’ll be instant results in your page performance score, but also your SEO ranking, too.” Book a demo with us today to find out more.
About iProspect:
iProspect, a dentsu company and global strategic partner of Contentsquare, is a digital-first end-to-end media agency. Its unmatched mix of media strategy and storytelling with digital expertise and audience knowledge defines the new territory of performance-driven brand building. By delivering human-centric solutions, iProspect accelerates growth for the world’s most iconic brands including Sonos, Cox, LG, Hilton, Levi’s, Budweiser, Microsoft, and Procter & Gamble. The iProspect team works across a network of more than 8,000 media and performance specialists spread across 93 global markets.
