015 – Understanding & Improving Core Web Vitals

00:00.00
Jeff
Hello and welcome to the seo hive. But nope already messed it up hello and almost the start over. He’s let it caliess let it count down and cut this beginning out. No big deal. Hello and welcome to the W P Seo show I’m your co-host Jeff here with my co-host pete we’re not going to talk about using the word cohost too many times in the sentence today. How’s it going beat. Ah I’m good I’m good. You know we keep talking about like how much we’re enjoying this and stuff but I still feel so.

00:21.70
peteeveritt
Ah, more good. Thanks Mike how are you.

00:29.67
Jeff
Dumb saying some things when we get started I’m not going to lie like it just feels so awkward for the first like 30 seconds and whatever who cares.

00:35.13
peteeveritt
Yeah, and if if you don’t know what we’re talking about go and listen to the first three minutes of last week’s show because we really went into this.

00:45.83
Jeff
I’m not going to name it but there used to be a very large podcast that I listen to all the time and the intro would sometimes be like 15 minutes long because then they had like commercials and messages from our sponsors. None of it was like you know produced it was just them talking and and that’s cool, but like. I just made a habit to skip 50 minutes to every podcast every time I started that and I’m saying that hoping that people aren’t doing that for us I really hope they aren’t ah.

01:10.66
peteeveritt
Ah, well yeah I should hope I should I’d hope not I’d hope not but you know I realize I mean we we do have an ad role that rund runs at the start of every every episode We can’t deny that and people some.

01:19.41
Jeff
I mean fair point but but we’re not you know, selling vitamins or something you know I mean we’re selling WordPress Seo Services I mean who doesn’t want to listen to that.

01:29.38
peteeveritt
Well and you know what? if ah, you’ll be able to tell if that ad’s not working because we’ll switch it for an ad that to sell vitamins. Ah yeah.

01:35.21
Jeff
Um, yeah, that’s true. Ah in the future. Ah.

01:41.37
peteeveritt
His here’s a gauge on how well our business is going check out the ads at the start and end of our podcast.

01:46.76
Jeff
Ah, yeah, wouldn’t wouldn’t that be something if we’re doing a show about Seo and wordpress and our our ads are just nothing I hear that sometimes too you listen to something and you’re like I lawn services. We’re okay, all right I don’t know how that affects my whatever.

02:03.76
peteeveritt
Well, you know so we we host the show on captivate fm and I actually know the guy that founded captivate he lives in Sheffield where where I live and yeah, he does and um I’ve met him a couple of times and.

02:11.22
Jeff
Oh really.

02:19.91
peteeveritt
Ah, well the fact I know i’s completely ir relevantlevant to what I’m going to say that was just a name drop. So Mark if you’re listening I’ve now I now want an increase in my commission. Please um, but the but they recently I say recently it was probably about seven or eight months ago

02:27.29
Jeff
Now no, you just get the cool points for name dropping them. That’s all you get today. But.

02:38.72
peteeveritt
Changed the the ad roles. So basically you can now subscribe to um, like affiia ad platforms through the host that we use. Yeah, so so exactly like Youtube ads were you know where they know where there’s peak ah peak listens almost or where where there’s.

02:46.10
Jeff
Oh so they just kind of inject them in there for you.

02:57.77
peteeveritt
Pete breaks to to put an ad in it will just insert an ad into your into your um podcast and you can. There’s 2 ways you can do it. You can either just let it be automatic and the ad just appears wherever the ad appears or you can put markers in the show. When we upload it to say right? Well at these times stampmps that would be an appropriate point to to put ads and I think you can put 4 in I might be wrong with that being can put a number of them in and but yeah I as as much as I love mark as much as I love captivate captivator them I will not be putting those automated ads. Because you literally have no control over you know? and ah yeah, let’s talk about something from Seo and then have an ad about erectile dysfunction appear in the middle of it. It just doesn’t it’s just not going to happen right.

03:45.30
Jeff
Ah I mean like I see the reasoning there I’m gonna I haven’t used this So I don’t know but I um I’m going to hope that they might get some sort of like Criteria some like you know categorization on that that you can implement or or some sort of algorithm things because I mean you know you.

04:00.97
Jeff
Theoretically could have that same thing doing like Google Adsense or Youtube or whatever but they’ve they’ve had the time to work on algorithms and you know logging all of your data through every activity online and all that stuff so you know which.

04:06.53
peteeveritt
Yeah.

04:14.35
Jeff
You know is always a weird topic but like I think is generally a good thing I’d rather I’d rather see ads that are in my interest than you know Mail Whatever But of yeah, the not ah ah.

04:23.94
peteeveritt
The not. Ah no I that there may be more to it than that I I Honestly can’t say I’ve looked into it I Just just it. It came to mind as ah as a feature. Anyway, we yeah, let’s ah, let’s maybe move on from from this now.

04:38.36
Jeff
Um, we we digress. Ah.

04:41.38
peteeveritt
Ah, does this now mean I have to Mark this podcast as only suitable for adults. Ah.

04:46.66
Jeff
Um I don’t know I don’t know but hey anyway yeah, back on track. Well a little bit before that though I just want to say thanks for everybody who is subscribing into your podcast podcast player of choice excuse me.

04:48.00
peteeveritt
Now anyway, anyway could you bring us back on track what we talking about today.

05:01.29
Jeff
And has subscribed and or liked us on Youtube appreciate it very much. Um, if you are watching on Youtube today you will see that Pete and I decided to dress the same I just realized so we are very matchy matchy today and these are very. Bold color choices. but but yeah we just had to had to inject that before we moved on to the real meat of the conversation today I was that you were talking I’m going. That’s what I’m wearing today I’m wearingre orange and gray too. That’s weird. Ah.

