285 – Performance testing during the build

[00:00:00] Nathan Wrigley: Welcome to the WP Builds podcast, bringing you the latest news from the worth rest community. Now welcome your hosts, David Walmsley, and Nathan Wrigley.

Hello there. And welcome once again to the WP Builds podcast, you have reached episode number 285 entitled performance testing during the build it was published on Thursday, the 29th of June, 2022. My name's Nathan Wrigley and a tiny bit of housekeeping just before we begin. I hope that last week you enjoyed the page builder summit.

If you were with us, I really appreciate it. Whether or not you were a speaker, whether or not you helped out in some way, or just an attendee. Very nice to have you there. I hope that you enjoyed the event. It was certainly a lot of fun putting it on, and I do thank an Chan Laro for all of the incredible hard work and also Sunita in the Facebook group as.

If you're interested in the content that we put out at WP Builds, can I urge you to go to WP Builds.com browse around the website, but possibly the best place to go to would be the subscribe link. WP Builds.com/subscribe, head over there and sign up to our newsletter. And we'll keep you informed. When we produce content.

That's typically a podcast episode every Thursday. That's what you're listening to now, but also our, this weekend WordPress show, which we produce live. Every Monday, come and join in the fund. It's at WP Builds.com/live. Give us some comments, join in the chat. And then we repurpose that and it comes out on a Tuesday.

So typically Tuesday and Thursday is when our content comes out. And if you go to the subscribe page, you can be kept up to date about that. another thing I always mention is our deals page. I describe it as black Friday, but every day of the week, go and check it out. Loads and loads of WordPress, plugins, themes, blocks, all of that.

Goodness. And with significant amounts off, it's sure to be a useful thing to bookmark.

The WP builds podcast was brought to you today by GoDaddy Pro. GoDaddy Pro the home of managed WordPress hosting that includes free domain SSL and 24 7 support. Bundle that with The Hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place, invoice clients and get 30% off new purchases. You can find out more by going to go.me/WP Builds. That's go.me/WP Builds. And we really do thank godde pro for helping to keep the WP Builds podcast.

Okay. What have we got on the podcast today? It's episode number 285 entitled performance testing during the build. It's an episode with my good friend, David Wamsley.

We're in our WordPress business boot camp series. This is series three. Episode three. And we are literally talking about that. Performance might be something that you just give or not to. It might be something that you're very serious about. And on the podcast today, David and I talk about all of the different things that you may test and get into some of the things that you probably want to be avoiding as well as some tools and tooling that you might find.

I hope that you enjoy the podcast.

[00:03:35] David Waumsley: Welcome to another in the business boot camp series, where we relearn everything we know about building WordPress sites and running a web design business from start to finish we're on the third episode of season three, where we're looking at. The technical build. And today we are discussing performance testing during the build.

Nathan and I are taking, contrasting approaches on getting our new businesses running. And our first client's site built. She's a lawyer with no previous site called miss a and Nathan, as usual. Shall we just recap on what we're doing? Yeah. I feel like I

[00:04:09] Nathan Wrigley: should pre-record this bit so that I can just press play.

And it's the same every time. Yeah. But nevertheless, here we go. So my approach is the traditional what might be called waterfall approach, where, and this is probably the approach that most people I've think of still got. I would imagine you go to the clients somehow they get in touch with you.

You agree to have some kind of meeting. Put a proposal out, you put a contract out, they sign it, the prices and everything is all agreed. You go away do the work and the deadline is met hopefully. And you hand the website over and then you've got to think about another website.

[00:04:47] David Waumsley: Yeah. And I'm going the agile approach, which is a kind of contrast to the build it.

And they will come approach that is the traditional approach. And here we're trying to build a minimal viable website, which will do ongoing improvements in collaboration with the clients. So it's much more strategic and data driven and ongoing.

[00:05:07] Nathan Wrigley: Nice. Yeah. So there we go. That's the background and this time it's all about performance testing during the build.

Yes. Is that right?

[00:05:16] David Waumsley: Yeah. So we're primarily thinking about the front and back end technical performance stuff. But I think we'll also just touch a little bit on some of the design technical issues as well. So should we describe the problem a little bit with this one?

[00:05:32] Nathan Wrigley: Because you kick it off and then I'll fire him.

Yeah.

[00:05:34] David Waumsley: In the early days and I'm still learning from this, we build stuff without thinking particularly of performance issues and, be new to WordPress. You can introduce so many plugins, which you can do wonderful things for you, like e-commerce and membership learning management systems, but they are a drain.

On your server and you may not be aware of that. You may not be aware how it might perform when you've got concurrent users on that platform. So all these kind of things have tripped me up in the past. Have they tripped

[00:06:07] Nathan Wrigley: you up at all? A little bit here and there, but generally speaking, my work was much more modest, I certainly didn't get into learning management systems.

Nobody. Ever looking for that. But I did a few times things like real estate sites, where there was hundreds of properties and they were being changed all the time. And, the clients didn't know about deleting things. And so storage space ran out and the performance of carrying out faceted search and all of those kind of things.

So yes, a little bit, but possibly not as much as you. And also when you were using WordPress, looking at things, maybe you'll mention this in a minute, theme, forest, mega themes. I think I managed to Dodge that bullet a bit. Yes, because I'd all, everybody was already talking about the fact that these themes are probably not what most people ought to be using as a pro.

They're not the best building block to start from. And

