Danish Naseer: Hello everyone, welcome to day two of the Cloud Bootcamp. We had a very fantastic day one on the boot camp, we had some sessions around accessibility, web performance, we had Sabrina Zeidan with us, we had Amber Hinds with us, and we had a very successful day one, and we have a very great lineup for day two. People from WP Rocket, from GTmetrix, Cloudflare, DebugBear are joining on day two. Before we officially begin, I would like to see some reactions on the stage and in the comment section, you can share the emoji, you can share the gifs as well, to share your mood, how you are feeling today. I can see some reactions on the stage. Let’s see the comment section and then we can start the day. There are a few people still joining us.

Before we begin, I have some announcements for you all. First of all, I would like to inform you that we activated the leaderboard, so it is your chance to win some points and win big prizes. We also have some activities lined up for today, so it is your chance to participate in the activities and win big prizes. I would also like to give a shout out to our partners, GTmetrix, WP Rocket, EWWW, Gagemage Optimizer, ShortPixel, FastPixel, DebugBear, and there are many others, so a big shout out to the partners as well. And I have another announcement for you that is related to the spring campaign. So Cloudways has launched the spring campaign, the promo code is HIGHSPEED. I will also share the promo code in the comment section. So it’s 30% off for 5 months, so you can take advantage of this promo code. You simply have to go to the pricing page where you can see the live chat, you can connect with the pre-sales chat members, they will guide you about this spring campaign. So it is your chance to avail this campaign, I am sharing the percentage off and the promo code in the comment section, so you can take advantage of it.

So the session today, the first session of today, is on the performance side, how we can fix the 80% of the problems of WordPress, and this topic will be covered by none other than Marko Nikolić. Marko is a part of the WP Media team, and he has been a part of the WP Rocket team since 2015, and he is a performance expert. So hey Marko.

Marko Nikolić: Hi, Danish, how are you doing?

Danish Naseer: How are you? How are you feeling about this event?

Marko Nikolić: Well, very excited, because I was here yesterday and I saw the audience is on fire, let’s say, so many good questions, so many activities, so I’m very happy to be part of this boot camp.

Danish Naseer: Perfect. So without further ado, the stage is yours, you can start your presentation, Marko.

Marko Nikolić: Yeah, okay, thank you very much. So, hi everyone again. I’m happy to be here and I’ll try to be as concise as possible in order to keep some time for your questions. I really hope you will ask some good questions and we’ll have time to cover them. As Danish said, we are talking about, is that possible, and how we can fix 80% of WordPress performance issues in under an hour. Let’s dive in and start. I will share my presentation in chat, so I will do it here. And let’s go.

There is a statement of some people, and it’s going on for the last 10, 15 years, that WordPress is slow, WordPress itself is slow. And I would like to talk a little bit about that. First of all, what is WordPress for me, and for a standard WordPress user? Let’s say the main statement of WordPress is that it is built to democratize publishing, which means it is designed for everyone, and it gives you freedom to build, change and share your work. It gives you freedom to study how the program works and change it to fit your needs and to make whatever you want from it. So you have the freedom to work on that without limits, let’s say. And the first thing that comes to my mind when I hear WordPress, and it’s been the last 15 or more years, is that code is poetry. What that means to me, code is poetry, to me that means I can express my creativity using WordPress, no matter, I want to build a website, I want to blog something, or I want to write code, I have a freedom to be creative, and that’s a great thing about WordPress to me, except community, which is also great.

However, yeah, I like to make analogies a lot, so I will do that here as well. Let’s say WordPress is one car frame that you get, and you can do whatever you want with it to build a car of your dreams. So let’s say you have that car frame and you want to put some strong engine of some SUV, you want to put safety elements like Volvo, and you want to put Formula One tires on it. So I want to ask you, would you put Formula One tires on your car if you could do that? I would not, because it would probably not work and it would not make my car faster. But yes, if we go back to WordPress, you have the possibility to do even these crazy things, even if they will not work. So WordPress for me is not slow itself, but the freedom we have to do things inside WordPress could make it slower and could make it really slow.