05:19.53
peteeveritt
1 you know you know the the the the bromance is real. What can I say.

05:30.99
peteeveritt
Ah, hey look I haven’t I haven’t gone for the Mike Muff the orange Mike Muff yet you’re you’re even non brand there.

05:36.81
Jeff
Oh Yeah I do have that That’s pretty that’s pretty unred I showed up to the random story I showed up to the golf course once wearing this and I have a golf bag that matches and just unrelated just happens to be these two Colors. My dad and his friends made fun of me so much for being that matchy matchy guy on the golf course and I was just like it is ° I Hear you’re not going to make fun of me for wearing a hoodie. Okay, be quiet like.

06:03.90
peteeveritt
So right now we’ve done that Jeff bring us back on track what we talking about today.

06:10.13
Jeff
Jeff’s a dhd story of the podcast. Well today you know we’ve kind of glossed over it. We’ve mentioned it we we hint about it. We rant about it but I want to talk about core web vitals today. Um, maybe talking a little bit more of the specifics because. These are things that I mean we were talking before even a lot of them sometimes the acronyms just go over my head I know exactly what they are. But I start looking at them on a report and you know you’re like oh my goodness where do we even start. So. Yeah I just thought we would talk about that and we would ah see if we could maybe put some ah some suggestions ah to make improvements in your guys’ processes in place and things like that.

06:43.66
peteeveritt
Cool cool. So first of all I guess we should sort of start by just outlining why core web vitals exist and what’s the point in them and if you haven’t heard of them before. Ah, essentially they’re they’re like 6 metrics that Google uses to score a website um from a user experience point of view but using quantifiable data I think that’s probably the the best way of explaining what they are or what their purpose is. So it’s it’s well thank you? Um, yeah, it’s kind of it’s kind of like trying to put a number on something that ordinarily wouldn’t have a number on it and creating a score out of it. Um, and the 6 of them.

07:19.70
Jeff
It’s a great way to explain it.

07:34.61
peteeveritt
So if we very quickly I do have them joined down because I know that when we’re recording we I’ll forget one? Um, um, so we have ah first content for paint so that is how long it takes the first item to load the first major asset to load. That’s not time to first bite.

07:40.17
Jeff
Um.

07:51.91
peteeveritt
Which would be the first byte of information that’s received by the browser but the first big asset. So either image or um, video or whatever it might be whatever you know whatever is a substantial asset. Normally it isn’t to do with text and and like html and that kind of stuff. But how long does it take for that thing to start loading. You also have something called largest contentful paint which is how long it takes the biggest asset to load so whatever. The biggest thing is however long how long does that take and they’re both well all of these are ah timed in time. Funny enough. The value is time.

08:26.55
Jeff
Yeah, the real on the largest content largest contentful paint see I can’t even say it I guess since we start saying it.

08:28.70
peteeveritt
I’m fine.

08:31.79
peteeveritt
We could call it Lcp and fcp but which is how most people do it. But yeah that that doesn’t we can’t dive straight into acronyms on a podcast. Unfortunately.

08:41.32
Jeff
That that is the one that I guarantee everybody listening to this show has has seen fail if you have a client with a slider plugin on their website.

08:50.21
peteeveritt
Oh yeah, yeah, let’s not go into naming and shaming rev slider on the show Shall we.

08:55.38
Jeff
Well well most of them 9 out of 10 of them but still but I’m using that more as a visual thing you can just take you know it takes up the whole page at the top. That’s the largest thing on the page and if it takes the longest you’re getting penalized if it takes a long time to load.

09:10.11
peteeveritt
And actually you’re touching on a good point here because even though we’ve only mentioned what 2 of them are the vast majority of these are stuff you can see it’s it’s quite obvious you know when you understand that the 6 of these things that Google’s using to measure experience. And these are the 6 I’m going to say at least 4 of them. You be like yeah that makes sense. Um, and then there’s one of them that can become the bane of your life which we’ll get onto at a minute and so you’ve got ah you’ve got first contentful paint largest contentful paint. You then have ah time to interactive so that is how long from hitting the enter on the keyboard hitting that key that enter stroke to the page being usable by the user and ideally that should be under two and a half seconds and I don’t think you actually get penalized if it’s up to 3 seconds but two and a half is the number they put on it. Um, you then have something called speed index which is how quickly the elements of the page are visibly being populated so that doesn’t so mean it’s loaded. It is still loading but actually the user can interact with it and alongside that you then have something called Culminative. Culmulative layout shift or lslcls even which an coolulative layout shift is you know you know how if you load a site and you’re on a slow connection or maybe you’re on like 1 bar of four g in the middle of nowhere.

10:38.60
peteeveritt
And as the page is loading. You can see like the text loads quite quickly and then as the images load the text moves around because images are loading in in places so they so you know so essentially they’re pushing the text around that is cumulative layout shift now. That’s the only one of these that isn’t measured in time. It is given a score I don’t know what the scale of the score is but it’s supposed to be under naught point one nott point one some thingss and if it’s over not point one some things then you get ah that then you know it it has recommendations to improve it. And then the final one which is the one that becomes the bane of our lives and um, we’ll we’ll go through these in a bit more detail or go through some techniques with some of these in a minute but is total time blocking. So this is to do with the way that the javascript is loading and that’s why it’s the bane of your life because you can’t always see it in the background and particularly if it’s it maybe loads in the header on. Every page of your website. But if it’s not active on that page. You maybe don’t even know it’s there. Um, so you have to Yeah yeah, you have to make sure that ah that the javascript isn’t blocking itself scripts aren’t blocking themselves for too long. Um, because that can have you know Javascript obviously. Interacts with the user with elements that the user can see so it doesn’t they don’t want it to have a negative impact on these elements essentially and that is your 6 right? I’m done now with the rest of the episodes over to Jeff.