[00:06:59] David Waumsley: I see this with a lot of DIY new people to WordPress. They made the mistake, I did way back. And that was I with my own. It wasn't a client site, thankfully, and I realized the mistake early on, but I got a theme for mega theme for eCommerce, and it was wonderful.

It did everything I expected, but, I realized how slow it was in the back end. And if we develop a lot of traffic going into. Because it's a dynamic system where people needed to add to the cart and go through the checkout, which couldn't be cashed. And I see a lot of people expecting endless, they're on shared host and they don't know anything else they've been sold.

The products that are out there that can do things, they just don't realize the consequences. And since then, I've been really mindful. I went back. Back then to Genesis of a slim theme and did more manually, but ever since I've been quite conscious of what plugins I add in and what kind of Ram they might use up.

Just predicting really for my own business, really, just because of the fact that I make money out to selling in the hosting and I have to pay for the server. So if I can reduce. to, keep it as simple as possible then I

[00:08:12] Nathan Wrigley: will. So there's a couple of things I guess, to add in here.

And the first one is that because WordPress is a bit wild west in that you can get anything from anywhere and plug it into your WordPress website. There's no real, there's no real impediment to any developer. Of themes. Let's go for themes to begin with. Let's say these mega themes, just claiming that it's performance, it would be easy for them to stick that on the advertising materials, high performing WordPress theme does everything.

Yeah. So that's the first bit. And the second bit is there was no thought back then really about all of this, it didn't really matter if your site was slow because 10 years ago that there was no kind of Google getting on your back and saying, look, if your site is performing slowly, you will lose in the rankings game.

There was none of that. So it was just, you had to wait. And I also think people were a bit more forgiving. Back then what I mean is casual users of the internet straying onto any site. The internet was a bit newer and there was an expectation that, oh, it's taking a little while to load, but never mind.

But I think as the internet has gone on, we've drawn, we've become more and more obsessed with speed to the point now where I think really, if you don't load something within the first couple of seconds, you're out of the game the typical internet user now is so used to things being almost immediate.

That some part of their psychology kicks in and says, Nope, go to the next thing. That's not good enough. So there's all of those different pieces in the puzzle as well. And one, one other thing I would say is that as a casual user, There, there really isn't any information out there to let you know that these heavyweight plugins that are doing incredibly complicated things.

Just take the example of L an LMS. You've got , payment, you've got paywalls, you've got different courses. They're all lumped into, under different umbrellas and you've got different parts of each of those courses and you might have badges. It's a lot, there's a lot going on.

And a typical user will just see. I've got WordPress. I bought a plugin. I've paid for it and I've paid for hosting. It should now all just fit together. Surely that's how it works. So I think there's quite a bit of messaging that needs to happen for the typical user about performance, which never ever gets talked about.

In the first experience on WordPress might be a really dreadful one just because you've installed these things. And then you're thinking why is it taking five seconds to do anything? That's no.

[00:10:50] David Waumsley: No, we're still quite obsessed with. And we are true with a lot of plugins and page builders and themes are very keen to be performant now because we're all aware of it because of the new drive we Google, but it tends to concentrate on the output.

And that's fine, if you've got a static site, but if you've got a dynamic one where you can't cash the output that's when you have. Issues. And also, I think also when I'm considering a build I'm having to consider a little bit how much the client is likely to be in there doing things. So with an e-commerce site, chances are they're gonna be in there checking their orders and doing things in the back end using, some of the server resources where my static site.

Will hardly ever be changing anything going in the back and using up resources. So yeah, I've become very conscious of that.

[00:11:43] Nathan Wrigley: I think it's quite interesting that Google, it feels like it was about two years ago. Let's say it was something like that. Yeah. Started to bang this, go about performance and the hit that you might get in the search engine results pages.

And I think that message is getting in. because certainly in the communities that you and I frequent it's, I feel it's died down a little bit for, but for a very long period of time, that was the main thrust of everybody's conversation was how to drive performance so that, everybody was talking about squashing images and minifying CSS, and also thinking about the time to first bite and all of these different things, those conversations had never happened.

Maybe it's just part of the vernacular. Everybody realizes. So it feels like those conversations have gone away a little bit, but there definitely has been a sea change. And. The WordPress core team has now got a performance team and the intention is to shave what they can out of core that doesn't really need to be there.

My experience of a vanilla WordPress website is that it is blazingly fast, but there's obviously. Things in the underpinning architecture that they feel can be addressed and tweaked. And I think conversations with hosting companies are gonna be taking place. So it's not just gonna be about changing the core of WordPress and getting as few queries out at the same moment as possible.

But I think they've got the remit also of going out, having a chat with hosting companies and making sure that they know that things work better on let's. PHP eight over seven. And that, that all of these things are sold to their customers and reliably informed to their customers and yeah, just generally make it, so that, that piece is fixed as well.

[00:13:30] David Waumsley: It's really difficult, I think with this kind of conversation to get the priorities. And that that's what I've been trying to adjust all the time. I remember in the early days, knowing about the dig effect, that popular social sharing platform. Yeah. Where so many sites went down because they were on shared, hosted, and suddenly because they were popular on dig, lots of people were visiting and the sites center, I was aware of that from the very early days and that, but.

Often you hear conversations where people say about performance and that, and the first thing somebody says is you. Better hosting. And so often it's not the case. If you've got good cash in your hosting, probably won't make much of a difference, and there's so much, it depends, when it comes to performance, I,

[00:14:12] Nathan Wrigley: I feel this is a really difficult conversation to have.

