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

Full transcript

1. 0:09Uh hey guys, I'm Angel. I'm from
2. 0:10ImageKit.
3. 0:11Uh so, for just a raise of hands, uh who
4. 0:14uses MCPs in their in their in their
5. 0:16daily development?
6. 0:18Fantastic. Uh
7. 0:20I'm just going to encourage more of you
8. 0:21to do so uh
9. 0:23before you actually finish development.
10. 0:25So, here I have a website that I made uh
11. 0:28using uh cursor and uh
12. 0:33as I put all my images in there and I go
13. 0:35ahead and I refresh.
14. 0:37I notice
15. 0:40that these images take a long time to
16. 0:41load.
17. 0:42And I'm uh
18. 0:45so,
19. 0:46one of the things I want to show you
20. 0:46guys is how you use ImageKit's new MCP
21. 0:48to actually fix your images and video
22. 0:50performance at within your React
23. 0:52websites.
24. 0:53And so, uh
25. 0:55one of the places you can go to here is
26. 0:57actually our uh
27. 0:59actually do it do it do it locally or
28. 1:01through our API.
29. 1:04And also use uh
30. 1:05this thing called Chrome developer tools
31. 1:07that they also developed a new MCP
32. 1:08recently. Uh
33. 1:11that we can go ahead and try out.
34. 1:13And so, the first prompt I'm going to be
35. 1:14using is uh to use the Chrome developer
36. 1:17developer tools MCP to record a
37. 1:20record a performance trace
38. 1:23of my website and tell me the three
39. 1:24biggest performance issues of that
40. 1:26website.
41. 1:28And then we're going to identify the
42. 1:30issues and tell me what
43. 1:31which specific URL images are causing
44. 1:34the issues.
45. 1:35And then we're going to generate helpers
46. 1:37to fix the problem.
47. 1:39And then we're going to update our
48. 1:39performance. And then we're going to
49. 1:41verify [snorts] to make sure everything
50. 1:42was done correctly. I'm going to just
51. 1:44run through one of these uh just due to
52. 1:46the time.
53. 1:47And uh we'll just take a look quick look
54. 1:50at what the uh
55. 1:52image uh what the website looks like
56. 1:53right now. You can see see the images
57. 1:56are loading very slowly.
58. 1:59And then when we run all our fixes,
59. 2:02everything will be much more smooth
60. 2:06as we learn.
61. 2:09And so let
62. 2:11uh
63. 2:12So,
64. 2:13m- when we're doing this manually, we'd
65. 2:15have to go over to the docs. We have to
66. 2:18check out, okay, like uh I need to think
67. 2:20about uh how to actually do lazy
68. 2:23loading, how to resize my images, how
69. 2:26what kind of quality do I want to have,
70. 2:28what what what's the format I want to
71. 2:29have it in. Uh there's a lot of things
72. 2:31that go into making sure your images and
73. 2:33videos are actually optimized the best
74. 2:34way possible. Uh that's what Normally,
75. 2:37you go into ImageKit's docs and figure
76. 2:38out how to do it. But, uh with the power
77. 2:41of MZP's and your favorite cursor IDE,
78. 2:44you don't have to do that anymore.
79. 2:46So,
80. 2:48I'm going to run one prompt just to show
81. 2:49you guys how it would how it would done.
82. 2:53I I got it started
83. 2:54earlier, so we're just going to run the
84. 2:55tool
85. 2:57just so you can see what's happening
86. 2:58right now.
87. 3:08So, for context, this is running the the
88. 3:09first prompt and
89. 3:12figuring out what actually is wrong with
90. 3:14the the broken React
91. 3:18e-commerce site.
92. 3:22Let me just run through.
93. 3:24It opens up the site on its own.
94. 3:27It's going to go through and identify
95. 3:28all the problems.
96. 3:32And so, what we're going to do is hop
97. 3:34over to
98. 3:36the presentation.
99. 3:39I'm going to highlight a few things.
100. 3:43So, typically, as I mentioned,
101. 3:44performance is an afterthought.
102. 3:46Uh we we we we build our our website and
103. 3:49our and we have our images on the on the
104. 3:51page and it's working perfectly. Uh
105. 3:53us or so we thought, and then we finally
106. 3:55refresh our page, and now we're like,
107. 3:56"Oh, what's going on?"
108. 3:59So, we want to fix performance, but we
109. 4:00don't want to do it manually anymore. We
110. 4:01want to use our AI to do it for us, so
111. 4:03we don't have to.
112. 4:05And so, uh exactly what are these MCPs
113. 4:07doing? Uh so, we have to answer two
114. 4:09questions: What's broken? How do I fix
115. 4:11it?
116. 4:14Uh the Chrome developer tools has a uh
117. 4:16the the Chrome dev the dev tools MCP has
118. 4:19a few tools we're going to use. It's
119. 4:21going to navigate the page. Uh we're
120. 4:23we're going to do a trace. We're going
121. 4:24to do a performance analyze. Uh and
122. 4:27we're going to take a snapshot, as well
123. 4:28as list the network requests to to make
124. 4:31sure that we understand exactly what's
125. 4:32happening through our website.
126. 4:34And then we're going to use ImageKit to
127. 4:35actually search the docs uh using the
128. 4:37agents, and we'll execute all the
129. 4:39changes.
130. 4:42Uh ImageKit uses uh a one URL to fix all
131. 4:45the all the
132. 4:46all the uh optimization issues. So, uh
133. 4:49our first URL uh is going to be just a
134. 4:51basic URL that has all the
135. 4:54um the the default image. And then with
136. 4:58our URL, we're going to change it so
137. 4:59that uh we change the width to to it to
138. 5:03actually 1,200 pixels. We have the
139. 5:05quality at 80%, and uh our our focus is
140. 5:08going to be auto.
141. 5:10And that will change our image to go
142. 5:12from to 3.28 MB to only
143. 5:1847.5 KB.
144. 5:22And overall, that'll bring our website
145. 5:23down from 68 MB all the way to 1.4 1.84
146. 5:27MB.
147. 5:31So, my overall
148. 5:33um
149. 5:35ur- urge urgency to you guys is to not
150. 5:37wait till after post development. Uh use
151. 5:39MCPs uh during your development, and uh
152. 5:43to and and please check out ImageKit for
153. 5:45all your image and video performance
154. 5:47needs.
155. 5:49Thank you so much.
156. 5:53>> [applause]
157. 5:57[music]