[FULL BUILD] Lightspeed Part 4

0:00:00
Alright guys, we are going to make this modular and we’re going to work on the speed. The speed part sounds more fun to me so I’m going to do that first and then I’ll tackle the making it modular goal. I have a speck of like wheat then lodged in my throat so we’re going to do our best at this. Okay so I don’t think I need that open right now. First thing we’re going to do, I already did the test, the initial test, the private window, Google page speed insights, we’re run again just to see where we’re at. Yeah, 86 and we’re at 99 on desktop. So I’m going to just put this out of the way here and first thing we’re going to do is we are going to go into grid pane and we’re going to turn on some caching and then we’re going to see what that does for us. We don’t have a lot of third party scripts or anything like that installed so it should be minimal like the speed optimization but you never know. So let’s go to sites and let’s go to what is this called light speed, digital gravy.dev.

0:01:17
Okay. So caching, we’re going to turn on CGI page caching and we’re going to turn on object caching. And that should take care of that. We’ve already got that on. Okay. All right, cool. So we got those updated. I am going to turn on the grid pane redis object cache plugin as well as the engine’s help the engine X helper plugin my brain always reads that is in jinx. Okay, it turned on automatically. So that’s good. Okay, perfect. All right. So we’ll close that and we will visit, let’s visit the site over here and okay. So we should be good to go.

0:02:08
Now let’s see. Let’s do another analysis. Now I don’t think this is seeing the cache version right now. So we’re going to go ahead and just get started. So I’m going to turn on flying press. I’m going to go into settings and cache. I’m just going to bypass the cache because we’re already doing caching at the server level. All right. To minify and optimize CSS files, we can generate critical and use CSS, I believe. And let’s just do that asynchronously. Save. I don’t think that’ll break anything. Minify JavaScript preload links. We’ll come back to defer some JavaScript if we need to or load some scripts on interaction. We’ll optimize the Google fonts.

0:03:01
Lazyload any images. Live with and height attributes if they’re missing, preload critical images. All that’s good. Database all that’s good. Okay. So we will visit the website. We also don’t need, I have WS form installed. We can deactivate that because we’re not using a form system right now. WP grid builder. I’m not using that so I can deactivate that. And short pixel image optimizer is fine. Rank math. I’m not using, but I’ll keep it installed. Oxy extras, engine, engine X helper, MetaBox, all that’s good. Happy files, flying press, advanced scripts.

0:03:49
Okay. Oh, perfect. All right. So. I’m going to go in to this incognito browser. It’s feeling pretty snappy, isn’t it? All right. Let’s analyze this again. 89. All right. Let’s take a look at where we’re struggling. We got a cumulative layout shift happening. We’re going to need to try to find that. That right there is going to, is pushing us out of the 90s, guaranteed. It’s happening on desktop too.

0:04:26
The desktop has to drop two points. That’s fun. Okay, so we need to find out where that cumulative layout shift is happening. Properly size images. This MacBook resource size is 169. I’m going to go to GT metrics. Lightspeed.digitalgrevy.dev. All right. So we’re looking real good on desktop on GT metrics. And GT metrics is not detecting a layout shift. I’m going to go ahead and go to the waterfall and see what we’re looking at. So this 19.3K, 170K for that MacBook image. Did I ever optimize that with short pixel? There we go. Yeah, that was already optimized and it’s still that size.

0:05:30
So we’re going to need to try to address that. Everything else is like, here’s JQuery. What’s this? Okay. Press preload. Okay. Oxy extras. So the flickety slider. I can just come into flying press. And we’ll go to JavaScript. JavaScript’s on user interaction. Yeah, you can just put in like I can put in flickety here. And I believe that’s going to help that out. So we’ll go to the front. So there’s that flickety slider.