So imagine that we are talking to miss a, yeah, I don't think, I don't think this conversation is ever really gonna crop up. This is something that we are. INE clients from, would you say that's true? Do you ever get into this with your clients or do you just tell them that you are gonna do some things to make it perform and that's the end?

[00:14:38] David Waumsley: Yeah, I think I probably found my way around using on static sites, my page builder, and getting the good performance now. So it's not a conversation I would have, but I guess if it came to somebody needing a platform learning management system or something like that, then I think it would have to be one of the first conversations.

Cause there are, there comes a point where when you might have an expected number of concurrent users that I think it might be more cost effective to go with a third party than WordPress. You.

[00:15:06] Nathan Wrigley: And so what, so with your website, are you still using. Let's okay. Let's drill down into your best practice at the moment, cuz I'm always intrigued by what you are doing.

Let's say that I come to you. I am equivalent to miss a I'm not very technical and I just want you to build me a five page site. It's got a contact form, but other than that, there's no blog, no nothing. It's just content, which will never change particularly over time. What is the, what's the build in the background gonna look like for you?

I know you're probably gonna use beaver a builder, but what cashing are you gonna use? Where are you? Where, which hosting company are you gonna go with? And so on.

[00:15:40] David Waumsley: Yeah. I, digital lotion is the hosting I have. Yeah. So I get to control over the size of the server. And actually that's an interesting thing because when new clients are coming in now, I am quite interested to know what type of traffic they will have and it does vary.

So there are, there's a site now which will be getting much more traffic cuz it's events based and it happens in the summer. Okay. There's an eCommerce site that gets busy in the run up to Christmas. There's some sites which are. Really only visited because they're business to business nine to five in, in the working week.

And knowing all that now allows me to monitor the server and expect, when somebody's coming to me, I think where, which server I can put them on, where they will fit in. So I will consider that. But now I've obviously this is, a chat for performance really, but I've learned which things to cut out myself.

To get the best sort of performance on static sites there. Yeah.

[00:16:39] Nathan Wrigley: Okay so yeah if, sorry to interrupt you but if you're on that digital lotion droplet, and let's say for example, that the client phones you up and they say, I've got an event it's launching in three weeks time and we are a ton of traffic.

Yeah. Are you then backing up that site, migrating that site to a different droplet, which it, it's better prepared. Shall we say to handle all of that? I

[00:17:06] David Waumsley: guess I would be prepared for that, but it's never happened. No. It's been pretty regulated, but it is something to think about, I think.

And there are other things I think sorry, we're not even talking about what other things we should test. There is. Things that we probably, I didn't used to do. And I would do more. Now these days plug in compatibilities, I would debug things. I would sit, put that on in WordPress so I can tell if errors are coming up right.

And PHP versions, JavaScript errors I should look for in the browser. That kind of thing, as well as all of this concerns over perhaps concurrent users on a dynamic platform. So all of these things are things that. I've learned to be aware of over the years.

[00:17:49] Nathan Wrigley: Yeah. It's interesting, isn't it?

Because you just rattled off a laundry list there and each one of the things that you just mentioned, there's quite a lot of learning in all of those. And one of the principles of this entire series is that. We're relearning everything. So there is a ton of things that need to be learned there. You could spend your entire life just browsing through hosting companies and trying to figure that out, but then you could spend your entire life just concentrating on caching and you could spend your entire life thinking about whether you want to go headless or not.

You could spend your entire life comparing LMSs and seeing which one is most performance. From the point of view of a newbie into the game of building WordPress websites. This is a lot that you're probably gonna have to saddle for yourself and not really communicate too much of it to your client.

There's a

[00:18:37] David Waumsley: couple of, there's things that I never used to do that I've only done, I would say over the last year or so, which is turning on debugging. Actually putting that script in there in WordPress. So it tells me if there's an issue. And that's quite good. There's there is an online.

Service, which is quite useful if you are careful with it and that's called WP hive. So if you are auditioning plugins that are on the repository, this website, which comes with an extension as well, a Chrome extension will give you some basic figures from their own tests on plugins that are on the repository.

So it will tell you how much ran they use, whether there's any Java script or PHP errors with their run of tests. But you have to be very careful with reading it because it's an automatic test. What it does is it runs it and it shows how the figures would be before this plugin's been activated. And it gives off a lot of false information, false positives about errors.

Sometimes that will happen because you, it may be a plugin that needs another plugin to be installed, to be active, so it's going to, check out an. But it's a really useful site, if you want to just see, particularly for me these days to see which plugins are using up more server resources over time, because you can look on previous versions.

Right.

[00:20:03] Nathan Wrigley: Okay. So this is WP. Hi, even you can find that WP hive.com. I'll put the link in the show notes and just to be clear, it's taking. So is there approach that they throw up a vanilla version of WordPress, stick a plugin in it and then run some tests and see what comes out the other end and then publish those in a way so that you can compare, let's say LMS plugins.

They'll just take the word, the repository version of a plugin and compare it to the other repository versions as.

[00:20:33] David Waumsley: Yeah, you can compare, but it's running its own automatic test on their own server. Got it. And it runs tests to measure has little benchmarks on different backend pages and front end pages, and then tells you what the difference is before the plugin was activated and after it was activated and you.

It's quite good, but in, you can do a comparison, so you can take, say one plugin against another competitor and get an overall score. But I think it will be on wise to do that because say something like Ram use, which is the thing that I find most interesting on it. It gives you an overall view, so it will measure lots of different pages.

