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!
¿Quieres conseguir un 100 de Rendimiento en tu Web? Mega hilo con colección de trucos para conseguirlo:
1. Carga sólo el JavaScript y CSS que necesitas. Para saber si eso es un problema, puedes usar la pestaña de Cobertura en las DevTools. Esta pestaña está un poco oculta, pero te dice el % de uso de tus archivos. Al darle a un archivo, te muestra las líneas que se usan.
2. Carga diferida de dependencias Utiliza imports dinámicos para cargar bibliotecas sólo cuando las necesitas. Si algo sólo se necesita tras la interacción del usuario... ¡Entonces cárgalo sólo ahí y no desde el principio! Un ejemplo con código JavaScript:
3. Optimiza tus imágenes Usa el formato y tamaños adecuados para tus imágenes: - webp o avif siempre que puedas - Haz imágenes responsive y cargar según el dispositivo - Usa SVG para iconos e imágenes vectoriales - Evita PNG siempre que puedas <a target="_blank" href="http://squoosh.app" color="blue">squoosh.app</a>
4. Usa la plataforma web Evita usar dependencias grandes o innecesarias: - Busca alternativas más pequeñas (lodash vs just) - Favorece soluciones nativas (axios vs fetch) Con bundlephobia entiendes el coste que tiene: <a target="_blank" href="https://bundlephobia.com/" color="blue">bundlephobia.com</a>
5. Favorece CSS en lugar de JavaScript CSS ha mejorado muchísimo y cada vez es más potente. Hoy en día puedes hacer ciertos sliders y UIs sin JS. Revisa y aprende a usar CSS ya que: - La solución ocupa menos que JS normalmente - La evaluación es mucho más rápida - Mejor UX
6. Carga diferida de imágenes Usa la etiqueta nativa lazy de imágenes e iframes para cargarlas sólo cuando el usuario las necesita. ¡Ojo! Usa esta técnica para imágenes que sabes que no están en pantalla desde el principio.
7. Comprime tu contenido con Brotli Haz que tus recursos viajen más rápido usando una mejor compresión. Brotli ofrece una mejora de un ~25% respecto a gzip. Muchos servidores lo hacen automáticamente pero revisa que lo tienes activado.
8. Cuantas menos fuentes, mejor Las fuentes son críticas para mostrar nuestra web. Si puedes, usa sólo fuentes del sistema. Si no... Usa el mínimo número y siempre con formato woff2. Te dejo una guía con las mejores prácticas para su carga. <a target="_blank" href="https://web.dev/font-best-practices/" color="blue">web.dev/font-best-prac…</a>
8b. ¡Y no uses Google Fonts directamente! Google Fonts puede ser buena idea para probar algo... ¡Pero no es lo más óptima en cuanto a rendimiento! Lo mejor es hospedarlas en tu sitio. Es lo que hace por ti Next.js con su utilidad font.
9. Evita mostrar un loader al principio Nuestra web tarda en cargar y mostramos un loader al inicio. ¡Esto es fatal para la percepción de carga del usuario! Haz que tu contenido aparezca cuanto antes
10. Ordena tu etiqueta head Además de precargar scripts y recursos... ¡El orden de lo que cargas es importante! Esta utilidad te dice cómo debes colocar tus etiquetas para tener el máximo rendimiento y evitar bloqueos innecesarios: <a target="_blank" href="https://github.com/rviscomi/capo.js" color="blue">github.com/rviscomi/capo.…</a>
Como último tuit irían mis redes y demás. Pero no quiero agobiarte con lo mismo de siempre. Simplemente, sígueme donde quieras si te gusta mi contenido. ¡Gracias por leerme!