12:00.94
Jeff
Are your heads are your heads exploding yet.

12:07.80
peteeveritt
No, if I may just have lost anybody that’s listening thinking? Oh god he’s just going to list things for the next thirty five minutes so note the 6 of them that’s them there we go. So.

12:22.18
Jeff
I’m surprised that you pointed out that the cls metric isn’t a time score and I guess I’ve just never noticed that I’ve never paid. You know enough attention to that very specific thing whereas obviously we approach Cls and we just get it to past like that’s that’s the goal is make sure it’s not failing but I’m like I’m thinking what is. Point one I don’t know what does that even mean how do you quantify that? What do what does that mean? So I mean thankfully the tests say yes or no.

12:42.34
peteeveritt
I’ll be honest with you I know I’ll be honest with you that it wasn’t until I started the sentence in this podcast that I thought I don’t know what this is not point one off. So I Just thought I’d be honest and. And and just include that there. So yeah, common to layout Shift is just a number ah total time blocking is in milliseconds and the other four are all in Seconds. So That’s that’s the and they all have their own limits and and the something other which as I say we can. We can get into um but largely speaking.

13:17.15
peteeveritt
Largely speaking if you have your stack set up correctly and your go live process sorted out then at least 4 of these items you can kind of bake into your your dev process so you don’t. Really need to worry about them too much That’s not me saying you shouldn’t check them. But actually you should be relatively confident that most of them aren’t aren’t going to affect you and then there’s then there’s another couple which you may want to just be aware of to do something about um. So where where do you want to start? How do you want to? How do you want to broach this from here. Jeff.

13:50.62
Jeff
Well I kind of wanted to you know you mentioned something funny, not funny, but you mentioned that um you know if you kind of if you think about these and you can put them into your process. You can kind of eliminate them even Happening. You know when you launch that site and finding out about it. So That’s you know. The best way to go about it. Probably I think a lot of people launch a site and then run them through a checks and go Ohh Ohh we got things to fix and that’s you know I mean yeah if if you’re there, you’ve got to do it and you should do that check but wouldn’t it be nice to be able to cross these things off before you even get to that stage and never have to go down this path and that’s and not.

14:21.60
peteeveritt
Yeah, absolutely.

14:25.51
Jeff
Shooting my own horn or tuing our own horn or anything like that. But that’s what we’ve seen this year and it’s that as we’ve you know, transitioned away from how do I how do I put this but I guess we’re not, we’re not, we’re doing some builds these days but we’re kind of trying to do builds for clients or agencies that are kind of streamlining their services rather than. Going through the full traditional like here’s your design you know having a graphic designer build a layout and stuff and you know do you approve this? Okay now we’re going to build your content. Do you approve this? Okay now we’re going to build it and oh it’s not like what we designed I know a lot of people been in that situation before multiple times. But so as we’ve done this rather than okay, what content. Do you have. What branding? do you have and then we build a site from that we launch it and we or before we launch we run these tests when we see it’s passing everything and it’s kind of like man aren’t we smart. It’s like well no, all we really didn’t do was break it like these things will work more or less out of the box. So if you launch a site and you’re seeing these I’m not trying to make you feel bad. But. Somebody probably did something. That’s not ideal and that could be you know like we’re talking about I’m using a slider or something you know any major javascript jquery heavyavy things. You know those can not that you can’t improve them by any means but those are usually ones that cause these things that fell right? off the bat. And usually get that you know Seo freelancer to let you know there’s a bad report on speed test and you’ve got to fix all the stuff.

15:46.60
peteeveritt
Yeah, now just before we go into maybe some techniques in a second. There is another thing I ah kind of want to mention touching on that point which is that.

15:58.97
peteeveritt
If you’re building your site in wordpress depending on the tools that you’re using some of the tools may address some of these issues and therefore you’ve got to be quite careful that if you’re putting solutions in place that you’re not doubling up like you’re not having 2 things trying to fix the same thing. Because that can essentially affect the load time. You know if you’ve got um, what’s jumping out at me for example is I know that some of the builders. The thing I mentioned about culminative layout shift assets moving around the page a number of the page builders actually set the dimensions of the the image placeholders in the source code. So that even if the image doesn’t load if it’s if it’s either just delayed or if you’ve lazy loaded it. The the text is already in the place. It should be as if the image was in it in situ right? So if you then if your theme does that or your page builder does that. And then you go and get another plugin in something like Perth matters or your your image optimizing your image optimizer or your Cdn cause they’re normally the places where it that would address cumin layout shift. Essentially what all you’re really doing at that point is doubling or tripling up the the sort of fix. Which isn’t necessarily it only needs to be fixed once and that’s what’s going to get you the the quickest time I’m not saying it’s going to break it or be ridiculously so but if you’re trying to build something that’s optimized and efficient. You need to understand what is dealing with which of these so that you don’t double it up. That’s all I’m trying to say.

17:26.70
Jeff
Yeah, and kind of on on that same note I also have to be careful when you put these fixes in place. So some we haven’t really talked about fixing them yet. But a lot of times like um, is it proof matters that you can, um you can hide a lot of the scripts and stuff that aren’t being used and so what I’ve seen happen.

17:39.32
peteeveritt
Um, yeah.

17:44.28
Jeff
Several times as people will go through and they’ll remove all the scripts that aren’t needed on the homepage. Which admittedly they shouldn’t have been on the homepage because they weren’t being used but they do it to the whole site. You know by default and then find out Well the you know contact form plugin isn’t working or some other you know optins deeper in the site that you don’t look at when you’re running the speed tests.

