Canvas & Ratio
Choose your destination platform format
Layout Template
Choose a content structure for your slides
Preset Themes
Typography & Sizing
Brand Kit Customization
AGENCYConfigure brand assets for headers & footers
Outro Slide CTA
Customize your closing call-to-action slide
Background Pattern
Build Your Carousel
Drag and drop any post card below onto a slide, or use the quick buttons to insert content/images instantly!
¡Consigue un 100 de Rendimiento en tu Web! MEGA HILO con trucos para que lo consigas ↓
1. Carga diferida de código Con imports dinámicos puedes cargar bibliotecas sólo cuando las necesitas. Por ejemplo: Si necesitas algo sólo tras la interacción del usuario... ¡Entonces cárgalo entonces y no desde el principio! Un ejemplo con código JavaScript:
2. Detecta el JS y CSS que no necesitas Usa la pestaña de Cobertura en las DevTools. Te dice el % de uso de cada uno de tus archivos Al darle a un archivo, te muestra las líneas que se usan Así detectas fácil qué no estás usando
3. Optimiza las imágenes de tu web - Usa los formatos WEBP o AVIF siempre que puedas - Usa SVG para iconos e imágenes vectoriales - Evita PNG (sólo casos muy excepcionales) - Haz imágenes responsive y cargar según el dispositivo
4. Aprende HTML y CSS Te sorprendería las cosas se hacen con JavaScript, a veces de forma MUY compleja, cuando podrían ser pocas líneas de CSS.
5. Evita usar dependencias innecesarias Prioriza el uso de la plataforma web (axios vs. fetch) Busca alternativas más pequeñas de las bibliotecas. Puedes comprobar el coste que tiene cada una usando herramientas como Bundlephobia.
6. ¡Cuidado con las fuentes externas! Son un recurso crítico y causan muchos problemas Parpadeos, saltos de contenido, tamaño... Lo mejor es: - Usa las mínimas posibles - Optimiza al máximo y usa el formato woff2 - Cárgalas desde tu servidor (NO un CDN)
7. Ordena bien tu etiqueta <head> ¡El orden de lo que cargas es importante! Te recomiendo la utilidad llamado "capo.js". Te dice cómo debes colocar tus etiquetas para tener el máximo rendimiento y evitar bloqueos innecesarios.
8. Evita un loader al inicio Haz Server Side Rendering (o Static Rendering) para evitar una página en blanco desde el inico. Y evita a toda costa mostrar un loader al inicio, que hace esperar al usuario.
9. Comprime y minifica tus estáticos Minificar es quitar los espacios en blanco innecesarios, comentarios y código no utilizado o duplicado. Ahorra unos valiosos bytes. Comprimir es una codificación como Brotli que usa el navegador para transferir menos datos.
10. Cuantas menos peticiones HTTP, mejor ¡Especialmente a sitios externos! Usar preconnect puede ayudar, pero no es el santo grial. Lo mejor es hacer las mínimas para que los recursos no tengan que esperar.
11. Caching Usa cabeceras HTTP para controlar la caché y evitar recargas innecesarias Puedes usar archivos hasheados para crear cachés infinitas (por ej. archivo.37182fag.js) Normalmente los empaquetadores como vite lo hacen por ti
12. Precarga lo que puedas - Usa preconnect para reducir la latencia con conexiones tempranas a servidores de terceros. - prefetch para cargar recursos futuros. - preload para cargar recursos esenciales y mejorar la renderización inicial.
13. ¡Recursos! Sigue la página oficial de Google web․dev que cuenta con muchos recursos y artículos para mejorar en web performance. Y mi canal de YouTube donde subiré más contenido: <a target="_blank" href="https://midu.tube" color="blue">midu.tube</a> ¡Comparte este hilo con quien lo necesite!