0:06:29
We’re going to load that here. I’m going to make sure we’re not seeing a cash version. It’s still functional. Let’s see if it actually, so when you delay script until user interaction, basically these tests that run like the bots that crawl the page, they don’t interact with the page, so they don’t trigger scripts that are supposed to load on interaction. And it helps your scores out. And it makes sure that the page does load as quickly as possible. So that went down to 572 milliseconds. We’re going to go back to the waterfall. And I’m going to see if we can flickety still in here. And it doesn’t appear that it is, that did appear to improve things. So let’s see if we can go to page speed insights and retest. I still need to know, and it actually could be the slider causing the layout shift. That carousel.

0:07:34
I wonder. It should give me a picture of what’s causing the layout shift, but it’s not always accurate. So you’ll be chasing a ghost, basically. OK, the score dropped. It’s the cumulative layout shift that’s killing us. Ah, here we go. Content layout shift. All right. So what do we got here? That’s the slider. Look, it’s highlighting like nothing over here. Also on that slider. It’s highlighting a whole bunch of nothing. So what I’m going to do is carousel builder, carousel builder. It’s the previous and next icons.

0:08:29
Watch this. So watch this. I’m going to disable the carousel. Let’s open. Let’s edit this with oxygen. I’m just going to display none the carousel, and let’s see what happens to our score. All right. So here we are. I’m going to open the structure panel. Testimonial carousel. Layout display none. Save. I’m going to go to the website. OK, we need to clear the cache. So I’m going to go back into the dashboard.

0:09:04
And I’m going to go to settings here, flush cache. And I’m going to go to engine X helper. And I’m going to purge entire cache. And then I’m going to refresh the page. OK, it is gone. And now I’m going to go run that GT metrics again. So we’re going to retest in GT metrics. OK? Still looking good there. I’m going to rerun page speed insights. There you go. Huge, right? Huge difference. So now we’re passing Core Web vitals. Excuse me, we’re passing Core Web vitals.

0:09:52
We could still do some improvements, but I don’t really care at this point. Job is done. So that carousel is causing, so I’m going to have to go into the OxyExpress group, ask them, what’s going on with this content layout shift, and see if we can fix it up. I might have to go with a different kind of carousel. Let me try one thing. Let me try one thing. I want to give it an explicit height. So none. So carousel build their size and spacing. With I’m going to give it 100% and height, we’re going to do VH20.

0:10:41
And I’m going to, I don’t even know if you can do this. Column. No, don’t do that. Center. There we go. And then I’m going to take off the owl L. Save. I wonder if giving an explicit height like that is going to prevent, because it might be loading an empty carousel and then pow, like expanding it when the stuff inside it loads. I don’t know what it’s doing exactly. And it could be, I honestly don’t know. But I’m wanting to get, sometimes giving things and explicit height like that.

0:11:23
Basically, the height is red, and so the height is reserved in the design. And then whatever loads inside of that height is fine. It doesn’t cause a layout shift. It’s when there’s no height and part of it loads. And then the rest of it loads, it can cause the layout shift. That’s the theory anyway. So save that. I’m going to go back and purge the cache. I’m going to go back to reddest objects cache and flush that. I’m going to go back to the site and reload the site. OK, the carousel is back. Oh, did you see that? It loaded it off the screen. Sorry, I hate having little stuff like on my throat.

0:12:13
It’s loading it off the screen. That’s the layout shift right there that’s happening. I guarantee it. Maybe I’m wrong. I mean, we’ll see. We’ll see if giving an explicit height helped at all. What I can also do there is, before we do this, probably, I think these are, I just need to let me just do layout overflow hidden. Let’s make sure overflow doesn’t cause any issues there. That should be it. I think that’s all I can do there unless I get extra help from oxy extras. So engine X helper, purge entire cache. All right, and then we’ll reload.

0:12:59
Yeah, it’s loading that thing over there. It’s loading the other slide way off to the side. All right, we’ll retest this. So I don’t know. I don’t know what’s about to happen. We’re going to have a 305 milliseconds. All right, let’s go to here. Let’s see what we get. This may drop again significantly and now that that carousel is back in action. Explicit height seems to have worked. Unless this didn’t load the carousel. I wish it would show me the entire page. Here’s what we’ll do. Here’s how we’ll know for sure what’s going on.

