Core Web Vitals Optimization… Now Powered by AI! #SiteSpeedWTF #corewebvitals #AI

Key Takeaways

What I can do to improve LCP? What is blocking the main thread the most? What does this script do? Which CSS or JavaScript are unused on this page? That's correct. You guessed it right. I asked AI to help me optimize the performance of the website. And also I asked it, how can I make this look like a wheel? It's round now. How can I center alline parts on the same horizontal axis? Yay. All right, let me explain what is happening here. Last week I was speaking at Word Camp Europe about WordPress performance of course and after that I was invited to Google Booth to see the latest updates in Chrome dev tools that help investigate performance issues on the websites. To say that I was impressed it's to say nothing. This all is very new. It's just the latest things that are happening in ChromeDev tools. Google added Gemini into Chrome dev tools. You can speak to AI while working on the website and it can analyze what you see and talk with you about the things that are happening on the website that you're working with. It's not like you are trying to explain to it what you are working on. Explain your situation and ask it how to do this or that. No, it's just there inside Chrome Dev Tools and you can communicate with it just as if it was an assistant that is sitting there next to you looking with you at this code. Well, I'll show you first the things that would be useful for all developers and then I'll show you the things that are related only to performance. All right, I have an airplane here. I would like these wheels to become round. And I'm going to ask AI to do this for me. Right click, inspect. Here I'm choosing the div associated with this square wheel and I'm clicking AI. How can I make this look like a wheel? Currently the selected element is block level element with equal width and height and it's telling me to set border radius to this element. It understands what is happening tells me to set border radius as round and also it suggests me to apply the border radial style. It says the user wants to apply the body radius 50% style to the selected element to make it look like a wheel. As discussed in the previous turn, I can achieve this by using the self element style function. What it does, it adds CSS via JavaScript to our page. Let's click continue and see what's happening. It's round now and it tells me what did it do. I have applied the body radius 50% style to the selected element landing gio wheel and I can see the result over here and look inspector stylesheet it's added through inspector as I would add it in inspector obviously it's changing nothing on the website itself but it gives me the idea what CSS I need to tweak to achieve the results I want. I haven't done it before but let's try. Can you make all elements like this round? There is one more wheel there. The user wants to apply body radius to all elements. I need to find all elements with this class and then apply the style to each of them. Smart guy or Jiminy is not guy. I don't know. Continue. Inspect. How can I center alline parts on the same horizontal axis? Actually, I don't want to spoil you the joy of trying it yourself. First, you'll need to activate AI assistant in Chrome and then head to the website that I was using. This is Google's website to demonstrate cool things that you can do with AI. There are more toys to play there. The demo that I was showing is called hangar. We were told that AI will do our work at some point. But are we already there? I'm running the local core web vital test. This is field data and this is local. And this is what I see normally, right? And frames and all the waterfall and all the holes and everything. But now I can ask AI to to explain to me what does that mean and where I should be looking for the source of the problem. Let's try to ask which LCP face was most problematic. Look how interesting the largest contentful paint LCP for this page is textbased and occurred at force second. The most problematic phase is element render delay. So this one is considered to be LCP. This one not the image and not all these images. And here we go. Optimization recommendations. Minimize or defer. Optimize CSS delivery. Well, as a performance engineer, I wouldn't say that these are very good recommendations, but they are not worse than all the recommendations that we see around the internet like generic recommendations because in this case we have quite different problem and the source of the problem is this one. Why this is considered to be LCP? All right, let's try the simple one. What is blocking the main thread the most? Well, for me, as for someone who sees this for the first time, I do not understand why this website is using this JavaScript that is called client lib vendor redesign. Let's ask AI if it knows anything about it. What does this script do? is a significant contributor to main thread links. I know this already. Well, this is the idea that at some point we will be able to do this. Okay, I see something confusing here. Well, I see a lot of confusing things here. But for example, this one, this image and this image is the same. One is called hero desktop, another hero mobile. Well, I'm using mobile and the minimum I can do I can skip loading at least the desktop version. Let's ask AI about it. Is this image used on mobile devices and likely it's being requested and likely displayed? But the thing is it's requested but not displayed. Uh I'll show how I usually check this. We can copy the name. Let's see if it's really displayed. I have the feeling that it won't be displayed in any way. And here display non. It looks like this image has property display non for mobile devices which means it's loaded though it's not used. All right. With my help AI understood that something is going on here. You are correct that the image we select such and such currently has display non applied. When an image element has display non, the browser doesn't render it on the page. However, the image is still loaded by the browser because the image t is present. This means you are correct that the image is loaded even though it's not used visually. Loading hidden images can negatively impact page load performance especially on mobile devices with limited bandwidths. This is the correct answer. But it wasn't the answer from AI. It was my suggestion. And AI responded to my suggestion. It didn't see it itself. Far from perfect. Very far from being perfect. But I believe this is just the beginning. AI will keep getting smarter and smarter. But will it help developers really to solve performance issues? If you already know what you are doing, if you have a clear understanding of how performance works, how to investigate performance issues and you use AI as a technical assistant. In this case, yes, I believe it will help resolve performance issues. Without the clear system how to resolve performance issues, I don't think so. AI can support you with data and recommendations, but only if you already know what you are doing. This is the main problem with resolving performance issues. Good developers were reading articles like how to make LCP load faster or how to reduce time to first bite or how to make server response faster or how to optimize images. Now it's AI that will give you these advices. But you don't need more how to articles and you don't need more generic advice even from the AI to effectively solve performance issues. You need a clear repeatable system. That's why I'm sharing my sixstep algorithm to investigate core web vitals. This mind map is the system that I use every time I'm working on performance optimization for the client. Download it using this link. It will save you hours of work and keep you from frustration. Seriously, follow this system step by step and then bring in AI to speed things up as a technical assistant. Good luck with your performance work. Cheers.