Things that can make websites slow are usually coming from what we do with it, and I divided it into some points that are mostly affecting the performance. So first I would say it’s a bad hosting choice, because if you don’t have a good base of your site, of your stack, it will cause problems later during the process. Then, there are still people who ignore caching itself, thinking it’s not needed, it’s not necessary, but we live in 2026 and it’s simply needed, having in mind how complex elements we have, how complex websites we build, and so on. Next thing is about code. Although you have the freedom to choose the theme you want, to choose plugins you want to add to a page, even to write your own code, heavy and poor quality code will mandatorily affect the website performance and make your website slow, and for those people who don’t know what is going on, they could blame WordPress itself as the main factor that is causing this. Also large media files, where we simply upload images that are heavy, videos on all pages and so on, it will affect, because if instead of loading a page that is one or two megabytes in weight, you load a page that is 10 megabytes in weight, which will mandatorily slow down your site, no matter how good a connection you have. And of course, where there are media files, there are other assets like CSS, JS files and fonts. Too many, and I put a star, too many CSS/JS files and fonts could cause your website to be slower, but it’s not mandatory about the number of files, but more about how heavy they are, how complex they are, how dependent on each other they are.

Today I want to put two statements, feel free to share on chat, do you agree with me or you don’t agree, and what is your argument for that. First one is, WordPress itself is not slow, I can say that based on my experience and based on what I see on a daily basis and from my testing. And the second statement is that 80%, sorry, of WordPress performance issues come from configuration problems, not WordPress itself.

The question I ask you, and I ask myself, it’s more a rhetorical question, can we speed it up within one hour? Let’s see whether we can do it and how. Let’s say you have a website, I guess most of you built a website or visited some website, actually all of you. But when you see a slow website, or if you have a slow website, there are four things and four points to check first in order to analyze and to troubleshoot, to see what could be the main cause of the problem. I would always start with the hosting environment, because as I said before, it’s about the base, the foundation of your site. If your hosting is slow, like some bad shared hostings, not optimized hostings that do not have caching enabled, that have bad CPU or so, it’s bad, we’ll cover that in the next slide. Then caching, I would check if caching is enabled. I’ll also let you know what are those types of caching and levels of caching we should check. But yeah, so hosting, caching, how heavy are media files on that site, on the page you’re checking that is slow, and how many and how heavy. But for a start, let’s say, how many CSS, JS and font files are loaded, that’s just to start, to see what is going on and what could be the main factor that slows down your website. And the good thing is that in most cases, solving two or three of these factors could dramatically improve performance. And if you really find one that is really critical, even solving that one could simply help you to make your website a bit faster.

So yeah, hosting matters more than you think, I will mention that a third time because it’s really important to have a good foundation. Your hosting is something that moves your website, so it moves your WordPress, moves your website, and can affect it to be slow or to be fast. Some important factors to check. Now, the thing is that we probably could not solve this in one hour, if your hosting is bad and cannot be upgraded, you need to change it, it will take more time, but we need to mention it because of its importance. So just a few important factors to check about hosting, about your server, is, what is the CPU speed and power, because it is the main factor that will define the speed of actions you do, your website does, through the communication, when you browse the website, when you build something, when there are, when someone wants to buy your product on an e-commerce website or so. Then disk input output, which is communication, and how quickly the server could write the files, take the files and update them. Server cache, is it active or not, is it available on the server at all, and we’ll go back, I said, to these caching factors and caching layers that could be, and that probably should be, implemented to each hosting. PHP version, Sabrina Zeidan yesterday had a good presentation where she really mentioned about differences in speed between PHP 5.6, 7.6 and the newest one, the current active PHP version 8.4, which is ridiculous how much faster things are in these newest versions. So it would be good, I saw some hosting that still offer even 5.6, which is ridiculous. Database performance, it’s quite the same, if the database is not optimized, if the communication of your WordPress with the database is not optimized, it will slow down things. And server location, if your audience is local, you should choose a server, a hosting that offers several data centers nearby, so if I’m from Europe, I should choose a server from Europe and not from USA or so. If my audience is wider and across the world, you should choose CDN and/or Cloudflare, or things that would share and keep your assets, your website basically, to closer locations to your visitors. I recommend, I didn’t mention Cloudflare as a separate point here in the presentation, but I highly recommend using Cloudflare for many other factors, security and so on, and it’s free, so I would always recommend to use it.

