 There we go. OK, so one thing I am not talking about today is caching plugins. But I would talk about anything else that can improve the performance of your website. We can talk about caching plugins maybe later in the questions and answers. Keep the questions to yourself. And we will answer that all afterwards. So I'm going to talk about three main points today. First, what is performance? It's a really nice word, but what does it actually mean? Which performance tools are available so you can use to check how performance is your website? And then I want to share with you what can influence good or bad performance on your WordPress website. So let's start with performance, which is often used as a fancy buzzword, because get your site fast, make it performant, but what does it actually mean? And what I've learned over time talking to people is that they think it's like a setting in WordPress. So they think, OK, I have to install the plugin and then boom, my site is super fast. And it's not just a setting. And it's not a setting in WordPress. It's not in your hosting. And it's not any plugin or caching plugin that makes it super fast in your website. Performance is the continuous optimization of all components. So you shouldn't do it just once. You should do it on a regular basis. You check your site on a regular basis and check on everything what's making your website complete. So it's the hosting. It's the WordPress itself, plugins, themes, content. I will talk about these later on. So what performance tools are available? So there are various tools you've probably already have heard of. I will highlight a few of them so you can get a general idea. First one is PageSpeed Insights by Google. You probably know this one because it's mostly the most popular one. And it gives you a score in this circle. 100 is here. My website, when you view it on mobile back then, it's a bit not that good anymore. But that's OK. I will talk to you about it later on. And it just gives you the score, which is calculated by many various factors. It can be green, so it's pretty good. It can be orange, so it's average. Could be improved, but it's not that bad. Or it's red. Then your website is really bad. And you should really take action on something. And in the recent years, I would say, they have improved this also for WordPress websites. So they can see, OK, this and that is happening. Maybe you want to look at this particular point. So your images are too big. Or there's too much unused CSS are the most common ones. So you can get the suggestions down at the screen. The next one, which is a bit more technical and a bit more advanced, is a web page test. Basically, it does the same. You put on your website, and you have a bit more of configuration, like which browser do you want to use, which internet connection do you pretend to use, do you want to pretend to use, where is the testing server coming from. That settings you can adjust. And then it makes a check based on the settings for your website, and gives a very detailed overview of everything. That's pretty impressive. But for someone who's not into this, it can be pretty overwhelming. So that's one thing I want to mention. And they recently also introduced these opportunities and experiments tab, which is similar to what PageSpeed Insights already does in saying, hey, maybe you should optimize your CSS or your JavaScript files and stuff like that. The next one is GTmetrics. It's kind of an in-between between PageSpeed Insights and web page test. And when you look at this website, without being logged in, you can only make the tester, or you only have the test server location in Vancouver, Canada, which is a bit, now we're here in Europe, not so good thing, because it basically means there is a distance between Vancouver and Europe. So these results are not as accurate as they should be. Especially when your website is hosted in Europe on our web server. But you can get a free account, and then you can choose the location from the test server to, I think it was London, UK. And then you can have it closer to you. So you get a more accurate test results for that. And if you're really technical, you can also use the browser DevTools, so Chrome and Firefox also have in their DevTools a specific set where you can view a couple of things. They do not give you suggestions like improve your images or reduce your CSS, but you can see the numbers and can check what the website is doing about. So this is more a bit of an advanced tool, but it's there built in in your browser. And next on, I want to talk about these, yeah, let's say, pillars on what makes a website performant. So as I mentioned earlier, hosting is one of the things. It should be like you should check or choose a hosting package that suits your website. When you have a small website, it can be a whatever, $3, $5, $10 hosting. That's totally fine. But for example, if you want to go for a WooCommerce shop, and WooCommerce is a plugin that is heavily using server resources, then you shouldn't go for the cheapest hosting package. You should upgrade it to something more bigger, more powerful, so that your server can serve the WooCommerce website really well. And also, you may want to start out now on a smaller hosting package, because your website is brand new. There is nothing specific on it. But over time, if a website grows, you should check back maybe if you get now 100 visitors a day. That's fine. But if you in two years' time get 100,000 visitors every day, I don't know if a $3 or 3 euro hosting package is going to serve you well at the point. I've heard a story too, where a host really had to block or cancel a hosting package, because that person completely overused it on a very small hosting package and had like thousands of visitors every day. So that's what it was really a really big number, so it's very rarely happening, but it does happen if it really gets out of hand. The next thing is WordPress itself. Of course, have the latest version running. If it's possible for you, I know sometimes you want to stay on an older version of WordPress, but then please make sure you have the latest security updates on. It's always good. And on production sites, disable WP underscore debug, which is also giving out extra content, which is not needed not just for performance issues, because also for security issues. And WordPress is an important thing now that there is a performance team, a performance core team, who's actively working on improving the core WordPress. So it's more important than ever that you have your website up to date on the newest version. So you can make use of what is changed in WordPress to improve the performance. Next up, we have themes. So there's a lot of themes out there. There's a lot of big themes, small themes. You often hear of multipurpose themes that can, you only buy it once, and you can make like 10,000 of different websites. You can do that, but these themes tend to have the issue that they serve a lot of assets, or a lot of CSS, a lot of JavaScript, a lot of font files. And when they load them all into your website, and you need like just 20% of it, you're loading 80% of assets that are unused, but you're still serving them to your visitors. So you maybe want to look into specialized performance optimized themes. There are a couple of them on the market. Research for ratings or recommendations. And of course, now with full site editing coming, or it's already there, but it's getting more and more stable and gets more features, so it's actually useful. It's always good to keep an eye on it and maybe experiment with it, even if it doesn't fit for your website yet, because it's really great improvement of performance because it reduces the amount of files you have, and WordPress Core is basically natively giving you a lot to have automatic use of full site editing to have a performant website. Then up we have plugins. This is probably the biggest thing where a performance can be bad because of many various factors. In general, use as many as necessary as few as possible. That's my general rule personally that I've found out over the years that it makes more sense. There is this myth of don't have more than 20 plugins, 30 plugins, 50 plugins. Forget about it. It doesn't matter how many plugins you are. The quality of the plugin is the most important thing. It's you can have a plugin, a small plugin that is badly coded that causes your website to do lots of unneeded operations and then therefore makes your site slow, and you can have 100 good coded plugins, and it doesn't matter at all. So don't just rely on the number of plugins. It's basically the quality of plugins that is important. Of course, I said earlier, WooCommerce is a plugin that is a heavy user of resources. So of course, there's not much of an alternative to that, but it doesn't mean that it's not a good use. Of course, it has a lot of features and it's useful for many, but then you have to look at, OK, what else can I improve on my website that WooCommerce is not like the bad player in this case. And of course, have a look at the WordPress plugin repository. Go there and then same for themes. Is there a paid plugin? Are there what are the ratings? What are the recommendations for other people? Or do they even have a free version of the plugin with a limited scope that you can test out first and see, maybe, OK, is it a good fit from just not only functionality, but also from the quality of code or does it make your website slow at all? One other thing I want to mention is the external resources. And with that, I mean stuff like Google Fonts. OK, we are here in Europe, so GDPR is a thing. And basically everything, Google Maps, some ads, Instagram embeds, YouTube embeds, you get the point. Anything that is loaded from other websites onto your own website can slow down your website, depending on how responsive the other server is. So of course, the less, the better. And in terms of GDPR, we always need to look at it, not to do it much and get the content of the users. So this is also helping to think about this and not like overflowing your website. I see it often on home pages that they put like an Instagram bar of Instagram images on there where I think like, yeah, OK, you can do that. But even if you get the content from the user, it's still bad for the performance, because the server has to go 10 times to Instagram and say, hey, can I have this picture? Just display it on your web server. Speaking of images, it's probably one of the most one of the things that's got wrong a lot. So one thing I noticed over time that often people just upload the image as is, because it's, hey, it's coming out of my camera, it's coming out of my phone, whatever, you get a massive file. There is an option in WordPress that reduces it to a fixed size first before uploading. But you still can go below that, because if you're just using a small 150 to 150 image, because you don't need it larger, it doesn't matter. It isn't needed to have it in like 1,000 by 1,000 pixels of a size. So upload them as small as possible as large as needed. And further image optimization can be done through WordPress plugins. There are a lot of plugins out there who can help you with that. So even if you have saved them as save for web in your photo editor, you can still get a bit more reduction in file size with these plugins. So I always recommend having at least one of these on your website just to make the files even smaller. It's not often they can do it. So it's not visible that it's less of an image size or less kilobytes or probably not megabytes kilobytes. But it still can improve your website. So I once had a client who had, it was a photographer. And a photographer got around this, as I mentioned earlier, this file size reduction when you upload a picture to WordPress. So it gets reduced to like, what is it, 2,560 pixels on maximum side? And yeah, his home page had a whopping 50 gigabyte of data to be loaded. It's a bit much, to be honest. And even if you have a fast internet connection, it took a while to load all these pictures because he's a photographer. He wants to show off his images. And that's when I said, yeah, you can do that, but there's better ways to do it. And especially reducing the file size of the images can serve you a lot of trouble in a bad performing website. And also one thing that is a small thing, but often overlooked is when you add an image to your content, you can choose the image size to have a display. And often people have it, I think the default is big or full. I don't know what the English term is. And sometimes you don't need to have a 2,000 pixels wide image when you're just having it in a column that is at maximum 500 pixels wide. So you can go for a smaller image size if it's registered in your WordPress. So you can just load the image that has the size and fits the content and has less and is smaller in the file size so you don't load stuff that is unnecessary. Can we do that later? Yeah, OK. I'm almost finished, so it's not long ago. The next thing I want to talk about is content. So people often think, yeah, why should I care about my content? I just want to put all of my stuff on my website. I once had a client who had a super long homepage, like really long, really, really long. And it was repetitive content. They had lots of categories on their website. So for each category, they had a block of the latest five to 10 posts. And it was so long, it was really, the browser was literally exploding. So I told them, OK, maybe we can reduce this. And they first were like, yeah, really, should we reduce that? But it turned out that the less HTML they had on their website and it was really a lot. When they reduced it, the site got faster. Guess why? Because there's less things to load so websites can go faster. And talking about the photograph I had with the lots of images, if you want to display image galleries or anything else that has a lot of content, make it a sub-page. So when you go to gallery, you expect it to load a bit slower. And on that sub-page, it's OK if it's load slower. But the home page is the first page that people go to. And if it doesn't load super fast, they're clicking away and going to the next. So it's a really great improvement there. Yeah, now comes my developer side a bit out. I would like less sliders on the websites. But I do understand that many people just like sliders or animations. And in recent years, there's been a lot of optimization going on. So the browsers can support more technically advanced stuff with which you can make sliders and animations more useful. That's a very interesting topic. I could go deeper in, but just that you heard it once, that there is the possibility to do this. So that's also a thing. And of course, avoid autoplay of audio for our video files. We all don't like it. Like just a phone got off. When an audio goes off, a video goes off. Automatically, you're like, no, I don't want that. And especially when there's a video embedded or audio embedded on your site and it's not on autoplay, the file contents does not load. It just loads the metadata. And you can choose that also in WordPress when you use the audio or the video block and the block editor, for example. And when you have it that the user has to actively push the play button, then the entire file gets loaded. Before that, only the metadata is loaded. And if you put in autoplay, of course, the entire file has to be loaded because it needs to play immediately. So in conclusion, there are many things you can do to improve your performance. Of course, you can also use a caching plugin. It does give you a great help with your website. So I'm not saying the caching plugins are bad. They're actually helping you in this. But it's not just a caching plugin that makes your website fast. Also, one thing I noticed when working with clients is that they want 100 in their PageSpeed Insights score. I mean, I can do it on my website because I can actively choose what I want and what I do not want. But sometimes you have a client who wanted to use a very specific plugin and it was making their website slow. So I tried everything else to fix, to make the website fast so she could still continue to use the plugin because otherwise she would be bummed because that's how she worked and that was her thing to use it and was important for her. And then I had to say, yes, sorry, I cannot go any further with this. The score is as it is because of that plugin. So try for the best, but don't be sad if you don't reach 100. As I said earlier, my website, when you go check it on PageSpeed Insights on mobile, it's now a bit, I think it's at 95, which is still pretty good. But I'm not mad that it's not 100 anymore. That's the point. And every website is different. And that's the really interesting thing of performance because just because it works on my website, it doesn't have to work on your website. So you have to look at it individually at every website, how is it set up, where is it hosted, what plugins, what themes, there's this big pool of pillars you can choose from, where to optimize. And every website is different in that point. All right, that's it. Thank you very much. Thank you. Jessica. Yes. Who has learned a thing or two new today? Yay. It's your hands. Yes. Who has still questions? Raise your hand if you have a question. OK, let's start with you, please. OK, you start telling that you don't, you mustn't need YouTube embeds. But later you said, if it's not playing automatically, and it doesn't hurt, what is the suggestion, what should you do? Sorry, don't get quite what you're trying to ask me. If you embed a YouTube and you don't say autoplay, does it hurt? That's what it is. In the case of YouTube, it still loads data from YouTube, but it's just the metadata. It's just, OK, the video has this thumbnail. It's had this title. It's this long. So there is some data loaded, but not the entire video file. That happens when you hit the play button. Yeah. Yeah. So it's a bit, I'm not saying you should avoid video audio at all. It's just like this autoplay thing can hurt your website at that point. But it's totally OK to have an embed or whatever on it. It's my best. All right, great. Had someone writing her hands first? I think she was, yes. About the images on pages making them small or not bigger as needed, but if you're making a website mostly poor, say a mobile phone, which is often, then the mobile phone gives you a small picture. In that case, it doesn't really matter, or it's still useful to make it small on the page. If you really focus on mobile and like you have, I mean, it does make sense to make it small as possible. So if you really have only mobile visitors, then you just need like what's the width currently on mobile? 100. Let's say 200 pixels wide, for example. It's OK if you just have 200 pixels wide. If you view it on desktop, then it's, again, just 200 pixels wide. It could be bigger. But WordPress also makes use of media queries. So different file sizes are loaded, depending on what device you're using, what the view put width of that device is using. So when you're using that functionality, you can upload a big picture. And then when the website is served, it says, OK, a mobile phone is asking for the website, then let's serve that smaller picture. So you still get loaded the small picture. But if a person on a desktop would open this website, then it would get served the bigger picture. Then you upload the big picture. Yes, you upload the big picture. But also make sure it's not too big. That's the main point, that you don't need a 5,000 by 4,000 or 6,000 by 4,000 pixels big image because nobody's going to see it anyway. So it gets reduced by WordPress to 2,560 pixels, either width or height, depending on what's the bigger side. And then you can still choose to, you don't mostly, if you use it as a background, OK, that's totally fine to use the big one. But then if it's just in your content, and your content is no bigger than 800 pixels, use a smaller size just for the 800 pixels. So you don't load the 2,500 pixel image. That's still quite of a reduction in file size. Then because WordPress chooses the picture. No, no, you can choose the file size while importing. But as I just said, based on the media queries, that's embedded into WordPress as well. But you can say what's the biggest picture I want to provide. So if it's just 800 pixels, then choose the smaller one. If you need a bigger one, then use the bigger one. But on smaller devices, it gets loaded the smaller one anyway. Yes? You had a question? I have a question. You were telling about hosting that don't use for a cheaper hosting than have a big website. But how can you find out what you need for your websites so that you can see on the specs of hosting party? Yeah, that's a bit of a thing. That's a bit of a tricky thing because you need to know what your website is about. So if you just have a small blog and just post maybe stories about you or about something else, maybe have a few pictures on it, then most packages are working fine. But as I said, if you're working with WooCommerce or anything that's giving a bit more functionality or using body press, for example, or anything that has lots of things to do on that website, then it's a good idea to upgrade. You can, of course, I guess most hosts, when you email them, they will ask or you can ask them, I have this plan for my website, what could I choose? And you can try that with different hosts and to see what are they recommending me or you can ask any other people here at the World Camp, for example. They were most likely going to help you out with this decision because I know it's hard for people who are not technically advanced at this point. So I cannot even give you right now an answer because I need to know what your website is about. That's a point. I was wondering if there is some kind of way you can see at WooCommerce that you would need to learn how it works. I'm hoping that we have like two or three processors. But generally, if you're just starting out with a website and you have it, for example, for a local shop or something, then anything on the small or on the shared hosting site is fine for the beginning. And you can still upgrade later on. So most hosts allow you to upgrade later on and maybe get on a managed server or anything. So just talk to people. Most of you can grow also with your website. You can start with a small one. And then after that, you upgrade every time. Yeah. And you had another question. You suggest to use plug-in to optimize the image. Yes. For me, it's a little better if you optimize before. And you upload like WIPP because you talk about image, but not about the WIPP is the best format for the website. That's because WIPP is not fully supported everywhere yet. That's the big issue we are having currently in the discussion, bringing WIPP to WordPress core. Because not every, I think it was Safari, Safari Mobile or something. Yes, Apple is a bit behind on that. I'm not sure. I have to look it up. I can't tell you there. Yeah, also older browsers. So if you're still like people still go around with Internet Explorer 11, something like that. No, but it's not 4 or 6. Yeah, let's say it's 11. So they have reached the end. And it's not perfect. Yeah, and also older browsers. And it depends also. There are regions in the world who have not like the top-notch tech we are having here. So when you're serving that, for example, on that website, I guess it's not in our general case. But then if you're serving a website that is frequently used on devices with older browsers or older devices, and you use the new fancy technology, they won't be able to see your site. So it's about what your website is about. Who are you targeting with? You can, of course, you can go for WIPP. I'm stopping you. That's OK. But in general, it's not there yet that we can all easily use it. And it always works. That's the main point. It's also what's the main point of the discussion with WIP in WordPress itself is. I had a question over there, still. That's a few. Thank you, guys. Yeah, you mentioned I think it was in WordPress 5.6 that we got the compressed version. So as you said, the WordPress is going to compress. But I'm not really sure if they also optimize the DPI. So when you upload an image of 300 DPI, it still keeps the DPI, except only compressing the dimensions. I don't know the current version. If someone knows if it's being depressed to 96, but on the other hand, we also have the high DPI. The retina versions, they took X, the DPI now we're having. So that makes it also a lot more daunting to optimize because when you go to 72 DPI, when you look at an iPhone, your image gets blurred, you know, because it's not really crispy anymore. So that's also a daunting task. That's a very good question. I cannot answer, to be honest, but that's very interesting to look up later afterwards, I guess. So we have to have to check it. Yeah, I have room for two quick questions, please. Yes, when I have optimized my website, and I learn to do it, and I think, wow, that's pretty good. Then I do it again in Google Insights, and on the mobile part, it is very bad. And I don't know how to improve it. Oh, yeah, that's a good thing. Because I guess GT Metrics, from what I remember on the spot, is they are also looking like a desktop website, and PageSpeed Insights is like, it's separate for them if you move it in mobile and in desktop. And they also, to calculate that result, they use different settings. So they use, what they use is an emulated phone, it's like a virtual phone, and it's an old phone. So they, and they use it on a slower connection that you would use on a desktop. So when I go now here, I'm locked in in the Wi-Fi, it's pretty fast internet connection here. Well, when I go outside somewhere, like in a forest or something, where the internet connection is bad, then of course the website takes longer to load. And that's also the difference that Google PageSpeed Insights is making. It's differentiating between a fast internet connection with a cable on the desktop version, and a slow, I'm outside in the forest with bad signal, and that's why you get two different things. So that's also why it can happen that your mobile score is like orange or something and your desktop score is pretty good. That's the difference, because they are testing from different settings to see your website. I want to know it because my clients are also sometimes smart and are going to the Google PageSpeed Insights. Oh, it's not good enough. And mobile is the first thing you see. I know, I know. Yeah, that's a tricky thing, but they're testing it differently. So that's why you can get different results on that. Last question. What's your view on page builder's life? Oh, great question for the end. So do you want a perspective of performance or of development? Okay, so they of course bring you a lot of features for the end users, but to do that, they have to load a lot of stuff to make it happen. So you cannot have a super fast page builder without having a lot of assets to load. So I know that Elementor has taken action on this in the recent years to improve their performance and to reduce unused stuff and make their HTML a bit cleaner. But still, when I look at an Elementor website, there's still lots of this. There's still lots of stuff and CSS files loaded. I think they have improved. So you can load when you're a plugin. Now it's getting a bit technical. You can load or you can say only load this file when this is happening on the website, for example. When I'm using this item in the content, then only use load the CSS and the JavaScript for that file. So you can fine tune that. And I'm not aware what others are doing, but in general, of course, the more stuff like this you add on a website, the slower it gets. And that's what I said with the plugin earlier of my client who couldn't get rid of that one plugin. If you're stuck with Elementor or any other page builder, you do not want to get rid of because it's working for you, then it's totally fine, but still you have a lot of other options to improve on.