Introducción

Un sitio corporativo rápido es un sitio que da confianza, retiene la atención y convierte. Sin embargo, muchos proyectos web siguen sufriendo lentitudes evitables: imágenes demasiado pesadas, scripts innecesarios, tipografías mal cargadas.

Estos son cinco trucos sencillos que aplico sistemáticamente en mis proyectos para alcanzar una puntuación de Web Vitals superior a 95 sin sacrificar la calidad visual.

1. Optimizar las imágenes desde el origen

Las imágenes suelen ser la primera causa de lentitud. Un solo archivo sin comprimir puede añadir varios segundos al tiempo de carga.

Buenas prácticas:

  • Convertir los archivos a WebP o AVIF.
  • Servir tamaños adaptados a cada punto de ruptura (srcset o picture).
  • Definir siempre las dimensiones (width / height) para evitar el CLS (Cumulative Layout Shift).

En Astro o React puedes automatizarlo con plugins como astro/assets, o next/image si trabajas con Next.js.

2. Cargar las tipografías con criterio

Las tipografías externas suelen subestimarse en una auditoría de rendimiento. Cada fuente, cada estilo o grosor es un archivo que descargar, a veces de varios cientos de kilobytes.

Trucos:

  • Precarga tu tipografía principal con <link rel="preload">.
  • Usa el formato woff2, más ligero.
  • Si puedes, alójala localmente en lugar de recurrir a Google Fonts.

Y sobre todo, define siempre una tipografía de respaldo para evitar el destello de texto invisible (FOUT):

font-family: "Inter", system-ui, -apple-system, sans-serif;

3. Limpiar el JavaScript no esencial

Es una de las optimizaciones más olvidadas. En un sitio corporativo, la mayoría de las interacciones son simples: abrir un menú, animar una sección, mostrar un carrusel. Y aun así es habitual encontrar librerías enteras importadas para tres líneas de lógica.

Cada kilobyte de JavaScript cuenta: cuanto más crece tu bundle, más se ralentiza tu sitio, sobre todo en móvil.

Buenas prácticas:

  • Eliminar los scripts inútiles (módulos antiguos, trackers, widgets externos).
  • Cargar el código interactivo en el momento en que se vuelve visible, con IntersectionObserver.
  • Preferir animaciones CSS o Framer Motion, según la necesidad.
  • Y sobre todo, limitar las dependencias: una microfunción bien escrita suele valer más que un paquete entero.

Astro ya ayuda mucho en este punto: mientras un componente no esté marcado con client:load, client:idle o client:visible, no genera nada de JavaScript en el cliente. Es simple, eficaz y evita sobrecargar el navegador sin darte cuenta.

4. Aprovechar la caché del navegador

Incluso el sitio más ligero pierde reactividad si tiene que recargarlo todo en cada visita. La caché del navegador es una palanca simple y potente para acelerar la navegación.

Una vez que un visitante ha cargado tu sitio, el navegador puede conservar:

  • las imágenes,
  • los archivos CSS y JS,
  • e incluso algunas tipografías, durante días o semanas.

Qué comprobar:

  • Que los archivos estáticos tengan una caché larga (Cache-Control: max-age=31536000).
  • Que los archivos estén comprimidos con gzip o brotli.
  • Que los recursos estén versionados con un hash en el nombre (por ejemplo main.abc123.js).

En plataformas como Vercel, Netlify o Coolify ya viene configurado. Pero una pasada por Lighthouse o WebPageTest siempre ayuda a confirmar que ningún archivo se escapa.

5. Vigilar los Web Vitals sin obsesionarse

Los Core Web Vitals (LCP, CLS, INP) se han convertido en los indicadores clave de un sitio sano. No hace falta convertirlo en religión, pero apuntar a más de 95 garantiza una fluidez real, y suele ser lo que separa un sitio «correcto» de uno en el que apetece quedarse.

Lo que vigilo primero:

  • LCP (Largest Contentful Paint) → el visual principal debe aparecer en menos de 2,5 segundos.
  • CLS (Cumulative Layout Shift) → evitar cualquier desplazamiento de elementos durante la carga.
  • INP (Interaction to Next Paint) → asegurarse de que las interacciones sean instantáneas.

Estas optimizaciones no son solo «técnicas»: se notan. Un sitio que responde de inmediato genera confianza. Y un usuario que confía se convierte en contacto, y a veces en cliente.

Conclusión

Mejorar el rendimiento no siempre pasa por herramientas o auditorías complejas. Muchas veces es la suma de pequeños detalles bien gestionados: imágenes comprimidas, JavaScript reducido a lo esencial, una caché bien configurada.

Son esos ajustes discretos pero constantes los que permiten alcanzar puntuaciones de Web Vitals superiores a 95 sin esfuerzo particular. Y son los que hacen que un cliente note al instante la diferencia entre un sitio «bonito» y un sitio rápido, fluido y bajo control.

Leer a continuación → Astro frente a Next.js: por qué elegí Astro para mi portfolio freelance