You could find that it's got a block on say something like the writings, options, PHP page, which you're not interested in. Yeah. Yeah, bringing down. Total sum. So you really have to treat the information there, look at it holistically to see, because if on a particular admin page, it uses up a lot of resources, but that's not one that's gonna be used by you.

By your visitors by your clients who go in, it's probably not relevant. So you still have to decipher, but it's a really useful tool just to get a, an idea of which plugins are quite heavy. Yeah, this

[00:21:49] Nathan Wrigley: is fascinating, cuz I've just, I won't mention the names, but I've just put in two plugins, which basically purport to do a very similar thing and it, so it's giving me a whole load of metrics about memory usage.

So it's. Polling the front page and telling me what's going on there. And then it's polling a bunch of things in the WP admin. So you mentioned options, dash writing, but this index dot PHP and so on. And it tells me what the amount of memory use usage is for those. Then it runs a page speed test. On the front page and then the same admin pages, like I said, there's about 10 of them.

And then it's showing me a whole bunch of other criteria. So the impact on memory usage, the impact on page speed, any PHP errors, JavaScript issues, and so on. So it's really very cool. I like this. Yeah. And I've never used it before in my life. But

[00:22:36] David Waumsley: I think you do have to be careful cuz I did do my own tests with it.

Cause particularly with the false positive side I put debug on and install the plugins myself to see if they kicked out the same errors as they were recording. And it was not always the case. In fact, more often than not, it wasn't the case. So you have to take that with a grain salt, but generally the Ram use, which is what I'm quite interested in is pretty true.

But you, again, you can't take the top level score. You have to really look at where the Ram use is going. Yeah.

[00:23:08] Nathan Wrigley: Yeah. That's interesting cuz it's not perfectly reliable, but at least it's some kind of some data for free. Yeah, this is great. So that's WP, hive.com definitely worth checking out.

And especially in this mode that I'm using, I like the comparison mode. That's cool. Yeah.

[00:23:25] David Waumsley: And the tool I use just to check that is the one that. Putting most of the time on my sites, which is one called usage, DD. Yeah. And it's, it just gives you a very simple measure of Ram use on the individual pages you are on.

And what I like about it, there is another more advanced tool query monitor, which has been around for a long time. Yeah. But this usage DD is very lightweight compared to that. And also it allows you to see when you are in a page builder editor mode. What is being used when you go into that. So that might be more interesting now.

Particularly I guess if you are using one of the block editors that goes, that builds on Gutenberg because you've got the Gutenberg there and you've also got what they increase on that when you're in the mode. And if you've got clients say going in there a lot, then that might be.

[00:24:18] Nathan Wrigley: I've just seen that you've done a YouTube video about usage DD as

[00:24:21] David Waumsley: well.

Yeah. Eight years ago. Yeah. So just so simple and just to have it on all the time is great. And it, I think it only shows if you're an admin, so you could leave it in there. If your clients have an editor role and it just gives you that basic idea about, It's been useful for me. It's made me cut down or think about the plugins that I would install.

So where

[00:24:44] Nathan Wrigley: does it show? And we all know that you use beaver a builder. How is it showing that? Is it just adding something to the, the equivalent of the admin bar at the top? In B, B, B,

[00:24:53] David Waumsley: yeah. Okay. Yeah, it does it the photo actually. Okay. So it just puts a little overlay on the footer, tiny little bar with just four metrics on it, which you learn what they are.

So it's the page load. It's the Ram use on that particular page. And it can be quite interesting. They've just had a client, actually. Who's building their own website with me that I built sites with them and they've believe they can build this. It's all politics, somebody in there wants to build it.

So they're doing it. But it's really interesting because. For the first time ever, I've had to increase the ramp. The Ram that they allowed on this static site to one gigabyte never had to, this is four times the size that I've ever needed to go to on any site before, because they're adding so much into the custom products page that I've set them, so it's. It's quite revealing having that kind of stuff. So I,

[00:25:47] Nathan Wrigley: I was gonna ask what, typically you throw this thing in and I know what I'm like, I'll look at that data. Yeah. And I'll literally look at it, but whether or not it would compel me to do anything, unless it was seriously alarming.

Do you get meaningful conclusions from it? Now that you've been using, say usage DD for long enough, presumably you'll notice. Oh, that's weird. That's higher than you I've ever seen it before. I need to take some action. And does it help you, does it propel you forward in thinking what you need to do to fix the problems?

[00:26:20] David Waumsley: Yeah, but it guides me like this issue where this one particular page, it's just this custom post type that I've created products and what they've been putting in there cuz see it's increased through that. But also there are things where I've reevaluated things. So I, by default, I always used to use gravity forms.

I've used it forever. It's a great plugin, but it is quite a heavy plugin and sometimes on many of the sites. I have all they need is the page builder one, a very simple one. Yeah. So looking at that makes me think, oh, just move that out. Suddenly I've got more Ram. Why didn't I do this before? Just have it,

[00:26:56] Nathan Wrigley: yeah. So it confronts you with things that need to be done, but not in an alarming way. That's great. I love that. And I've never used that one either.

[00:27:03] David Waumsley: Yeah. Oh, okay. It's good. So it's all pretty new stuff for me. Yeah, so I've got into more I think query monitor's quite good for picking up on those kind of JavaScript errors where usage, DD wouldn't do that.

So that's maybe useful, but yeah, turning on Debo is good thing. What about browser? Do you do any sort of browser testing while you are building? Do you know? It's

[00:27:28] Nathan Wrigley: interesting because the. In do you remember the olden days where this was utterly crucial? In fact, it was in my contracts and proposals that I would test in a range of browsers and I used to enumerate them.