Caching. We can say if there is no cache, you have instant performance problems. Why? Because if you don’t have page caching and/or object caching, every page will be dynamic, which means WordPress will handle and will put actions to communicate through PHP with the database every time you visit the page, which is not good and in most cases it’s not necessary. So you should have some kind of page caching. If you don’t have object caching but you have some complex e-commerce website where people simply buy things all the time, you will probably have, or you have, backend processes that are repeated all the time, you should consider using database object caching, because you can cache all of these repeating database actions in your memory, and through object caching simply speed up things, it will make your server use less resources and make it faster. Browser caching is something different. It will allow your browser to keep assets like media, CSS, JS and fonts, and deliver them from browser cache to you the next time you visit the page. So you go to one page, if you have browser caching it will simply keep it in the browser, and the next time you visit the page you don’t need to request these files from the server, it will be stored in the browser.

So yeah, just to say one thing, one explanation, when I said here without page and object caching, when I say page caching I don’t mean only about disk caching, so like WP Rocket does for example, we store cache files in the wp-content/cache folder. I mean, I think about server cache as well, like Varnish, Nginx FastCGI, because these are also basically creating page cache files and putting it in memory, usually in memory, and then simply deliver when you visit the site, the cache version is delivered through the server caching. Page caching, as I said, it’s through WordPress, and it’s usually placed in wp-content/cache folder, like WP Rocket does, and some other caching plugins do. Browser caching, as I mentioned, it’s something different. You cannot ask, for example, whether should I choose page caching or browser caching, these are different levels of cache, or object caching. You could have all three of them, and sometimes it will be mandatory if your website is heavy and you have a lot of this communication with the database and so on. So you should always have page caching, whether it’s going to be through the server or through disk cache, browser cache I think is mandatory, and it’s so easy today, most hosting simply offer mod_expires on Apache and it’s simply there. And object caching.

Media files. It’s the last couple of years, it’s known that people had really a lot of media files, images, videos and so on, to websites, without optimizing them and without paying attention to some details that are crucial. And you know, media files could be 80% of your page weight. So the most common mistakes people make is that they add heavy images without compressing them before uploading, not correctly sizing images in terms of dimensions, do not lazy load them, which is okay, which can be solved, and now it’s solved in WordPress natively, we’ll talk about that, but still, and heavy videos used on a page. So you add a lot of videos or some heavy videos because you want to make some effect, but it really affects your performance, especially on mobile.

Fixes. Luckily there are tools that could help you fix these problems if you make them, if you don’t plan correctly, it can help you fix afterwards. Imagify is one of them that can help you compress images, but there are also other good tools like EWWW Image Optimizer, ShortPixel, so you can choose whatever you want to compress your images. Instead of having a one megabyte image, you can have, just by compressing them with one click, you can have like a 200 kilobyte image. Proper size image, this is done by WordPress, and I will show you quickly what it’s about. So if I go to this speed test, we have an improve image delivery recommendation that affects the score. And if I go here, you see this image file is larger than it needs to be, this image is 768 by 512 pixels, but on the page itself it’s rendered as 634 pixels wide, which means WordPress has created this thumbnail that is showing on the page, but it could be reduced to this. To fix it, you can create a new thumbnail size that will match this dimension, it will help you speed up the website and pass this audit from PageSpeed Insights.

How does WordPress do this? Basically, I will show you. Here we have this image, and now you see a lot of different sizes of images here. It’s done through srcset from WordPress and through sizes. So WordPress will basically see which dimension you are visiting the page with, is that mobile, is that desktop, is that tablet, and deliver from its existing thumbnails, it will deliver the right size of image to fit your needs. However, if you don’t have exactly this one, or one more close to this size, PageSpeed Insights will mark that as potentially problematic. So you can take action to manually create a new thumbnail that will be more close to this, you can do it by planning a little more when you create websites.

