¡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:
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
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
- 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.
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.
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)
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.
¡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.
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.
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.
¡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
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.
- 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:
midu.tube
¡Comparte este hilo con quien lo necesite!
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:
midu.tube
¡Comparte este hilo con quien lo necesite!
Generated by Thread Navigator
Press ⌘ + S to quick-export