So it would literally say that we would test in internet Explorer, version 5, 6, 7, whatever we were out at the time, Firefox safari opera. That was still a player at the time. Google Chrome back in the day didn't exist, but then it all died away and Chrome took over the world. And so usually now I'll just have a look in Chrome and chromium based browsers and then throw it in Firefox.

And it's so rare now with the tools that I use, page builders and so on. It's so rare that anything looks even remotely different. It might buy a pixel be slightly different, but there's very little work to be done, but you'll remember the days of internet Explorer, six where. That was, it was completely not the case.

We had two utterly different views. If you looked at it in Firefox and you looked at it in internet Explorer, six, they were totally different. Yeah. Things like the fact that PNGs were not transparent. And so on, this was a really big deal. And I remember the day first for the first time putting into my contract that we will not support internet Explorer, six and thinking.

This will be a nightmare. Nobody's gonna sign this contract and nobody seemed to care. So it was fine. And the world moved.

[00:29:05] David Waumsley: Yeah. And you don't, I don't think many I don't know. I don't see other people's contracts, but I remember the early contract killer. And it's still there. The same one you can build from that Andy Clark's open source contract that you can use.

And it's still, I looked at it. Quite recently. And it's still stuck in that era, talking about what browsers you will support. Yeah. It's never been something that I've felt I've needed to talk about, but maybe sometimes it comes back to, to haunt me. And it's usually because right. The. The director of the company who I haven't been dealing with uses something like that.

I had a situation where we'd finished all our work and then the director had come and looked at it and he used I E 11, which had a particular bug just at that time. Ah, it was an I E 11 problem. And I had to find this solution to just appease this one person, because they were using a browser with a bug, and.

Also I've, there's been another situation quite recently, where we're having to really think about the display because the main person who does it looks on an iPad. Now the usage figures for iPad for them is about 1% and the amount of work that's going into making it look good for this 1% of people.

I think these

[00:30:24] Nathan Wrigley: days. The metric. Really my understanding of the browser community really is that on the desktop Chrome or chromium really wins. So that's where most of your effort needs to go. Things like Firefox seem to be declining. And, but you've really gotta worry about the mobile landscape because yes, nobody's nobody that's using Android is using safari.

But everybody that's using iOS. Not everybody because you can get Chrome, but I think most people who are using iOS, which in places like north America is the dominant mobile phone platform. They're gonna be using safari. And so there is a lot of, probably quite a great need and I've had.

I've dabbled with browsers that claim to show what it looks like on those things, but I've never been able to categorically say whether they do or not. The only point of reference is when a client comes to me and says it doesn't work. And I say, screenshot it. And that's all I've got because I'm certainly not gonna be go out and buy the latest iPhone just to test it.

Yeah. Have you ever come across. Like developer type browsers. Like I believe there's one called BLIS. I think it's BLIS, which enables you to show all the different permutations of browsers. I could have the name of that product wrong. And it'll show you what it's gonna look like on iOS seven and what it's gonna look like on Android and what it's gonna look like on this, that, and the other.

It's a bit like litmus for email, but it's in built into a browser.

[00:31:57] David Waumsley: Is it, does it work in the same way as something like horrify where it just, or actually I think Firefox has it natively where you can show the different display because it's just showing you the resolutions or is this actually going out to a device?

[00:32:12] Nathan Wrigley: Yeah. So I'm not really sure about that, but I'm gonna read you their pitch off their website. So I've got the right product name. It's called BLIS, B L I S K. And it says used globally from the freelance segment to the enterprise level. BLIS helps web developers, quality insurance, blah, blah, blah, blah, blah, test, modern web applications in half the time.

And then it's got a screenshot of exactly what I was describing. They're showing the same website in a multitude of browsers, but I do not know how they're rendering that. Whether or not it is truly going out to a browser or if it's just some kind of rendering engine. But but that would certainly save me a lot of time, but I haven't been using it lately.

Anything like that.

[00:32:53] David Waumsley: I have to look into it, cuz I have signed up for every kind of free testing tool. Not that I do, this is not something I do as I'm building generally, but something like browser stack and Lambda test, those services, which actually you, you put in and it goes out to a server that actually shows you the display in that actual device on that operated system.

But that's really, I can't imagine miss a is ever going to pay for us to do that kind of level. Testing,

[00:33:21] Nathan Wrigley: no, I really don't think she would, but it would be quite curious, to know what she's using, because if she's looking at the website through an iOS browser and we fail, then as far as she's concerned, we failed, it's a disaster, the whole, website's a mess.

And we might need to explain ourselves a little bit. This does look good. I do the all the things that are on offer there. But I, unfortunately, I can't tell you how it's figuring this stuff out. I'm hoping that it's actually generating it from a device itself, but I doubt it. I imagine it's just some sort of rendering engine based upon the wits and so on, but I'm not sure.

[00:34:01] David Waumsley: There are lots of tools out there, lots of free websites as well, which will display for responsiveness your sites. And I would like to say that I do that quite regularly when I'm building, just to check things, but only today I shared a link with somebody and they came back and said, just wanted to spot little error there.

And at three. 120 pixels wide that something was leaking out. So I know that I'm not always perfect on that, but it is something that I've now started to do more regularly. Hover fire has been the thing that I go to very quickly to just,

[00:34:31] Nathan Wrigley: yeah. So hover fire is a Chrome extension or an extension for a browser, which enables you to do oh, a whole bunch it's ever so good, isn't it.