18:00.52
peteeveritt
Um, yeah.

18:04.13
Jeff
You know those things have trickle down effects when you start eliminating scripts and all that stuff like yes, you need to do it but you also need to be super careful and don’t go ripping things out and then not checking every other feature because a lot of them use the same script libraries or Javascript libraries and you know various resources like that.

18:18.72
peteeveritt
Well and and that is a very good point because your speed test isn’t sitewide your speed test is Url- specific so you should really be testing this on a number of pages within your website if you’ve built the web we we were just joking before we’re having a bit of a chat before the show.

18:27.86
Jeff
Um.

18:38.23
peteeveritt
And we were talking about how you you in particular were working with somebody that was proposing that they weren’t using a template to build like a 96 page website so you’re going to have 96 individual pages rather than maybe half a dozen templates populating 96 pages right? yeah.

18:50.18
Jeff
Um, and and it was this. It was the same layout. It would have been perfect for 1 template. Yeah.

18:56.54
peteeveritt
Yeah, you go? So um, ah so yeah, if you’re I’ve lost my training thought now. Oh no, yeah, so if you’re doing this. You should at least be running a speed test on at least one of every template that’s in the in the site like and I realized that you know you can choose 1 where the images aren’t quite as aren’t quite as. Big as on other pages or this that either it’s still not a rule of thumb. But as a minimum that’s really what you should be doing um because yeah, these tests are page specific not sitewide so just something else to bear in mind.

19:27.13
Jeff
That’s a really good suggestion and and honestly I’m going to take that it added to my process because we’ll we’ll do that We look at from a slightly different standpoint and we will test the high priority pages The ones that we know customers are going to or they you know things like that they need to be used. But that makes great sense to also run your template because that theoretically could be a vastly different framework than your homepage or your other pages. You know you could have built a layout that has something totally different. So That’s a really,. That’s a really good tip.

19:58.82
peteeveritt
So ah, right, let’s get let’s get on to a few a few tips with these now generally speaking the first content for paint and the largest content for paint. Generally there to do with images I would say um. Unless you would disagree Mr. patch.

20:18.12
Jeff
Um, no I think that’s pretty accurate I was I’m sitting trying to think of like an example off top my head and you know the slider like I was talking about. But that’s an image or video same thing. So yeah, it’s going to be large graphical elements typically.

20:28.46
peteeveritt
Yeah, Actually there’s a there’s a there’s a very good point video. Let’s ah, let’s just touch on that a sec. Um right? Where do you Stand. On WordPress hosted videos Good I’m please you said that we didn’t check this before before we spoke.

20:43.80
Jeff
I don’t do it. You just don’t okay I don’t want no okay well I now I have a feeling you’re going to libra on something else, but okay, we very very very very very. Very very rarely will upload a video to the wordpress site couple times we have because it’s like literally at 600 k video. That’s just a loop in the background or something and you know they don’t want the whatever shift or flash that might come if Youtube was pulling it up and and these things change all the time. So. You know it’s hard to hard to say um, but generally speaking if there is a video that is intended for somebody to watch I recommend somebody put it on Youtube or Vimeo or a Cdn um.

21:31.16
peteeveritt
Yeah, no, no yeah, absolutely no I fully agree and whilst whilst this isn’t the Wp Server show it is I think it’s key for people people to understand that.

21:32.83
Jeff
And I can I can keep I can keep elaborating on some of the whys and stuff like that. But the biggest thing is get it off your site.

21:49.40
peteeveritt
Ah, web so web servers that we use these days are exactly that they are web servers they are there to they’re designed to serve web files quickly and efficiently to the user and the vast majority of these virtual cloud platforms that we use whether it’s cloud ways or run cloud or digito or whatever it might be. That’s that’s what they. Ah, and a lot of devs a lot of agencies have now grasped the fact that they’re web service so they’re not email service. So instead you use another service to deliver transactional email like sendgrid or postmark or mailgun or whatever it is and that that’s being grasped and taken and is absolutely fine. It’s kind of the same with video crunching video and delivering it efficiently through you know over the air through ah you know through a weakening web connection is a very difficult and server intensive thing to do particularly if you’ve got a site that’s got. Hundreds or thousands or tens of thousands of concurrent users and they’re the kinds of things that will just eat the resource of web servers and the site will fall over so by using something like Youtube or Vimeo or wistia or ah. Bunny.net or whatever it is you you can choose where you you know how you want to set the stack up but just get it off your web server because your web server isn’t isn’t designed for that. But when I was ah a dev working at an agency so we’re talking fourteen or fifteen years ago we had ah.

23:18.91
peteeveritt
We were building a series of sites for ah the charity commission in the uk and they wanted to host video on theirs and didn’t want to use a service I we didn’t have as many options as we do now but they didn’t want to host it on Youtube essentially and so we quoted them in Adobe. Of course it was called an Adobe something server I forgotten the name. Anyway, it was going to be $3000 a month for the for the server to be powerful enough to do everything it needed to do with the video and so keep on serving the website so it was just at that point it was like yeah we don’t care that much. We will put it on youtube.

23:53.52
Jeff
Um, and I imagine that’s not even taken into account the traffic and everything you’d be seeing in a few months and where you’d have to go from there. Ah yeah, yeah, yeah, ya yeah, it kind of had this conversation on a call last week with one of our customers and.

23:58.29
peteeveritt
Yeah, so yeah, so just just anyway. Yeah so that’s that’s that.