Lazy load offscreen images. Lazy load is introduced in WordPress a couple of versions ago and it now natively supports lazy load, but you can use other tools like WP Rocket or alternatives, even there are some free lazy loading plugins that can help you lazy load. And why does it exist, if there is native lazy load? Well, because with native lazy load you cannot lazy load CSS background images, you cannot control, as far as I know, the threshold, so when you scroll down, how to control how quickly the images below the fold load when your scrolling action gets them closer. And replace videos with preview thumbnail. So this is something I want to show you directly without further explanation. If I go to this page here, I have one YouTube video, and if you check this, I can choose these elements of the video, there is the iframe, so the YouTube video is loaded, or its scripts are loaded. However, in WP Rocket we have this replace YouTube iframe with preview image. So what it does basically, if I go to the cached version and I scroll down, I choose this, so I don’t have YouTube elements and I don’t have an iframe, I only have one thumbnail image. So this is an image that is loaded, no scripts are loaded, no iframe, nothing. But if you click, YouTube will load its CSS, JavaScript and fonts.

Probably the most problematic elements, and maybe I would say most hard to solve because of their complexity in the last couple of years, let’s say seven, eight years maybe, JavaScript became so popular, so much used, even whether it’s needed or not needed, and it became very heavy, let’s say, if not used properly. And now the problem with CSS, JavaScript and font files is that they are render blocking the page loading. So to show you directly, if I go to the non-cached version and if I refresh, and to show you this here, you will see LCP is almost 3 seconds, Largest Contentful Paint, that’s the most important element of the page that should be first shown and quickly shown to the visitor, because it affects the perceived performance. So in this case it’s this image, the LCP element is this image, and here you load the document, there is JavaScript, CSS, actually font files load through CSS, but another CSS, CSS, and then the LCP image. So you have one, two, three, four assets loaded before the LCP image. Now imagine the complex, this is just a simple WordPress installation, but imagine complex websites that have 50, 60 CSS and 50, 60 JS files, which I see every day basically, how that could affect your performance.

And now we’ll go with the most effective fixes. Some of them are easy, some of them are better, some are less good, less effective. So let’s see. Minify CSS and JavaScript files. Basically in these days it will not affect your performance too much, because most files are already minified. In fact, in good teams, in good themes and plugins, every little experienced, and just a good, solid developer will know how to, and will know that it’s needed to minify their files. So, for example, this file main.css, it’s already minified, page-title.min.css, it’s already minified, so there is no need to minify further. Although tools like WP Rocket still have the option to minify CSS and JS, because there are still many files that are not minified, whether, sometimes it’s simply a must to keep it not minified, but it’s a very rare situation.

Then defer and delay JavaScript loading. So this is quite a good technique to reduce perceived loading of JavaScript and to allow you to load your HTML as quickly as possible. So, for example, if I refresh this page, I’ll go just with JS, so you see all these files are loaded, all JavaScript files. If I go to the cached version and I will go just with JS and I will refresh the page, okay, just a few of them, and this is from a Chrome extension, another one, these are not JS files from the theme basically. But if I do an action here, just tap or scroll, you will see JavaScript files loaded here. So, loaded just after user interaction, it is made possible by delay JavaScript execution. What it does, it will not load JavaScript before you make an action on the page. Why is it good? Because JavaScript will not be loaded at all, and it should not affect your website. So, for example, if I refresh the page, and this image is actually a slider, let’s say, and JavaScript is used to load it, that file should be excluded from delaying, because it will affect the perceived performance and people will not see the image before they make an action. Still, this JavaScript file that is responsible for this image, let’s say, just imagine, loading can be deferred, because deferring is a bit different, it will just allow HTML to load and they will load, let’s say, together, but it will be fired, so it will still do its action, while delaying JavaScript will not, until you do some user interaction. In most cases no one will notice it, because most JavaScript related actions are done whether below the page, or are not so visible, not affecting the layout itself.