But yeah, it allows you to inspect Choose a color picker. You can also with the click of a button, get to any asset that's on the page. So images and so on and so forth. And it also allows you to change the responsiveness. So it does what we just said, but the fact that it's a, the fact that it's a browser I'm pretty sure means that it's not rendering it from a device it's just using the The view port, but yeah, I think hover, I is a pretty, pretty good thing, but D yeah, that's as much as I've gotta

[00:35:11] David Waumsley: say on that.

Yeah. There's no shortage of free tools as well, that do that. And similar products there is the, on the other side on what hover I doesn't do for me is the opposite where you get the kind of 4k monitors now. And with a lot of the, this is something which I've only cottoned onto recently is that I do a lot of full width displays and realize just how awful they looked as cuz you've got a big monitor now.

yes. If you've got some contained content and then you've got some full width content, it can look shockingly bad. It

[00:35:45] Nathan Wrigley: really is interesting. I've got this, I've got a fairly wide browser. It's not like a 4k monitor. Sorry, monitor. It's not like a 4k monitor. The pixel density.

Particularly high, but it is quite wide and websites just look so strange when you put it into full width mode. Genuinely I've got as much space. So let's imagine that a typical website is, I don't know let's go for 1280 pixels. Something like that would maybe be the maximum I would use there's about as much white space on both sides.

As on each side, I should say, as there is of the website. So imagine. You're looking at a normal website, you've got a third blank and then in the middle, you've got the content and then you've got another third blank on the edge. And it does look really weird, but I don't know how to overcome that. The thing I think, which you do is to add a container, to make it look like, I don't know, at least there's something encapsulating the whole website and it's not just drifting off into empty.

[00:36:47] David Waumsley: Yeah, that's become my standard to stick a class on the body or the HTML. Yeah. So I contain it up to 1920 pixels where looking at the kind of latest figures, most people fall under that. So those people who fall under it will see the designers fall with. But then after that they're contained, it could be higher.

That's another interesting element to this as well. You constantly have to. Keep looking and readjusting how you are designing to certain widths depending on how browsers are changing. So that's right. Again, you have to keep monitoring. Yeah. Back in those early days, can you remember whether the I E six, everything was really 800 by 600 pixel five.

[00:37:30] Nathan Wrigley: I had forgotten all about that. That was the typical monitor size. Wasn't it? Yeah. I, I. Nobody's really looking at a browser in that way. The intention, I think of having a larger monitor is that you've really got two or three windows open at the same time. So it was a bit of a fake comparison.

I just made there, realistically, I'm using up half the screen for the monitors for the browser and the other half might have, I don't know, slack open or something like that. So I never really experienced that, but it is weird. But yeah. Yeah. Do you just add some sort of drop shadow, a little bit of a drop shadow to the body class and, yeah.

Okay. Just to give that's right. Yeah. A feeling of a page like it's floating a bit higher. Got it.

[00:38:09] David Waumsley: Yeah. I have this standard color gray really, and a that's right. Drop shadow. And that's it. Yeah. Yeah. But it is interesting. One thing that we will save, I think for later debate, when we talk about legal is accessibility.

That's something again, which is a sort of ongoing design testing. Particularly these days picking the right colors. I used to be terrible for picking colors, which. Given us really high number of men with some kind of visual impairment, it's quite important to do this something I never used to do.

So I think that's growing, but we'll talk about that. I think

[00:38:43] Nathan Wrigley: later. Yeah, the whole accessibility thing doesn't generally, I think come under the performance remit does it, but certainly very important to look at. At some point

[00:38:54] David Waumsley: another episode, Yeah. I think certainly for testing, never until about a year ago, would I have got out screen reader and actually tested it on one of my sites and it's, can be quite horrific really well.

[00:39:10] Nathan Wrigley: It's a hot topic at the minute. Isn't, it's replaced for me, at least anyway, in my feed of yeah. Information about WordPress and websites, accessibility's kind of replaced core web vitals is the thing everybody's talking.

[00:39:23] David Waumsley: I don't think we got much to talk about. Now we could just do a bit of a rundown of the testing tools that are available.

We've mentioned most of these, I think. Yeah. Obviously the key one, which I didn't used to use and I feel more proficient in these days is the inspector tools using Chrome inspector to see what's going on, whether there's any errors there. And it's got, I think one of the key testing tools now it's got lighthouse by people in build, hasn't it?

Oh, that's brilliant. Yep. Yeah. SEO at the same time, the best practice. And what did I miss on that?

[00:40:00] Nathan Wrigley: But I agree with you. I'm constantly looking at that lighthouse thing a bit obsessively actually, but another one that you got me onto, which carries out a similar. Test is the speed vitals website.

Yes. Which you go there, you punch in your URL, pick a destination. And it runs a whole bunch of speed, vital tests. It figures out the. Time to first bite and last sorry, last content, full paint and all of that kind of stuff. And it's really great. And it does it all almost immediately.

You have to wait seconds. Really? Yeah. And then it gives you a full report it's totally free. Maybe there's a, maybe there's a way of giving them some money for more of a, more of an in-depth analysis. I don't know, but it's been useful for me.

[00:40:46] David Waumsley: Yeah. I found it very useful. Just be able to see the waterfall, which, because the.

After finding with the lighthouse stuff. There's not all the information I like. So I do like from GT metrics, the waterfall you've got that now in the speed vitals. And also what I like is that you can. You can simulate a range of different devices and different speeds and different, and you can go from different countries as well.