24:08.41
Jeff
You know they were they said they had a client of uplin video and they were like you know explaining it to him and and I said you know the 1 thing you see when you go on Youtube right? you cook play boom you’re watching that video the quality may not be perfect yet in 10 seconds it’s going to be Hd but like right off the bat. You’re getting the video in an instant format. When you do it on your website. It has to download all that video it doesn’t stream it the same way you know Youtube and Vimeo and all these you know they’ve got their own streaming services and stuff like that and it crunches a video and it’s mind blowing like I’m not a professional video editor. But I’ve been doing it a long time and I have a decently powered pc here. It could take. Hours to render a video in in Hd let alone 4 k sometimes and you can upload that to Youtube you First of all, you can upload it faster than you can render it and then it will render. You know they’ll optimize it and they’ll do all this stuff on there faster than you could ever render it on your computer and it is absolutely mind blowing and so I just said. let them do it for us like let them you know I mean they they’ve got this amazing system and they’ll do it and you know potentially we’re not going to talk about now but actually good. Good. A topic idea for the future is actually using ah youtube but everything to kind of benefit your website’s Seo but you know there’s kind of a trickle-down effect too. There. So there’s benefits to it. Beyond just improving your website speed or not hindering it rather.

25:24.87
peteeveritt
So assuming that you’re not hosting self hosting video that would take that asset type out of the largest content for paint and first content for paint metric. So what are your sort of tips. What are your best practices on the delivery of. Images which is going to affect these two things.

25:48.39
Jeff
Well one obviously you need to optimize them. Um, and again not to take a lack of dayss goal approach but WordPress is doing a much better job with this with jpegs these days. They also resize them down to like 25 60 or something like that. So. It’s still very large, but it’s the usable. Um, yeah in a perfect world. You’d run something like short pixel or Smosh or you know there’s all kinds of different image optimization plugins and these are great because when you’ve got clients accessing them. Oh Pete’s laughing at me for something when when you’ve got oh you that one? Yeah, ah.

26:18.12
peteeveritt
Now I was just thinking about you. You answer.

26:25.76
Jeff
When ah, when clients are using them. You know you can’t expect them to optimize their images. You can’t expect them to crop them. You can’t expect anything. You know you could try but trust me, it ain’t going to happen 9 times out of 10 so you put these in place and you know you can throw anything up there. It doesn’t if your if your client’s taken. Ten Megabit files ah or megabyte files off their phone and uploading them. Ah, plugins will take care of that.

26:48.95
peteeveritt
So his here’s the thing I find is that I’ve found that I’m now if you’ve got this stuff set up properly I’m now telling clients how what size their images should be over rather than what size their images should be under.

27:05.88
Jeff
Um, yeah, you can always go down.

27:07.89
peteeveritt
You know we can deal with an image that you put in that’s too big but we can’t scale it up if it’s too small. So so right one last thing before we move off off images. Um, where do you stand on.

27:14.25
Jeff
Yeah yep, had this conversation about an hour with somebody. Ah.

27:25.50
peteeveritt
Declaring image sizes in your theme.

27:28.73
Jeff
Um, um, where do I stand This is like you’re making these sound political like I’m running for WordPress wordpress office that we’re not, We’re not going there on this podcast. Ah.

27:33.98
peteeveritt
Well are you leftering? Are you whitewing come on geoffrey.

27:44.30
Jeff
Okay, to answer your questions specifically well as specifically as possible I don’t think we typically do that in the theme I could see how you could how you would it just not part of our process now. But um, what I do is in in wp rocket. That’s one of the options is to to have it set and um I know that we would we would do that all the time. Unless it was Divvy up until recently because for some reason it wasn’t compatible with Divvy for a long time. But I think it is now um and it does it helps the the Cls big time big time having those in there and you I mean you see it even with the fast connection you load a website and it even if only takes a second boil boying boying boying things pop up. That’s not good I mean. Doesn’t bother me at all. But that’s what Google’s checking that’s just that’s the web core vitals right? There core web vitals look mixing up the words already.

28:27.75
peteeveritt
Ah, okay, he’s okay, yeah so I see where you’re coming from so I meant declaring image sizes in light functions. So that when you when you upload it wordpress makes maybe ah half a dozen a dozen versions of the image at different aspects ratios. Yeah.

28:33.61
Jeff
Oh gotcha.

28:41.68
Jeff
Yeah, added exactly so the the the various cropped sizes and stuff like that. Um I mean when it’s necessary. Yeah I mean you know if there’s a specific specific 1 a lot of the tools now are soft cropping images through Css which is really helpful.

28:57.93
Jeff
So that’s that’s like really great being able to just say hey we want all of our featured images. You know in a 3 by 2 or 16 by 9 orientation and then it doesn’t matter it just displays that in a grid and it you know zooms it into fit and and that works so much better than trying to stretch um and do all that or different sizes.

29:13.42
peteeveritt
Yeah now I do agree with that I do agree with that and actually the the benefit of having tools that do work in ratios of course helps with your helps with your responsive elements. So that stuff just looks the same regardless of the.

29:17.20
Jeff
Doubt.

29:27.55
Jeff
Um.

29:30.42
peteeveritt
Height or width of the screen or whether it’s one column or 2 or 3 or whatever it might be um so.

29:33.33
Jeff
Yeah, like we would set up sites right? and we’d have 5 or 6 pages and we’d get all the images from the designer, the client and heroes you know. They could be any size but very commonly they’re 16 by 9 they you know like like a widescreen television. That’s a very common size fits well with screens blah blah blah um, and so you know for like sometimes we wouldn’t set that those are just the images we’re using and they filled the space perfectly and great and then you hand it off to the client and they would upload a ah. Portrait image of you know their their front desk coordinator on her bio page and it’s like okay you got to scroll for screen links until you get to the bottom of it. So yeah, it’s nice when you can just crop that and it just crops their nose like this if they use that type of picture. But at least then it’s really obvious what’s going on.