Remove Unused CSS is probably my favorite feature from WP Rocket, and from other tools that offer it. It’s usually a premium feature, because it requires your server to fetch the website, to divide used CSS from unused CSS, and to put it back. So basically what it does, I will show you an example again, I think, I guess that’s the best way. So if I refresh the non-cached version here, you will see these CSS files, 1, 2, 3, 5, okay, five. But as I said, there are many websites that have like 20, 30 or more CSS files. On the other hand, we have a cached site and we have Remove Unused CSS applied. So used CSS is created, you have zero CSS files. Why? Because if I go and check the page source, the CSS file is put in a style tag, in one inline CSS block. And the good thing is that this is only the used CSS, only the CSS that is used on that page, all the other unnecessary, unneeded CSS code is stripped off and it’s not there. So you have two benefits from it, you don’t have HTTP requests to load CSS, and you have inline CSS that’s only the one that’s used on the page, so you can drastically speed up the website. I said this is my favorite feature, basically favorite thing that speeds up the site.

There is also loading CSS asynchronously, but I will not mention that, because I highly recommend using Remove Unused CSS. You can preload above the fold assets. This is very important, when we talk about, let’s say this image again, I will show you again through an example. If you go here, this image, because LCP, if you see the cached version here of the page, LCP is 1.6 on mobile, it should be, yeah, 0.3. Why? Because this image, first of all, is not lazy loaded. Why is it not lazy loaded? Because it’s visible immediately, if you lazy load it, it will slow down the loading of that image and affect the perceived performance. The second one is that this image is preloaded, by adding fetchpriority high, and I will show you it like this way. You see, please remember, these fonts are also preloaded, I will let you know why in a minute. And we have this image is preloaded, so this is the LCP element image. So WP Rocket basically will fetch the LCP image, it will preload it, and it will exclude it from lazy load, because usually it’s visible immediately. And fonts preloaded is also part of the WordPress action, because we preload those fonts that are used above the fold, on the visible part of the page. Yeah, I use three fonts, sorry about that, but this is just for testing, I should not use separate fonts for H1, H2 and for the body, but yeah, I did it, sorry.

And host fonts locally. I mean, there is Ver Rock and WP Rocket can do it, but also there are some other good plugins that could do it, that simply take Google Fonts to your local, to the server, and deliver them from there. So basically this way you eliminate HTTP requests, and you have some more benefits like GDPR related. And now, just before I end, I want to tell you that performance is not magic, it is planning, discipline and responsibility, which means it would be ideal if you could plan, when, and think about performance in early stages when you build your website, because that way you will eliminate most of the issues that come later. Although you can speed up the website in one hour, the question is how much, and that how much depends on the way you built your website from the beginning. Thank you very much. I’m not sure if we have time, but I really hope we have at least for some questions, if not, connect on LinkedIn, or I’ll try to answer through Q&A.

Danish Naseer: So thank you so much Marko for the insightful session, and as a performance learner and with a development background, I must say the presentation is very insightful and there are a lot of things we can implement on our websites. So if I can see on the Q&A tab, there are a lot of questions for you, I can show some of the questions here so you can answer. After that, I would request you to hang around in the comment section and answer some of the burning questions. The question is from Fernando, he is asking, what tools you recommend to safely detect unused CSS on a live WordPress site.

Marko Nikolić: Yeah, good question. Well, I use WP Rocket because I work there and it simply does the work for me. The thing is, most of these tools that do the change, that strip out the unused CSS, are paid, as I said, because you need the engine that will divide them. But to safely detect unused CSS, I’m not sure there is, I remember, for asynchronous CSS loading we were using, like, what was the name of it, you just go to Google and search, but I can investigate and let you know in the comments, or we can simply connect on LinkedIn, because, you know, I simply use it in WP Rocket and that solves my problem. So you can use it, maybe it’s easier, for me it’s worth it to invest for that feature, whether, doesn’t mean it should be WP Rocket, it could be some other tool that does it.

Danish Naseer: Perfect. Marko, as I said, there are a lot of questions for you, so you can reply to all those questions in the Q&A tab. We are right on time, I would like to say thanks to you for such an insightful presentation. So, audience, this was Marko Nikolić explaining how you can solve the 80% of the problems of your WordPress website. We have a next session on Varnish, and I agree with Marko, like as he said, the CDN and the cache are very important for your website performance, that is why we bring people from Cloudflare, and we bring people from Varnish as well. The next session is by Thijs Feryn, on how you can improve your Core Web Vitals using Varnish. So stay tuned, we will be right back in a few minutes with another session. See you, bye bye.