One of the hottest topics right now in web design is how to speed up your websites, increase performance and get the coveted “A” on any number of speed check tools.
In order to help you get a grasp of how to get better page speeds and load times, we’re going to do a 2-part “speed series” over the next two podcasts.
This podcast, part 1 of the series, is more of a beginners guide to speeding up your site and it’s taken from my good friend and colleague Tim Strifler of DiviLife.com who just recently published an amazing, quick 5-step guide to speeding up your Divi website.
This will be a perfect introduction to website speed and will help us lay the foundation for the most important aspects of speed and optimization as the next episode (ep 140) will go deeper and more advanced into caching, loading elements, media assets, etc.
P.S. One important thing to consider with performance and speed is UX and conversion. There has to be a healthy balance of both. Sometimes people are so focused on an “A” score that the design, layout and conversion tactics suffer. I follow the common sense approach speed, meaning that as long as the site loads pretty dang quick and converts really well, I’m satisfied with that. Tim and I talked about that in depth in this interview.
All that to say…don’t get too hung up on getting a high 90’s speed score at the expense of your conversion rate, time and profitability!
In this episode:
00:14 – Podcast Prelude
01:42 – Free 10 Step plan
03:39 – Welcome to Tim
06:09 – Hot topic – Speed
06:34 – Divi 4.10
10:14 – 1) Use great hosting
13:37 – Siteground
14:56 – Flywheel
16:45 – WPEngine
21:50 – Dad bods
22:14 – 2) Proper Caching
23:03 – How caching works
25:46 – WPRocket plugin
28:30 – Divi static CSS file
30:53 – Replicate what works
31:48 – Testing trial and error
33:14 – Don’t focus on score
38:23 – 3)Optimize images
46:20 – 4) Plugins
47:44 – Evaluate your site
51:00 – 5) CDN
53:55 – Stackpath
58:12 – Tim’s final thoughts
Connect with Tim:
- Divi Life | Child Themes, Plugins, and Tutorials for Divi by Elegant Themes
- WP Gears | WordPress, Business, & Marketing Tips
- WP Gears | Facebook
- Divi Life | Facebook
Featured links mentioned:
Episode #139 Full Transcription
What’s up Friends, Welcome into the podcast. This is Episode 139. I’m excited about this because we’re going to do something a little bit different on the podcast over the next couple episodes, we are about to start a little two part podcast series. And what we’re going to do in this episode in the next episode, is we’re going to talk about what is by far the hottest topic in web design right now. And that is site speed. So over the next couple episodes, you’re going to get a good feel for how to speed up your websites, best practices for better performance. And everything that you learn is going to help you get better quote unquote letter rankings on all these speed checking tools like gt metrics, and that kind of stuff.
And I will say I have my thoughts about how far you should go on that because you don’t want to sacrifice good conversion based design for just a better letter score. Although you’ll hear me talk about that and rail about that over the next couple episodes. Now, you might be thinking, why are we doing a little series? Well, quite frankly, it’s because there’s a lot to talk about when it comes to speed. And I wanted to break this into two parts because I actually recorded the episode that’s gonna follow this one before this episode, and my guests in that episode is a really, really he’s a bonafide speed expert. And we got pretty technical we go really far into the weeds on speed and caching and performance. And after that episode, I thought you know what, let’s do an episode just to set the groundwork before we get into that one.
So I wanted to have somebody who was just on the podcast recently, actually, my good buddy Tim Strifler of Divilife.com I wanted to have him back on the podcast for this this episode to lay the groundwork for speed because Tim actually just recently released a five step guide to speeding up your Divi website. Although it doesn’t apply to just Divya it applies to any tool that you’re using. And I thought it was such a great kind of Beginner’s Guide to speed that I was like, Tim, I know you were just on but would you be interested in coming right back on to talk about this. And he said, Absolutely. So I’m really really excited to give you guys the the basics of speed to help you prepare for the next couple episodes, because we’ll cover the basics in this one. And then we’ll dive into the really advanced stuff in Episode 140 following this one.
So really excited about this again, speed is really important. However, there’s also a lot of things that are going to come into play here. Everything is not about a perfect A on gt metrics, which are going to find out so there’s lots of stuff I’m super excited about for you.
Now before we dive in, if you are new to web design, and you’re like oh my gosh, I’m learning design, and I’m trying to learn code. And now I got to worry about speed. I understand it can be super overwhelming. And I recently created a 10 step free, completely free action plan for you to help you learn the most important things in web design. It’s basically a guide on what I wish somebody would have told me that I should learn when I got started. And you can grab that for free right now just go to Josh Hall co /learn. And that way you can get access to this free guide. It’s a 10 step action plan. I just lay out some really good resources for you and the most important things you should learn when it comes to building awesome websites. Again, to get that for free. Just go to Josh Hall co slash learn. You can pick that up. If you have any questions. After going through that just let me know hit me up and I’d be happy to guide you through the best resources. Alright, without further ado, let’s talk site speed with my man Tim Strifler.
Tim, welcome right back on to the show, man. Good to have you on short notice and just a few weeks after your previous interview.
Yeah, well, thanks again for having me back. I am enjoying becoming a podcast regular on the Josh Hall show. So stoked about that.
You’re actually my first three-peat. It took forever to get you for round two. And we’re doing it in record time for round three. I think the last interview we joked about doing it sooner or later. So yeah, we weren’t messing around. And the reason I wanted to have you on is because we’ve got the episode after this is a pretty in depth guide on site speed and optimization. And I know you and I had talked about going over site speed because you just recently released a really great five step in my mind kind of Beginner’s Guide to speed. And I thought man, what a perfect opportunity to go ahead and bring you right back on to cover this to kind of preface you know speed before we dive into it even further in the next podcast. So Tim, thank you for this is a very short notice thing. Thanks for coming back on and before we dive into these five tips that you have laid out, do you want to let everybody know who maybe hasn’t met yet? Where you’re based out of and what to do?
Yeah, absolutely. So yeah, Tim Strifler and I am based out San Clemente, California. It’s been a few years in Texas and then now I’m back in California. And so some people get confused by that because my business technically on paper is still Round Rock, Texas. And just because moving the business legally is a lot of unnecessary effort and cost. But yeah, I’m based in Southern California and then my business is Divi life. And so at Divi life, we create Divi plugins, child themes, layouts, tutorials, everything for Divi, so Divi is our chosen product. And so all of our products are made for Divi and require Divi. And so we are 100% all in on Divi. And so, Josh, as you mentioned, having the guide, so my speed up guide for Divi, it’s for Divi, however, it’s also kind of like the steps aren’t really specific to be most of them, at least they can be really applied to any WordPress site. But yeah, I I’ve been nerding out over this stuff a lot lately. And so
It’s a hot topic, man
I’m excited to be here. It really is.
Yeah, speed is, I think, the hottest topic in web design. And obviously, we know there’s a lot going on with Google that they are they’re wanting to favor sites that are loading well and have best practices in place. And actually, before we dive into these, these five tips that you have forced us Tim your thoughts on the recent Divi update, which was a big update for speed. Do you want to elaborate on maybe what that update is? And give me your thoughts on that?
Yeah, definitely. So this has been kind of a long awaited, highly anticipated update to Divi Divi four point 10 came out on I think August 18 2021. And basically, now Divi is 100% bloat free. And so previously, what would happen is, every time Divi adds a new feature, a new design setting anything, basically, it gets added to every page of your website, regardless if you’re even using it. So when they added the really fancy animations, several years back, it’s like this is great, but now it’s getting loaded on every single page. And so the CSS file in Divi, just grew and grew and grew and grew. And so now Divi four point 10, the performance update changes that completely.
So now Divi has what is called dynamic assets. And so now, things are only loaded when you’re actually using them. So if you’re only using a few different modules on your page, will now Divi’s not going to load all of the code for those other, you know, 30 plus modules that you’re not even using. And so that’s huge. So that’s a huge benefit, because people would complain that Oh, Divi is bloated and it’s sluggish and stuff like that. And now, you can’t say that anymore, because they’ve built in this incredible code set to be able to make everything modular and dynamic. And it kind of you’re only loading what you use. So
Yeah, it kind of reminds me of I know, years back, it was really, really common that folks who were more on the Advanced side wanted a developer version of Divi, to where it would be just that, like, you could have the models if you wanted, but you didn’t need to have them it was more of a lightweight version. I feel like this is a very sound compromise to that. Because if you don’t want to use animations and scroll effects and everything else you have in there, it doesn’t matter. It’s not loading on that page unless you put it on there.
Yeah, yeah, that’s a good point. I totally forgot about that. People were really pushing for that. And I think they talked about maybe doing it. And then they obviously chose to do this instead. Which Yeah, I think it’s good. Because if there was a light version, well, then it’s like, well, I want I want I want the light version, but I just want one of those little things. And then it’s like,
Yeah, I think when she’s I had Kenny Sing one of the craters, the Divi on here last year. And I tried to remember, I think it was the podcast that I talked with him about that. And he said they were debating it. But the problem was, they would essentially be creating two different products to manage. Because he’s like Divi, is Divi. Like, if you know it, if there’s a developer version that would literally like it would be really tricky to have two completely different products that are, you know, almost like one version of another one. And I like I said, I think this is a good compromise when it comes to speed because for those who would have had a lightweight version of Divi, if you wanted to have some sort of effect Well, you probably have to get another plug in or something and then next thing you know you’re right where you started with regular Divi.
So definitely a really cool update. I’m glad to hear your excitement and I knew you were one of the first people I looked at when when you posted about it. And I always say I value your opinion of Divi, I think In div in the Divi realm you’re one of the best people to reach out to and and look at what your thoughts are immediately because you are a Divi Guy, it’s not like yeah, it’s not WordPress life. It’s Devi life. So yeah, exactly. There’s a lot a lot of value to that. So yeah, man, these five steps, do you want to maybe just outline what these five steps are? Maybe we could just go one by one in this conversation. Yeah.
Yeah, I thought that might be the case. I have it up here in front of me. And yeah, Josh, I’ll put these in the show notes, I’m sure, definitely. But yeah, step one of my five step guide is to use great hosting. And I kind of see it a lot out there where people will try to optimize their way around using good hosting. And so they’ll use really, really cheap hosting. And then they’ll just kind of optimize the crap, for lack of better term, and do all the other things on this list. But they’ll kind of skip it. And so you might be able to get around it for a little while and have really poor hosting, and still get some decent speeds out of it. However, that can all change on a whim, when you have shared hosting, and they’re cramming a ton of sites on there. And so my advice and I know you are on board with this, Josh is get good hosting from the start. And you will thank yourself years later. And so I was one of the one of the people that would would try to optimize my way around it. And then I ended up getting hacked multiple times, even though I had the site locked down. And so so yeah, so that’s my number one step is, is get good hosts.
Yeah, well, we’ll go through each of these in detail. And then we’ll just recap at the end. That’s, that’s, that’s a great place to start. Because Yeah, hosting. It is the foundation of your website. And it’s often the foundation of a business because it really, it all, all of your website traffic, all of your marketing efforts, like SEO, social media, any digital marketing, you’re doing copywriting content, all of that does not matter if you have terrible hosting, because all that is pointing and should be pointing to your website, I often explain it. And I did this with clients, and they seem to finally get this analogy. It’s like building a beautiful house and sticking it right in the middle of the ghetto, or just a terrible into town. Like, if you have an asset and something it’s beautiful, like the literally the foundation of where it is, is really, really important. So if you build this beautiful website that you’ve worked really hard on, but you have cheap GoDaddy hosting, or a host that, you know, claims they’re great, and they’re super cheap, you’re going to get what you pay for. And it’s going to be devastating in the long run for performance speed vulnerabilities, everything you just covered. And let’s be honest, man, even the good hosts that I’m sure you’re about to recommend. They’re still really affordable, right? Like, maybe it’s a couple bucks more a month. But what’s a few bucks more a month in the long run for something that’s important?
Yeah, no, I 100% agree. Yeah. So one thing I kind of disclaimer I like to say when I recommend hosting, is this is not every single good host out there. If if like the hosting comm that you love isn’t on this list. Like it’s not because that house is bad. It’s just these are the ones that that I recommend, because these are the ones that I am actively using right now. And so I like to kind of say that because hosting can be one of those hot button topics where people are like, Oh, I hate this company, or why isn’t this company on the list and stuff? It’s like, No, no, like, this isn’t everything. These are just the ones that I’ve used. Some of them for five plus years now. And so I’ve they’re like, tried and true, and therefore I can safely recommend them. It’s not everyone. That’s good. It’s just the ones that I think are good right now. So yeah.
So Siteground, I basically recommend either a low cost and mid level and then a top of the line. So Siteground being the low cost provider. And then like I said, Josh, they’re not super expensive, you can get started very affordably. And siteground, in my opinion is not the same as other shared hosting out there. Agreed. Everything’s very fast. They don’t cram a ton of websites on each server, like some of the cheaper hosting companies do. And actually from Nick Roach himself, because they’re dealing with, you know, 1000s of 1000s of customers, and a lot of different hosting companies in siteground consistently was one of the companies that was had, they had the least amount of issues and was always really fast. And so that was why Elegant Themes partnered with siteground. And they’re one of their recommended hosting companies as well. So I think do you use Siteground?
Yep, I use siteground I have since the end of 2015. Yeah, I’ve, I’m definitely if it ain’t broke, don’t fix it kind of guy. And that’s exactly how I felt with siteground. They’ve always been a rock for my business and they just continue to innovate and get better and better for especially for the price point like It’s wild. So I agree. siteground is my top recommendation as well.
Yeah, absolutely. And then Flywheel is my mid level recommendation. Also coincidentally is another one that’s partnered with Elegant Themes. These aren’t why I chose them. I was using all three of these before. But it just happened that and I guess it’s kind of reassurance that they’re great companies that Elegant Themes also partnered with them. So flywheel is a little more it starts at about $15 a month for one site. And then they have some both plans. I think I’m on like a 20, or 30 site plan. And I have all of my plugin demo sites on on flywheel, so DiviPopUp.com, which is Divi overlays, and my mega menu, plugin demo ins and so forth. And so basically, it’s like, my plugins are the bread and butter of my business. And so it’s like, I’m trusting them with the demo sites for the bread and butter of my business. So that’s like, it’s not just a company I recommend, it’s because I actually use them.
And then one thing I do want to say quickly about Flywheel as well as the next the top of the line recommendation is, these are what they consider. They call a managed WordPress hosting, which basically just means that there’s some extra bells and whistles that are built into it. So for example, with Flywheel you get automatic server level backups, you get server level caching, you get CDN built in, you get one click staging and so they kind of have their own custom portal with all those different things. And so you are paying a little bit more for it, but you get a lot more for the value. So that’s what what they provide. Yeah, to jump in on you Josh.
I was just gonna say, Oh, I have a I have a thought on this. But I want to hear the top recommendation that you have where you are paying more but you get the most value.
Yeah, definitely. So WP Engine is my top of the line recommendation. And they were kind of the first ones or one of the first ones in that quote unquote managed WordPress hosting space where they you know, kind of changed the game with WordPress hosting and they only do WordPress they don’t do any other platform. You know, they charge per site or they have the both plans as well just like flywheel and then they have all those bells and whistles. So my website Divi life calm is on a WP Engine dedicated server. Most people don’t need that it is very pricey. But I want my website, which is an online business. It’s ecommerce, I want it to be completely, you know, dedicated resources. And we also have our licensing system, our licensing system, how to say that 20 times hooked up to it. And so yeah, so I needed a lot of resources. And so we pay a lot of money, but it is worth it. However, you don’t have to get a dedicated server with WP Engine, they have more entry level plans. I think that starts at like 20 bucks a month. Let me just I gotta bring this up because I don’t want to give false information.
Well, they could always change to I would say around there but…
Yeah, 25 bucks is their entry level plan.
Yeah, these three are what I recommend as well exactly how you have them. Tim, I totally back up on that siteground great place to start. It’s what I use flywheels definitely a great mid level and and WP Engine. I actually did not know that you were using all three simultaneously. So and you mentioned this in the article on how to speed up your Divi website in five steps, which of course we’ll link below in the show notes, but you siteground for child themes. flywheel for your plugin demo sites. And then of course, WP Engine, like you mentioned, for your actual Divi live site, which is really cool.
Yeah, exactly. And it wasn’t something that like I kind of planned it that way. It was just that’s just kind of how it happened because I was like, Okay, well, WP Engine is expensive, and I had some Child Theme demos on there on a different plan. And it’s like okay, like we’re we’re going to be pumping out child themes, I need something a little more affordable. So then I chose Siteground and really liked it. And then I’ve been hearing a lot about flywheel for a while and so I got a test account and then I ended up putting I can’t remember what my first sight on there was but anyways and then I ended up upgrading to a bigger plan and putting, you know, Divi pop up comm did the mega menu, like those ones on there. So yeah, just kind of worked out that way. And so now, I feel like that’s a good place to be having different options and so forth. And then also because we create products, software products, plugins and child themes and everything, having multiple different hosting companies that we can easily spin up a site to test to make sure our products are working properly. It it’s just a good place to be the one to say.
I was just gonna say this is a really good type of tip and mindset to have with with people listening with your customers because if you have a Ma/Pa portfolio style site that’s more like brochure siteground is going to be fine. But if you have an e commerce site that’s doing hundreds of 1000s of dollars and has a lot of resources There are some some hosting options on siteground, which you may also want to consider flywheel or WP Engine, depending on the needs of the client. So I just want everyone to know, even though they’re no one’s gonna have a Divi Life type of business, likely there’s still, you know, a lot of times where you might want to have different hosting options for the clients.
Yeah, no, that’s a great point. Absolutely. And, and that’s kind of the beauty of these companies is they do have those different options, you know, and they can grow with you. So I imagine with you with siteground, as your business where you added on ecommerce, selling your courses and stuff, you know, upgrading your siteground plan to facilitate getting more traffic, you know, you’re getting a lot. How many YouTube subscribers? do you have?
About 24k and 2,000,000.3 views or something like that now, so yeah,
You’re getting a lot of traffic traffic from YouTube has grown with you.
Right, right. I’ve upgraded and I’m, I’m about to pull the trigger on more like manage cloud servers and for the site. So that’s, that’s all to say, hosting is the start that this is the foundation, I think we’ve pretty much covered that the most important reasons Yeah, to have good hosting, because like you said, you can do all these other things we’re about to cover. But if you have bad hosting, you know, you might make a little dent. But at the end of the day, you can only do so much with that. It’s like working out, and then just having an absolute terrible diet. Along with that you’re only gonna go so far. So
It kind of just described me in my personal life a little bit, eating a ton of dessert, and then wondering why I’m not losing weight. Well, I just like I’m exercising.
I described myself as well. So we’re right there. I think the first interview you were on, we were talking about dropping some web design pudge. And what we’re dads now we can embrace the dad bod at this point. So there we go.
That’s true. Yeah. And studies show that women actually liked the dad bod. So
Hey, web design dadbod. That’s, I’m on it. I’m in I’m game. Well, sweet Tim. So great. Hosting is the first step, take us to number two, this is something that I really don’t know too much about. And I think a lot of people are confused. But what’s, what’s step two here for us?
Yeah, step two is use proper caching. And I don’t want to overcomplicate it, because there’s a lot of different types of caching. But essentially,
and we do cover that in the episode that’s gonna follow this the advanced kit,
I’m, by the way, I’m excited to watch that myself and learning some of those super advanced things. Oh, and by the way, is this, the guide that we’re kind of going through here? It’s Yeah, like you said, it’s more beginner friendly. But also, these are the five things that are going to make the biggest impact. And so that was, like, these aren’t the only five things that you can possibly do. Like there’s a million different small things, and it’s going to vary based on the site. But the five things here are the things that are going to be pretty much needed for most sites, and they’re gonna make the biggest impact. So yeah, well said, Yeah, I meant to say that the beginning.
So yeah, caching, essentially what it is, is, or before I can explain caching, let me explain quickly how WordPress typically works. WordPress is a dynamic content management system. And so the way that WordPress normally works is when you visit a WordPress website, WordPress, then goes to the database and grabs the most recent version of the content and then builds the page dynamically on the fly. And that’s what they refer to as the WordPress loop because it’s going up and then back down. And it does that on every page for every visitor. And that’s time consuming and slows down the site. And so some super smart people came up with the idea of caching, which basically takes a static version of the page, and then loads that to the visitor instead. So you don’t have to do that loop every time. And then if that page gets updated for the new update, the the caching plug in will automatically update the cached version of that page. So then it’s it’s serving the static version instead, which is a lot quicker. And with that, kind of like caching 101.
Yeah, that’s great. What’s interesting is I just recently published a new tutorial on my YouTube channel about one of the ways to fix CSS not showing when you do an update and write some CSS, which typically the biggest unless there’s code that’s wrong, typically, what’s happening is when you add some CSS to a site, and it doesn’t show, it’s because the cache isn’t cleared. And my little tip, and my trick is to clear the cache on your website, which I know you’re going to talk about some resources for plugins or tools for that. But then also your browser, your browser is cached as well. So you need to do what’s called a hard refresh. So if you if you post some CSS, and if not showing up, Josh’s two step fix is to just clear the actual cache on the website, clear the cache on your browser, and then it should show so.
Yes, you nailed it. And so often people will Say, Hey, I did this. And I cleared my cache. And it’s still not working. But they forget about the browser cache. Yeah. And some people don’t realize that the browser does cache web pages. And it’s loading up, you know, a file on your site that has now been updated with custom CSS in your example. And then yeah, you don’t realize that you have to clear that. So yeah, thanks for bringing that up.
Yeah, this is a practical example of like the the impact of caching because I didn’t really understand what was going on when that was happening to me. And then I realized, oh, there’s this thing called caching that needs to be cleared for these updates to show.
Yeah, absolutely. So for, in most cases, the best place to start with caching is a caching plugin. And so there’s a lot of great caching plugins out there. The one that I recommend is WPRocket, it is a premium plugin, they don’t have a free version, I in the past use free versions, they were overly complicated, and you don’t get any support. And so if you can swing it, WP rocket, it’s very affordable, you can pay per site. And I basically, I had heard a lot about it. And so I finally decided to check it out. So I bought the single site, and I upgraded to like the three site. And then now I’m on the unlimited site. Because it’s just such good value.
So I highly, highly, highly recommend WP rocket. And it does a lot and it does a lot more than just caching as well as doing page caching. It has a lot of optimization stuff built into it. And not only is it really good, but it’s easy to use. And they actually have some really good documentation and kind of like hints along the way. So it’ll tell you what it is, briefly, and then you can hit more. And then it’ll pop open the, their documentation for you to kind of read through and understand which, honestly, I want to encourage everyone out there as you’re optimizing sites to start learning the process. Rather than just toggling buttons and letting the plugins do the heavy lifting, learn what’s actually happening. Because then if something’s not working, then you can start to troubleshoot and figure out why instead of just being like, Oh, it’s not working I I flipped all the switches. Well, yeah, I a little more complicated.
I did not realize how robust WP Rocket was. And in fact, john, who’s coming in next week loves WP rocket, and we go down into in depth with what WP rocket can do. Because it is much more than just speed, it’s optimization. There’s a lot of different things in with that. But I do want to say just a heads up, sometimes like with siteground, I use the siteground optimizer plugin, which has caching in there as well. And if you have multiple caching plugins, they can conflict. So this is I think, when you said Tim, you should learn what’s going on. So you could troubleshoot. I think that’s what’s really important. I’m glad you said that. Because if you’re using WP rocket, and the SG optimizer plugin and have another caching plug in somewhere, you’re gonna have conflicts there. So yeah, the whole toggling thing you do have to to make sure you’re not conflicting. Yeah, if you’re using something like that,
Yeah, no, that’s a great point. Because Yeah, there’s there can be a lot of overlap with plugins, but then also different types of caching. And so and then sometimes, too, it makes it a little bit complicated. And sometimes they’re called slightly different things. And so
In thinking like using doesn’t Divi have a setting now with some sort of caching that you can enable?
Yeah, so Divi has a static CSS file generation. And this actually isn’t part of the brand new update, they’ve had this for a little while, where when you’re making customizations in the page builder, and the Divi Builder, and you’re, you know, adding drop shadows and doing this doing that changing the button styling, rather than it loading all of that in line on the page, it then takes all of those customizations that you made, and they put them together into a static CSS file, and then they load that. And so that, again, is another cache that you have to learn how to clear because sometimes that static CSS file, you’re loading a previous version of that instead of the most up to date. Yeah. And so that’s the theme options.
Are you using WP rocket on all of your sites on across all these hosts? Or have you played around with just the caching that the hosting companies provide? Because I’m personally I’m trying to go as far as I can, with the siteground optimizer without adding a caching plan.
Yeah, so I don’t have it on Siteground. I just have it on my Flywheel sites and WP Engine. And actually, WP rocket is the only caching plugin that for sure WP Engine allows and then possibly flywheel as well.
That’s actually a great time to bring up that these hosts and there’s a lot of other hosts too, that have server level caching. So it’s like you have the plugin level you have the server level. Then you have like the CDN clap for level, we’ll, we’ll get to that. But the server level cache is done at this on the server side. And that’s another cache that sometimes you have to clear in order to get the most up to date version of your site. And it’s annoying when you have five different caches to clear, but you’ve learned to deal with it. And so because they have their caching, WP rocket was the only one that they allow. And the reason is because they went the extra mile and worked with them to make sure that when WP rocket is active on a WP Engine site, and I think flywheel too, don’t quote me on that, that they’ll deactivate some of the things in WP rocket that that would normally conflict. So, so yeah, so WP Engine and pi will both have caching built in. But I found when you combine it with WP rocket, it makes a huge difference with with sites B.
And we should say too, you know, with all these different tools playing together, it can probably be really intimidating to think that Oh gosh, am I gonna have to do this for every site? Well, the good news is if you use siteground, or flywheel or whatever, and then use WP rocket, once you figure out what works on one site, you can just replicate that on all your other sites. So I think this is where sticking with a handful of tools is so important. Like don’t overwhelm yourself with tons of new tools on every new site. Because you’re just gonna, you’re gonna run yourself crazy. You can figure out what works on one site. And worst case, do you know duplicate a site on a staging domain, try it out there, see if anything breaks and see what works. And then once you get it ready to go, you can even optimize a site to the enth degree using this guide and any other resources, and then replicate everything you did on your live sites. And you’ll be good to go.
Yeah, absolutely. And on that note to testing and trial and error, the trial and error method, which I’m sure we’re all familiar with, is a really important part of the the speed optimization process because you have to turn on different things. And then you have to test to make sure didn’t break anything. And then you want to do a speed test to make sure that what you’re doing is actually speeding up the site. However, you have to be careful with that. Because if you just turn on some settings and immediately do speed tests, you’re not going to see those new optimizations reflected, you need to make sure you clear all the caches across the board. And then you have to do something called priming the cache, which is basically loading your website in an incognito browser. So then the cache can be rebuilt.
So then, when the testing tool or website visitor goes and visits the site, they’re going to get the most up to date version, they’re going to get a fully built cache page. Because when you clear the cache, it needs to be rebuilt again, in order for that to be shown to the visitor. So sometimes you’re like, Oh my gosh, my speed went, you know, from like an A to an F, by turning on this one setting, immediately turn it off. Now give it a second, make sure you open it in an incognito window, do another test, do a couple tests, and then see. And so when you’re kind of going through all of these optimization steps, you end up doing a lot of testing. But that’s what
I meant to say this in the outset. But I personally don’t get too hung up on site speed. As far as like these metric testing sites like I, I have always signed off on the common sense rule, like load a website. If it loads pretty good on a couple different networks. couple different wi fi’s then cool. If there’s like my site, for example, does not look great right now. I get not great scores. However, I checked in with students, and everyone says, Yeah, loads fine. Like it hasn’t been an issue. If I could save a couple seconds. Great. That’d be awesome. But I’m not like killing myself over getting an A, if I get my sights get C’s and DS, but they’re working really well. Yeah, there’s room for improvement. But I’m fine with that.
And this is interesting. And I just, I don’t want to derail us but I do want to interject in here because I don’t want people to think that if their sites are at B’s, they’re failing, or even if they’re an F’s an ease, they’re failing. Because, again, there are a site like that I know it gets a lot of new sites are some of the worst ranking sites on like gt metrics and stuff, but there’s some of the most popular. And it really comes down to what is the purpose of a site and also, when it comes to speed, how important is an extra second or two compared to the UX and the conversion based aspects. And what I mean by that is, my friends at Artillery Media, Jake and John, their site does not get great load speeds on gt metrics. But because I had I had jaken on my web design club and we did a training we talked about this. He was like, what’s more important for us is that people go to our site, it looks decent, and it really entices them and engages them.
They have a video background. And they’ve optimized it as best as they can they have a lot of other elements. But the thing is, they’re not a Divi Life, they’re not getting 1000s and 1000s of views all over the world, they’ve got a handful of local businesses that are going to their site, and they’re converting them on a really high level, that’s more important, like higher conversions with a higher paying client is more important than a couple seconds of loads. So I just wanted to say that to say, you do have to, I think balance this with like, what’s good for the website and your customers words versus what’s good for for PageSpeed and Google?
Yeah. Oh, absolutely. And then on top of that, to balancing, like the time, effort, you know, value aspect where, like, yeah, you might be able to squeeze a little more speed out of it. But is it worth the time, because it’s like, you can get like, 80% 90% of the way there following these steps and not spend a lot of time, but to get, you know, the extra, you know, 10% worth of speed, you’re going to be spending, you know, hours and hours. And trust me, because I’ve gone through it, because I wanted to do it in order to make sure that I could, you know, have the authority to you know, teach this stuff and the guide and everything. But in most cases, that’s just not worth it. Like, you know, it’s like barely faster, you know, maybe a little better score barely faster. But like way more time for most sites that you build. That’s just not worth it.
Yeah, yeah. Yeah, it’s it’s a great point.
Yeah, and thanks for bringing up the score. Disclaimer, too. I meant to say that I have it in my guide. But yeah, scores aren’t everything. The testing sites should just be a tool to help you identify the weak points, like, hey, the site’s really slow. Okay, well, let’s try to figure out why the testing tools will give you a breakdown, you can look at the waterfall to see what’s taking a long time to load. But yeah, don’t over focus on that score. And that and everything. And like you said, like, the score is and everything. And sometimes even you can have a great score, but a slow load, it doesn’t happen a lot. But there’s some times that that can I have seen it myself, where it’s like, oh, I’m getting a great score, but it’s like a six second load time. Like, generally, that’s not considered to be a great load, right? Or the opposite, where it’s loading fast, but you’re getting a poor score. So that’s why you kind of have to take the score with a grain of salt and just use it.
That’s where my site is joshhall. co loads pretty dang quick. I mean, anyone can check it out right now load pretty quick. But I don’t have a great score. I don’t care right now. Like, yeah, I’ll work on it. But it’s not that much of a priority because it is working. So. So great, great steps here for so we’ve covered number one hosting, I know we’ll go through the next three here a little quicker. caching, I think we’ve covered enough on caching. Most sites have some sort of hosting companies have some sort of caching natively, or a plugin. And then WP rocket is definitely something that I know you stand behind. And I’ve got a lot of colleagues who love it. So I’ll recommend that as well. Step number three is I think is the most important, other than Yeah, other than hosting. And I want to mention something I saw on my Divi web designers Facebook group recently, you may have seen this, Tim, somebody posted in there and said, Why is my site lighting? loading so slow? I only have one video and a few images on it. Why don’t you take it from here? What what could be the problem there? Tim?
Yeah, well, videos are huge. Like in most cases, I say don’t use a video. There’s rare cases, kind of like artillery media, where they’re their background video, in that the clients that there were there were wanting to entice and impress it makes it makes it worth it. But in most cases having background videos are Yeah, not a great idea. It’s not worth the decrease in performance. Is that what you were gonna say?
Yeah, exactly. And I guess we should say, step number three is optimizing images and, you know, media assets and stuff. Yeah, because I agree. I think in their case, their video is a nice little B roll of them working in that workspace, it looks super professional, it’s really engaging, that really works well for them. But yeah, most cases, I generally advise steer clear against video. I mean, there are ways to optimize that and hosted elsewhere. But that an image is that’s the killer. And this is where I struggled with clients who were updating their websites I this is one reason I ended up creating a client resources page is because they didn’t know that if they take a picture and download it onto the computer and then upload onto the site and it’s a five megabyte picture. That ain’t good. That’s gonna be a big problem. So image optimization is absolutely crucial. So yeah, what are your What are some of your tips for image optimization and making sure.
Yeah and there’s essentially there’s two sides to image optimization. There’s resizing. So for example, you don’t want a pixel or a photo. That’s 5000 pictures. Schools wide on your site, there’s never a reason to have that. And so that’s that’s one thing is make sure that the right size. And then the other one, which is actually an on my guide, it’s the first step. And that’s image compression. And so making it smaller in size. And basically, there’s plugins and tools that will compress it using complex algorithms. I looked into a little bit of how it actually works. And it’s Yeah, way above my head. But basically, they look at similar parts of images, and they build like pixel maps. And so so that if like, yeah, okay, this area right here, background, you know, this is all, you know, a dark color. Okay, well, it’s very similar over here. So we can just make it essentially the same as opposed to Yeah, duplicating. It’s very complicated.
I don’t want to go too far on like, how to optimize images on this particular point, I will link in the show notes just for everyone’s reference. I have a couple tutorials on how to do that. Yeah, one on just how to resize images before you can optimize them before they go to the website. And then additionally, a little more info on image file type. So I’ll link those both in the show notes. But yeah, Tim, like, I’m sure you’ll back me up and say, if you want to do it manually, first, you want to make sure your image is compressed and resized accordingly. So you don’t load a five megabyte 5000 pixel wide picture. But you mentioned there are some plugins out there some really great tools. I, from what I’ve personally seen, I have enjoyed Shortpixel the most. I know you got one that you recommend that I haven’t actually used myself, but I’ve heard good things about shortpixel. For me, Oh, is it a great job? There’s WPSmush, which will you know, compress your images. But yeah, what are your thoughts on some additional tools that can help us make sure that they’re optimized as best possible?
Yeah, so I use and I recommend a Imagify. And it’s, it’s by the same company as WP rocket. And so they integrate nicely together. You mentioned short pixel, similar, I haven’t personally used it. But I hear amazing things about it. And so yeah, it’s it’s a preference thing. But I do like since I use WP rocket to use and imagify, and they go really well together. And so Imagify, it’ll compress your images, and then it’ll automatically resize them to, which is really, really nice, so that you don’t have 5000 pixel wide images. And then one last thing I want to say about that, so we can move on to the next step is imagine we’ll also create web p file types. And that’s kind of the gold standard. And so I don’t know if your your guide talks about that?
I don’t think so. No, I don’t think so.
Yeah, so WebP, it’s, it’s a file type from Google, actually. And so basically, it is the smallest type of image in terms of size. And so it will, by using web p, it’ll make your websites a lot faster. And so imagine fi will automatically convert your images to web P. And you don’t have to do anything. And not only that is if there’s someone’s visiting your website in a browser that isn’t compatible with web p yet, because it’s still relatively new, a few years old, but all the major browsers support it. If they’re using some weird browser or an outdated version of a browser, then imagine five will automatically just serve up the JPG or dead. Oh, that’s brutal. So yeah, so that that can make a huge difference to, you know, 20 30% decrease in size by using web P. And it’s, it’s an automatic thing. So you don’t have to go and change anything. Just make sure the box is checked.
Well, I’ve been calling image of phi. So if I wouldn’t be surprised if I, you know, completely butchered that. We’ve You and I have famously talked about how we either say words differently or wrongly. So I’ve been saying image of phi, but imagine phi d, is that, you know, that’s official have they?
I don’t know, in because I used to say Imagify, or I’d be like, I would just kind of stumble over.
I think it would be it’s based off an image. So I would think it’d be Imagify.
Yeah. But it’s one of those things where you read it, like online, and then you kind of have a way of how it sounds and then when you actually hear it a different way, then it’s like mind blind. There’s another
We got to get to the bottom of this then so if anyone knows anyone listening knows, go to the episode here and post a comment and I guess you’ll have to see the video and audio recording.
Imagify definitely does make more sense because like I said it is image. Imagify to me is more it’s sexier. It’s like imagine,
Imagine how fast your site will load with optimized images. Yeah
Well, that’s great writing their marketing for
Oh, yeah, there we go. Hopefully they get this and give us a kickback. So yeah, so in short, because I know we got to get through the next couple, I’m on a bit of a time crunch with this episode on my end. So number three image optimization. Little bit about video, we talked about compression resizing, I’ll link to some resources and then image of phi and magnify whatever you want to call it. That’s a great option. There’s shortpixel wp smush. However, some of those plugins can be a little bloated. I always found the VPS much to be a little bloated. So I think that’s one reason I like shortpixel more, but imagine this one, this one’s good as well. So yeah, man, before we move on to four and five here real quick, any final thoughts on image compression? Or optimization?
No, I would just say, to reiterate what you said, it’s extremely important. I kind of went back and forth on having it number two or three a caching and image compression that yeah, it doesn’t matter whether it’s number two or three, it is very, very important because images take up a huge amount of real estate on your site. And they’re typically the biggest files that your website’s loading. And so you want to make sure that they’re as small as possible.
Great call. Great call. Well, speaking of things that can take up some resources and sizes, step four is plugins. How important are I mean, this this is a biggie, it’s something I did not really realize till later on in my journey, that if you download a free plugin that’s extremely bloated, how devastating that can be to speed. So we probably don’t need to go into this far. This one too far. But yeah, plugins how important it is for speed.
Yeah, definitely. So anytime you’re using a plugin that’s loading something on the front end, whether it’s like, for example, my my plugins, you know, it’s a pop up plug in or you know, mega menu plugin, or, you know, it’s a social media plugin that adds social media stuff. It’s going to be loading code for the visitor. And so the more code that your website’s loading, the potential that has to slow down and that, of course, you can optimize really well to get around these things. But at the end of the day, if you have a very poorly coded plugin, and then it’s going to slow down your site, whether it’s on the front end or the back end, or both. And so you want to use good quality plugins from good developers that are actively updating them. And then you only want the plugins that you actually need. And so every time you add a plug in think, Okay, do I need this? And what are the ramifications of it, because you might install it, and it kind of adds, you know, something cool, but then at the end of the day, you realize that, hey, it’s really slowing down my site. Yeah, it will be not worth it.
Two practical examples of some optimizations I’m about to make to my site. In regards to this. I have two plugins that are cool on my site. But I’m about to drop. One is the footer of my website currently has a little Facebook Like Box. And it’s a plugin. And the problem with that, though, as I’ve looked more into speed, and I just kind of more recently realized, Wow, that’s a cool effect. It is causing every page on my site to load that much slower because it’s pulling in this Facebook plugin with a feat Yeah, and I’m about to drop that. This actually was like the, this is a perfect time of conversation to make me go Okay, do that, like stat. So that’s one.
Another one I have as a sidebar plugin, which is a great plugin, recent posts widget, I think it’s called. And it pulls in, like my latest podcast and my latest tutorials. And it’s visual, so it pulls in images. But probably just what I said there should have been a red flag, it’s pulling in images that are resizing differently. And that is 100% causing some load time slow edge on all of my posts that have a sidebar. So I’m about to drop that one as well, just because there’s some other workarounds to doing that either just text based or with Divi. And also, I just don’t think it’s it’s that beneficial, like, people can just click on podcast to see their recent one. So I’m really thinking of that through a UX perspective, and what is most important and most needed and what is not. And I think both of those cases are not what you do you think that sound advice, if you were coaching me, is that what you would recommend?
Yeah, absolutely. I think kind of asking yourself those questions. You know, what’s more important in this case, you know, and like there’s certain things where it’s like, yes, it is slowing down the site, but it’s crucial like your e commerce stuff for your site like it 100% is adding some load time hopefully not too much, but you can’t not have that like that’s crucial when you’re selling courses and products and stuff like that. But yeah, those things that are it’s nice to have but not worth the extra bloat. I hate using that word.
Yeah, I feel like it’s that’s a great point. Tim like on a podcast page. I generally have episodes represented are sponsored by a course that I don’t take on ads. And I have a little like promo section that’s like this episode is presented by my SEO course. And that is bringing up a little Divi module with a link to the course and some resources. That is, in my mind very worthwhile having, however, the most recent three tutorials, would that have that other plugin and extra bloat, maybe that isn’t as needed. Or maybe I could just do it in a more lightweight version. So I think this is a great example of how to kind of look at your site or your client site and evaluate what is most important. Within again, you x conversion versus speeds and all goes down the good plugins using good stuff.
Yeah, absolutely. And so yeah, we good to go on this.
I think so. Yeah, that really, there’s not much to say other than use good trusted plugins. Usually the premiums are going to be better and more lightweight than something that’s untrusted or vulnerable. So so that’s great, man. And yeah, let’s let’s wrap up with Step five, CDN content delivery network. This is something that I think confuses a lot of people I know it confused the heck out of me when I kind of started learning about it. So yeah, give us what you got on on CD ends, man.
Yeah, like you said, CDN stands for content delivery network. And basically what it is, I’m just going to read it and help me explain it better read from my guide, a CDN will copy the heaviest parts of your website to servers around the world and then serve the visitor from the server that is geographically closest to them. So in a nutshell, if your website is hosted in the US, but you have visitors that are coming to you from Europe, for example, it’s going to take a little bit longer than someone who is loading your site locally from where you are, and so on with that, if your all your traffic is purely local, you don’t really need to worry about this so much great. If you have web visitors coming from different parts of your country, different parts of the world, then you might want to consider a CDN because it’s going to take the heaviest parts of your site, the images, CSS files, stuff like that, and then load it when that when a visitor loads, it’s going to see what server is closest to them and then load those parts of the of the website to them from that server. And so it can drastically speed up load time.
Great point. Yeah, that that’s a really big distinction to make with like, if you’re a local pizza shop, and you’re just servicing people in your local community, you don’t need to see the end because everyone, there’s that’s your traffic. And in a lot of cases, I know you mentioned this in your guide, most hosting companies allow you to choose what server you want your website to be on, like the files to be on. So you know, if I’m going to serve Chicago server, that’s the one I’m going to choose it to load from there. Whereas somebody in Australia, yeah, it might take a little bit longer to get to them. So for sites like mine for years, or anybody that’s going to have more of a national or worldwide brand. Yeah, CDNs are crucial. And there may be people who say every site should have a CDN. I’m open to hearing about that. But I would think the artillery media type local business service providers and stuff. I don’t know they’re gonna need this, because, you know, it’s delivered to just the people around you anyway. So,
Right. Yeah, exactly. And yeah, and I’m, I would say, on that note, I don’t know the answer for purely local. Because I think you could make the argument that a CDN is going to load some of those the heaviest parts of your site faster. And so that would, I think, be the argument. And so I think at the end of the day, if you’re curious, and your site is, your traffic is purely local, we’ll sign up for one for you know, a month and test it out and see. And that’s why I love WP rocket is they have a partnership with a major CDN called Stackpath. And so they rebranded to call it rocket CDN. And so Rocket CDN and with one click, it’ll automatically configure everything for you. And so you can try it out for a month if you’re using WP rocket and then do some testing and see is it actually making making a difference even though my traffic is low? Okay. So yeah, no, I
Yeah. CloudFlare is another one you mentioned, I think that’s probably the most popular nowadays as a as a CDN.
Yeah. And it CloudFlare is kind of confusing, because it’s not a traditional CDN, like stackpath, and other CDN and then rocket CDN, which is stack back. CloudFlare works a little bit differently. It will speed up your site, and they do a free version. So I put every single website that I create on CloudFlare. And 95% of them is just the free plan. And then a few I have some, some paid upgrades, just because it’s worth it. But for those few sites, but I actually use CloudFlare along with rocket CDN and so I use them together because they kind of do a little bit different things.
It’s complicated. But yeah,
Back to the caching thing when you do CloudFlare, do you have I don’t even know, do you have to do a separate cache? When you have some sort of CDN? Or does that not make a big difference as far as like another level of caching?
Um, yeah, so it is another level of cache. So when I’m like doing testing and stuff, like I’ll have CloudFlare, open, I’ll have my server, like hosting company control panel with the caching page. And so I’ll just go through and, and like clear, CloudFlare, clear the server cache, clear WP rocket cache, godslayer Divi cache. And so, you know, it’s like, you get really quick at going through and clearing them all and stuff, then they do slightly different things. And so, sometimes one will affect whether or not you’re seeing the most recent version of the page and other times, you know, another one, and so I just do them all just to be safe rather than hindering what’s going on. So
Yeah. It is another another cache for sure.
Yeah. But well worth it. Yeah. Very, very, very cool. Well, Tim, this is great, man, your five step guide, I’m going to make sure we link this in the show notes. Just real quick recap. Step number one hosting really good hosting, we dove into some options for that. Number two, good caching, we talked about what that is, and some resources for that, including WP rocket. Step three, which is definitely the most important I think, is optimizing your images and media like video and stuff, talked about some ways to go about that manually. And I have some resources for that. And then with a couple different plugin options, step four was using good plugins and being intentional about when and where you use those five, a CDN to make sure your content is delivered as quickly as possible. I was gonna ask where you wanted people to go, I imagine the actual guide that you have is probably where you’d like people to go after this talk, right?
Yeah, absolutely. Yeah, it’ll it’ll walk you through. And then I have a video too. That’s on the on the blog post. So if you wanted to watch in a video format, basically, it’s a video of me going through the guide. But if you’re already watching this, probably don’t need to. And it’s not
I watched the video. I didn’t read it. At first. I just watched the video. I like, I liked the video. So I thought that was great. And it’s a pretty quick video to write, isn’t it? Like? Is it 10 or 15 minutes? Something like that?
That’s a great question. I do not remember. Let’s see…
Oh, no, it’s a lot longer for Okay, that’s right. That’s right. Well, maybe a deal. Yeah, well, maybe there’s room for a five to 10 minute, quick version, that will be the perfect lead in for the 40 minute for folks who just want to go that’s a great idea. So there you go. That’s on me, Tim. That’s a strategy on me. Or maybe I’ll do a quick five to 10 minute guide, and then link to your video.
And yeah, and I’ll put it on the page.
SEO juice in the making right here. So yeah, well, Tim, I’d love to ask you a final thought on speed. Because of it. We’ll wrap this up here great beginner guide again, as the perfect kind of preface type episode before we dive into the next one, which is more advanced. What are your thought? Like, if somebody is just brand new to web design, and is just overwhelmed by all learning all the things including speed? When it comes to speed? What would you tell them? Is there a certain thing you want to focus on? What What is your advice for somebody just starting out with trying to get better speeds?
Yeah, I would say start with with good hosting, and then go from there. Just like everything with web design you can build as you go, you don’t have to learn everything from day one, it’s impossible. And so you know, you wouldn’t from day one, you don’t learn CSS, you learn CSS, gradually, you enroll in Josh’s course, and you learn it step by step. And same thing with with optimization, you know, start with the basics, good hosting, and then move on from there. And so it can really be easy to get yourself overwhelmed with all the technical aspects and everything you need to do. But yeah, start with the basics. And then as you as you’re learning, you know, start adding in the different optimizations, images and the caching and CDN and stuff like that.
I agree. And I think that’s why your guide is such a perfect, I would call it a foundational guide. Like it’s kind of a beginners but it is the most high impact as well. At the end of the day, though, to me, these are the these are the pillars, the five, you know, the foundation that you really need to understand because yeah, you could go into each one of these in a lot more detail. But as long as you have a good grasp of at least good hosting, caching and images and plugins and CDN, that’s a great place to start. So love what you put together. Tim, always a big fan of you and your resources. I know my audience appreciates everything you do. So thanks for coming on again in such short notice, and I guess we’ll get ready for round four for the next one.
Sounds good. Yeah. Thanks again for having me, Josh. And I’m looking forward to watching the next episode after this one.
It’ll be right down your alley. Yeah, it was some of it was above my head so it’ll be right down your alley.
I’m pumped. Awesome.
Thanks, man. Cheers.