I just throw it somewhere in. Yeah, okay, all right. Perfect. Yeah, next weekend.
Alright.
Alright, let's begin. So first of all, welcome everyone. Welcome to this workshop for those of you.
I can see that some comments that this is too early for you. So. Thank you so much for joining.
So early. I'm not an early, so I can totally say salute to you guys. Anyways, let's begin guys.
So your brand success is not measured by the amount of money the company has already made. It is measured by how much more money the company will make this year.
Right. One month to say how many new users you're gonna get this year so that's the that's how your company success is measured.
A slow website can fail you big time. Hi, my name is Vinet, and I'll guide you on the path to supercharge.
Your online present or making your website faster. Okay, so what about me? So I've been working with various industry brands so far and helping them fix their tech.
I'm a two-time startup founder, built the companies from scratch. In my music tech startup I had a user growth of 100,000 users I worked with agency marketing tech at tech companies and public speaker and also AWS certified.
You can watch my previous videos on WordPress or TV. I've also already included the link here.
Also if you later on after the slides you want to have contact with me these are my contact details I'm gonna give a QR code in the end also so that you can, basically contact me.
Okay, I have some questions. Maybe just to understand the audience. How many of you are web developers here?
Maybe just write in the chat. That you have a developer or not.
Okay. Perfect. Nice. Okay.
Okay. That's good. Okay. And quite numbers.
And what about, business owners? How many of you are business owners?
Right.
Bye. Okay. What about SEOs? How many fewer SEOs?
Like core SEO and doing nothing but SEOs.
Okay.
I'll show you nice.
Nice.
Okay. And one last question. How many of you manage their own servers?
I mean, these questions will help me optimize my talks accordingly.
And
Okay, and not much people. Okay, no problem. I use hydro. Yeah.
My point is like, let's say if you're managing AWS hosting and stuff like that.
By yourself on cloud service.
Okay, I think I have. The idea. Okay, let's begin. So first of all, I would like to say that, and before.
If anybody wants to follow this slides and they're like, oh yeah, that's too much.
Maybe you can download the slides here. When you wanted to add something about the slides, right?
Okay.
Yup, so. I think when you download the slides now, it'll ask you for an email address, which will help beneath get in touch with you.
If you want to get the slide without sharing your email address, the slides will become available next week when the recording goes up on WordPress.
TV. So if you want this lines later, you can wait until next week and I'll let you know if you're made up.
But if you want the slides right now, go ahead, connect with beneath and you can download them here.
Perfect. So first of all, thank you, Lerd. WordPress dot OG. I mean, that's a really great initiative.
I would like to say this is really great. To share the knowledge with you. If you really like this format, I would say do give a shout out to organizers who and especially Ben with hashtag learned WP on Twitter or now X.
And also, in this presentation, in the starting, we will be covering lot of concepts in India and also lot of concepts of if.
You know if you're stuck and if you have any questions, please write in the chat and we will take the questions in the end.
And also this is an online format so I may not see your faces so I'm mostly relying on the chats just to see basically how you guys are handling it or how you guys are getting it or not.
Okay.
So yeah, keep your messages coming. So me and Ben have more ideas about you, right? And one more thing I want to say this, I want you guys to have fun because You're gonna see a lot of memes and I think that's the best way of learning.
Let's begin. So, a typical website in 2022, not 20, also 2033 and 2044.
I'm afraid. It's feeling like a mission accomplished. Well, as a developer, our job is to give them a great user experience, but definitely not this.
And this is my face where I come to a website who's asking me so many pop-ups.
I mean many of you can relate me with this that yeah you're coming to a website and you see a pop-up cookie box in here like oh my god and then you see a support we get book popping up from the side asking for chat okay and then suddenly when you figure out how to close that and then there is a ad cling in the background or some some sort of auto play video playing and then you like okay close
it. And then the moment you're scrolling more and you figure out, oh, there's a subscribe to newsletter box.
I mean, they are person visited first time on your website. Do not throw all of these things on their face, only show the essential things, right?
And at this point, after seeing all this, your user will be like why they are here at the first place.
Let's talk about buttons. Buttons are amazing creatures. There are 3 types of people in this word.
Some who press them once and just wait second who don't press them at all and third who press it like 100 times because of course it would make the traffic go faster.
Right. Increasing of frequency of pushing these button is directly proportional to users level of frustration.
And you shouldn't definitely do this like will sell from the movie as because by doing so you're making a lot of people angry.
See people don't have patience at all. The goal is to have a better time to interactive than this.
Right? As page load time increases from one to 3 s, your bound state increases by 32% and so on and so forth.
And this is the case study, posted by, I think, with Google. See interactivity impacts rage clicks.
See, you're not giving people websites. You are giving them experiences. Think of yourself as an architect.
You're a great architect. If you if you want to give them good experience you have to give them better interactive websites, better experience, right?
Users XXP expect experiences or the websites to be interactive. In about 1.3 times the point when they're visually ready.
If not that rage clicks happen. So the moment the website opens in if it's faster the user will stay or they might go.
A bad website performance has a measurable business impact. Don't let your users wait. They really don't have the time.
Hello loading. Okay, let's talk about the K of F. We know whenever telemarketing are calling me. Hi, sir.
I would like to give you this credit card. You know, this great guy. And you know what?
I stopped him and asked and so many questions they even get frustrated I I start like yeah what are you talking which credit card sorry what what points I mean in there the guy end up getting frustrated and he just hangs the phone.
And this is the time your users are feeling if you're giving them bad speed or bad websites or website which is really slow.
You know, back speed will have less download conversions or donation conversions, revenues, less sales.
Feed is also a ranking factor in on search algorithms. Google have already said it, earlier.
I mean, this is the tweet I really liked. I mean, this is the same experience that I've talked about in the first slide.
Marcus Brownie, the MPHD also said, yeah, this is the website within looking like.
So John Mayer has also given some tips for this. The user experience. So basically all in all Google really loves user experience.
And here's not really a black magic. Some aspects of SU is relevant in high quality content guys.
And content accessible to search engines and good SEO signals. Basically core web vitals lies in this category, right?
I'm going to talk about this lazy loading and that stuff later on also in the coming side.
This is just to give you an idea. And, guess what? This is another tweet from John Mayer.
He mentioned John Mayer from Google, by the way. Since the Cold War guys are now in Central and so, he's saying that you, you are able to find them in your slides also.
Basically, he's talking about what code. Bitles are. We're gonna see in in the coming slide.
So, That is true in the web series, the slow are left. And seen and sold. That's right.
If your website is slow, you're gonna lose your users, right? If you really like that, by the way, you can also tweet it on Twitter.
My username is right there. Let's talk about code web vital now. Okay.
Core web vitals focuses on 3 aspects basically. The loading, the interactivity and the stability.
Loading means LCP. To sum up how quickly your page loads. FID.
It means how soon you can interact with the page and stability. Stability means how stable the page is as it is loading and as the user is interacting with it.
Goal with vital meeting metrics are combined with other signals for search as well, which are also called as page rank experience ranking factors.
Basically, which are HTTPS, stage browsing, mobiles first, and no inclusive interstitial.
So Google. Really want you to speed up. Okay. Well, then we think about when we think about code work vital, this is how our users see it.
A fast website means a happy and loyal customers. Different stakeholders in an organization can have different priorities.
Code work vitals can bring them all on the same page by focusing on optimizing user centric metrics.
And the resuming and the resulting business growth. And so on. But what is code? We're going to talk about it now.
I mean, we already talked about it now. I mean, we already talked about it a bit, but we're gonna see more in the detail next.
So, Go to Vital as I mentioned, so these are the 3 metrics, LCP, FID, and CLS.
Now, basically, LCP measures your loading performance, FID interactivity and CLS measure your stability.
Okay. Now, if your LCP is less than 2.5 s, that's good.
If it's less than 4 s, but more than 2.5 s, you need improvement. And if it's more than 4 s, it's really bored.
And the same goes for FID. FID is less than 100 s is good. 100 to 300 needs improvement and more than 300.
You really need an improvement. Same goes for, CLS. Less than point 1 s it's good less than point 2 5 you need improvement and point to 5 it's bad.
Basically, just to give you an idea. And you can test and sing these things with various tools. As I said.
So, another important thing in March of 2,024, the FID will become INP.
IMP means interactive to next paint. Okay, I'll be the core pending code web vital that will replace FID in March of 2024.
You can test with various tools. Basically we'll be talking about that later on and I will be below or at least less than 200 ms means your page has a good responsiveness so that's good.
IMP means think of it like you know first visit happened but in the second visit of the page so if I say in simple words but yeah it's it's still a pending metric it's not live yet but yeah and IMP about 200 ms and below 500 me that your page responsiveness needs in room in more than 500 it's poor please fix it right away or and you're losing
customers. Okay, so these are basically the cold web, metrics and you saw the upcoming metric also.
Okay, next.
Perfect.
Just an you know, we don't have any questions yet. So if you have questions, you can put them in the Zoom chat.
Yeah guys, please, please rely on the chat. So just ask questions. This will help me. Alright, so let's enjoy the fruit roots of a Lifi for a moment.
This is it. Just please. And ever. You could just put your phone, get on something else but you keep waiting.
Because in your mind you think, oh, it will suddenly load. Maybe within next 5 s. No, you should give up now because the page is not loading, but in your heart you know that You have waited, but you wait.
Wait and just wait and the page doesn't load. This is a Lifi moment. Lifi means it says there is an internet but website still doesn't load.
We have to prepare for this, okay? But what is worse than no connection is the slow connection because a white screen is showing up, it's loading the page, nothing loads up or you see a wide stream or a splash screen.
But your users hate you every passing second. In this problem, often online first approach. This situation is called as LIFI.
What is the solution? Basically, going an offline first approach, going a progressive web app.
That's not the scope of this topic. Maybe in future webinar, we can talk about them. But just to give you an idea, we have to prepare for that also.
But, why we are talking about Lifi now? Just to give you like how we can prepare and this will also help you improve your code when vital.
Now just to understand what is Lifi. Your phone or your computer sends a request, it goes to ISP, then it goes to servers, then you get the reply from server through ISP in the world.
But if something goes slow and you paid is not loading, that is called as a Lifi moment, right? This takes time.
This is where your users are get, frustrated. You, what is the solution? You fix your performance.
You go for an offline first approach. You talk about caching and you fix your user experience.
This is where you need to be user, a core web vital compliance. Okay, now just to give you an idea, instead of this, you could be doing this.
Okay, I mean, most of you guys have seen on Twitter or some other website like, a skeleton like you.
Who, I've given you 2 examples. So this is a screenshot from CSS and maybe instead of UX like what you saw in the previous screen that everything is loading, maybe you just load the bare minimum first.
Prepare your users for the first contentful pain within examples. Like skeleton loader. So load is skeleton loaded and then you users know, oh yeah, that's something coming up.
You guys have seen on Twitter or other social networks, right? Okay, but how do I test? The code web bottles?
What are the tools available in the market? These are the tools available in the market. So, I mean, think, Chrome, UX, report, search console, Chrome, Devtools, Lighthouse, and web, Viders extension.
So FID, was not there into these 2 previously. I think this is an old screenshot, but now you can test everything in all of these tools.
But what I want to say is that GT metrics and tools and Pingdam are also interesting.
You can also give it a try, but most of your stuff will be handed over by page speed inside.
See what I want to say is that make your users happy, not lighthouse happy. Perfect. 100 and 100 is awesome, but are your users getting what they need?
See these tests are just basically providing single numbers. However, real-time situation is quite different. You need to have a look at them.
These are just metric, yet important, but these are not just like life-changing things, right?
Focus on getting your UX better. Focus on, not having heavy images and stuff like that.
So don't get stressed about them too much. That's also the important thing I want to say.
If you thought your website is done, know your website is never done. It always, always, always need an optimization.
Now, if you ever went to a website doctor or a web developer, if they look at your Corvette virus or your vitals, they would also say, yeah, it's not looking great if they're bad.
But But STUs really love CORE. okay, if, if you have fixed core, sure.
But what about your crappy content? If you have a crappy content, then There's no point here, right?
So even if you fix code web vital, your core of the website has to be strong also. Well, if you want to sum up, cov, wires in just one slide.
I would say that's pretty much it. Because that's what Kubernetes is doing there.
It's showing you all the problems, right? And this is what we're going to talk about.
Yes. But how do I fix the code web violence? Yeah, we need you talking about all these things, but how do I fix it?
First thing first, get a switch to PHP 8. Yeah. Why? Because, only 30, so first of all before giving you a metric.
Before starting on that only 30.9% have switched to PHP 8 5.1% is using PHP.
5 point X. And, but the thing is right now, 7.4 also reached the end of life.
Okay.
So from this picture, you can see that PHP 8 is You can see that purple is 15%, red is 11% and blue is 8.2%.
So you can see that. Less than around point 3% around 33% also or is only using a HP 8 but the rest of us are still on hold PHP.
So better switch to faster PHP. King is, thing is what press only execute 25 MB of CPU instructions on a PHP 7 runtime compared to just under a hundred M to do the same on older PHP versions.
So, but that was the PhD 7 number. So, but get a PHP 8. That's one thing I want to say.
Okay, next thing is switch to Mario dB if you're still using Mysql switch to My ADB, it's faster than Mysql.
Okay, now hosting.
Pre hosting do not use free hosting. If free hosting is a myth, don't let your website be haunted by specter of free hostings here in coast.
Well, that is true. Free hosting is just a. You don't have control to your website.
You can't do anything about that. They the person can close it anytime. And of course you can't expect the performance in any things on the frequency.
But what are the type of postings? Shared, dedicated, and cloud. And if you're a pro a blogger, definitely go for a cloud hosting.
So yeah, the solution to fix another problems is go cloud. Don't let you use this way, guys.
They don't have time.
This is definitely not cloud computing. Okay, what else? Well, I could tell you a DNS show, but it might take 24, take you 24 h to get it.
Right. Switch to a better DNS guy. I mean, your domain provider is giving you a DNS, but of course that may not be.
I mean, let's not take names, but that may not be faster because yeah, the DNS propagation takes a lot of time to them.
I would really suggest go for a faster DNS just like allowed 53 or any DNS provided by any cloud provider because they have servers all across the world and your request could be going to nearest possible server for them.
So switch to a faster DNS. What next? Images.
Do you feel this?
Well, no, that's that doesn't mean the slide is not loaded. It's your images that's failing you guys.
So at this point, okay, tell me how many if you thought Well, slides didn't load.
How many of you thought the slides in load?
Okay. Okay, see this is the disappointment your user should never feel. The loading icon Great. The loading icon.
It's the silent sales killer. So if there is a loading icon coming, that means there's something wrong with your images.
Please, test them, right? But what can we improve in the images? So these are few trips and picks.
I would say you could use one is lazy loading. You could use responsive images. You could use lighter formats.
Could use image compression, you could do CDN, DC, the responsive images in WordPress are part of WordPress score.
Basically, it allows you to serve images that you really need, right? You can either serve, with-based or pixel-based.
You could prioritize the critical images. You can use lighter formats like SVG or images will fall back for the video.
For example, if somebody is on a, on a twog connection, anyway, nobody will be on twog connection now.
But let's suppose there is somebody do not have the network or it's like 3 G. Maybe you could have a mobile only version or a version based on your network type, right, based on your connection.
Also, also instead of showing them a video, maybe you could show them an image there, right? You can adapt based on users effective network type.
For instance, as I said, if you're you serving a video slider or a gift based on background of fast internet you can serve from small internet collection right but but you'll ask me a minute how do we do that so there is this thing called navigator dot connection dot effective type.
If it's an effective type API that can come into handy in such cases, right? Okay, next topic.
We're going to talk about is lazy loading. You need to, so they are okay.
On your website, their slide is getting loaded, right? There are some off-screen images. Now, what is offscreen images?
So when a slide is loaded, whatever you see on the screen, that's an on-screen images.
When the slider is moving, the rest of others are off screen images. Ticarousers are network heavy causing cumulative layout shifts, right?
But, I mean, And. Okay, and there was a limited browser support for lazy loading in pass as well, but now I can see that from, 2,000, and 23, July, Safari has already, added the lazy loading support also, but previously it was not yet.
So you can see that it came quite late guys. Okay. I would say you can, first of all, leverage power of WordPress score and try to implement, Lace loading in your theme.
Alternatively, if you're not happy with the results, you can also use one of these libraries.
And for lazy loading, it's just one parameter as as you can see, but you need to handle it in your theme also.
Team developers are recommended to basically granually handle these loading, of these images already.
Okay. You can use basically this WP get attachment image hook or another functions basically with as the, will for example the disco post underscore some nil to handle it in your template.
There is a there are detail articles from WordPress documentation about lazy loading and how a team developer can handle.
I would really recommend looking at them. Okay, so lazy loading is important. There are other things also you could do for example you can define height and words and images.
This will stop showing this TLS error. In your . Okay Next slide.
I tell you a load performance of but your images will fail you if you do not optimize them. Okay, so what is that we can do?
You can use lighter formats like SVG or a webp. You can use, you could serve with the next generation formats over there.
Okay. You can also integrate image compression in your workflow. Let's say you're uploading images for your blog post, you could have a compression solution over there or add it in your workflow.
Maybe your marketing team, whenever they are creating content, you can ask them, you know what, guys use some sort of compression tool and try to compress them.
Because that's where that's how you can get good results. Okay, now what are the image completion tools available in the market?
So you can try one of these tools like tiny PNG, Smash or Optimizer.
And I really like this website also. You can give it a try and learn some more about image compression over there.
And the websites like Tiny PNG also providing you an API. Let's suppose you have a very big and very heavy website.
You can also integrate to any PNG API in your image uploading workflow as well.
But of course if you don't want to pay it maybe just compress it and earlier and then uploaded.
Okay. I also suggest that maybe define some sort of image guidelines for your team. What does an image guidelines?
I mean, you can specify, do not upload an image more than 400 KV, for example, or do not upload in a big image in PNG just in webp or JPG, JPEG.
Okay, so these kind of guidelines also you can define for your marketing team so that they handle your. Images are big culprit for your core web bitles and your your metrics will come in the red right so Remember that.
Okay. What can else you do? CDA. How many of you know what is a CDN?
Can you reply in the chat?
And I mean the link may be changed with me. I'm verified last night.
Okay.
Okay, some of you know some of you don't know. So a content delivery network basically allows you to serve your images from different locations of the world.
And then you'll be like, we need what do you mean? I mean, how can you do that?
So, okay, it. I will not go in the concept in detail but think of it like you're uploading an image to a provider and that provider is caught making the copy of your images across the world in different data centers and let's suppose you are based in Germany, let's I'm based in Germany, frankly, but my users are in Australia.
Okay, and whenever they make a request. The website request will come to my German server if I do not have an Australian server already.
However, the images which are basically network heavy, the request will go to nearest point nearest point in Australia.
Okay. So. And that's the simplest like possible explanation of CN I can give you.
There are certain providers out there like for example Amazon have S 3 and you can combine it with cloud front.
S 3 is more like a storage solution but but that's pretty fast and you can combine it with the cloud front.
That's that's the CDN solution provided by Amazon. Still Ocean has digital ocean spaces and there are a couple more CDs like Akamai and Fastly also.
Some of you mentioned Cloud Flare in the chat club. It is also nice. I haven't mentioned it here, but yeah, you can also use it.
Okay.
Now this is an example of regions or regions as you can see in different areas. Okay. The thing is, Another simple way you can say that you could Okay.
You could also use any image optimization as a service also. For example
There are some images CDN out there also. Like I know that for the fact that Jetbeck also has an image of CDN.
It's more like an image optimization as a service because they are taking your images, putting it across the word and letting your users access it faster, right?
But then we will be like, we need, how do we, how can we integrate in our website?
There are a couple of plugins out there like in W 3 total cash. You can also define a CD in connection which will serve your JavaScript and CSS from different CDN points, and which you can define it in cloud front.
And then there is another tool called WP offload. S 3. It will help you offload your images, video, whatever you upload in your media library.
To, to the CDN service providers. Which in turn will make copies across the world. So the thing is, I have an example also when Trivago switched to images CDN, the total image is size basically decreased by 80% for them.
Okay. And also had them improve the conversions. Now, next topic, fonts.
Ponts are also your culprit. If you're loading multiple fonts, well, that would be.
No, that's a joke. You should not do that, but if you're doing that, maybe you should handle it nicely.
Okay. Now, what is Okay. To sum this thing up.
You know, GDPR policy, GDPN has, I mean, there are a lot of people got fined about using Google f.
Yeah, Google phones because they're, yeah, they're tracking you somehow with Google. I don't know.
But the ideal way to host your fors is to host locally, basically upload in your website and just handle it locally.
And what else that can you do which will help you improve your faults basically define font display equal to swap.
Maybe don't use Google API as I said, host locally hosted for. By default, if a font is not loaded, browser will hide text up to 3 s per Google Chrome and Firefox and infinite time for Safari.
This is not ideal. The fix is wherever you declare this point phase font display code to swap as I said just add this line and yeah the browser will not switch fonts and this will not cause cumulatively outshift.
This will help you sometime there. So what does this do? This tells the browser to use the system default fonts initially like for example whatever the fonts in your Chrome or Firefox on and swap it out once your actual phone arrives.
So this way the page is not like loading loading loading because then something is already loaded. The structure is already there and it just switches the.
Okay. Okay, next topic, catching.
You don't use catching at all. Tell me again how fast your website is.
What kind of caching types are out there? Page cash, browser cache, database cache, transient cash.
And so on and so forth. I mean, you could use one of these tools to implement it. Yeah, caching is actually a big topic.
I mean, it cannot be just covered in one slide. Maybe we can cover it in future. What we're gonna say is that you can handle caching with these plugins, that you can handle caching with these plugins easily, like just install a WB super caching with these plugins easily, like just install a WB super caching with these plugins easily, like just install a WB super cache from automatic and yeah just enable the page caching
but Casting is a complicated topic. Sometimes it can break your website also, right? At some time and you need also need to know how you can handle the caching basically nicely.
Okay. So. That's also important. So these are different types of caching, as I mentioned.
We will not go more into the detail, but we'll talk about some of them later on. So you can implement caching like this.
Tanzania, I think we will talk about it in the coming slide. But how we can improve.
Okay.
See UX is the key. A website no matter how fast it is. It is not usable for user if it is not worth it.
You need to plan out how many number of visitors you are expecting. What do you expect people to do on your website?
Are you offering everything that your user is looking for? And basically you should also test your website in other browsers as you would.
Access someone's random website as well. Also, figure out how much mobile users and what are what do you Expect them to do also.
You can also do some AV testing. You can do a hard jar just to figure out if your users are getting what they really need.
Cashing is fine, page performance is fine. If the UX is not working, you will also lose out on users.
Any questions so far guys? I think because we are going pretty fast, I would like to ask.
Any questions guys?
Let's see if something easy.
We have like 6 or 7 questions that have come in so far. Okay. Okay, so the most recent one from Markov was It's not ready and memcache.
Some object cash technology.
Exactly. I mean, that's what I said. Catching is a big topic. It's not there is not enough time to cover it just in one slide.
So I just only gave you an overview. Madison Memcats are the technologies or you can say the Yeah, you can run an instance for that and integrate in your website as well.
We are using Reddit for a website which had 9 million users just so that it can cash stuff.
Hmm.
So yeah, this is an object catch technology. You're absolutely right.
Any other question?
Some of the some of the other questions about previous topics. Do we want to come back to them at the end?
Yeah, maybe let's take one more and then we go in the end.
Cool. Okay. Alright. Right now, how long after you launch a site do you evaluate user experience and make changes?
It's a never-ending cycle to be honest. And as I said, a website is never done, right?
I mean, you might want. It's not like you built a website and you just forget, you won't need to get continuously get users.
So you just keep an eye. So whenever you make a change, you just evaluate for at least for some time.
If the users are converting, maybe you want to do new stuff, new pages. New sections on the website or Trying test okay with AB testing you can see if the user is clicking on this button or that button if this traffic is good or that graphic is good. Stuff like that.
So honestly, it's a never-ending cycles. In my opinion.
Okay, so maybe let's continue and let's take rest of them in the later on. Okay.
Alright. Yep.
Next important topic is WP query. I mean we will not go more about that in detail but just to give you some of you an idea what how we can improve that just tonight.
Okay. So as you know, and WP query is looking something like this. You, you can query in a post-, you can then define a relation, basically a taxonomy query and a query from a taxonomy and also do a like a multi-texonomic query within relation end, right?
But the thing is queries are slow. Think about multi-dimensional meta queries.
They are pretty heavy and multi-dimensional. Taxonomic queries. Oh my god, just forget that.
Consider you have a website. with thousands and thousands of posts. And you're making such complex, Your website will run really slow.
But What can we do? How can we improve that? We're going to talk about that in the next slide.
Okay. And. Yeah, another thing. If it's a product site, let's say you have tens and thousands of products over there also, it could be a problem.
Maybe we could use a solution like Transit API or integrate elastic search both of them can work yes elastic search also helps you improve your WordPress queries.
Elastic search is not just search, it also helps you integrate in your WP query by passing a parameter.
There's a plugin for that called Elastic Press. I think I don't have a slide for that.
But just to give you an idea. But what else can we do to improve these queries? We can integrate the transient APIs.
So these are the 3 functions basically that saves your life. Okay. You can improve basically performance by caching things like, full pages such as slow results from remote servers like Facebook or large database query in the multi-dimensional query.
But, but, but. whenever you're doing a transient storage,
Well, your mic just broke beneath and your audio cut out.
No. We heard a button and then you disappeared.
I know. Can you hear me? Mike.
You're, you're coming back. You're coming back.
My testing, like testing, hello, hello.
Okay, that works. That works.
Hello, hello, mate, let me climb a headphone again.
Yep. No.
There's some interference or something. Yeah. That's good. That's good.
Okay. Yeah, now, can you hear me? Okay, then I'm gonna repeat this line slowly.
Okay.
Yeah, thank you.
All the trousers are stored in options table. So basically think of it transients like let's say you made a query and the output of that query you can store it in the transients.
Concients are stored with a transient key and you can handle it with a timeout function. So this is all this is also a method of, caching the results from the database.
And the results from transients can also, be stored in either an option stable or in a Redis.
It depends on how much transients are using. If you have thousands and thousands of transients, a very heavy website.
I also recommend running it. Redis cluster, together with your WordPress website. So, and pass your transience to the radius.
Okay.
You can also do do that very easily by simply integrating Redis and handling the transients. Your queries will automatically go to the reddish because your database will know.
That it's, I need to call these. Okay. In case of a multi site, Basically transients are stored in a WP side meta table and in case of normal site it's stored in the options table.
And in, transit are basically. They're created in Multi-side which set site transient function if you want to create a site level transient and in the normal site it goes with the set transit function and KET.
I'm not going there in detail as I said, caching is a very big topic, and not enough to cover in one or 2 slides.
So we're gonna go on the next topic called JavaScript and
The solution is you mark your JavaScript as ASIC. So that it won't block renting you might have seen this render blocking JavaScript in your page speed inside.
So this is the kind of solution you might want to fix. I'm going to talk about few solutions.
How we can improve our CSS in JavaScript basically. To improve the performance of website okay
Okay, so first thing is critical CSS. So, even CSS can be render blocking, but how can I improve my first view or first content full pain?
You can define the concept of critical CSS. Now, what is the critical CSS? If I say in simple words all the CSS that takes, that is required to load your first view or your hero element on your web page including navigation and all, start by loading a skeleton and only load the CSS that's just required in line.
Yes, in line. So critical CSS has to be in line. There are a couple of solutions that you could use to implement critical CSS.
Javascript, basically. Third party code is responsible for 57% execution time on web.
The reference is third party web dot today that's a huge number and based on top 4 million websites lot of CPU intensive scripts can delay your user interaction.
Third party should be taken care very well. For example, you should handle your tracking scripts with a tag manager.
Right and that's where this will help you handle. I mean that's where you have everything at one place and you need to differ your scripts as much as you can and only load what you really need.
See idea is to have better time to interact in. You differ your scripts like for example, for Google Tag Manager.
Yes, please do that. Therefore all the chase, libraries that you have added. Don't load them in header, load them in the footer and maybe a defined preload pre-connect prefetch and DNS prefetch also.
You minify your JavaScript, you automate your modification. You, basically get rid of obese expensive libraries like heavy libraries maybe don't use the CDN links because then there's another trip to the CDN is taking place.
I've seen some websites using a CD, a lot of a lot of CDN websites.
It could be possible that it takes time over there also. So either don't use it and if you use it, handle them via free load pre-connect prefetch and DNS prefetch.
Okay. That would be my suggestion if I would say if I how to improve a JavaScript.
Okay. It should deprecate. What you don't need just get rid of it.
Replace the JavaScript if you don't really need it and defined as I said.
You need to load in smaller version if it is possible if not no problem. You need to differ your extensive dependency.
Okay, if there are dependencies are outdated, maybe just update them. So there is this company called, they got benefited from updating their React version and it'll help them improve the website.
Speed also, okay? You need to break your larger bundles into smaller one as I said and you can load it on demand.
Basically, JavaScript download time and JavaScript execution time is also, basically CPU expensive.
Think about those small phones with 2 G. And if the JavaScript loading above the phone, it's render blocking, right?
Twitter is loading emoji picker on demand. Do and not all loading it all the time then why do you have your WordPress emoji library getting available?
Most of you don't even know that, right? So if you're loading it on demand or only on the pages you need it.
That saves you a lot. So in case of Twitter, when they loaded emoji picker on demand, it saved them 50 KB.
Similarly, you can split your code also and only send users. What they really need. What else can we do?
We can do compression. Compress everything. Use G, you use broadly on your server, you can continue them on your website.
Twitter users broadly to reduce API responses. For example, with Broadly, you can decrease your file size or the size of a serving of an image or not image or your code or JavaScript by 90%.
So broccoli is a compression mechanism. You need to use broadly carefully by the way. It can even make your break your website, but GZIP is by default there, so this is fine.
If you're not sure with properly, I would say don't use it at all. Okay, and then next topic is Minify.
Do you need to modify your CSS? You need to modify your JavaScript.
There are few Google libraries out there also. You could use it. There are a couple of plugins that you could use like auto optimize and, 33 total cash that you could use it also.
Okay, so I talked about a pre-load preconnect prefetch and priority hints This is how it looks like, I.
Okay, let's suppose, you're loading a, as I said, in your, in your, your first image is very important.
Other images are not important. By defining importance equal to low or important equal to high, you are telling your browser Yeah, load this first.
Do not load this now. Okay. This is called as purple pattern push render pre cache and lazy load.
See, you can reduce your network connection contention for branches for low priority content by defining a script like.
Is and you need to depriitize your scripts based on how important it is. For example, if you check your charges or your chatboard is not important, you can either put it on foot or you can also define it low importance so that it doesn't affect your code by.
Okay, so this is purple pattern or corporate method is also, helpful to improving the COVID. Now what is a preconnect?
So pre connect basically allows you to decrease the latency of your connection to a domain. Let's suppose you need to call load a Google tag manager.
So in the pre connect you can define pre connect Google Tag Manager. So it will help you decrease the latency.
Similarly for JavaScript and CSS also, you you can use preload and and prefetch and these kind of things also now for preload I have an example.
Let's suppose you need to load a font. So you can define similarly you see a script here.
We link rel equal to preload as equal to font A, HF equal to font name, and then importance equal to, importance equal to high loo, whatever we want to say, and then type equal to font and move, something like that.
Okay, so now these priority hints that we saw a high and low, this also applies for basically JavaScript also as we saw it here.
Basically this allows you to hit the browser how important the asset is and exposes a new attribute with value low or high or auto.
This is how you can basically handle and tell your browser this is really important or not. Okay, we can prefetch the visible links also.
See data driving, ribbon loading with link code to prefetch. We can also do basically to improve the performance of your website.
A faster time to interactive for your future pages. Basically this will allow you to have a faster time to interactive for future pages.
I mean this will also help you in your IMP, the interactive. Interactive on next paint, the code web vital metric also and Google Analytics also shows you your top performing pages.
That uses to prefetch the pages. So when eBay pre-fetches their, top 5 search results.
Right for fastest subsequent loads and increase in above the full times and meaningful phase. I mean basically eBay it helped eBay improve sales a lot.
He will also use this productive prefetching basically. When you loaded 5 and it knew that all what next gonna come.
So they defined protective prefetching algorithm also. They implemented it in the search like, oh yeah, what is that people gonna type?
So sometimes when you type something on our Amazon you can see that something else is already coming up. So that's protective free fetching.
This is the case that you read about eBay and that's why I'm quoting eBay.
I mean there are other sites also doing that. Similarly, you can also implement productive refetching based on your analytics data or you know that okay these articles are getting better results so you can also prefetch those articles that okay these articles are likely to get it better so or likely to get more traffic you can implement service workers for do that.
A. Cut workers are basically scope of next talk basically whenever we talk about progressive web apps.
Okay, you can also prefetch your most click post also. So these are the different use cases that I defined, what you can do with pre-connect reload prefix and I would say guys give it a try it's okay if you don't get it at 1 point just give it a try and then evaluate the results so these are just the ideas as I said for protective refashing there is
this one more library called guest. Dot. That's also being used a lot. You can also try this can help you.
And to have a productive. Fetching. Okay. One question that you would need to answer every time your optimized website hit its limits.
Is basically, what can you do to improve it? And guys, trust me improving the performance is not a shortcut next topic that we're gonna talk about is tracking and GDPR.
Yeah, tracking is basically the biggest problem on one of the biggest problem in a websites performance. Okay, we're gonna talk about it now.
We can then do the tracking pace with GTM. Now you'd be like, yeah, that's the same guy.
That's the same Batman. I mean, I load all the scripts in my footer versus all in GTM.
No, that's not the same because in GTM you can control it, right? You can control which scripts you want to load it.
First, you want to load it later. You can, you can also implement with the GTM, use any tool like, you can also implement with GTM, use any tool like One Trust cookie board or any other GDPR plugin or any other, GDPR plugin, use any tool like One Trust cookie board or any other, GDPR plugin or tool external tool, to
handle this, tracking script loaded, right? Let's suppose your users are in Europe, you can have it tied up with a cookie box.
I've seen one trust is already doing that. If and until you do not accept the cookies It will not load your tracking scripts.
So in thatly or directly, it is also improving the website speed. So if somebody is saying that, yeah, I mean that just fixes your GDP and no SIDE that's also fixes your website performance also because you are moving your tracking script to GTM and specifically for Europe it helps a lot.
Because in Europe the GDPR law says, yeah, you do not load the tracking scripts until the users consent, right?
So, you can control all at once. And you can handle it at one place and you can tie it up with the cookie box.
Important. We have to think it like this. Okay, next topic is scale up and scroll forward.
That's that's the 1 million dollar question every web developer or web server owner has to ask. That's that's why I asked you guys in the starting how many of your server owners.
Okay, also managing the service. Okay, so let's start with this guys. So for scaling servers Scale up and scale forwards.
How many of you know what is this? Approach meets 10 somebody time.
How many if you know what is the scale up and scale forward approach?
Nobody. Interesting. Ben, Ben, am I, by the way?
Alright, okay. What I have no idea, I think I do more server versus more CPU to the server.
Yeah, in a way you're right, Ajen. Scale up improve the CPU and several config okay and scale forward.
No, okay, no worries guys. Let me explain for to, everyone what is scale up and scale forward.
Scalar means Think of it like you are running it, your website in a 2 GB RAM web server, right?
It's a 2 GP RAM, 40 GB storage and whatever it's a simple T 3 small instance from Amazon or I don't know about dissolution, but let's say on EC 2 cloud or Amazon, you're running a T 3 small.
From T 3 small to T 3 medium or P 3 large If you're going, means you're putting more RAM.
That means you scaling up. Now, why do you scale up? The main reason is that let's say you're getting a lot of traffic.
All you do is simply scale up. But scale up is actually not always a solution. First thing first, you need to fix your website.
Scaling up can sometimes be a temporary measure also. Okay, let's suppose you're getting a lot of traffic but your website is crappy.
You just simply scale up, but that's not the solution, guys. You need to scale up only and only when you hit the limits.
How are your website is down? That's another case. So that's a temporary approach or in India we call in.
No, what is scale forward? Okay. Think of it like this. You have a website of, 10,000 visitors per month.
You're running on, let's say, 32 GB RAM server. You did everything to fix your website.
But then you realize, you have lot of searches, right? Your search system is getting a lot of A lot of queries and a search is one of the reason your website is going down.
What you could do? Pick out the search and make it, make it, outside this, easy to machine.
So what do you mean by takeout guys? So you get an elastic search instance and then integrate with your website.
So instead of just putting a program, you just split it into 2. Now you're searches outside.
Or let's suppose you hit see that your database is not able to handle because you were running database inside the EC 2 machine as well. No problem.
Take out the database, use an RDS. Now, using S 3 and cloud front is also in a way scaling forward.
Okay, you scaled up this much, you figure out, oh yeah, they are more issues, you could use elastic cash, you could use elastic cash also as a radiation cloud.
Elastic is also, so you can also take on the ready. So these are the different things you could do.
So these are the different things you could do. You can see if you saw that if your one server is not able to handle no problem, the 2 servers had a load balancer architecture, right?
And you can go serverless also if and if possible. If and when possible but I know that's not always the case.
Try to handle it with all these things for server lists is basically the Maximum, ultra maximum solution, right?
So this is scale up and scale forward approach. If you guys know service, maybe you'll be able to end it.
I tried to explain it, but if you have any question please post it in the chat. I will try to take that question later on.
Also, I remember I talked about elastic search. So, earlier also, let's say let's suppose to handle a multi-dimensional queries.
For that there is a plugin called Elastic Press you can give it a try it helps you integrate elastic search in your WordPress website.
Okay, and next topic is profiling. Now, what is profiling? So profiling means finding the cooperate in your WordPress website.
What is, what is going on if you need to figure out But how can you do, how can you profile?
It's very simple WPD bug and WPD. But log. Enable your debug board, enable the log.
It will tell you what's wrong with your website. And then there are these 2 plugins called query monitor and debug one.
They are really really helpful. I don't know how many of you have tried query monitor. Or.
Okay. Only one.
Nice. So that's it. Profiling is not a big, big problem guys for you.
Okay. For those you those of you who haven't tried it, you can give it a try query pointer and, but basically what it does is it shows you what kind of queries are running, what kind of stuff is happening on that page.
And how you can improve it, which query slow which queries faster, what are the errors in these kind of stuff.
And you can combine it with deeper power also. Then you see everything in the Okay. Okay.
But important thing, you should run these things in your local box only or your local environment, right?
Local by flywheel exam or whatever you use. Yeah, it will, okay, another thing by profiling, you know what are your culprits?
If it's a plugin that is a culprit or if you' that is culprit or if there are some bugs in your code, right?
If a plugin is slowing you down, maybe try to eliminate that plugin, right? Maybe look for a replacement.
All You could also try to implement the solution by code if the plugin is too small. Unless it all comes down to your resources.
You can also take a look at X debug also, but in Windows, I've seen it's pretty slow but 99% of the users.
Quite a water and deeper part are more than enough. Okay, now let's talk about bloating.
WordPress is actually pretty much bloated. Yes, I said. It is pretty much floated.
Not the code, but the plugins. See, cold, have some floors, but okay, not that much, but the plugins, plugins are coming a lot of blood in your code.
They're showing a lot of ads, they are showing you this nasty admin nags, nasty pop-ups.
They are putting their sponsor links and low used. And so on and so forth. So maybe what you could do is you can look it out in the code of your plugins and try to clean up the bloat and sometimes you can even find out if you Google let's say XYZ plugin name and clean up the book bloat and you will see some articles cover is showing you some functions.
Like how can you clean upload from, let's say used as your total cash or, jetpack one of the pretty bloated plugin.
I must say. Okay, question to you guys. How many plugins are too much plugins?
How many plugins are too much plugins?
Okay, so I'm saying 15 something 27 plus Depends on how bloated they are nice.
Okay, I'll reduce the, and very good. And what plugins, how much is usage they take?
Okay. The answer is one. Confused? Yes, if you have just one bloated plug-in or one bad plug-in that can actually kill your website.
So there is no such number as how many plugins are too much plans. If your website is running fast, it doesn't have a problem.
It can even have as much plugins as possible. No problem. Right, you can write your custom code in the planet.
That's also not a problem. But if you have one bad plug-in, that would kill your performance because plugin is adding a lot of stuff to your back end, not of CSS, lot of JavaScript.
So answer is one. Okay, you need to use only plugins that are from your trusted planning providers, but make sure to check things they're doing in backup.
Make sure to check their code, make sure what kind of bloat they are adding. Try to clean up their WP admin.
You need to de-register your unwanted widgets that you see or unwanted scripts that you have, you need to DQ your scripts, okay, and do not use any, plugin that are, or any NILE theme, these kind of things because, God knows what they're doing better to buy from a official source and stuff like that.
Okay. Okay, you can also optimize your database. So there are WPC like, like WP optimized dB.
And that's all. And for any organization. What important is is that they should have a performance budget.
Now, what is the performance budget? A performance budget is just what it sounds like. You set a budget on your web page and you do not allow the page to exceed that.
That's it. This, so this may be specific load time, but it is usually an easier conversation to have when you break the budget down.
Into the number of requests for the size of the pages. A performance budget is a collection of limits you impose on various website metrics that impact its performance.
Some performance budget may include total paid size, total number of requests, FCP, LCP, etc, etc.
So an organization must define a performance. Okay, thing is the website speed is more important than ever. It's a lot, okay.
You gonna have problem and you're gonna have lot of problems but this is how but you're gonna find a solution.
And guys, this is how we will make the web faster. Thank you for your attention. It's a wrap.
And we're gonna take questions now. And if you want to download the slides, you can, let, download slides here.
You can connect with me. And is my screen still still visible? I think not. Sorry.
No, the the Quebec code disappeared. There we go. Coming
Sorry, yeah, let me fix it. Let me fix it. Let me fix it. From current slide okay Do you see, do you see this?
Yes. Yep.
Perfect guys, now let's take questions.
Okay
Alright, so I have 12345678910 questions written down so we'll go through this in order first of all, we had one from our Jan.
And do does web vitals take customer geographic for example the ability availability of past internet or their server location into account.
Not really, basically, I personally tested it. That's what I said in to you first.
These are just metrics, don't stress out much. The right test is in your browser.
So in your Google Chrome, you can also have a lighthouse. That's the exact test.
For your system, for your internet type. So Google's core providers have servers all over. So you never know, right?
I tell you how I got to know. So I was testing for a GDPR. Okay.
I installed One Trust and I set up the privacy and blocked all the script. Then I checked with, Corvettes.
Then I saw that. Yeah, still not blocking the scripts, but when I check from my local I see the performance pretty fast.
So what's wrong? That's how I got to know that they have service located all over the world.
You don't know where they're testing it from. So that's just an industry metric that just to give you a number, if you don't reach 100, 100, don't stress out.
If you're in greens zone, that's fine. So target only for the zone. Don't target the numbers.
Okay, so the right test is in your browser.
Yes, I can hear you.
No problem.
Hello, can you hear me? Okay, alright. Alright, so we got the question from Miguel.
Does the DNS affect the TTFB or time to first bite?
Sorry, can you take up? So I saw M, another comment. You mentioned that, about my word can be an application.
Yeah. Yes.
He just made it public. Okay.
Oh, okay. Does the DNS settings, or the DNS, you use affect the time to first bite TTFB of a site.
Absolutely. If you have a faster DNS, right? Let's suppose you're using a DNS server like route 53 and all it goes to your nearest server.
So it saves you time even if milliseconds it saves you time. So absolutely this also affects.
The DNS resolution also. Thanks. So it all starts at DNS level to improve the performance of your website.
Alright, we got one from Tanya. They compress images to a hundred KB before uploading.
It's very manual, but they think there's a better way. Can you introduce a better way?
Yeah, I think I talked about tiny PNG API. So what you can do is implement tiny PNG API in your workflow.
So whenever you are uploading an images, it will automatically be compressed. But that doesn't mean you give like a hefty images, then then it will cost you a lot.
So try to have it in your workflow as much as possible, but have tiny PG running.
In your WordPress back in there are other plugins also but Honestly, I'm not a plugin fan.
I, in our marketing workflow, we try to do it, when the content is created.
But if you're not okay, it's fine to use tiny PG API also.
Great. Soham asked, what would be an optimal implementation of skeleton loading and lazing loading according to you.
Hmm, optimal implementation. That's a good question. I would say just handle it on your team level because if you're using an external team, it might not cover.
Maybe you need to handle your own implementation for that. That would be my suggestion Just how it yourself, the teams will not cover.
All right. Miguel asked another question. For lazy loading, do we need to manually add the attribute lazy or the size of the image when using WordPress blocks.
So far I know it's the core support is already there, but it could be possible that your team is not handling it.
So you need to verify if your team is handling it just manually check. If the if your team is, is lazy loaded or not.
If not, then you need to ask your team developer to handle it in your theme or you can handle it yourself in a child team also.
There is a very interesting guide from WordPress documentation. I saw on lazy learning how a team developer can leverage WordPress Covers lazy loading
I hope that answers the question.
Alright. Yeah, if anybody wants to ask a additional questions, drop them in the chat and we'll get to them.
Perfect.
We have a few more to get through. So, and ask for CLS. One display swap is enough in your opinion.
Hmm, yes. Not, not just for CLS, so, other than that, there are other things also for CLS.
But from the front side that should be fine. But on the image side, that should be fine.
But on the, side, that should be fine. But on the front side, that should be fine. But on the images side, you need to have a height and build to find.
So C is also a bigger topic, but only at the front side that should be fine. And also handle your fonts locally.
Don't use Google phones. I mean, you can use Google phones but download it locally and use it.
In your from your 7 from the privacy reasons. Yeah.
Yep. Okay. You talked about adding the important high and low to images and tags. Is this widely accepted already?
Not all the browsers at the support, you, you must verify it. So this is a recommendation from Google I found out from the website, this website called web.
Dot slash, so over there they have talked about it a lot. So you need to verify it also whenever you're implementing it.
Alright, that question was from Southam. We have another one from Did you happen to encounter huge server processing usages when brief was activated.
Perfect. Did you happen to? Yeah, sorry.
Not not really not really so not much several processing I've encountered to be honest because if you're handling question caching etc. properly I know I haven't seen pre, too much server processing.
Too much.
Right. Alright, I have 2 more questions so if anybody else has questions drop them in the chat and we'll finish after we get through these 2 more.
So Elena asks, Which solution is better? Scale up the same server or create a new server with bigger RAM and CPU and move the website.
And the scale up and scale forward is more like a trivial approach. So in philosophy, you have this like, and chicken thingy, philosophy similar with scale up and scale forward is the biggest question that companies or the website developers have to ask their the owners like do we scale up to we scale forward so you have to take this decision based on your circumstance also.
Sometimes scaling up is more than enough. Sometimes, scale forward is really needed because you need to imagine scale forwards can be more expensive than scale-up.
But if you're using S 3 and cloud front, okay, it will add cost to it. So you need to also take cost in the account.
I think, did I answer the question?
I think so, yeah. Okay.
I think so. Yeah, Elena, if you have a follow up. Do ask no.
Alright, Miguel asks, is there some way out there to measure the resources each plugin takes, for example, how much they're affecting loading times.
Hmm, I haven't encountered any solution which can tell you the plugins loading time Honestly not.
I have only seen when the query monitor it tells you if a plugin is making an expensive query or a plugin is having some sort of issue.
So query monitor and debug bar. Are pretty much the solution that I've encountered so far.
Alright, and we got one more question in the chat so Ben you can read that as well. It's from Rob Vanden.
It says adding width and height attributes to an image element causes issues with responsiveness sometimes. How would you handle this for images that use various sizes on different screen sizes?
So I talked about it earlier also in my slides. So WordPress has a concept of responsive images.
So WordPress score also have a very great documentation about how you can have responsive images in your site.
So there's a thing called SRC set. So take a look at the tutorial whenever you're building a team, try to leverage the concept of responsive images.
So this will allow you to have, image screen sizes based on your screen size. Within one element.
It's really nice once I'm give it a try.
All right, and I think we covered all the questions. First of all, I want to thank you, Venet, for presenting to us today.
Thank you.
There was a lot of information, a lot of good information. For all of us who attended. Let's rewatch this recording.
Absolutely.
I don't think we could like absorb everything only one go. So First of all, is sharing a QR code on the screen right now.
You can download the slides today, go through those and review all the links and all the information. And then also next week, when the recording will be uploaded to workvestock TV and to YouTube, I'll be emailing everyone through Meetop with the links to those and that will also have to slide thanks again.
So we'll be able to review all the information next week. Alright, well thank you, for speaking.
Thank you, Ben, for hosting this.
We had 38 attendees today and I think that's a really good turnout. So thank you everybody for attending.
And, yeah, I'll look forward to seeing everyone in another online workshop in future.
Thank you very much.
I see. Thank you guys. Thank you for joining. If you have any questions, you can always contact me.
There my contact details are also in the QR code. Thank you. Thank you man for hosting me.
It was really nice.
It's always my pleasure. Alright, bye everyone, have a good day.
Absolutely. Bye guys.