Hello everyone, welcome to the day two of cloud  boot camp. Uh we had a very fantastic day one on the boot camp. We had some session around  accessibility, web performance. We we had Sabrina Zen with us. We have Amber Hinn with us  and we had a very successful day one and we have a very great lineup for the day two. uh people  from WP Rocket, from GTMetrics, Cloudflare, Debbug Bear 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 uh gifs as well to share your mood, how you are feeling today. I  can see some reactions on the stage. Uh let’s see the comment section and then uh we can start the  day. There are a few few people still joining us. Uh before we begin, I have some announcement for  you all. Uh first of all, I would like to in uh inform you that we activate the leaderboard. So  it is your chance to win uh 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 GTMX, WP Rocket, EWW, Gagemage Optimizer, Short Pixel, Fast  Pixel, Debugbe Bear 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 high speed. I will also share the promo code in the comment  section. So it’s a 30% off for 5 months. So you can take advantage from this promo code. Uh  you simply have to go to the pricing page uh 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 uh percentage of and the promo code in the comment  section. So you can uh take advantage from it. uh the session today the first session of uh today  is uh on the performance side how we can uh fix the 80% of the problems of the WordPress and this  topic uh will be covered by none other than Marco Nikolik Marco is a part of WP media team and he  is a part of WP Rocket team since 2015 and he is a performance expert so hey Marco. Hi. Kaid Danish,  how are you doing? How are you? How are how are you feeling about all over about this event? Well,  very excited because I was yesterday here and I saw 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. Perfect. So, without  a further ado, the stage is yours. You can start your presentation, Marco. Yeah. Okay. Thank you  very much. So, hi everyone again. Uh, 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. Uh, as Danish said, we are talking about is that possible and how we  can fix 80% of WordPress performance issues in under an hour. Uh, let’s dive in and start. I will  share my presentation uh in chat. So I will do it here. Uh and let’s go. Uh there is a statement of  some people and it it’s going on for last 10 15 years that WordPress is slow. WordPress itself is  slow. And I would like to talk a little bit about that. Uh first of all, what is WordPress for me?  And for a standard WordPress user uh let’s say the man the main statement of WordPress is that it  will it is built to democratize publishing which means it gives you 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 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 when comes to my mind when  I hear WordPress and it’s been last 15 or more years is that code is poetry what that means for  me uh to me uh code is poetry uh to me that means I can uh express my creativity using WordPress  no matter I want to build a website I I want to blog something I want or I want to write a code.  Uh I have a freedom to be uh creative and that’s great thing about WordPress to me except community  which is also uh great. Uh however uh yeah I like to make analogies a lot so I will do that here as  well. uh and let’s say WordPress is one car frame that you get and you can do whatever you want with  with it to build a car of your dreams. So let’s say uh you have that car frame and you want to put  some strong engine of some SUV. Uh you want to put uh safety elements like Volvo and you  want to put uh Formula 1 tires on it. So, I want to ask you, would you put Formula One  one tires on your car if you could do that? Uh, I would not because it would probably not work  and it would not make my my car faster. But yes, if we go back to WordPress, you have possibility  to do even these crazy things even if they they they will not uh work. Uh so WordPress for  me uh is not slow but itself but the freedom we have to do uh inside WordPress could make  it slower and could make it really slow. uh things that can make websites slow are usually  come usually coming from what we do with that and I divided it to some some uh points that are most  a mostly affecting the the performance. So first I would say it’s uh a bad hosting choice because  if you don’t have good base of your site of your uh uh stack uh it will cause problems later during  the process. uh then uh there are still people who ignore caching itself thinking it’s not needed,  it’s not necessary but we live in 2000 2026 and it’s simply needed having in mind how how complex  elements we have, how complex website we build and so on. Uh next thing is about code.  Uh although you have a freedom to choose the theme you want to choose plugins you want to  add to page even to write your own code uh heavy and poor quality code will mandatory affect the  website performance and make your website slow uh for those people who don’t know what is going  on they could blame WordPress itself as the the main factor that is causing this uh also So large  media files when we where we simply upload images that are heavy videos on all pages and so on.  It will affect because if instead to load page that is one or two megabytes in weight, you load  page that is 10 megabytes in weight which will mandatory slow down your site site no matter how  good connection you have. Uh and of course where there where are media files there are other assets  like CSS,JS files and fonts. Too many and I put uh uh a star uh too many CSSJS files and fonts  could cause uh your website to be slower but it’s not mandatory about the number of files but  more about how heavy they are, how how complex they are, how dependent on each other they  are. uh today I want to put two statements uh feel free to share on chat do you agree with  me or you don’t agree and what is your ar 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 uh 80% 80% sorry of WordPress performance issues come  from configuration problems not WordPress itself. Uh the question I ask you and I I ask myself it’s  more rhetoric question. Can we speed it up within one hour? Let’s see how how we 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. Uh but when you see a slow website or if you have slow website uh there  are four things and four points to check first uh in order to analyze and to troubleshoot to  see what could be the main cause of the problem. I would always start with hosting hosting  environment because as I said uh before it’s about uh the base the foundation of your site if  your hosting is slow like like sh some bad shared hostings not optimized hostings that do not have  caching enabled that has uh bad CPU or so it’s bad we we’ll cover that in next slide Uh then caching  I would check if caching is 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 start let’s  say how many CSSJS and f phone files are loaded that’s just to start to see what is going on and  what what could be the main factor that slow down your website uh and good thing is that in most  of cases solving two or three of these factors uh could dramatically improve performance. And if  you really find one that is really critical even solving that one could uh simply help you uh to  make your website a bit faster. So yeah, hosting matters more than you think. I will mention  that third time because it’s really important to have a good foundation. uh your hosting is uh  uh uh something that uh moves your your website. So you moves your WordPress moves your website  and make it and can affect it to be slow or to be fast. Some important factors to check. Uh 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 as because of its  importance. So just few important factors to check uh about hosting about your server is what is  CPU speed and power because it will it is the main factor that will uh uh uh define the speed of  of actions you do your website do through through the communication and when you browse the website  when you build something when there are p uh when someone want to buy your product on e-commerce  website or so then disk input output which is communication and how quickly the server could  uh write the files take the files and update them uh server cache is detective or not is it uh  available on the server at all and we’ll go back I said to to to these uh caching factors and  uh caching layers that could be and that probably should be uh implemented to each each uh hosting  uh PHP version. Sabrina Zan yesterday had a good presentation uh where she really mentioned  about differences uh in speed between PHP 5.6 uh 7.6 and the newest one, the current active  PHP version 8.4, 4 which is ridiculous how faster things are uh in these newest version. So it would  be good. I saw uh some hosting that still offer even 5.6 which is ridiculous. Database performance  uh it’s quite same if database is not optimized it processes with in communication of your WordPress  with database is not uh optimized it will slow down things and server location if your audience  is local uh you should choose a server that had a hosting that offers several uh data centers  nearby so in your if I’m from Europe I should choose server from Europe and not from USA or so.  Uh if my audience is wider and across the world, you should choose CDN and or Cloudflare or things  that would uh share and uh uh keep your assets your website basically to closer locations to  your visitors. uh I recommend I didn’t mention Cloudflare as separate uh point here in the  presentation but uh 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 uh caching caching uh we can say if there  is no cache you have instant performance problems Why? Uh because if you don’t have page caching or  and or object caching, every page will be dynamic. Which means WordPress will handle and will put uh  actions to communicate through PHP with database every time you visit the page which is not good  and in most of cases it’s not necessary. So you should have page kind of page caching. Uh  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 uh uh processes that are  repeated all the time. you should consider using database uh object caching because you can cache  most of these repeating all of these repeating uh database actions in in your memory and through  object caching and simply speed up the things uh it will make your server less uh using less  resources and make it faster. Browser caching is something different. It tells your browser it it  will allow your browser to keep assets like media, CSS, JS and fonts and keep deliver them from  browser cache to you every time next time you visit the page. So you go to one page if you have  browser caching it will simply uh keep it in the browser and 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 uh we have  when I here just to say one thing one explanation when I said here without page and object caching  when I say page caching I don’t need mean only about disk caching So like WP Rocket does for  example we store cache files in WP content cache folder. I mean I think about server cache as well  like vanish engineix fast cgi uh because sorry these are also uh basically put create uh page  cache files and put it in memory usually in memory uh and then simply deliver when you uh visit the  site the cache version is delivered through the server caching page caching as I said it’s through  WordPress uh through the WordPress and you usually placed in W content cache uh folder like WP Rocket  does and some other plugins uh uh caching plugins do. Browser caching as I mentioned it’s something  different. You cannot say whether I you cannot ask you for example whether should I should I  choose page caching or browser caching. These are different levels of cache or object caching.  You you could have all three of them and sometimes it it will be um mandatory if your website is  heavy and it depends on on these you have a lot of these communication with database and so on. So  you should always have page caching whether it’s going to be through the server or through uh disk  cache browser cache it’s I think mandatory and it’s so easy today most of hosting simply offer  its mode expires on on a patch and it’s simply uh there and object caching media files uh it’s  last couple of years it’s known that people had uh really a a lot of media files, images, videos  and so on to to websites without optimizing them and without paying attention attentions to some  details that are crucial and you know media files could be 80% of your website uh your page weight.  So most common mistakes people make is that they add heavy images without compressing them before  uploading uh not correctly size images in terms of uh dimensions. Uh do not does do not lazy load  them uh which is okay which can be solved and now it’s solved in WordPress native. We’ll talk about  that but still and heavy videos used on page. So you add a lot of videos or some heavy videos  because you want to make some effect but it really uh affects your performance especially on  mobile uh fixes. Luckily there are tools that could help you uh uh fix these problems if  you make them if you don’t plan correctly. Uh if uh 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 E www  image optimizer short pixel. So you can choose whatever you want to compress your images. Instead  of having one megabyte image you can have but just by just compressing them with one click you can  have like 200 kilobytes image. Proper size image. uh this is uh done by WordPress and I  will show you quickly what is it about. So if I go to this speed test we have improve image delivery recommendation  that affects the the score. And if I go here, you see this image file is larger than it needs to  be. This image is 768 x 6 512 pixels. But on the page itself, uh it’s rendered as 6 34 uh pixels  uh wide, which means WordPress has created this uh uh thumbnail that is showing on page. But uh  it could be reduced to this. To do it, to fix it, you should you can create a new thumbnail size  that will match this dimension. It will help you speed up it will help you speed up the website  and uh pass this audit from from uh page speed insights. How WordPress does this? Basically,  I will show you. Uh here we have this image and now you see a lot of different sizes of  images here. It’s done through source set from uh WordPress and through sizes. So uh WordPress  will basically um see which dimension you you 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 the the  right uh size of image to fit your needs. However, if you don’t have exactly this one or more close  to this one size, Page Speed Insights will mark that as pro potentially pro sorry problematic.  So you should you can take action to manually create a new thumbnail that will be more close to  this. You can do it by by planning a little more when you create websites. Uh lazy load offscreen  images. Uh lazy load is introduced in WordPress a couple of versions ago and it’s now it now  natively uh supports uh lazy load but you can use tools other tools like WP Rocket or alternatives  even there are some free lazy loading plugins that can help you lazy load and why it exists if there  is native lazy load well because with native lazy load you cannot u lazy load CSS background images.  You cannot control as far as I know uh threshold. So when you scroll down how to to control how  quickly will the images below the fold load when uh you your scrolling action get 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 the uh one YouTube video and if you check  this, I can choose these elements of the video. There is the I frame. So YouTube video is  loaded or its scripts are loaded. However, uh in WP Rocket, we have this replace YouTube  frame with preview image. So what it does basically if I go to cached version and I scroll  down I choose this. So I don’t have YouTube elements and I don’t don’t have I frame. I only  have one thumbnail image. So this is image that is loaded. No scripts are loaded. No I frame nothing.  But if you click YouTube will load at at the it CSS, JavaScript and fonts probably the most  problematic elements and maybe I would say most uh hard to solve because of its complexity  in last couple of years let’s say seven eight years maybe JavaScript became so  popular So so much used even whether it’s needed or not needed and it it is it became  very heavy let’s say if not used properly uh and now uh the problem with CSS JavaScript and  font files are that they are uh render blocking the page loading. So to show you directly if  I go to non-cashed version and if I refresh you see uh and to show you this here you will  see LCP is almost 3 seconds largest contentful pain that’s the most important uh element of  the page page that should be first shown and quickly shown to visitor because it affects the  perceived performance. So in this case it’s this image 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 LCP image. So you have one, two, three, four uh assets loaded before the LCP image. Now  imagine the complex, this is just a simple installation WordPress. Uh but imagine complex  websites that have uh 50 60 CSS and 5060 JS files which I see every day basically how that  could affect your your performance. U and now We’ll go with most effective fixes. Some of them  are easy. Some of them are better or not on some are less good, less effective. So let’s see.  Minifi CSS and JavaScript files. Uh basically in these days it will not affect your performance  too much because most of uh files are already minified. In fact, in good teams, in good uh  themes and plugins who every little experienced and just a good developer, solid developer will  will know to how to and will know that it’s needed to minify their files. So you 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 has still has option to minify CSS and  JS because there are still many files that are not minified whether it’s sometimes it’s simply  a must to keep it not minified but it’s very rare situation. Uh then defer and delay JavaScript  loading. So uh this is quite good technique to reduce perceived loading of JavaScript and  to allow you to load your HTML uh uh uh as quickly as possible. So for example, if I go uh  if I refresh this page, I’ll go just with JS. So you see you see all these files are  loaded JavaS all JavaScript files. If I go to uh cached version and I will go just with JS and  I will refresh the page. Okay, just a many just a few of them and this is not this is from Chrome  extension extension another one these are not uh JS files from team basically but if I do  an action here just tap or scroll you will see uh JavaScript files loaded here preview if I go  here yeah so loaded just after user interaction it is caused by And it’s made possible by uh delay  javascript execu ex execution. What it does uh it will not load javascript before you make a action  on the page. Why it’s good? Because javascript will not be loaded at all and it will not affect  it should not affect your website. So for example uh if I refresh the page and this image is  actually a slider let’s say and JavaScript is used to load it that files that file  should be uh excluded from delaying because uh it will affect the perceived performance and  people will not see image before they make action. Still this file this JavaScript file that is  responsible for this image let’s say just imagine uh loading uh can be deferred because the fairing  is a bit different uh 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 JavaScript delaying JavaScript will not  until you do some user interaction in most of cases it will no one will notice it because most  uh JavaScript related actions are done whether below the page or whether are not so visible  not affecting the the layout itself. Remove on your CSS is my favorite probably favorite uh  um feature from WP Rocket and from other tools that offer it. It’s usually premium uh premium  uh let’s say uh feature because it requires uh your server to fetch the website to divide  CSS use CSS from unused CSS and to put it back. So basically what it does I will show you example  again I think I guess that’s the best way. So if I uh refresh the non non-cashed version here,  you will see these CSS files 1 2 3 5. Okay, five. But as I said, there are many websites  that has like 20 30 or more more CSS files. On the other hand, we have a cached uh site and we  have remove and use CSS applied. So use CSS is created. You have zero CSS files. Why? Because  if I go and check page source, I will go to CSS file is put in style tag in one inline  CSS block. Uh and the good thing is that this is only used CSS only the CSS that 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 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 you you can drastically  speed up the website. I said this is my favorite uh feature basically favorite thing  that speed up the site. Uh there is also um loading CSS asynchronously but I will  not mention that because I highly recommend using remove CSS. You can preload above the fold  assets. This is very important when we talk about u uh let’s say this image again I will show you  again through example if you go here this image it’s because LCP if you see cached version here of  the page LCP is 1.6 six on on mobile it should be yeah 0.3 why because this image first of all is  not lazy loaded why it’s not lazy loaded because it’s visible immediately if you lazy load it it  will slow down the site slow down the loading of that image and affect the the perceived uh  performance uh the second one is that this image is pre uh uh preloaded by adding fetch priority  high and I will show you in like this way. You see, please remember these uh sorry, these  fonts are also pre-loaded. I will I will let you know why in in a minute. Uh 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 it’s usually  it’s visible immediately and fonts preloaded is also part of WordPress action because we  preload those fonts that are used on on above the fold on the visible part of the page. Yeah,  I use three fonts. Sorry about that. But this is just for testing. Uh I should not use separate  fonts for H1, H2 and for the body. But yeah, 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 uh that simply take uh Google fonts to your local to the server and delivers it  delivers them from them from from there. Sorry. So basically this way you reduce you eliminate  HTTP requests and you have some more benefits like um GDPR require uh related. And now just before I  end uh I uh want to tell you that uh performance is not magic. It is uh planning, discipline  and responsibility which means it would be ideal if you could plan uh when and think about  performance in early stages when you build your website. So because that way you will eliminate  the most of issues that comes 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. uh 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 to Q&A. Uh so thank you so  much Marco for the insightful session and as a performance learner and with a development  background. I must say the presentation is uh 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 on the comment section and answer some of the burning questions. Uh the question is from  Ferando. Uh he is asking what tools you recommend to safely detect unused CSS on a live WordPress  site. Uh yeah good question. Uh well I use WP Rocket because I I work there and it simply  does the the work for me. The thing is most of these tools are that does uh uh the change  uh that strips out the the use 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 uh asynchronous  CSS loading we were using like what what was the name of it you just go and to Google and search  but I can investigate and uh let you know in in the comments or I can simply we can simply connect  to LinkedIn because you know I simply use it in WP Rocket and that solves my problem. So you can use  it, you can maybe it’s easel for me it’s worth to invest for that feature whether doesn’t mean it  should be WP rocket it could be some other tool that does it perfect uh Margo as I said there are  a lot of questions for you so you can reply all those questions in the Q&A tab uh we are right on  time I would like to say thanks to you for such insightful presentation so audience this is Marco  Nikolik was explaining how you can solve the 80% of the problems of your WordPress website. Uh we  have a next session uh on warish and I agree with Marco like as he said the CDN and the cache is  very important for your website performance that is why we bring people from cloudfare and  we bring from people from varnish as well. The next session is by the ferry uh on how you  can improve your core web vital using varnish.   So stay tuned. We will be right back in a few  minutes with another session. See you. Bye bye.