AI wrote code, but forgot about performance - fix it with 1 prompt | Angel Pichardo, ImageKit.io

In this talk, Angel from ImageKit discusses the importance of optimizing image and video performance in React applications using their new Multi-Context Prompt (MCP) feature. The session begins with an example of a poorly performing e-commerce site due to slow-loading images. Angel demonstrates how to use Chrome Developer Tools MCP to trace performance issues and identify specific image URLs causing delays. By utilizing ImageKit's tools, developers can automate the optimization process, adjusting image sizes, quality, and formats efficiently. The speaker emphasizes the need to integrate these optimizations early in the development process rather than treating them as an afterthought, showcasing improvements that can significantly reduce webpage load times.

Uh hey guys, I'm Angel. I'm from ImageKit. Uh so, for just a raise of hands, uh who uses MCPs in their in their in their daily development? Fantastic. Uh I'm just going to encourage more of you to do so uh before you actually finish development. So, here I have a website that I made uh using uh cursor and uh as I put all my images in there

and I go ahead and I refresh. I notice that these images take a long time to load. And I'm uh one of the things I want to show you guys is how you use ImageKit's new MCP to actually fix your images and video performance at within your React websites. And so, uh one of the places you can go to here is actually our uh actually do it

do it do it locally or through our API. And also use uh this thing called Chrome developer tools that they also developed a new MCP recently. Uh that we can go ahead and try out. And so, the first prompt I'm going to be using is uh to use the Chrome developer developer tools MCP to record a record a performance trace of my website and tell me the

three biggest performance issues of that website. And then we're going to identify the issues and tell me what which specific URL images are causing the issues. And then we're going to generate helpers to fix the problem. And then we're going to update our performance. And then we're going to verify [snorts] to make sure everything was done correctly. I'm going to just run through one of these uh

just due to the time. And uh we'll just take a look quick look at what the uh image uh what the website looks like right now. You can see see the images are loading very slowly. And then when we run all our fixes, everything will be much more smooth as we learn. And so let m- when we're doing this manually, we'd have to go over to the

docs. We have to check out, okay, like uh I need to think about uh how to actually do lazy loading, how to resize my images, how what kind of quality do I want to have, what what what's the format I want to have it in. Uh there's a lot of things that go into making sure your images and videos are actually optimized the best way possible. Uh

that's what Normally, you go into ImageKit's docs and figure out how to do it. But, uh with the power of MZP's and your favorite cursor IDE, you don't have to do that anymore. I'm going to run one prompt just to show you guys how it would how it would done. I I got it started earlier, so we're just going to run the just so you can see

what's happening So, for context, this is running the the first prompt and figuring out what actually is wrong with the the broken React e-commerce site. Let me just run through. It opens up the site on its own. It's going to go through and identify all the problems. And so, what we're going to do is hop the presentation. I'm going to highlight a few things. So, typically, as

I mentioned, performance is an afterthought. Uh we we we we build our our website and our and we have our images on the on the page and it's working perfectly. Uh us or so we thought, and then we finally refresh our page, and now we're like, "Oh, what's going on?" So, we want to fix performance, but we don't want to do it manually anymore. We want to

use our AI to do it for us, so we don't have to. And so, uh exactly what are these MCPs doing? Uh so, we have to answer two questions: What's broken? How do I fix it? Uh the Chrome developer tools has a uh the the Chrome dev the dev tools MCP has a few tools we're going to use. It's going to navigate the page. Uh we're we're

going to do a trace. We're going to do a performance analyze. Uh and we're going to take a snapshot, as well as list the network requests to to make sure that we understand exactly what's happening through our website. And then we're going to use ImageKit to actually search the docs uh using the agents, and we'll execute all the changes. Uh ImageKit uses uh a one URL to

fix all the all the all the uh optimization issues. So, uh our first URL uh is going to be just a basic URL that has all the um the the default image. And then with our URL, we're going to change it so that uh we change the width to to it to actually 1,200 pixels. We have the quality at 80%, and uh our our focus is going

to be auto. And that will change our image to go from to 3.28 MB to only 47.5 KB. And overall, that'll bring our website down from 68 MB all the way to 1.4 1.84 MB. So, my overall ur- urge urgency to you guys is to not wait till after post development. Uh use MCPs uh during your development, and uh to and and please check out ImageKit for

all your image and video performance needs. Thank you so much. >> [applause] [music]