Cómo hacer que tu web cargue más rápido: 9 mejoras con impacto real
Mejoras concretas para acelerar una web: imágenes en WebP y AVIF, carga diferida, caché, compresión, fuentes, scripts de terceros y cómo medir con PageSpeed Insights.
Por el equipo de Voriam Technologies3 min de lectura
Una web lenta pierde visitas: en el móvil, cada segundo extra de espera aumenta el número de personas que se van antes de ver nada. Además, Google tiene en cuenta la experiencia de carga (las Core Web Vitals) para posicionar las páginas. Estas son las mejoras que más se notan, ordenadas de más fácil a más técnica.
Primero, mide
Abre PageSpeed Insights (pagespeed.web.dev), pega tu URL y mira sobre todo la versión móvil. Fíjate en tres métricas:
| Métrica | Qué mide | Objetivo |
|---|---|---|
| LCP | Cuánto tarda en verse el elemento principal | Menos de 2,5 s |
| INP | Cuánto tarda la página en reaccionar a un clic o toque | Menos de 200 ms |
| CLS | Cuánto "salta" el contenido mientras carga | Menos de 0,1 |
Guarda el resultado antes de cambiar nada para poder comparar.
1. Imágenes en formatos modernos y al tamaño correcto
Suelen ser el 50 % o más del peso de una página. Convierte a WebP o AVIF (pesan bastante menos que JPG o PNG con la misma calidad) y no subas una foto de 4000 píxeles para mostrarla a 800. Con srcset el navegador elige el tamaño adecuado para cada pantalla.
2. Carga diferida de lo que no se ve
Las imágenes y los videos que están más abajo pueden esperar. Añade loading="lazy" a las imágenes que no estén en la primera pantalla, pero nunca a la imagen principal: esa debe cargar cuanto antes.
<img src="equipo.webp" width="800" height="533" loading="lazy" alt="Nuestro equipo">3. Reserva el espacio de imágenes y anuncios
Indica siempre width y height (o aspect-ratio en CSS) en imágenes, videos y huecos de anuncios. Así el navegador reserva el espacio y el texto no salta cuando cargan, lo que mejora el CLS.
4. Compresión y caché en el servidor
Activa Brotli o gzip para HTML, CSS y JavaScript, y envía cabeceras de caché largas para los archivos con huella en el nombre (por ejemplo app.3f9a2c.js). Una CDN como Cloudflare hace ambas cosas y además sirve los archivos desde un servidor cercano al visitante.
5. Fuentes web con cuidado
Usa una o dos familias como mucho, solo con los pesos que realmente uses, en formato WOFF2 y con font-display: swap para que el texto se vea mientras carga la fuente.
6. Menos scripts de terceros
Chats, mapas, píxeles de seguimiento y widgets sociales suman mucho. Revisa cuáles siguen haciendo falta, cárgalos con defer o async, y retrasa los que no son urgentes (un chat puede cargarse cuando el usuario lo abre).
7. Divide el JavaScript
En aplicaciones hechas con React, Vue o similares, carga el código de cada página solo cuando se visita (*code splitting* con import() dinámico). La portada no debería descargar la librería 3D que solo usa otra página.
8. Genera el HTML de antemano
Si la web se construye entera en el navegador, el visitante (y Google) recibe una página vacía hasta que se ejecuta el JavaScript. Generar el HTML en el servidor o en el momento de la compilación (*SSR* o *prerender*) hace que el contenido aparezca antes y que los buscadores lo lean sin esfuerzo.
9. Un hosting adecuado
Si el servidor tarda más de medio segundo en responder (lo verás como *TTFB* en las herramientas), ninguna optimización del navegador lo compensa. Revisa que el servidor tenga recursos suficientes y esté cerca de tu público; en cómo elegir hosting explicamos qué mirar.