I Did Everything Wrong So You Don't Have To

Hola chicos, soy Angel. Soy de ImageKit. Entonces, levanten la mano, ¿quién usa MCPs en su desarrollo diario? Fantástico. Iba a animar a más de ustedes a hacerlo, pero antes de que realmente terminen el desarrollo. Así que, aquí tengo un sitio web que hice usando un cursor y puse todas mis imágenes allí. Y voy y actualizo. Y noto, caray, estas imágenes tardan mucho tiempo en cargarse. Y estoy, así que, una de las cosas que quiero mostrarles es cómo usar el nuevo MCP de ImageKit para realmente arreglar el rendimiento de sus imágenes y videos dentro de sus sitios web de React. Y entonces, uno de los lugares a los que pueden ir aquí es en realidad nuestro, pueden hacerlo localmente o a través de nuestra API y también usar esta cosa llamada Chrome Developer Tools, que ellos también desarrollaron un nuevo MCP recientemente que podemos probar.

Y así, el primer aviso que voy a usar es utilizar el Chrome Developer Tools MCP para grabar un rastro de rendimiento de mi sitio web y decirme los tres mayores problemas de rendimiento de ese sitio web. Y luego vamos a identificar los problemas y decirme qué URL específicas de imágenes están causando los problemas. Y luego vamos a generar ayudantes para solucionar el problema. Y luego vamos a actualizar nuestro rendimiento. Y luego vamos a verificar para asegurarnos de que todo se hizo correctamente. Voy a pasar por uno de estos solo debido al tiempo. Y solo echaremos un vistazo rápido a cómo se ve el sitio web ahora mismo. Puedes ver que las imágenes se están cargando muy lentamente.

Y luego cuando ejecutemos todas nuestras correcciones, todo será mucho más fluido a medida que cargamos. Y así, dejemos, así que, cuando estamos haciendo esto manualmente, tenemos que ir a nuestros documentos. Tenemos que revisar, está bien, como, necesito pensar en cómo hacer realmente la carga diferida, cómo redimensionar mis imágenes, qué tipo de calidad quiero tener, en qué formato quiero tenerlo. Hay muchas cosas que intervienen para asegurarse de que tus imágenes y videos estén realmente optimizados de la mejor manera posible. Normalmente, vas a los documentos de ImageKit y averiguas cómo hacerlo. Pero con el Poder de los MCPs y tu cursor favorito, IDE, ya no tienes que hacer eso.

Así que, voy a ejecutar un aviso para mostrarles cómo lo hemos hecho. Lo comencé un poco antes. Así que solo vamos a ejecutar la herramienta para que puedas ver lo que está sucediendo ahora mismo. Así que para contexto, está ejecutando el primer aviso y averiguando qué está realmente mal con el sitio de comercio electrónico de React roto. Déjame solo pasar por esto. Abre el sitio por sí solo. Va a pasar e identificar todos los problemas. Y así, lo que vamos a hacer es saltar a la presentación. Y voy a resaltar algunas cosas. Así que, típicamente, como mencioné, el rendimiento es una idea tardía. Construimos nuestro sitio web y tenemos nuestras imágenes en la página y está funcionando perfectamente. O eso pensamos. Y finalmente actualizamos nuestra página y ahora estamos como, oh, ¿qué está pasando?

Pero ya no queremos hacerlo manualmente. Queremos usar nuestra IA para hacerlo por nosotros, así no tenemos que hacerlo. Entonces, ¿exactamente qué están haciendo estos MCPs? Así que, tenemos que responder dos preguntas. ¿Qué está roto? ¿Cómo lo arreglo? Chrome developer tools tiene algunas herramientas que vamos a usar. Va a navegar por la página. Vamos a hacer un rastro. Vamos a hacer un análisis de rendimiento. Y vamos a tomar una instantánea, así como listar la solicitud de red para asegurarnos de que entendemos exactamente qué está pasando en nuestro sitio web.

Y luego vamos a usar Image Kit para buscar en los documentos usando los agentes y ejecutaremos todos los cambios. Image Kit utiliza una URL para solucionar todos los problemas de autorización. Así que, nuestra primera URL va a ser solo una URL básica que tiene toda la imagen por defecto. Y luego con nuestra URL, vamos a cambiarla para que cambiemos el ancho a 1,200 píxeles. Tenemos la calidad al 80%. Y nuestro enfoque va a ser automático. Y eso cambiará nuestra imagen de 3.28 megabytes a solo 47.5 kilobytes. Y en general, eso reducirá nuestro sitio web de 68 megabytes a solo 1.84 megabytes.

Así que, mi recomendación general para ustedes es no esperar hasta después del desarrollo para usar MCPs durante su desarrollo. Y por favor revisen Image Kit para todas sus necesidades de rendimiento de imágenes y videos. Muchas gracias.