30:19.74
peteeveritt
Yeah I mean look, you’re not gonna there is a point that you’re gonna get to where you cannot stress enough to a client to not put a portrait picture in a landscape hole or vice versa and stop them from doing it at the end of the day they’re the squidy organic human sat in the chair if they’re going to. Try and Chuck the wrong size image and they’re going to try and do it but you you can the certain things we can do to try and try and make it better most of the time you could look now I was just going to say you can only be as good as the weakest link and.

30:48.55
Jeff
Um, I actually just noticed sorry go ahead.

30:54.35
peteeveritt
If that weakest link is the squid you organic human in the chair. Well then yeah.

31:00.41
Jeff
You sound like a speaking of ah living in Sheffield you sound one of like 1 of doctor who’s villains right now. Ah yep.

31:06.70
peteeveritt
Hey I hasten to add some of doctor who was filmed less than 10 miles from where I’m sitting right now.

31:13.65
Jeff
There are many I but every time I was watching I just caught up on all of that. There were many references to Sheffield and so one of the girls called I from Sheffield might and it’s like I don’t know what that means but okay, cool. She’s from Sheffield mate come on man. What are you thinking like ah.

31:17.85
peteeveritt
Yeah, yeah.

31:26.61
peteeveritt
Um, that mean that means she’s local you talking about and and another claim to fame at the quarry scenes in the latest mission impossible film were filmed it also in the peat district which is about it’s a bit further away from where a doctor who was filmed about twelve thirty maybe forty miles from here. And it was at the the end of the garden of somebody I went to university with in fact, during one of their filming breaks their kids were looking over their garden fence into this field that goes out towards the quarry Tom Cruise’s helicopter landed. He came over and said hello check that out.

31:59.59
Jeff
Um, yeah, that’s pretty cool excuse. We’re not were they. We’re not worthy. Okay, before we move on to that the image we’re still talking about the image size real fast but I saw something we were talking about. Um.

32:03.42
peteeveritt
See I’m I’m just dropping the names all over all over the place in this episode. Ah okay.

32:17.76
Jeff
You know, client kind of being the weakest link they’re going to upload what they’re going to upload I noticed this last night and it’s probably been there for years so feel free to laugh at me guys. Um, but in Acf in the image field when you set one up into your template or whatever. Um, you can put restrictions on the type of error the size of images you upload so you could put. You know must be 500 pixels wide and I mean I’ve done that and actually you’ve probably seen on seo hi I’ve done that like in little notes on some of our custom fields. It’s like hey we recommend you use this size but you can actually make that a requirement. So if they upload something. That’s only 500 pixels wide. You know it’ll air out and say sorry you need to do. You know wider or whatever the specifics are but I thought that was pretty cool and yet another way to try to make it as foolproof as possible.

32:58.64
peteeveritt
Absolutely, it’s a shame. They can’t say light must be a minimum of 500 pixels wide and must be wider than it is tall because that would.

33:07.55
Jeff
Well, you might you might be I imagine you could probably fit set that up I didn’t spend enough time looking at. But I think there’s probably a something I could I mean you could you could figure out whatever the minimum.

33:13.28
peteeveritt
Me. Okay, okay, well.

33:23.44
Jeff
For 500 pixels wide would be and that would be your minimum for the vertical. Yeah.

33:26.64
peteeveritt
For the height I suppose I suppose ah right? So let’s ah feel like we’ve done a bit of a kind of it’s been a bit scattergun but a bit of a sort of media image video e type section now. Ah, so let’s let’s because there is more to this than just images and videos. Um, yeah, put it put it all at the top of the page right? Do you want to go through your thing about deferring Javascript.

33:43.86
Jeff
Yeah, well, it’s simple. You put all the Javascript the top of your page and you’re done.

33:57.00
Jeff
Um, we generally will flat out just a further javascript usually works fine but then of course we have to go back in Jack because you never know you never know deferring. It is usually fine delaying. It has. Ah, lot problems quite often and I’ve seen the biggest one on mobile have you ever seen. You know how some sites will have a like a loading icon or something like that. So those yeah I don’t know why people able use it. But I still see it a lot.

34:25.33
peteeveritt
Um, yeah, well that was that was the old school way of getting around this.

34:34.39
Jeff
And I have worked on sites a lot with it. It loads and it just keeps loading and loading and loading and loading and loading and we’ve got these emails and I’m going checking it loads fine when we realize if you hit enter and then you don’t touch your phone. It never sees input and it never tells the website to load the Javascript. Ah. On a computer It’s not that big of a deal because you’re moving your mouse around and and that triggers it but on the phone sometimes you’ll hit enter and you will not touch your phone and it just sits there and so that’s just you know I’m sorry it’s more of a more of a cautionary tale I suppose and a tip to improve your speeds. But.

35:01.50
peteeveritt
Ah.

35:06.51
peteeveritt
No, no tell me about it I’ve had just like you’ve had some discussions with clients about some of this stuff already I’m currently in a email table tennis exchange with a client of ours who um, we’ve built this like. Interactive Slider. So there’s There’s a there’s an svg on one side of the page with touch zones or hot zones over the top of it and depending on where you have ah where you touch the where you click on the mail click on the the image it changes the slider to a specific slide of text I hasten to add no images.

35:37.55
Jeff
Physical.

