Jeff and Carman have invited members of the Kula Partners team to showcase their capabilities and provide some tips and tricks to The Kula Ring audience.
3 Core Web Vitals That Impact Website Performance Transcript:
Announcer: You’re listening to The Kula Ring, a podcast made for manufacturing marketers. Here are Carman Pirie and Jeff White.
Jeff White: Welcome to The Kula Ring, a podcast for manufacturing marketers brought to you by Kula Partners. My name is Jeff White and joining me today is Carman Pirie. Carman, how you doing, sir?
Carman Pirie: I’m doing well. Look, I’m excited for today’s show.
Jeff White: I know, and we always say that, but you know, now we’re going to give our listeners an opportunity to hear from members of the Kula team.
Carman Pirie: Yeah. Yeah. I guess, folks, you should know that Jeff and I took a hard look at our capabilities as owners of this agency and realized that we mostly don’t know anything and that it’s better if we could get the people that actually do the real work around here on the show. But in all seriousness, I think it’s exciting to showcase a bit of the folks and the thinking that we have here at Kula, and along the way, hopefully give our audience some tips and tricks that can help them in their day-to-day.
Jeff White: Absolutely. Yeah, and I’m really looking forward to our guest, so joining us today is Luke Desroches. Luke is our Frontend Architect here at Kula Partners. Welcome to The Kula Ring, Luke.
Luke Desroches: Thanks, guys. Thanks for having me on here.
Carman Pirie: I gotta say, I wanted Jeff to say your last name as Desroches.
Luke Desroches: I’ve heard many different ways, so it’s all good. I mean, it’s been butchered a few times in my time, so yeah.
Carman Pirie: A name like Desroches from-
Jeff White: The plain de Calgary.
Carman Pirie: Yeah, from the plains of Canada. It’s easy to see why the name could get butchered a few times along the way.
Luke Desroches: Yeah. I don’t speak any French, so yeah, that’s probably the-
Carman Pirie: A special Ukrainian French.
Luke Desroches: Yeah. Exactly.
Carman Pirie: We won’t quiz you on any borscht recipe or anything like that today.
Luke Desroches: I could get one from my mom if you need.
Jeff White: You know, that might be good.
Carman Pirie: That would be good. Yeah. Just make a note of that for later.
Jeff White: For later.
Carman Pirie: For now, I think before we dive into technical SEO and Core Web Vitals, and kind of peel that back a bit, Luke, why don’t you just maybe introduce yourself to the audience here and let them know a little bit about you?
Luke Desroches: Yeah, for sure, so yeah, I’m Luke. I’ve been at Kula Partners for… Geez, quite some time now. I can’t even count the years. But yeah, Frontend Architect here, so you know, my job is aside from doing actual frontend development, building websites, it’s also just sort of trying to oversee how frontend development is done here and trying to kind of steer us in the right direction, because the web and frontend development, it evolves so much that it is really difficult to keep up with. So, that is part of my job, trying to keep up with all of that. Which, I guess, kind of takes us to this topic today with Core Web Vitals and just how it’s now playing into web performance and SEO, all of that. So, yeah, I’m quite excited.
Carman Pirie: And if it’s difficult for you to keep on top of, then just imagine… I mean, you’re in it every day, elbows deep. Meanwhile, our listeners, basically SEO is one thing that they need to be mindful of or be aware of and help manage along the way.
Jeff White: And it keeps getting more technical, too. It’s not even really the realm… It’s not always the realm of marketers to understand SEO anymore. It really requires developers who get how the structure of the things that they’re building can impact the quality of the end user experience.
Luke Desroches: For sure. I mean, in the past it was make sure you’re using H1s, and when keywords were still a thing, and meta descriptions, and some of those things are still valid, but yeah, over the years, we speak about Google because there are other search engines out there, but Google is definitely still leading the way. They have been pushing more towards putting more priority in how that site is actually built and how it performs, and as the years have gone on, it’s just the importance of that is just more and more important, and it’s now playing a role in actual search rank. So, yeah, definitely you’re right. It isn’t just marketers. Developers need to be or ought to be fully involved in that SEO conversation.
Carman Pirie: Let’s get into the specifics here, because I know… Look, there’s some discussion at least about of course site speed impacting search rank and things of that sort, and I think a fair number of people maybe at least know that in some way, shape, or form, and some of that’s driving conversation around deployment of headless CMSs and things of that nature in mobile environments and what have you. But Google is I think just now, at the time of launching this episode, is just releasing essentially a renewed emphasis if you will on these Core Web Vitals, correct?
Luke Desroches: Yeah, so they’ve been talking about it. There’s an article from I think last May, so they started to introduce it and be like, “Okay, these Core Web Vitals are a thing that web developers need to start thinking about.” But yeah, they just this month, I believe it is now actually something that they are considering when ranking your site. So, in addition to all those things like on-site SEO, and content, and whatnot, they are now considering these web vitals, which is really their way of I suppose grading your site’s user experience, because for a while now it’s been very important that you have a fast website for a number of things. You know, if users are bouncing from your page, Google is going to ding you for that and it’s gonna affect your rank, so ensuring that your site loads fast is very important.
But you could still have a fast website but a poor user experience, like just because you have a fast website doesn’t mean users love to use your website. So, these Core Web Vitals are really the answer to that. Now, it’s Google’s way of grading user experience, but I think it is a tough thing to grade. Good user experience is like good design, like everyone sort of has an opinion on design, right? There is obvious bad design, but it is still something that is to a certain extent subjective. And the same goes for experience on a website. I may enjoy using a site that someone else doesn’t enjoy, but it’s interesting, these Core Web Vitals, basically they’re just metrics. These three metrics that they’ve come up with to measure your site’s user experience.
I could just dive into them if you’d like me to.
Carman Pirie: Yeah, yeah, let’s go through them.
Jeff White: Yeah, why don’t we talk about what the three of them are, and then we’ll unpack how each one… Because really, what they’re doing is using these as an indicator of what they think is actually happening, and it’s interesting because a lot of people when they think of user experience, they think of what the visual design looks like, what the overall interface looks like, but design is code and code is design, and all of these things impact the user experience probably in ways that most people don’t understand or realize.
Luke Desroches: Oh, for sure. You can have a beautiful design, but it’s still a poor experience, like when it’s actually implemented there could be loads of issues with that design when it’s actually implemented in code. So, yeah, these three Core Web Vitals as they name them are largest contentful paint, first input delay, and cumulative layout shift. Now-
Jeff White: So, I’d like to thank Google for naming these with really easy to understand terms.
Luke Desroches: Exactly.
Jeff White: First of all.
Luke Desroches: Yeah, so largest contentful paint, like what does that mean? Basically, what it is, it’s Google’s way… So, the largest contentful paint element is essentially the largest element that Google is seeing when it sees your page, what it sees on that first initial viewport view. Now, typically that largest contentful paint element might be like a banner image. It could be the actual banner heading, so if on your device, whether it’s mobile or desktop, because it checks these things at different sizes, too, like the largest contentful paint element on desktop won’t necessarily be the same on mobile. But it’s just that largest element and it chooses that because it’s assuming that that largest element is the most important thing that the user is seeing at that point.
So, if it is a hero banner and the largest contentful paint element is that banner image, then you’re essentially being graded on how optimized that image is. So, if that image is taking a long time to load, you’re probably gonna have a poor largest contentful paint score.
Jeff White: And I think it’s worthwhile just because there’s a lot of terminology in there, so it’s worthwhile discussing what a viewport is. So, effectively that’s the space that you can see, so the above the fold to the top of the browser, what is actually being… What are you able to interact with and see as the page renders, right?
Luke Desroches: Yeah. You nailed it there. It’s so much more important to make that initial view that the user is likely gonna see, so if a user goes to your page on their mobile device, that initial viewport view, that above the fold, getting that to load as quickly as possible is so much more important now, and that’s where these three metrics play into. Yeah, if you want to substitute above the fold for that. That’s a good comparison.
Carman Pirie: I think it’s interesting you said Google assumes it’s important. And that’s so often not the case. I mean, how many times have you seen a website that the largest contentful paint, is that… Did I say it correctly?
Luke Desroches: Yeah.
Carman Pirie: Is this background image that is nothing. It’s like, I don’t know, a shot from a trade show aerial view or something, and it’s just like it’s spanning, taking up a bunch of bandwidth to serve up that image, and then they’re just laying copy over it and it’s not really doing anything or serving much.
Jeff White: But at the same time, I think what they’re… I don’t know. I mean, it could be argued that what they’re trying to push is, “Guys, let’s get away from these big, useless images, and actually get something that is valuable to the user in that viewport right away.” So, you know, let’s try and size down these great big banner images and instead get some copy in there, and maybe a smaller image, and some other things, and load that stuff fast, fast, fast. Because that’s what the user is actually looking for, you know? They don’t necessarily need to see a great big background graphic.
Luke Desroches: Yeah, for sure. I mean, if you’re able to go that route with the design, you’re gonna have a lot more success. There are things in development that you can do to optimize that, that if it is an image, optimize that image to load fairly quickly. I mean, you could serve up smaller sized images. You can prioritize when that image is downloaded by the browser. So, there are things that you can do, but yes, if you could rethink your design so that it’s not so… It’s not just focusing on that big image or that image that’s taking up the majority of that viewport, what the user is seeing when that page first loads, then definitely you’re gonna have a lot more success with this metric.
Carman Pirie: One quick question. Do carousels impact that at all? Or is there an additional negative impact of carousels? Or is it really only the first image that the carousel is loading that’s the concern?
Luke Desroches: I think it’s focusing on that initial view, so if that initial view is just that first image, I mean, carousels certainly have other negative impacts, but for this particular metric, I would think that it’s just that first image, because of course when you first load the page, you’re just seeing that one image. You’re not seeing the other images until the user starts scrolling through that carousel or if the carousel automatically starts scrolling through.
Jeff White: Well, and I think that’s where the word paint comes into play here, because when they say paint, what they mean is what draws on the screen the very first time it loads.
Luke Desroches: Exactly.
Jeff White: So, you know, the carousel is going to have an impact to the overall page size, because it has to download all the additional images, or videos, or whatever else goes in there, and that is going to have an impact on site speed, but it’s not going to have as much of an impact on the painting of the page.
Luke Desroches: Yeah. And-
Jeff White: At least that would be my interpretation.
Luke Desroches: Yeah, for sure. And you know, those other things are still just as important. Exactly, if you’re loading a carousel with 10 different images or 10 different slides, of course that’s definitely going to make your page a lot heavier, and it’s going to negatively affect your performance in other ways, probably.
Carman Pirie: Everybody should know that beating up on carousels is a tradition here at Kula Partners.
Jeff White: Sport.
Carman Pirie: We rarely found a carousel we couldn’t hate. So, let’s go into the… I guess Core Web Vital number two.
But this is something that you can’t really… I mean, you can test for yourself just by using your page and seeing if you’re tapping these buttons, is there a delay? If there’s a delay, then you should probably fix that. But it’s really something that Google needs real users to be using your page to fully I guess evaluate that metric. The other ones, like largest contentful paint, you can use tools to see what that element is and then you can optimize it if it is an image, and then the other metric we’ll get into in a second is similar to that, but this first input delay, it’s really… Of the three, it’s most dependent on real user traffic, I guess.
Jeff White: And this isn’t necessarily the delay on the part of the user. If they wait and read some stuff before they click or something like that, it’s not about that. It’s more about once they interact, that it’s snappy, and it performs well.
Luke Desroches: Yeah. Exactly. I mean, the goal here with all of these is getting that initial view loaded as quickly as possible and being responsive and responsive as the user can start interacting. I guess a better word, get it interactive as quickly as possible so that your user can start using your page as quickly as possible. So, if they’re seeing that button and they go to tap it, is there a delay? If there is, then yeah, you’re probably gonna get a poor score for that metric.
Carman Pirie: Now, is that going to impact tracking CTAs and things of that nature for marketing automation platforms? Is that an additional concern?
Jeff White: Very cool. Good to know. So, what’s the third one? All three of these are quite interconnected, aren’t they? I mean-
Luke Desroches: Yeah. They’re all pieces-
Jeff White: You really can’t have one without the other.
If you go to your own website right now, whoever’s listening, if you go to your own website or any website, and you go to load it, and if you can visually see elements moving around as that page is initially loading, then that is this cumulative layout shift, and the reason why this is so important is because… I mean, I’m sure most people have experienced this, where you’re on your phone, you go to tap a button, and all of a sudden it moves for whatever reason, then that could be frustrating. That’s frustrating for the user, so that is why this is such an important thing, is just again, the focus is to get that initial view loaded as quickly as possible and to make it interactive as quickly as possible so that if a user is trying to interact with your page and they can’t because elements are loading in at different times and things are moving around, that is just a poor experience.
So, this one is of the three, this one’s the most interesting because like I said, anyone can… You can go right now. You can go on your phone and look at a page and if you’re trying to load the page and there’s a button in the viewport, and then an image loads in and all of a sudden that button disappears, that is this cumulative layout shift at work.
Announcer: Are your digital marketing efforts bringing in too many junk leads? Stop wasting time and distracting your sales team. Account-based marketing can help give your marketing strategy the laser focus on the qualified buyers that you need to increase your pipeline velocity, close more deals, and grow your business faster. We’ve created a sample manufacturing ABM plan to help you get started. Download the sample manufacturing ABM plan at bit.ly/sampleabm. That’s B-I-T.ly/sampleabm
Carman Pirie: Is it just indicative of poor coding or are there certain CMSs and templates or something like that that may be more conducive to throwing that kind of an error, I guess?
Luke Desroches: I mean, it certainly depends. It all comes back to the design like we talked about with the largest contentful paint. If you’re relying on larger images and if that image happens to be near the top of your layout, that’s of course going to affect this. You might see a button initially when it starts loading and all of a sudden, the image comes in and it pops it down, so maybe it requires you to rethink how those images are being used in that top view, that initial view of your page.
If you’re using, again, these external services that load in call-to-action buttons, if you’re not able to load that in quickly, or if that button is above some text and it comes in and pushes the text down, maybe it should come after some of the content so that it’s not affecting other elements that are in that layout. So, it definitely forces you to rethink how you’re designing the page based on I guess the various different elements that you are choosing to include in that initial view.
Jeff White: And I mean, this is one of the oldest things that have bugged frontend web developers forever, is when people don’t put height and width tags on images, you know? It’s always been that you could tell the page what size the image was gonna be so that it could leave space for the image to load into that area, and then for whatever reason as we got into responsive design, people started leaving that out.
Luke Desroches: Yeah. It was because it was earlier on, browsers weren’t as good at detecting that space. At least not in a way that scaled. So, when responsive design came in and your images had to scale fluidly, yeah, it became the norm to exclude those and then just ensure that the height scaled automatically based on the width. But now browsers can actually detect that, the space that an image is gonna take up when it’s being loaded in, if you include those width and height attributes on the images, they’re able to detect the aspect ratio of the image so that if it is a different size, it knows how much space to reserve for that image loading in, and it does help with this cumulative layout shift.
So, it is interesting because we have come full circle in a way. All images used to have the width and height attributes, then we got rid of them because of responsive design, and now we need them again, so yeah, it’s interesting.
Jeff White: I want to go back to… This one actually applies to the last web vital more around that ability to interact quickly with the page, but can you talk a bit about scroll jacking and swiping delays and things like that and how that can impact the user experience? Because it’s a personal pet peeve of mine. It certainly plays into this.
Carman Pirie: Yeah, so can you support my theme for this?
Jeff White: My theory that this is bad.
So, again, it’s just try as much as possible not to interfere with these, with good old-fashioned HTML, with browser default functionality, just keep it simple.
Jeff White: Yeah. Thank you for supporting my pet peeve. Because it’s not just the impact on SEO, and really what Google is trying to go for here is what is the impact on user experience as we were talking about, and often when you implement those scroll jacking features so that you can control the speed, or the slow down, or give scrolling some kind of weird gravity or whatever to focus with your page, it breaks native browser functionality, like you can’t do two finger swipes to go back. Sometimes you can’t use the back button at all. And those things are… Don’t break my browser in order to support a flawed design idea, I guess.
Luke Desroches: Yeah. I mean, aside from this metric, if someone is coming to your site and they try to scroll down or swipe down and they can’t, they get frustrated and they leave. That time spent on site, that’s important. That’s a whole other metric, right? How long people spend on your site is very important to SEO, so it’s not even just this one metric. All of this is all connected.
Carman Pirie: I wonder, I guess it’s always surprised me in some ways how differently different companies value their web presence, if you will. Some understand that it’s the purview of professionals and that how you build it matters and a lot of these considerations matter. And then it can be equally surprising, sometimes multibillion-dollar global companies, and you go onto their website and you’re like, “My goodness, did you just hire somebody for $5,000 out of the back of their truck or something to do this website?”
So, putting you a bit on the spot, I’m curious. You’ve had occasion to open the hood, if you will, of a number of sites that you didn’t build, but you’re being asked to evaluate and assess their SEO performance, and UX performance, et cetera. I guess what are some of the most often overlooked basics that you see?
Carman Pirie: And chances are you wrote that blog post to get… for search benefits, right?
Luke Desroches: Yeah. Exactly.
Carman Pirie: You optimize the headline, and on and on and on.
So, you know, really the message here I guess is that marketers should be asking their web teams how are you handling this, are you making the files smaller? You know, that minification you were talking about. And are you condensing those into a single file? And ask those questions of your web developers. And if you’re not getting a satisfactory answer, you should maybe find out why and see if you can get that improved because it’s going to be crucial to their search performance going forward.
Carman Pirie: I appreciate Jeff’s advice to marketers to quiz the frontend developer. At the same time, maybe I’ll speak on behalf of marketers writ large, is that you can really quickly feel like you’re out over your skis. You know, like it doesn’t take a whole lot probably for… if Luke wanted to completely spin me sideways technically and get me confused and just make me say, “Oh yeah. No, Luke, whatever you say.” He could do that pretty easily. And I think a lot of marketers feel a little outmatched when they’re having those technical conversations.
I don’t know that there’s any tips or tricks to deal with that. I just hope that today’s episode perhaps with kind of getting into the meat of it a little bit at least helps give folks a bit of texture and maybe they can feel a little bit more confident as they ask those questions.
Luke Desroches: Yeah. Definitely. I hope if there’s one takeaway, it’s just that the experience, how that site functions is so much more important now since it is actually part of how Google is ranking pages. And you know, a lot of that does fall on the developers, like the site needs to be built with that in mind. It can’t just be, “We built this. We have a pretty design and we built it and it works.” Okay, and it can’t just be, “We built that site, and it loads fast because we installed all these plugins.” Great. That’s one part of it. But you know, the experience is just as important.
Carman Pirie: And I know we’re running long on time here perhaps a little bit, but I just want to get this out of my head. A lot of what we’ve talked about is like how, frankly, as a marketer, you can go on the site, and you can maybe see some of this poor performance yourself. And Jeff alluded to it. Well, kind of in some ways it depends on your browser speed too, right? Or your internet connection. And you know, we’re in a world now, a lot of people have 5G, very, very, very fast broadband connections. I think the ability for people to diagnose this just visually when they load a site has to be going away a bit. I mean, isn’t it getting harder in some way to see these impacts because of the speed of broadband and connectivity these days?
Luke Desroches: Yeah. I mean, for sure. As everything speeds up, being able to easily spot slow overall page load time definitely becomes more difficult. I mean, this third metric, this Core Web Vital, this cumulative layout shift, like I said earlier, if you go on a page, it’s pretty obvious. You can see if things are moving around on that page as it loads in. That’s I think a pretty easy one that really anyone without any technical knowledge can go on there and just say, “Okay, why is all of this bumping around?” And then that’s a question. Anyone can ask that, really. It doesn’t really matter. The cause of it could be technical. There could be technical reasons likely for that, but really anyone can raise that question. They can go on their site and be like, “Why is this loading in and pushing all this down? What can we do to fix that?”
Carman Pirie: Are there any other third-party tools or something that perhaps we would recommend to people, if they wanted to check their site more thoroughly, that they could use?
Luke Desroches: I mean, page speed I’m sure most people have used. Page speed is a tool, so it’s not actual users using your page or data based on users using your page. But it will give you a rating for largest contentful paint is on there, and so is cumulative layout shift. Again, page speed, you kind of have to take it with a grain of salt because it could test your site and for whatever reason, the tool could have been slow, and then you get a very poor rating, and then you try it again and all of a sudden, oh, you get a decent rating. So, you just need to keep that in mind as you’re using that tool.
But as they’ve rolled out these Core Web Vitals, if you’re using Google Search Console, you could actually go in there and you should have a section called experience in the sidebar, and if your site has enough traffic, and I say that because the data that it’s showing here is based on real user traffic, but if you have enough traffic on your site, it’ll show you actually… It’ll show you these Core Web Vitals, and it’ll highlight errors. So, if you have pages that are being graded poorly, for example the cumulative layout shift, it’ll show you and it’ll say, “Okay, this page took more than half a second,” or this page, it had more than half a second of layout shift, for example.
And then there’s also a page experience section and it’ll show you. It’ll give you grades for the Core Web Vitals, but also the other search ranking signals that they have, like mobile usability. If your site is using HTTPS, if there are security issues that Google is picking up. So, if you have Search Console, you can go in there and see the numbers for those things. Again, if your site has enough traffic. Yeah, it tells you right there exactly if it is failing, if you are getting poor scores, it’ll tell you exactly what the URLs are and at least give you a suggestion for how to fix those issues.
Carman Pirie: And maybe give the marketer a bit more confidence in having that conversation with the development team, too.
Jeff White: Yeah. Google says it’s broken!
Carman Pirie: Yes. Exactly right.
Luke Desroches: Yeah. Because Search Console for a while has been something that marketers have been using in tandem with Analytics, like you can hook up Search Console with an Analytics property and then it feeds more data into Analytics. But yeah, now that Core Web Vitals are so much more important and they’re part of rank, these additional sections that they added to Search Console I think would be very helpful for anyone if they just want to get that general kind of view of how their site is performing with user experience in mind. That would be a place to go to check it out.
Carman Pirie: Awesome.
Jeff White: Well, I think that’s a great place to leave it.
Carman Pirie: Yeah. I really enjoyed this chat. Thanks so much, Luke.
Luke Desroches: No problem. I enjoyed it, as well.
Carman Pirie: Been great having you on the show.
Luke Desroches: All right, thanks.
Jeff White: Thanks a lot, mate. Cheers.
Announcer: Thanks for listening to The Kula Ring, with Carman Pirie and Jeff White. Don’t miss a single manufacturing marketing insight. Subscribe now at kulapartners.com/thekularing. That’s K-U-L-Apartners.com/thekularing.
Luke DesrochesFront End Architect
Luke grew up in the small town of Lacombe, Alberta. His interest in design and technology led him to the Southern Alberta Institute of Technology in Calgary where he obtained a New Media diploma. Not too long after he found himself on the other side of the country here in Nova Scotia. Luke now lives in Halifax with his family and is the Frontend Architect at Kula Partners. Apart from work, Luke enjoys sports, video games, and honing his chops on the guitar.