Cómo hacer una web rápida que cargue bien en móvil

La velocidad de tu web afecta directamente a todo: la experiencia de usuario, el posicionamiento en Google, las tasas de conversión y la probabilidad de que alguien se quede a leer tu contenido. En este artículo te explico las técnicas más efectivas para hacer que tu web cargue rápido en cualquier dispositivo.

Por qué la velocidad importa tanto

Según datos de Google, el 53% de los usuarios móviles abandona una web si tarda más de 3 segundos en cargar. Además, la velocidad es un factor de ranking de Google desde 2021 con los Core Web Vitals. Una web lenta te hace perder visitantes y posiciones en los resultados de búsqueda.

Mide antes de optimizar

Antes de tocar nada, necesitas saber dónde estás. Usa estas herramientas gratuitas:

• PageSpeed Insights: La herramienta oficial de Google. Te da una puntuación de 0 a 100 y sugerencias concretas.
• GTmetrix: Análisis detallado con cascada de carga y métricas avanzadas.
• Chrome DevTools → Lighthouse: Auditoría completa desde tu propio navegador (F12 → Lighthouse).

Las optimizaciones más efectivas

1. Optimiza las imágenes

Las imágenes suelen ser el mayor cuello de botella. Sigue estas reglas:

• Usa formato WebP en lugar de PNG o JPEG. WebP ofrece 25-35% menos peso con la misma calidad.
• Comprime siempre: Usa herramientas como Squoosh (gratis, en el navegador) o TinyPNG.
• Define dimensiones: Añade atributos width y height a las etiquetas <img> para evitar el layout shift.
• Carga diferida: Usa loading="lazy" en imágenes que están fuera de la vista inicial.

2. Minimiza CSS y JavaScript

Cada kilobyte cuenta en conexiones móviles lentas:

• Elimina código CSS que no usas. El navegador tiene que procesar todo el CSS antes de pintar la página.
• Minimiza tu CSS y JS para producción (elimina espacios, comentarios). Vite lo hace automáticamente.
• Carga JavaScript con defer o async para que no bloquee el renderizado.

3. Reduce las peticiones HTTP

• Combina archivos CSS si usas varios.
• Usa SVG inline para iconos en lugar de cargar una fuente de iconos completa.
• Evita cargar librerías externas si puedes resolver el problema con unas pocas líneas de JavaScript.

4. Usa un CDN

Un CDN (Content Delivery Network) distribuye tu web en servidores de todo el mundo, así el usuario recibe los archivos desde el más cercano. Netlify y Vercel incluyen CDN gratis, por eso sus webs cargan tan rápido.

5. Activa la compresión

Asegúrate de que tu servidor envía los archivos comprimidos con Gzip o Brotli. Reduce el tamaño de transferencia entre un 60-80%. Netlify y Vercel lo activan por defecto.

6. Optimiza las fuentes

• Carga solo los pesos y estilos que usas (no todas las variantes de una fuente).
• Usa font-display: swap para que el texto se muestre inmediatamente con una fuente del sistema mientras se descarga la tuya.
• Considera usar fuentes del sistema si el diseño lo permite.

Core Web Vitals: las métricas que mira Google

Google evalúa tres métricas principales:

• LCP (Largest Contentful Paint): Cuánto tarda en renderizarse el elemento más grande visible. Objetivo: menos de 2.5 segundos.
• INP (Interaction to Next Paint): Cuánto tarda la web en responder a las interacciones del usuario. Objetivo: menos de 200ms.
• CLS (Cumulative Layout Shift): Cuánto se mueve el contenido mientras carga. Objetivo: menos de 0.1.

Checklist rápida de optimización

1. Comprimir todas las imágenes y usar WebP.
2. Añadir loading="lazy" a imágenes fuera del viewport.
3. Definir width y height en todas las imágenes.
4. Minimizar CSS y JS.
5. Cargar JS con defer.
6. Usar font-display: swap.
7. Servir desde un CDN.
8. Activar compresión Gzip/Brotli.
9. Testear con PageSpeed Insights.