35:39.96
peteeveritt
Of text. Ah right next to it and it changes the background color and whatever to to tie it with the section that you’ve clicked on so it’s like a pie chart thing with more information. Essentially um, they have asked now 4 times whether we could do something else on hover and. <unk>ve had to say no because you can’t hover on a touch device and it’s like you know how many times I feel like I feel they’ve literally they’ve replied I haven’t ah it’s It’s the ball is now in my court I now need to reply to them. They’ve emailed again asking the same thing and I feel like asking them. Going my reply going back to them and saying please hover your finger over your iphone and tell me what you click on tell me what happens without touching it just get your phone and just hover your finger does anything happen. No because you need to touch it that is Click. There is no hover state On. Mobile Anyhow and breathe.

36:40.50
Jeff
I love when when people come up with ideas and I do I mean like I genuinely love it. But then as like somebody who has to then try to put it into action. You know you have to go like okay you know, dear dear Joe the plumber love you bro. But. You’re not a web engineer. You’re not coming up with ideas better than anybody else, right? like that that sounds like a good idea. But there’s a reason it doesn’t exist I promise you? ah.

37:04.64
peteeveritt
Yeah, absolutely absolutely. Um, so anyway, yes that you’re dead right? The the whole Javascript thing deferring. It is generally okay, but please go and do do your own checks. So um, ideally you want your.

37:21.33
Jeff
Um, and it.

37:23.31
peteeveritt
Ah, total blocking time to be less than one hundred and fifty milliseconds which isn’t long when you think that that includes your time first byte and then loading the scripts. So yeah, your your blocking time needs to be quite limited in which case deferring the javascript is a good way to. To reduce that within the page load.

37:45.27
Jeff
Yeah, it’s a little bit of a segue here pete but it’s funny that a couple years ago I saw um when looking at reports and trying to action these things and trying to improve scores. The biggest factor that we could do would be fixing the images just optimizing them and making them not you know, be ten megabytes ah of a webpage look and I’m seeing this less and less now and still getting scores in the ninety seven ninety eight passing all these core web vital tests. But then like a little warning that the page load is still pretty big like we’ve got 1 client that just they lots of images and a lot of transparent pings for their design so they’re just inherently massive and their whole front page is like nine megabytes and to me like it’s. Oh my gosh like I’m like no like it should not be that big’s oh it drives me nuts but it’s getting it’s it’s passing like we flying colors and I’m just like okay so I guess Google’s finally accepting that everybody’s got broadband now and it doesn’t make as much of a deal but like but two years ago if your website was three megabytes

38:44.22
peteeveritt
Yeah.

38:44.78
Jeff
Boom It was failing like it was it was just not going to load or I’m sorry I wasn’t not going to load. But it’s definitely gonna be penalized and and now lessness I’m not saying ignore image sizes by any means but kind of like I was earlier going? Yeah you we kind of let wordpress do their thing and then we don’t use a bunch of like overblown png gs that usually is more than sufficient. Um.

38:49.28
peteeveritt
Yeah.

39:04.31
Jeff
And I’m kind of interested I’m I’m very surprised to see that that tends that seems to be the data seems to be agreeing with that rather which is interesting.

39:10.75
peteeveritt
Yeah, well that kind of brings us on to really the last two that we’ve got left isn’t it which is speed Index and time to Interactive. So The the Speed Index. As as I said earlier so this is kind of like how long it takes for the html and text assets to load. So Not none of the media. The additional media stuff on top of that. But within that load you have your initial javascript load the time the time blocking stuff that we’ve been talking about and you have your style sheets So whilst. Yeah, you’re always going to get the biggest bang for your book by optimizing your media Hugely, you know nothing in code unless you’ve got a really badly coded website or a suppose exceptionally tiny images. Um, they’re always going to have the biggest impact but when it comes up to things like Speed Index I E stuff that doesn’t include media.

39:49.72
Jeff
Yeah.

40:02.36
peteeveritt
This is where things like minification come in which is essentially removing all of the spaces out of your style sheets and javascript documents. You do have to be quite generally speaking I would say style sheets are safe to do we. We normally minified those straight away html is normally safe to do. Please test anything that you’re minifying just to make sure it hasn’t broken anything. Don’t say oh pete said it at work. So it must be all right? Um, yeah, you gotta test it but generally speaking those 2 are okay minifying javascript though can cause some issues and that is really something to be to be careful about.

40:28.25
Jeff
Um, yeah.

40:41.29
peteeveritt
Large it depends how how well where the Javascript’s coming from if you’ve coded all the Javascript yourself and you understand it. You’re normally quite safe to if you’ve pre-compiled the Javascript. So you’re using something like gulp to to compile it. Ah, through the dev process then it’ll absolutely be fine because you wouldn’t have launched it if it wasn’t but if you’re pulling in lots of Javascript from lots of different plugins and they could be injecting the code onto the site in different ways. That’s when you can get into a bit of hot water. So again, if you’ve got a general tech stack. You can play with this stuff and. Get a reasonable understanding of what’s going to work for you and what’s not if on the other hand, you’re relying very heavily on plugins then it might be worth just either refraining from it or just running the test without it or running it with it and see what’s breaking. But yeah, that’s generally where I see you’re going to get more of the issues.

41:32.91
Jeff
Agreed and I kind of don’t want to say anything else about it I don’t no no no I’m I’m getting but I don’t I don’t want to be judged for saying this but I normally don’t bother with those.

41:37.89
peteeveritt
Fair enough fair enough.

41:49.47
Jeff
And it’s just because it has introduced so many problems and everything you said spot on, especially like like css usually fine html is usually fine Javascript is where it gets sketchy but it just the reality of I guess our arrangement with clients and agencies is I mean we’re managing hundreds of websites and so. If we go you know hardcore and and put all those in and then the client goes and adds a plugin. We’ve created ah another support ticket for us and it didn’t really make a big enough difference to justify it so you know what I mean it was just like all right? we got to. We got to try a little more carefully with the way that works. In theory yeah, it should be minimized I think best practice like you mentioned like with gulp right? if everything is compiled specifically for that then perfect. Yeah.