0:13:53
So I’m going to go back up here. And I’m going to do this. Light speed trader. Let’s do. Whoops. Wow. Text secondary. No, no, no. Text secondary. OK, save. Perge back to redis flush. Analyze. So if that color changes and we still have a good score, then we’re good. Boom.

0:14:40
We’re fixed. OK. So we’re 100 on desktop. We’re 98 on mobile. But it is still showing us. Actually, we still are. We’re still failing cumulative layout shift. So I’m going to have to ask about that. But this is good enough to show the client for now. And I’ll just tell them we’re working on the cumulative layout shift, which actually look was fixed on desktop, so it was no longer happening on desktop. So it’s only happening on mobile. And I’ll pull up. Let’s do CISI real quick.

0:15:25
I want to see what we’re looking like. So I’m going to go digital here. Light speed. Digital. Bravy.dev. I was like, come on, brain work. OK. OK. We are having an issue with the try of demo button on certain screen sizes. So we’re going to need to address that as well. Everything else looks pretty clean, the way that we wanted it to work. We’re getting an issue there. OK.

0:16:07
So there’s a problem right there. OK. Oh, yeah. So on mobile, that height, whatever we did, 30 VH, or whatever, definitely not enough. OK. So that’s an easy fix. And I’ll also show you guys, too. So here I am on the homepage. We’re going to take this back to primary. OK. And I put the alt in there for that. They gave me the SVG code for these icons. And I was just going to show you real quick how is handling this.

0:16:43
So if you notice, let me do this one, because I had already done this one. Let me do this one. So I go into the code here. I’m just going to copy it. And then if you just Google Find Replace, it’s like a little trick I use often for stuff, paste in the original text here. And then there’s a bunch of these little fills. And I just need to find every hex code and replace it with var primary. And then hit replace. And now I have code I can go in and swap. So I swap it. Watch this icon right here that’s black is going to now be our primary color.

0:17:21
So apply code. Boom. So now I go into this one, grab the code. And I basically do the same thing. Replace, grab it, go back. What’s cool is that it also kind of saves what you had in the original box. So you don’t have to do all the steps over again. So you just copy, go, paste, replace. Grab, go back, paste, save. So now I’ve got all those icons, the right color. Thank you, Oxygen, for moving shit around when I don’t ask you to. All right, let’s address this, because we’ve got issues here. So there’s that.

0:18:04
There’s that. OK, I don’t see any issues there. Why is that causing issues? Lay out. So it’s absolute. I switch it to relative. Oh, I probably just need to do just two tops here or left zero to reset those. And what’s the size? The size is 45 rim. And then down here, I just need to do 100%. That’s probably what was going wrong with that. All right, mobile, mobile with this section. So I’m going to come down. Where is my structure, panel, carousel?

0:18:53
OK, so down to here, size and spacing. Oh, 768. I mean, it’s showing no problems here. But I’m going to come down to this lesson 992, size and spacing, height, VH, 30, 20, 25. What was it? 20, OK. I’m also going to put, I don’t know, maybe I shouldn’t. Actually, we don’t want to do height on that. We want to do a minimum height. So let me do testimony or carousel, size and spacing, minimum height, 20 VH. It’s allowed to get bigger. I am actually a men height 10, 15, and then I am going to put the owl back. Or we’ll do like owl M, save. OK. So now it has a minimum height.

0:20:21
So testimony or carousel, size and spacing, men height 15, take this off. Men height is still 15, should be good now through the bottom. So I’m going to save. I’m going to go back to, I’m going to jump out of here real quick. We’re going to fix this triad demo button, which I’m actually probably just going to delete or not delete, but hide. Really, it’s like these two are the important ones. You can either open an account or you can log in. I mean, triad demo is kind of important, but you know what? I’ll just make it say demo. I’ll just make it say demo instead of triad demo, and that’ll fix it. All right. Let’s go to oxygen templates. Edit the primary. OK.