Which can something we haven't spoken about here is the consideration when you're building the sites is where your server is in relation to the audience as well.

[00:41:18] Nathan Wrigley: Oh yeah. Whether you've got a CDN switched on or not and where the box is, I'm guessing in your case. Being a digital ocean customer, and usually building sites for UK businesses, you are just always picking the London GE.

[00:41:34] David Waumsley: Yeah, absolutely. London server does it. And to be honest, I would probably lose performance for having a CDN, because chances are that local server that goes, that would serve them would be further away than the one that they're already going to. Yes. Yeah. That's an interesting point. Yeah. Yeah. You can lose out can't you with CDNs.

Everybody says it's great for performance and it can be, if you are serving an international. Audience, but if you're not, it can work against you sometimes. Yeah. That's a

[00:42:02] Nathan Wrigley: good point though, that you've gotta think about what the, where the business is. You are lucky, in the pretty much all of your business lands in the UK.

That was always the same for me. I never had to build a website for anybody else. I don't think other than a UK business. So that decision was always fairly straightforward, but if you're building something which is international in scope this starts to become really important.

[00:42:27] David Waumsley: There's another little tool, which isn't really for that purpose, which is Microsoft's clarity, which is a tool which gives you some basic analytics, but it also is a kind of measure of experience testing.

So it if you set it up, it's pretty much like any of these things you just put in a script in your head of code, and then it starts to measure, record. Individual people's journey through your site. And although it's not, while we're building generally, it's something for that. It's really for getting heat maps and recording and seeing where there's problems, where there might be dead links on your site.

It's got some basic measures and it rage clicks and quick backs, whether somebody's going to a page, not getting what they expect and return. So it gives you those measurements. But I actually find it now quite useful while I've just been building sites to have it on early recording my own. Clients'.

Going through it because I can actually see how they're interacting with the site as well. So is it a bit like hot

[00:43:27] Nathan Wrigley: jar? Yes. In that it's creating a little heat map and it's tracking the mouse and you could replay a video of what the mouse was doing at any given moment.

[00:43:36] David Waumsley: Yes, and it's just wonderful.

And you can see, I was watching my own client go in there on their mobile, looking at the site and I could see them pinching out as well, to, to expand the size of the text in certain areas. It just in a bit of early. Because there isn't the money, the budget to put forward. The idea of doing some proper user testing.

It's quite useful just to see somebody else going through your site.

[00:44:01] Nathan Wrigley: How do you differentiate them from you? Obviously, you know what you did. but

[00:44:07] David Waumsley: yes. How would you I can exclude my own IP. Ah, great. I can exclude theirs. But I don't in the first place just so I can see.

And it becomes pretty obvious that it gives you something on the location and the device they're using. And if it doesn't match yours, if there's only two of you on it.

So

[00:44:23] Nathan Wrigley: it sounds like fun. But what are you actually getting out of it? Do you get, you describe that you could see them pinching and zooming and all of those kind of things.

Have you yet had a real revelation moment where they've done something you've gone? Ah, wow. That's not what I thought anybody would do. You know something where you thought this is gold. They completely failed at what I thought was obvious.

[00:44:47] David Waumsley: Not. So I tell you what is quite interesting, cause you can see them, it actually recording them in the page builder editor.

Not that I've learned anything from this, but it is quite interesting to see where someone's moving around and clicking around. Just to give you some idea about how lost or not they are, but yeah, no, I haven't. It's too new for me to really get anything, but I just do think it might be. Yeah, a quick way of getting a little bit of user testing.

So as I've seen on one of the ones that I designed, someone who was clicking on, something they thought was clickable that wasn't. And how many times have you been to a website where you think something should be clickable? Everything indicates you should be able to go to somewhere and it's not, that's just

[00:45:28] Nathan Wrigley: an image.

That's quite interesting. That's that is properly meaningful data. Isn't it? Cuz all of a sudden that needs to be a button or it needs to be changed so that it doesn't look in. Is not described in any way, like something that you can click does it, sorry, we're drilling into this clarity thing, which wasn't ever the intention, but I've got a question.

Does it does it chart the waterfall? So does it show what it looked like from moment to moment or does it just show a background image of the page as it was when the Dawn was fully loaded? In other words, would it show that users are getting ticked off because things are not load.

[00:46:04] David Waumsley: It will measure somebody going from page to page in the one session.

It will list all of the not all of the events, cuz it's not, as it's not as complex as some. Tools out there it's kept very basic, but you can skip inactivity and you can see, but there are some sort of little caveats with it where if they're inactive for more than 10 minutes, it stops for the recording and things like that.

So you might not get a full picture. Okay. But yes, you can zoom down to anything, so on the, on its interface, it's, it has some of these things like dead clicks or rage clicks where someone's clicking and then you can go. You find the percentage of those, then you can go to the recordings where rage clicks have been shown.

And then when you're in that recording, you can zoom down and just find where they were rage clicking. So you can see what was going on at that point. So you can drill quite a lot. It's anyway, it's not really actually it's not really at all for this and we'll probably end up talking about it again.

Yeah. After the build, but it's called

[00:47:03] Nathan Wrigley: clarity and it's free. It's a Microsoft thing and it's totally free. That's

[00:47:07] David Waumsley: fascinating. Yeah. And it doesn't slow your website down. It's just I think it. Phenomenal. I'm surprised more people aren't

[00:47:13] Nathan Wrigley: using it. I'm really surprised that it doesn't slow the website down as well, because you'd imagine it's that, it's phoning home more or less constantly.

