¿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
squoosh.app
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:
bundlephobia.com
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.
web.dev/font-best-prac…
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:
github.com/rviscomi/capo.…
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!
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.