0:21:15
We’re back. So basically, I want this to say demo when we get to mobile. So what I’m ultimately going to have to do is duplicate the button. I think this is like the easiest way to do it. And just make it say demo. And then just try a demo when we get down to here is going to be display none. So that’s the medium break point, layout display none. And then the demo is going to be layout display none here. Oh, I’m doing this all in the class. This is just absolutely ridiculous. All right. So header demo button, and I’ll do header demo button short, double dash short. OK. Well, it’s still header demo button. It’s both of them.

0:22:16
All right. Demo button. What in the world? What is this? Header demo BTN. Why isn’t it coming up in the list? Header. Oh, I put head. God, Lee. Header demo button. Thank you. Golly. All right. The short version is going to be none on desktop. When we get down to M, it’s going to be display block.

0:22:44
OK. Fine. It can even be flex, honestly. I don’t think it matters. All right. Now we get, yeah, so it’s gone. Now this is the header demo button. But on the ID level, when we get down to here, I’m going to lay out none. This. And there you go. There’s our demo button. So I’m going to hit save. And now we’re going to flush cache here. I’m going to go to engine X and purge that cache. Then I’m going to go to GT.

0:23:20
I’m going to retest. And this kind of like loads the new, you know, un-cashed version or whatever, hopefully. And I’m also going to have Sizzy do a reload. So Sizzy. I’m going to go to GT. I’m going to retest. And this kind of like loads the new un- you know, un-cashed version or whatever, hopefully. There you go. Demo demo. We’re not broken. Looking good. Looking good. Okay. That all looks great. Analyze.

0:23:58
That we’re going to make this modular real quick. And we’re pretty much going to be done. We dropped down to 92 because we are still getting a significant layout shift. But that’s something I can, you know, I can show them. We’re getting this minimize main thread work like randomly. Like sometimes it’s there and sometimes it’s not. So I think that still might be an issue with like when it’s not fully cached maybe. I don’t know. Let’s go ahead and jump out of here. All right. Cool. So we’re going to, I don’t need to be in the primary template anymore. I need to be in the actual page. We’re going to come down here. Well, first of all, we need to go to oxygen settings.

0:24:42
And we need to go to library, enable third party design sets, make this WordPress install. I need to remove that. Make this WordPress install a design set. Yes, save changes. All right. Now go to the home page. Include this page in the default set. It includes sections in this page in the library. That’s a yes update. Actually, I think I need to generate screenshots here. Could not find license. What the heck does that mean? Oxygen settings, license, valid, okay, pages, home. Generate screenshots. They cannot validate the license. Screenshots successfully generated. Okay. No idea what all that means.

0:25:36
All right. So now we do have to edit with oxygen. Now we have to go section by section and basically categorize them. And I think after, I think that’s all we have to do. So you enable the design sets. Then you make sure that page is the section show up in the library. Then you categorize the sections. So go into structure. So here’s hero. So we’re going to categorize this as heroes and titles. I think that’s all we have to do. And then why light speed? Categorize. This is going to be content. Yeah. Content, just content. And then low commissions. Categorize content.

0:26:32
Testimonial. Categorize social proof. This is categorize call to action. And then we can rename this. Ready to get started. I don’t know why that one’s black when all the others are white. Categorize call to action. Categorize call to action. Okay. Save. All right. Back to WP Admin. Now I can go to the, where do we go? Block library. Okay. Well, there’s none there. Are they in templates? Nothing there. Adnew.

0:27:28
Test. Edit with oxygen. Let’s see if we have anything in the library. I did the two steps I thought were all that was needed. Maybe I have to go back and hit screen shots again. Screen shots never generated. Generate screen shots. Cannot validate license. Add library, design sets, site title, sections and elements. Okay. Call to action, content, heroes and titles. We don’t have screen shots for them. But if I do hero, I get a hero. And if I do add content, why light speed?

0:28:19
I get why light speed. So it’s all working. I just need to get the screen shots generated properly. But that’s, it’s good enough for now. I’m going to pass this on to the client. Just have them review. See what they think. And I’ll let you know what they say. And then we’ll go from there. Okay. And then we’ll go from there.