So that's interesting. I wonder how they managed to pull that off. Oh, okay. Yeah. So what else have we got? We got a load of tools. We talked about browsers. Oh, I've got something to add about browsers. If you've got a. Yeah, just bear in mind that the more extensions that you throw into your browser, the less performant any website is.

So as an example, I've got several things on my web, on my, in my browser. One of which is a thing called you block origin. New block origin is designed to stop nastiness happening. And for third party scripts to get blocked. Now, these kind of things can have a real impact, not only in the visual display of the website, but they also inject things into the Dom.

It might be that miss a has over the years filled her browser. With weirdness and , some of the things might be slowing things down. A perfect example is my parents. My father has a browser and it's just loaded with stuff. He's obviously at some point, clicked, agreed to download a browser extension, but he probably has no idea of how to get rid of it.

And there's dozens and dozens of them. And every so often I go and expunge them. They all seem to creep back in slowly over time and things really do speed up. So the performance of the website, even if they're looking at it in the same browser as you, they may be getting a modestly different experience cuz of all the different extensions that are in some way interacting and interfering with the website.

[00:48:59] David Waumsley: Yeah. I wish there was a way of being able to, I would love to know. In some ways clarity will give me some information. The type of device that my client's using at that point when I've got it in earlier and there used to be other tools that would do that, which I don't no longer use that would be there for giving feedback that would tell you what device somebody's been having.

But it's just a shame you can't, I don't think you can get that information.

[00:49:24] Nathan Wrigley: Can you, I think you used to be able to get that information because. Do you remember when there was all the bruhaha about fingerprinting. So even if you didn't have cookies companies, like Facebook could figure out that you were a unique user, in other words, who you were because of a combination of things.

And I'm pretty sure that one of them was all the extensions that you had, cuz it's quite likely that your combination of extensions is unique to you. Not necessarily unique, but when combined with another bit of data, like your IP address, it probably is David. We're probably looking at David now.

So I know that information used to reach out, but whether or not the bruhaha about fingerprinting made it that Chrome etal no longer gave that information away. I don't know.

[00:50:12] David Waumsley: Interesting. You will be pleased to know that I installed one of your extensions today, an extension called extension manager.

Yes. Which allows me to turn off those extensions. This is

[00:50:20] Nathan Wrigley: a great one, actually, just very briefly to tackle the problem of extension overload basically allows you with one button to get rid of all extensions, just switch 'em all off, or you can set up a. Little default, I don't know, web development, pallet of extensions and you click the button and all of those become active and so on.

So you can have different scenarios. It's pretty good. It's free. It works.

[00:50:43] David Waumsley: Yeah. And I think test tools, there's so many out there, there are things that you can do, stress testing or load testing all online. That's a possibility. And I'll just mention them in case we don't. When we talk about the color legal stuff, there is something which I start to use a bit more, which is the wave dot web aim.org, which is a website, which you can actually get in one of the extensions.

I always use the developer tool and it's one of those in there which will give you. It will highlight some accessibility issues, but again, As with all of these tools it can come up with some false positives and it can miss things as well. Yeah. And there is also for free, which I downloaded I use now is N V D a, which is the non-visual desktop access screen reader.

Entirely free. So

[00:51:34] Nathan Wrigley: I will put both of those in the show notes so that we know we can get them, but yeah, I think the wave one is one that's been highlighted to me by accessibility people, such as am HES and so on. So definitely worth checking out and you just literally either install it as an extension and it will give you yeah.

Helpful tips on the fly. Or I believe you can. Oh no, I think it is just an extension. I didn't, I wasn't, no, I think you can put an address in when you go to the website as well, and it will give you the same data, but you'll have to actually reach out as opposed to the extension giving you that data on the fly.

Okay. Are we

[00:52:07] David Waumsley: done? I think we are. Okay. What's next? Cool. That's a very good question. Let me just have a look at our notes. So we're talking about third party add-ons so we'll have a chat about chat add-ons newsletters, popups, that kind of thing. Think that we might be adding this could literally

[00:52:23] Nathan Wrigley: go on for years.

Yeah, couldn't it. Okay. Episode four. We'll get to that in a couple of weeks time. Nice to chat,

[00:52:29] David Waumsley: David. Yeah, I enjoyed that. Thanks, bye.

[00:52:32] Nathan Wrigley: I hope that you enjoyed that. Always a pleasure chatting to my friend, David Wamsley. If you've got anything to say, head over to WP Builds.com. Search for episode number 285.

And leave as a comment. Alternatively, go to our Facebook group. WP Builds.com/facebook over 3,100. Very polite. I stress that very polite and friendly. WordPresses giving you useful tips and tricks and comment.

The WP Builds podcast was brought to you today by GoDaddy Pro. GoDaddy Pro the home of managed WordPress hosting that includes free domain SSL and 24 7 support. Bundle that with The Hub by GoDaddy pro to unlock more free benefits to manage multiple sites in one place, invoice clients and get 30% off new purchase. You can find out more by going to go.me/WP Builds. And we do thank GoDaddy pro for their support and helping us to put on the WP Builds podcast.

Okay. We'll be back next Thursday for what is probably going to be an interview episode. As I said, we'll be around doing our, this week in WordPress live show WP, build.com/live on a Monday, 2:00 PM, UK time. And it'll come out again as a podcast. The following day, I hope that you enjoyed that. Like I said, leave us a comment, go and rate us on iTunes and all of that good stuff.

And. I'm gonna fade in some cheesy music as I do every week and say, stay safe. Bye for now.