uh thanks everyone for participating in the web Warrior quiz can’t wait to announce those here in just a couple of days so next up we’ve got an amazing presentation coming to you from Mr Adam Silverstein he is a developer relations engineer at Google he’s G be talking about maximizing WordPress speed essential performance hacks um he has been making the open web better through open source contributions he is a lifelong programmer lover of languages and these days he’s mostly writing JavaScript So Adam I’m I’m pumped man I’m pumped for your talk welcome to the cloudways purp on 2024 stage great and it’s all yours man thanks for having me Agenda all right I’m super happy to be here I think I’ve got some slides that are going to come up there they are awesome all right so I’m going to jump in I’ve got 45 minutes hopefully I’ll finish a little early and leave some time for Q&A at the end I’m going to cover three areas uh today talk about what’s new in core web vitals for 2024 I’m going to talk about what we’re working on in the WordPress core performance team and then finally because it is 2024 I’m going to talk about using AI to assist with performance tuning and just a note that I’ll have a link uh to these slides at the end so you’ll see there’s a lot of links throughout the slides uh just don’t worry about copying those down you’ll have access to the whole thing at the end so core web vitals um hopefully Core Web Vitals everyone’s familiar with core web vitals it’s a pretty uh it’s an initiative that’s been around for a while uh it is essentially an attempt to move beyond the kind of raw speed metrics that we use to measure everything by LifeTime to First Bite still a valuable metric but a way to look at a performance as how users experience your site uh and and essentially trying to move from just raw speed to actually what do users experience when they visit your site when they try to interact with your site and so that’s where the Three core web vitals come from and they aim to measure three areas of user experience is the site loading uh is it interactive when users try to click to open a a calendar or add something to their cart and is it stable are there things popping in and out and shifting around so that when you try to interact with the page uh you you misclick and so forth which can obviously be a frustrating experience so we had these three core web vitals LCP fid and CLS and this year we got rid of FID first input delay and we replaced it with inp or interaction to next paint so I’m going to dig in a little bit more but for all of these metrics when we’re talking about a good experience we’re aiming for uh good experience for 75% of our users users will have a variety of experiences depending on the conditions at the time that they access your site their device the network and so forth uh so what we’re what we’re aiming for here is the 75th percentile an important note so what is interaction to next paint this is a measure of all of the interactions that happen during the life cycle of a page clicking tapping and it measures all of those interactions and then reports on the worst ones the slowest interactions that happen so it helps you identify problem interactions that are happening on your site so a good inp score is 200 milliseconds or less anything over 500 milliseconds is considered poor and in between is everything in between is deemed needs Improvement so those are the sort of numbers that we’re looking at aiming for and again this is for 75th percentile of users and with imp we’re focused primarily on mobile because desktop users tend to all have a good experience already so you can focus your efforts for improving this metric on mobile users so what does imp capture it captures these poor experiences that we’ve all had on the web where we click on something and it doesn’t react and we click again and then suddenly it reacts twice uh instead of these good user experiences where you click and it’s very responsive instantly and these poor experiences do impact business metrics right they affect user engagement How likely users are to continue on the site or whether they’ll add something to their cart or sign up for your newsletter whatever your goals are so this is the critical thing uh to understand and a key Insight of inp is that users spend 90% of their time on your website site after the page has loaded so it’s important to look at how they experience the site uh even after the page has loaded and why did we replace FID well FID just wasn’t doing a good job of capturing these poor experiences we all know they’re out there on the web we’ve all had them um but F FID was you know all WordPress sites pretty much were passing FID I think it’s like 99% now pass it whereas when we look at inp we see that WordPress sites have a little bit more trouble passing we’re now at about 80% pass rate which isn’t bad but still some room to improve so this means that the new metric is actually capturing more of the poor experiences that users are have having so I’m just going to explain a little bit more about what exactly inp measures um so first input delay measured this part the initial delay between when the user clicked and when the event handlers began to fire for that click in measures the entire interaction so everything from the click all the way till the user is presented with an update uh so that they know that the browser is actually responding to their to their input um and inp also measures all the interactions whereas first input delay only measured the first interaction that happened on the page so the the interaction is made up of these parts the input delay which is what we previously measured with first input delay between the click and the event handlers finding and there can be multiple event handlers here that are going to fire and this input delay can be long if the main thread is busy with other JavaScript tasks then we have the processing time of handling all of the event handlers and this can belong if the event handlers are poorly written a good event handler will yield back to the main thread early on uh and allow the the browser to continue to the presentation display so the user knows something’s happening uh a poor event handler will will sort of hang the main threat so there is a way to to fix uh processing time in that is yielding back to the main thread and finally a presentation delay this is the amount of time it takes for the browser to actually display an update to the user so you’ve clicked on something and and you’re going to expand an area if you have an overly complex Dom or a really uh elaborate CSS tree the browser has to figure out how to render everything that can take some time especially on a lower power device there’s all kinds of tools out there to measure imp all of the the tools that you may used already for PHP uh measurement are include inp data there’s also tools that are specific for collecting real user metrics U because this metric is something that only happens in the field with real users it’s very difficult to measure in the lab because it requires actual interactions once you figure out that you have a poor interaction somewhere on your site and you’ve figured out what where that interaction is you can use lab testing to try to improve that you can you know use browser throttling and tools and you can test like changes to see how they’re how they’re impacting your interaction and you can you know work on it that way but you really do want to see the improvements in the field um so the basic process is similar to any uh performance debugging you’re going to repeat you know make small changes test to see if it fixed it and then repeat that that process there’s some great articles that have been written this year I’ve got links here on the page so you’ll get those at the end um but in the interest of time I’m going to move on to my next topic which is the work of the WordPress core performance Performance Lab team so I’m most of this work that I’m talking about you can check out by downloading the performance lab plugin this plugin is um our sort of Master plugin that enables all of the features that that I’m going to talk about that are also released as individual plugins um so just install performance lab and then you can enable each of the features that I talk about individually in there it also includes some site checks that will tell you if you need to for example enable more modern image formats or various things that might be missing or set up wrong performance-wise on your site in this in the tool site health section of WordPress so here are some of the things we’re working on in the performance lab uh one really cool thing is called speculative loading this is a a way of providing instant navigations once users reach your site it leverages the new speculation rules API that’s available in Chrome and Edge browsers so far uh it is being proposed as a standard though so hopefully we’ll see this across browsers and essentially with the uh with the API we’ve we’ve chosen to use the sort of conservative mode where as users hover over links we pre-render those links in the background then if the user clicks on the link the page will load instantly because it’s already it’s it’s like switching tabs essentially the page is already there um of course on mobile you don’t have hover events so you’re you’re not actually starting the pre-render until the user Taps um but still you might get a couple hundred milliseconds of a faster load time than uh than if you wait till they release their finger which is when which is when typically navigation would start um and you can also fine-tune this so if you know that you have a big blue button that people are very likely to click in the middle of your page your call to action button you can add that to be pre-rendered automatically even without a hover now there’s a tradeoff here when we’re doing pre-rendering uh we might or we’re very likely actually to pre-render pages that the user will never visit so there is a cost associated with that the tradeoff is that the users who do visit the links that you’ve pre-rendered are going to get this instant amazingly fast experience the next Plug-In or feature that I want to talk about is optimization detective and this is a really amazing effort to capture front-end uh data to inform back end rendering uh with performance in mind so what this plugin does is it has a little bit of JavaScript that runs on the front end and it captures metrics about the page um at different break points so it can for example record what the LCP element is at different breakpoints or what elements are in the viewport and this is a critical capability without something like this we simply don’t have any information about the viewport on the back end so for example with lazy loading of images WordPress tries to Lazy load images that aren’t in the initial viewport but we’re just making a guess in the back end we don’t actually know which image is going to be an LCP image we we assume that if there’s a large image early in the content that’s likely to be the one but we don’t know so LCP element can be different on every uh breakpoint so here’s wordpress.org looking at four different breakpoints we see that four different elements are the LCP element so by using this front-end optimization detective we can actually capture which element is the LCP element record that into WordPress and then the next time we render the page we can use that to prioritize the images properly which brings us to the image prioritizer plugin it leverages the optimization uh detective data to prioritize images more accurately than WordPress score currently can so it adds fetch priority High it knows about the breakpoint so it can it can properly add breakpoint loading it can pre- load background images and it will essentially give us much higher accuracy in terms of which image we prioritize with fetch priority high and also which images we lazy load because we know they’re not in the vport so this uh is in a way a silver bullet I guess of LCP optimization because we actually know what the LCP element is which we currently do not know in WordPress so check this out uh embed Optimizer is another plugin that we we’ve been working on this is specifically for uh the embeds that you get if you you know paste like a YouTube url into the editor you’ll get this nice block that’s an that’s an embed and those are now lazy loaded with this plug-in including the JavaScript that they inq which can be quite heavy and these embeds can be quite impactful on performance because if they’re all loading while your page is loading there’s this contention for resources that’s happening so by lazy loading them you just eliminate that problem um it also leverages the optimization detective data so it knows if you have optimization detective installed it knows which elements are in the viewport so it can be more accurate about what gets lazy loaded if you have an embed that’s in your initial viewport you probably don’t want to Lazy load that you want it to load with a normal or high priority if it’s the LCP element so that’s what embed Optimizer does and modern image formats is one I’m excited about this plugin converts your uploaded images to a modern image format like like avif it’s if it’s available or as a fallback webp which is available on about 99% of or servers avif is something like 30% of servers that run WordPress support it uh with a you get a huge savings almost 50% and with webp it’s more like 30% over jpegs at the same quality and if you’re using pngs for transparent images switching to these new formats is huge uh Savings in space and the reason for that is pngs which are typically used for transparencies where you have a transparent background they only use lossless compression whereas avif and webp formats both support lossy compression with transparent backgrounds so the plug-in supports this natively you can upload your pgs and it will output AVS or webp as the fallback and you’ll get a huge savings we also have picture element support and this is the best way to provide uh format fallback so browsers that don’t support avif will fall back to the the original format that you uploaded the jpeg for example and and that’s by wrapping both of those formats in a single picture element that then the browsers can decide what the best image or what the image they can support inside that so I covered that the top projects and just a few others that I’m going to ClientSide Image Processing briefly mention we’re working on client side image processing in core is the ability to process images that you upload in the browser instead of relying on the server to do them to do that processing my colleague Pascal is going to give a talk about this during the Showcase day at at work campus so check that out if you’re there but essentially this allows us to use features like avif without having to upgrade the WordPress server or have people migrate to a new server to get that feature we we sort of LeapFrog the limitations of the server capabilities by moving to the browser where we can run the same libraries using web assembly we have the plugin check plugin which is a project a collaboration with the plugin check team plug-in review team where we’re trying to build out a tool so plug-in authors can check their plugins uh including for performance tests we’ve also been working on the interactivity API if you haven’t heard about it it’s a new API in WordPress for adding frontend interactivity it’s very lean and we are trying to build performance into the API um this is essentially something that could replace the use of jQuery for example uh and the final thing is our performance testing tools the framework that we’ve built for performance in core we have automated tests that run so we can see what’s happening with each commit we have uh a whole bunch of tools that you can run like CLI commands that you can run on your own we also have automatic uh I mean GitHub actions that will you can integrate into your project to run performance tests and all of these tools we’re making available the idea is that you know the community also needs to be paying more attention and have the tools they need to to test performance and build performant plugins and this brings me to the last section of my talk uh using AI to address Performance issues and a little uh kind of warning here this is all experimental um and you know take the advice that you get from llms with a grain of salt you’ll see that there are some mistakes that they make um so this is just something that I’ve been plan around with and I wanted to share what I’ve been finding with everyone and hopefully it will be useful so the basic approach that I’ve been using is first to Define uh with Basic Approach system instructions a performance expert who’s a helpful assistant that’s going to analyze data for me and give me advice uh then I gather all the data about the site that I want to analyze including a page speed insights Json object maybe the HTML of the site a list of plugins the list goes on and on you can really upload a huge amount of information um next I upload all that information to the llm and here you’ll see that i’ I’ve tested with chpt and Gemini both of which under their paid accounts allow you to upload files so you do that kind of first to start the process and then you’re asking it to analyze and correlate data and also you can ask it to drill down on specific problems and how to solve them so let’s see what that looks like first uh Gathering the data with page feed insights API you can literally just put this in your browser with your Ur URL at the end and then save the Json object to your hard drive and that’s what you’ll upload to the the uh chat or to the AI and for getting your plug-in details I like this export plug-in details plugin uh it just gives you a CSV list of all your plugins and versions and so forth uh you can also upload the plugins themselves although as far as I’ve tested the the LMS do not support zip files so you’ll need to upload like the whole folder of files if you want if you want to include them so here we go I started this session with chat GPT and Chat GPT the first thing I’m going to do is create a GPT this is a model that’s has some Specific Instructions about being a helpful performance expert and then I upload all of my files and I ask it simply to tell me what are the top three performance issues and a little while later uh it takes it a little while it analyzes all the data and it comes back with this very succinct summary of what the top issues are these are the top issues on the site that I was testing so Kudos good job here um but more importantly it was able to take this huge amount of data if you look at a pagee uh report pagee insights report you look at a lighthouse report you’ll see there’s a lot of information there to digest and it can be overwhelming and and the LM has helped here by just summarizing the very top points so now I’m going to continue and ask it what I should do to fix this problem uh obviously this slow server response time is a huge problem for me and it recommends that I you know maybe look at woocommerce because it knows that’s a heavy plugin and it also notices that I have five form plugins enabled on this site which is not a very good idea and maybe I should disable some of those uh so that’s what I did the next thing I did oh no the next thing I did was ask it about scripts so in this case I’m asking it about like blocking scripts which are the worst problems and again it’s able to both tell me which script is causing the problem as well as which plugin is ining that script so it’s actually telling me uh which plugin is causing the problem which is very helpful this is something that can be very difficult to figure out when you’re looking at performance uh traces or a lighthouse report you know where is the problem coming from the llm does a good job of figuring this out next I asked it for a fix how do I fix this problem it suggested lazy loading the embed that’s a good idea so I asked it for the code that was the next step I’m going to try out its fix unfortunately here’s where things went a little wonky um so in the code snippet that it gave me even though it’s functional it’s using an outdated approach uh it’s using uh JavaScript uh to do the lazy loading so it Ines up this lazy sizes script that’s no longer required um all modern browser support native iframe lazy loading so all we need to do is add load equals lazy to the iframe to Lazy load it so this is although this is a a technique that will work it’s actually outdated advice and I think this brings up one of the challenges of using llms for performance advice they’re great for digesting huge amounts of data and connecting the dots between different data sets however sometimes they get things wrong and as a novice user you may not know when you get advice that isn’t good advice so a really nice Improvement here would be references right a way to link out to something that shows uh where this best practice comes from in this case this probably comes from some article that’s that’s out of date the wrong answer so there’s definitely some room for improvement here and I see this as a big challenge with using llms for performance uh or really for any kind of thing because you there’s a you’re sort of trusting it to be an expert but at the same time do you really trust it uh Gemini one other thing I really liked with chat GPT is a after each response it gave me these little chips uh with suggested follow-up questions so here it’s suggesting any other ways to improve performance and that’s the whole idea here it’s a conversation you can keep asking questions and drilling down into problems that you’re having next I triy Gemini so in this case I created a gem this is like a GPT uh the gem is the system instructions that I’m giving Gemini to act as uh an expert and one thing I liked here is that it actually exposes the the the full system instructions and lets me edit them so I went in and I added some WordPress Specific Instructions telling the llm how to correlate the script paths that you find uh in a lighthouse Report with the plug-in paths by the slug so this is a way to sort of inform the LM how it should do the analysis on the data that it’s about to get then I proceeded I uploaded all the data just like I did with chatet PT and it came back with the same sort of uh response where it highlighted the top uh issue as being the slow server response time so very good there so far and I now I’m going to ask it for a solution how can I fix this problem what plugins could be causing my problems again it picked up on the fact that I had five form plugins installed uh and recommended that I I deal with that situation and so what I did then was I actually disabled all the plugins turns out I didn’t need a form plugins so I disabled all the form plugins and I reran the lighthouse report and I asked it to compare to the previous report so this is another really useful feature of llms is you can take this huge data set and then get a new version and ask for a comparison and that’s exactly what uh Gemini did it gave me a before and after comparison and it gave me this nice little chart at the bottom I really like that it gives you the export to Sheets button this is super helpful to me because I can export this each step that I do in my performance tuning process I’m going to save that data so I have a record of all the changes that have made along the way and um then I did some more optimizing this time I optimized the main image on the page which I had purposefully left oversized and I made it the correct size so the dimensions matched the actual image and I also changed it to being a webp image which is obviously smaller and after I made those changes I reran Lighthouse and I uploaded the file again and I asked it to compare and again I got this great chart and I made a huge impact here with this change uh and the thing that I lik most here is that it right after this it told me um that I’ve now fixed my LCP problem you know I’ve dramatically improved LCP so it it really uh honed in on what the results of this change were which is really helpful to a user to know that they’ve had the right impact that they’re trying to make with the changes so this is using llms to kind of analyze data right uh this is something that I do over and over again at the performance booth uh at the performance table at the Google booth at word camps is people come in and we look at their Lighthouse scores maybe we do a Dev Trace maybe we look at the list of their plugins the HTML of their website and then we try to synthesize all of that data into some concrete recommendations some a few things that they can try to maybe improve their performance and after doing that process over and over again I realized this could be a good task for an llm and it gave me an idea which is WP Performance Wizard maybe I could build a plugin for this so that’s exactly what I did um so this is my first time announcing this publicly uh this is uh public though on my repo so you could go check it out on GitHub it’s the wp performance Wizard and essentially what this plug-in does is all the things that I just showed you in the previous steps so it has a set of system instructions that Define it uh as a helpful performance expert uh I’ve built a connector to Gemini so far but it’s open source so please someone build the chaty PT connector it’s it’s a pretty simple to do uh it collects data from a bunch of data sources so far I’ve built in Lighthouse HTML and plugin in theme data uh and then it it proceeds with a sort of conversational mode where it sends each data set off to the um off to the agent and it also has some instructions for each data source about how to analyze that data so things like for example how to correlate the plugins back to the lighthouse data that kind of thing and then at the end it becomes interactive so you can ask the follow-up questions and drill down on the information that want and this is how it looks so uh you go into WordPress tools performance Wizard and you click Start analysis and it’s going to start this conversation now I’ve sped up this video this actually takes several minutes to complete because each time you hit the llm there’s quite a bit of time for it to analyze all that data and get back to you uh and also things like Lighthouse API take this P Fe insights API takes quite a while but anyway this is the speed it up response here at the very end you get this nice summary of what the top Rec recommendations are it also includes testing instructions and so forth um this is kind of what some of the results look like and you can see again that it’s doing this great job of correlating the problems to the plugins as well as to the specific Lighthouse audits that they face again i’ I’ve talked about this a little bit but it does a great job with attribution it detects duplicate plugins it comes up with a testing strategy so how you can test the fixes and see if they’re actually having the impact that you want but and it also identify specific problems so I created a plugin that Ines seven different JavaScript libraries and it clearly identified that is the problem you’re having but it also sometimes gets it completely wrong like in one case where it recommended that I increase my LCP from 1.1 to the recommended 2.5 seconds that’s exactly the opposite of good advice the actual recommendation is to say below 2.5 seconds so uh please contribute uh like I said it’s open source I have a lot of ideas for how this uh plug-in could be improved and made more useful made more accurate uh I have issues open for these most of these ideas already on the repo and that is my talk thank you very much uh the bitly address is the slides the Survey QR code uh that is on your screen is a quick survey for you if you have a moment just to answer uh the question did you learn anything from this talk about performance in 2024 and I think I finished with a a little bit of time left over for any questions that might have come up in Q&A Adam love it love it lots of kudos for you in the chat uh let’s give a nice round of thank you for Adam’s amazing talk on essential performance hacks for WordPress speed we’re gonna now go to some time for questions so if you want to make sure you mark that in the Q&A panel we’ll be working through those questions that folks asked um through the Q&A so I’ll be looking at that and jumping back and forth to chat um we’ll start off here with this question from um pesh what are the techniques um effective for detecting and optimizing performance bottlenecks in web applications I just pin that up to the screen there for you Adam so I I assume that is more about like when you say web applications as opposed to like a website maybe um I guess I’m going to Real User Metrics say the most important thing is collecting data real user metrics um that’s something where uh it can really inform how how users are are experiencing your your website or application a lot of times we we tend to test things out on our highpower development computers that’s called lab testing uh when when sites get live or applications get live in the field uh users have a very different experience they might not have the same high powered devices they might be on iffy uh network connections so I would say the first thing would be collect data uh and then and then it’s a similar to any type of Performance Tuning where you identify where the worst problems are you try to fix those problems and then you uh repeat you you test to see if if that made the impact that you want and and repeat that process over and over again until you’ve fixed your problems here’s another one for you from David how to optimize YouTube video embeddings that’s a great question um we do have the embed Optimizer that aims to do that we have an issue there to Embed Optimizer possibly replace YouTube embeds with the YouTube light embed that’s was developed by Paul Irish you can just search YouTube light you’ll find that you can use that as a substitute one really big challenge with any way of substituting optimizing the YouTube embeds is that on I think it’s Safari mobile um when you when you do that type of lazy loading of the embed it takes two clicks to start the video not one click I’m I’m I’m not explaining it exactly right but there is a fundamental technical problem um that even things like the YouTube light ined has where you don’t get that that one Play click that users are expecting um but I would say that if you if the optimization is the most important thing to you I would I would definitely check out that YouTube light uh and also the embed Optimizer plugin very cool awesome recommendations uh let’s jump to this one here from stash go ahead and pin this one on the screen there if I choose to use an external host for my images do I need to convert them from JPEG to webp format before uploading them to that host yeah I think that depends on on where you’re talking Image CDN about hosting the images um with image CDN Services they typically will do that type of conversion automatically um so if you’re using an image CDN where your images get uploaded automatically then when they get served up to users they’ll typically get served up in the best possible format so the browsers actually announce which formats they support as part of their requests and then the CDN can respond with either avif or webp depending on what what they support uh if if you’re talking about like uploading your files to S3 directly and then serving them from there or something like that then yes you would need to convert those because WordPress will only do this conversion um when you are uploading your images directly to Wordpress cruzen through our question here Adam there’s some good stuff in here just want to get as many as we can in the time we have this one’s coming in from Lindsay uh still on the image topic does using modern image formats help it all with other people stealing Image Photography from my website that’s a Landing Webp great question actually um you know a couple years ago we tried to land webp by support in in WordPress core and what this would have done is essentially what the plugin that we have now does so when you uploaded your jpegs it would have automatically converted them to to web pees for serving on the front end and then when end users visited your site uh it would have been webp images now one of the problems with that and the reason we didn’t wind up Landing that feature is that if users download those webp images they’re less useful in other places that aren’t the web so for example Google Docs does not support webp images um if you switch to avif images you’ll find even fewer places that you can use them because it’s a newer format so in a way switching to Modern form formats does help you with people stealing your images because they become a little harder for people to use uh they can still download them but now they’re in the Aviv format they need to know how to convert that to jpeg probably not a huge help but it is interesting that for things like Publishers for example where they really don’t want people just copying images off their website the sort of problem that we have with Landing webp is is actually a benefit to them so it helps a little bit I guess with my answer going back in chat a little bit to some previous questions that were asked here uh do inp captures always indicate direct engagements um they are they’re user interaction so I think you’re asking like is it a direct interaction yes that the answer is yes that’s what it captures cool and then let’s see here we probably have time for a few more questions still um what advantages does the high efficiency image format have over traditional formats like jpeg so H or H uh is another sort of very similar format or I think HC is the High Efficiency Image Format one that’s the default output format for iPhones so you may have come across this image format if you’ve looked at photos that you’ve synced to your computer that you took with an iPhone if you upload them directly from your iPhone Apple actually converts them to jpegs um but these this format HF or h closely related so I’m going to talk about haic because I know more about it is not widely supported on the web so it’s supported in Safari but no other browsers support it so it’s not really a web safe image format but we did recently land in WordPress core a feature where if you upload these haic images instead of giving you an error if the server actually supports hgic we’ll convert those for you automatically to jpeg um so the advantage I guess is there probably are some more technical advantages but it has you know High Dynamic Color range much better compression than jpeg uh it probably has some other features that are lacking from JPEG that I’m I’m forgetting now but the challenge is that it’s not really a Web format um and so you can’t really directly use it on your website unless you only have Safari visitors this questions from earlier on WP rocket whether WP rocket has all of these plugins maybe that were mentioned earlier uh wpr rocket has features that WP Rocket are similar all of these features that I announced they don’t use our plugins obviously um we do work closely with several of the optimization plugins including WP rocket uh we welcome their contributions because they know a lot about optimization but uh yeah they have similar features they have uh that we have in our plugin so if you’re already using WP rocket you probably have most of these features already um they’re not doing things exactly the same way that we do them so you might get slightly different results but in terms of the general approach like optimization to detective they definitely are doing something like that where they’re capturing metrics and using that to inform how they do the loading yep uh what metrics are most essential I know you talked quite a bit about a lot of these I’m not sure how much time we have for that question but I mean you know the ones that you’re failing on are the ones that are most essential for you and and that’s the whole point of these metrics really is to help you capture uh data about poor experiences that users are having so that you can fix them that’s really what these metrics are for so it’s going to vary tremendously depending on your site depending on where your users are uh you might have a lot of large images that might be you know you might need to pay to LCP might be your main thing you might have a very interactive site where imp is the most important thing so it it really depends there isn’t one answer to that other than to say the core web vitals are the top top ones to pay attention to um I will say that uh it kind of came up in my in my AI section that time to First Bite is a is a large problem in WordPress we have a lot of sites with a slow time to first bite if you can’t get your time to First Bite down to a reasonable level you know your LCP is never going to be good um you’re never going to get good performance if you can’t get your time to First Bite down so that’s usually solvable with something like full page caching however if you’re doing something like e-commerce that may not be a valid solution for you so again it really varies tremendously depending on what your needs are what your site is I’m gonna take a little bit of a of a detour here on some of your core presentation Adam but I’d love to get your Insight as a person at Google if you want to answer this question he is sha is new in the it field can you guide him on where you could apply for some basic level jobs or any career advice uh do you have for people that are early in their kind of it web pro career yeah i’ Getting Involved I’ve done some mentoring with with kind of people early in their career so I know how challenging it is I think it’s a super challenging thing to get involved in it um any kind of job you know when you’re when you’re applying you sort of have to sell yourself so it’s really easy to try to tout up what you could do and then feel feel like you’re lying about it you know the impostor syndrome as they call it I would say for me personally that’s all I can really share as my own personal experience one of the biggest things was getting involved in open source uh early on I applied for a job at automatic and I was denied because I wasn’t word pressy enough and that led me to releasing a plug-in and eventually getting involved in WordPress core and eventually becoming a core committer uh which I’ve been doing now for you know over a decade so that work that I did in open source in WordPress core was essentially my resume when I went to get my my real job essentially out there in the in the uh industry was I could point to all this work that I had done in WordPress core I could point to the commits I could point to the things that I landed I think anything that you can get involved in whether it’s WordPress or some other open source project where you can and I was donating my time I should say uh but you get the experience of working with other people of of building code of interacting which is a critical part of being successful in Tech uh so I would say get involved in open source get involved in WordPress core Adam I love from that advice just the like taking the rejection of an opportunity and actually using that as feedback of like okay if I went and did this other stuff maybe that would help you obviously it helped you immensely in your career um maybe we have time for one more question here we’re gonna go from Dimitri uh if we made change to optimize core web vital why we can’t see changes when we use the online Google page speed Wrap Up tool um okay so there’s a couple things here um one is that so there’s there’s two data sets that are returned if you you’re talking about PB insights there’s two data sets that are returned if you have field data that is how users are actually experiencing your site in the field that shows up first the second section is the lab data that is run directly against your your site when you when you hit the API or or load the page so that one should change when you make changes I will say there’s a lot of variability in those tests so if you run them repeatedly you’ll get different numbers each time um so if the changes are small it may be difficult to pick up those those types of uh changes you could try our tooling that the tools that we’ve developed like the the wpcl commands that we have one of the ways that we overcome that problem is that we run the tests repeatedly like 50 times or 100 times and we take the median value um so you should be able to sense differences when you make changes with those types of tools um for field data for data for how users are experiencing your site that is delayed so if you make the change now it won’t appear into you know next month’s data set uh so there’s that factor as well that is awesome and that is all the time we have for questions Adam uh one last question here from the cloudways team how was your overall experience this year at the cloudways Prepon 2024 great great I caught a couple of the talks earlier and it was fun for me to prepare for this I haven’t really talked about Ai and performance yet publicly and even though I’ve been messing around with it a lot so it was really fun to actually just prepare for it and uh yeah I really enjoyed it thanks so much for having me awesome well Adam thank you let’s give another virtual Round of Applause some shoutouts in chat uh you know our speakers are suckers for those emojis and memes and all that good stuff so let’s give Adam some love here at cloudway Prepon so see lots of thank yous awesome talks all that good stuff Adam thank you so much for stopping by the Prepon this next up and stick with us we’ve got um one more session coming to you with our host Shelley Fagan uh she is going to be hosting a panel a round table on uiux mistakes to avoid for your client’s website so if you’re building websites if you’re launching web apps for your clients these are going to be uiux mistakes we’ve got some top experts coming in to join on this panel so we’re not quite yet done with day one of cloudways Prepon 2024 so stick with us and we will be right back