42:34.60
peteeveritt
Yeah I mean look that we we we getting back to a point I was going to ask you about how you how you’ve experienced doing this on a larger scale but I’m aware we 42 minutes into this episode. So maybe that’s ah, a separate topic for a separate day. Um, but.

42:51.21
peteeveritt
We are verging around the the topic here that Seo is really a ah displacement exercise. So if you are struggling to optimize some of this stuff and just the report for your site is it’s not bad, but it’s not brilliant. There’s room for improvement and you’re struggling to get it any higher. There’s absolutely nothing stopping you going and crawling or scanning the the first 2 or 3 websites in the Serps and seeing what their results are because if they’re only scoring ah a grade c or d and you’ve got yours to a b well hey, that’s great. That’s that’s job done. It doesn’t matter if you get to an a you’re already in.

43:19.42
Jeff
Um.

43:28.17
peteeveritt
In front of them for this metric I’m not saying that just core web vitals will make you rank above them. But this whole Seo piece is. It’s a displacement game in order for you to rank in top in place one everybody else needs to shift down one and you because you have displaced them so you just need to be better than the competition. You don’t necessarily need to be. You know ah a star hundred percent all of the time. Um, and I think that’s that’s that’s a key. You’ve got to understand the context of the the fight that you’re you’re in I think that’s really what I’m trying to say with that.

43:58.82
Jeff
Yeah, yeah, what’s that cliche like you know, aim for the stars and hit the moon or something I don’t know I’m probably butchering that but what is it help me out I feel so stupid right now. What is it.

44:13.43
peteeveritt
Ah, ah know it’s weird Californian thing where you’re smacking the moon I don’t know.

44:14.84
Jeff
Come on. That’s a thing don’t make me Google it. Yeah well I think I think I made the moon man they can make me want to Google it right now. No one did the middle podcast though. But god I feel stupid somebody somebody write in the comments. What this what I’m trying to say here.

44:30.70
peteeveritt
We’re not live. Nobody’s gonna write in the car. The only person in the comments is me oh those? Yeah okay.

44:34.25
Jeff
You know I’ll see it later I Still want to I’m not going to figure it out by then I’ll forget by that I’ll forget by the time we finish recording this but somebody will respond and correct me and I’ll be like thanks and you know reach for the stars and you’ll land on this I don’t know land on the sun that would be death I whatever. Ah, anyway you know. You should try but like you said yeah, it’s a displacement thing I like to refer to as a tiebreaker you know and so don’t lose sleep. It’s important. Yes, you should You should work on it. Yes, you should apply these principles. Yes, don’t lose sleep over it.

44:56.18
peteeveritt
Yeah, that’s good. That’s a that’s a good analogy. Yeah, that’s another good way looking at.

45:07.14
peteeveritt
Not not generally not unless that your competitors have aced these things and they are important therefore you you need to? yeah but you’re right.

45:14.60
Jeff
Yeah I can’t tell you and I’m saying this as an s seo guy now. But like I can’t tell you how many times I’ve gotten emails from like you know Seo freelancers for clients and they’re going well hey it’s you know we need to get to Cls to to 99 it’s like it’s a 98. It’s fine. It’s ah, it’s fine, but how much are you? How much time can we apply to this and what’s the budget and like oh no, you should just have it done well okay.

45:40.21
peteeveritt
Well, ah I think I think that brings us to to a bit of a wrap um on on this I ah, hope hope you found it useful I think the only other thing that we need to say well we need to say 2 things. Firstly, we want to thank. Listeners who have joined us so far on this journey. We’ve now done 15 episodes this episode number 15 and we’ve had a bit of a blast. We do have some other kind of ideas that we want to go with the show but we we wanted to get a sort of bedrock of episodes in that were just me and Jeff. Just getting to getting some banter going talking about some of the big issues. Some of the things that we think would add most value to agencies and it’s been a blast for the last 15 episodes. So we’re gonna be keeping on. This isn’t goodbye. This is we’re we’re gonna be around in the new year but we are gonna take a break for a couple of weeks over over Christmas and New Year um and so we want to say thank you to everybody. That’s listened that sent this message to support that subscribed. That’s you know, um, commented on things and joined us. Ah you know, shared on social media. All that kind of stuff it really does it genuinely genuinely from while I’m speaking for myself I was gonna say from both of us. But it really does mean a lot.

46:44.28
Jeff
Over.

46:52.90
peteeveritt
You know we’re not a huge show. We don’t have massive following so every time it pings and somebody has shared something or commented or liked or subscribed it. It really does give us the feels. Um, so thank you for that and the second thing is to say that we will be back in January with some more shows. But we do want to wish everybody an exceptionally happy Christmas a new year or holidays. Whatever you believe in and whatever this period of the year is make sure you get some downtime make sure you get some rest get some recharging going and we will be with you in the new year

47:27.21
Jeff
Amen Pete said it that is that’s great. We thank you guys so much and we are very much looking forward to the holidays and picking things back up in the new year

47:37.62
peteeveritt
Have a good one everybody ah, we should have done this in Christmas jump and actually that would have dated the episode thinking about. Although now if we’ve just dated the episode by I wish and everybody happy Christmas. So um, yeah, we met maybe this should have been orange and gray Christmas jumpers I don’t know if I’ve got one of those.

47:44.38
Jeff
Um, that’s true.

47:51.13
Jeff
Um I have a couple really good ugly holiday sweaters only 1 ne’s offensive

47:55.98
peteeveritt
Yeah, let’s let’s then I definitely would have to censor this for adults have a good one everybody we’ll see you soon.

48:02.48
Jeff
Ah.