2.9 Performance Matters
Your theme has to do more than look wonderful; it also needs to load fast and run well. In this video, we’ll go through how you can make sure your theme is performant enough to avoid search-engine penalties and keep your visitors happy.
1.Introduction1 lesson, 00:36
2.WordPress Themes Under the Hood10 lessons, 1:23:49
3.Conclusion1 lesson, 05:00
2.9 Performance Matters
Hey! Welcome back to WordPress Themes, Things to Think About Before You Buy. In this video, we're gonna go through some of the considerations that you should make in regards to performance. And by performance, I'm primarily talking about load speed. The time it takes from landing on a site to being able to interact with the content. It doesn't necessarily matter if a site hasn't completely loaded in a reasonable time, what matters is that a person who's landed at your website can actually start to use it without having to wait too long. And so, what are the reasons that having a relatively quickly loading site are important? Now there's 3 main reasons that you want to consider load speed in a theme. The first is search engine indexing. In the past, load speed was really only about user experience, but now it can actually affect your search engine rankings. If you have a site that loads really slowly, then you may find that even if their content is fantastic, it doesn't get the search engine results that it should otherwise get, because it might be being penalized for being too slow. We see on the page here is a post on Google's Webmaster Central Blog talking about potential penalization of slow loading sites. I'll include a link so you can have a read of this article for yourself, but it does confirm that you can be penalized if your site is too slow. However, at the same time it does say that it's pretty much just the really, really, slow sites that are going to get penalized in the search ranking. It's like you have to be providing a really bad experience to users before you are going to get knocked down. So you don't have to worry if your site is just a second slower than your perfect speed or two seconds slower. That's going to be okay. It just needs not be agonizingly slow, particularly for mobile users. And we're going to talk a little bit about how you can evaluate what kind of loading experience you are providing to mobile users in a little bit. And the second and third reason that load speed is important is that it can affect your bounce rate and your conversion rate. So, your bounce rate is a measure of how many people arrive at your site and just leave before they've engaged with anything on your site at all. Your conversion rate is If you are selling a product or if there's something that your site exists to try to encourage people to do. Say for example, you want to get people to join a newsletter that's going to keep them informed about something that you're working on like a product or a service. Then your conversion rate is how many of the people arrive at your site do the thing that your site is asking them to do? Buy a product, fill in a form, whatever that might be. So there have been some studies done on how page load speed effects your balance rate and your conversion rate. And basically the faster your site loads, the better your results are gonna be in terms of engagement and conversion. So you can see in this chart on the page here, if your site loads in just a couple of seconds, then that's going to give you the best possible conversion rates and the best possible bounce rates. But as your site starts to slow, every second lost is some engagement with the visitor lost. And if the person is not engaged in the site, then they're not going to see any reason to consider purchasing your product or signing up to your newsletter or whatever else it might be. So you can see here that once we hit around the 6 second mark, then the results are roughly the same. So the real area that you wanna try and operate in is get as close to this two second mark with your load speed as you possibly can and really try to avoid getting up to this area where your conversion rates and your bounce rates are really starting to suffer. So there are a couple of ways that you can evaluate how performing a theme is you're considering buying. And again, we're going to be looking at demos and basing our evaluation on the performance of those demos. Sometimes if you optimize your site, then you could actually get better performance out of a theme then you see on demo. But of course, you can't know that until you buy the themes, so all you can really do is go off the performance of the demo. And we're gonna check out three themes that perform pretty well, and like with all the other things that we've talked about it's very rare to find a theme that is perfect in every way. So what we gonna do is just take a look at some that are at the top end of the spectrum that you can expect to see in the range of themes that are available for you to purchase. So if you find that a theme that you're considering purchasing has the same sort of result as these themes, then you're good to go. And because these are at the top end of the spectrum, you probably gonna be okay with some themes that perform even a little worse then these three. So let's go ahead and take a look. First up, we're going to check out this typology theme. This is the same theme we've been looking at for a couple of our demos so far. The way we're going to test its performance is once again by using Chrome's in-built developer tools. You'll notice in the blog post that I mentioned earlier, they suggest that you should use a tool called Lighthouse, and Lighthouse is actually built into these developer tools, so if you see that reference you'll know what it means. So, we're going to open up Chrome developer tools again. And just a reminder, that's Ctrl+Shift+I to open them up, and there's our little lighthouse symbol, showing us that we're working with the Lighthouse system. And what we're gonna do is use one of these in-built audits. So we're gonna say, Perform an Audit, and you can check one of these items here. You can do multiple audits at once, but what we wanna look at to begin with is a performance audit. So check Performance and then just hit Run Audit. It's gonna go through and test a bunch of stuff and do an automatic evaluation for you. So just give it a little time and let it run through all the steps that it needs to run through. All right, so that has finished scanning the site and evaluating its performance. And you can see here, we've got a pretty good score. We're in the green. Pretty much whenever you see green, you can take that as being fine. That's a great score. And we've got 85 out of 100. Now one of the things to bear in mind when you're running these audits is there's a whole bunch of variable that can affect the score that the theme comes up with that are not necessarily to do with the theme itself. If somebody else is running a download on your connection, if your ISP is congested, if your operating system is running an update, all these things can affect the score that you're gonna get. So the best thing to do, if you're considering buying a theme is run this audit a couple of times and ideally, at different times of day so you get a few different scores and then you can see where it average tends to fall. So, for example, I have run this audit on this theme a few times and the score has typically fallen between the mid-80s, you see here, and up around 93, 94. In fact, it's most often gotten a score up in the mid-90s. So to demonstrate that, let's just run another audit and see what score it gets the second time. So there we go. This time we've got an 87 out of 100 score. Of course, Murphy's Law is any other times I have run this order on this theme it has got that mid-90s score far more often than that 80s score, so just bear that in mind. If a theme does give you a score lower than you're expecting, let's say it gives you something in the 70s or 60s and you think that's it, I can't use that theme, give it another chance. Come back later, run a couple more tests, and just make sure that it wasn't a period of time when your overall connection was suffering for one reason or another. All right, now let's look at a couple of other examples. This theme is another one that when I have tested it previously has scored in the mid-90s, so let's give it a run and see how it goes. Today it's coming up with a score of 77. So that's a good demonstration of why sometimes it doesn't pay to be overly critical of a theme's load speed, because there is all kinds of variations that can affect the load speed on a given day. So take green as meaning passing. So this one will be interesting, because previously this one scored 76 out of 100 for me, which we would consider to be a passing grade, it's in the green. And let's see what we get today. Today it's actually got about the same score that it did in my previous tests, 75 out of 100. So once again, that's in the green, so we'll count that as a passing score. Now there's another way that you can try to evaluate the performance of a theme, and that is using Google's PageSpeed Insights tool. So we just run those same sites through this tool, Scrub the URL, and paste it in here. And of course I'll give you a link this PageSpeed Insights tool in the notes below this video. Now here we can see that there are two different scores. So it's evaluating how well it's performing on desktop, and it's giving us a score in the green, saying that's very good. In the mobile, it's giving us an okay score. Now take this as just one thing in the overall picture of the performance of this theme. We're going to have another way to evaluate performance in mobile which we'll go through in a couple of seconds. Don't necessarily decide if the theme is not going to work for you if you see something in the orange here. Get a bunch of measures and then put them together, sort of average them mentally, and use that to help you decide if something is performance enough. Because on the one hand, you have this orange score here, but you have a green score coming through here and you have quite a good performance coming through on this score here. So let's try this theme as well. And it's still particularly helpful because it does give you that division between desktop performance and mobile performance. And it's often the mobile performance that you really need to work well. So, this theme has done quite well on both mobile And desktop, so we've got really good scores on both accounts. And then we'll have a quick look at our third theme. And the other thing to bear in mind with this testing tool is this doesn't actually actually test the real world performance of a site. What it does is it has a list of best practices and it lets you know how many of those best practices this theme uses in application that may or may not affect the load speed of the theme. This just gives you, sort of a score on how the theme is coded up. So once again, we've got a medium score for mobile with this theme. And on desktop, a good score. So definitely, though, try to get at least one of these scores in the green. And then, in practical application, you're definitely gonna have a much better chance of having a quick loading site. All right, now the next thing that you wanna do to evaluate the load speed of a theme is to actually just watch the load speed happening live. Again, using Google's web developer tools, we can go into the network tab here and we're going to get a little time displayed here telling us how long it takes this thing to load. So what you want to do is go up here and hold down this refresh button. And then choose Empty Cache and Hard Reload and that will simulate the experience that a person's gonna have when they're coming to your site for the first time without having any of your content cached. So let's watch that and see how fast this loads Right, so there we go. The main content is loaded in 1.5 seconds and everything is completely finished in 2.8 seconds, so that is a really good score. You remember we wanna sort of hover around that two second point if we can. We'll do the same thing on our next theme. Again, really good scores. Under a second with getting the actual content in and a little under three seconds with rendering it completely. And we'll look at our last theme here, Network tab. Hold down and empty cache. Hard reload. This one's a little slower and that's one of those things that you're gonna have to start weighing out. You've also got a lot more stuff happening on this front page. The other themes are a bit more minimalist and this one has a bit more focus on presentation. So it's gonna be up to you to determine which of those two things is going to be more important for your site project. This is still not to bad. Three seconds for the initial load. Five and a bit seconds to complete the loading process. At those times though, desktop loading times on a full speed connection. What you also want to do is try to simulate the process a person is going to have on a mobile device that might be on a 3G connection for example. Now the way that you can evaluate that is by hitting this little drop down here and then choosing Fast 3G. You can choose Slow 3G if you want, but I think it's probably reasonable to assume that if somebody knows that they have a bad mobile connection, they're gonna a have a little bit more patience to wait for sites to load. This is probably gonna be more representative of the average mobile user. So you switch to Fast 3G and then it's the same process again, hold down and empty cache and hard reload. Now that's still a really good score. That's a considerably slower connection that's been allowed for and it's still coming in just a few seconds. Let's try the next one, Fast 3G. This one has a really good initial score and a little bit longer on the completion, but that is still just fine because you might have noticed that you started having some content appear on the page before the loading had completed. And that's what really counts, giving people something that they can interact with, even if the rest of the site is still loading. And then, finally, we will check our third theme. So, our initial content is in. That took about four seconds. The rest of it is still loading. But that's still not too bad, because we could start reading this content even while the rest of this loading completed itself. Now I would suggest that it's these load speeds that are what really counts when you're evaluating the performance of a theme. The other measures that we looked at can definitely help give you an overall picture. But, the proof is in the pudding. If a site has a really bad score on the audit and on PageSpeed Insights, but it loads fast, then that's all you really need. And conversely, if something has managed to somehow get a great evaluation score, but it still just loads really slowly, then that's not gonna help you out. Although that's unlikely if a site does get good valuation scores the chances are you are gonna have good load speeds as well. All right to recap, try to keep you theme loading terms some are in between the two and five second mark and, the faster, the better. The faster your site, the more engagement that you're gonna get from people, and the more likely you are to have decent conversion rates if that's part of your project's goals. The next lesson, we're gonna look at the last area of consideration for the course, and that is accessibility. We're gonna go over how to make sure that your site is accessible for everybody who wants to visit, including people who may be needing to work around disabilities. So, we're gonna go through how you can check that your theme is up to standard on the accessibility front in the next lesson. I'll see you there.