Tu web tarda en cargar en el móvil y no encuentras el motivo. Muchas veces el culpable es el CSS. En esta guía trabajo el rendimiento móvil con CSS: cómo dejar de bloquear el render, aprobar los Core Web Vitals y conseguir una web rápida en el móvil sin reescribir medio proyecto.
No voy a repetir cómo maquetar responsive. Aquí el foco es la velocidad. Te dejo 8 técnicas con ejemplo de código listo para copiar y una forma sencilla de medir el antes y el después.
Por qué el CSS frena tu web en el móvil
El CSS es un recurso que bloquea el renderizado. El navegador no pinta nada hasta que descarga y procesa las hojas de estilo. En el móvil, con menos CPU y una red más lenta, esa espera se nota en el LCP (Largest Contentful Paint), la métrica que mide cuándo aparece el contenido principal.
Hay otras dos métricas de Core Web Vitals que dependen mucho del CSS. El CLS (Cumulative Layout Shift) mide cuánto salta el diseño mientras carga, algo que provocan las imágenes y fuentes sin espacio reservado. El INP (Interaction to Next Paint) mide la respuesta a los toques, y las animaciones pesadas lo empeoran.
La buena noticia: casi todo se ataca desde el CSS. Vamos a ello.
8 técnicas de CSS para mejorar el rendimiento móvil
1. Reduce el CSS que bloquea el render
Cuanto más CSS cargas de golpe, más tarda en pintar. Divide: deja lo imprescindible para la primera pantalla en el <head> y carga el resto de forma diferida. Un patrón habitual es cargar la hoja no crítica con media="print" y liberarla al terminar.
<!-- CSS no crítico: no bloquea el primer render -->
<link rel="stylesheet" href="no-critico.css" media="print" onload="this.media='all'">Y elimina lo que no usas. Una hoja llena de reglas muertas es peso que el móvil procesa para nada.
2. Aplaza lo que está fuera de pantalla con content-visibility
La propiedad content-visibility le dice al navegador que no gaste esfuerzo en dibujar lo que aún no se ve. Combínala con contain-intrinsic-size para reservar el alto y evitar saltos.
.seccion-larga {
content-visibility: auto;
contain-intrinsic-size: auto 600px; /* alto estimado */
}En páginas largas es de las mejoras con más impacto y menos esfuerzo. El navegador solo renderiza lo que necesita.
3. Reserva el espacio de las imágenes con aspect-ratio
El mayor enemigo del CLS son las imágenes sin dimensiones. Cuando cargan, empujan el texto y el diseño salta. Reserva el hueco con aspect-ratio.
img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9; /* reserva el espacio antes de cargar */
}Añade siempre los atributos width y height en el HTML. Con eso el navegador calcula la proporción incluso sin CSS extra.
4. Sirve la imagen justa con srcset y carga diferida
En el móvil no tiene sentido descargar una imagen de escritorio. Con srcset el navegador elige el tamaño según la pantalla, y con loading="lazy" retrasa lo que está fuera de vista.
<img
src="foto-800.jpg"
srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
width="800" height="450"
loading="lazy" decoding="async"
alt="Descripción concreta de la imagen">Ojo: no pongas loading="lazy" en la imagen principal de la primera pantalla. Esa la quieres cuanto antes para bajar el LCP.
5. Controla las fuentes con font-display
Las fuentes web bloquean el texto hasta que descargan (el efecto FOIT: texto invisible). Con font-display: swap el navegador muestra una fuente del sistema mientras carga la tuya. El lector lee antes.
@font-face {
font-family: "MiFuente";
src: url("mifuente.woff2") format("woff2");
font-display: swap;
}Usa el formato woff2, precarga solo la fuente crítica y no cargues cinco grosores si usas dos. Cada archivo de fuente es peso en la red móvil.
6. Anima solo transform y opacity
Animar width, top o margin obliga al navegador a recalcular el diseño en cada fotograma. Eso ahoga al móvil y empeora el INP. Anima solo transform y opacity, que la GPU resuelve sin recalcular la maquetación.
/* Fluido en el móvil */
.tarjeta {
transition: transform 0.2s ease, opacity 0.2s ease;
}
.tarjeta:hover {
transform: translateY(-4px);
}La propiedad will-change puede ayudar, pero úsala con cuidado. Reservarla en muchos elementos consume memoria y acaba siendo contraproducente. Aplícala solo justo antes de la animación y en pocos elementos.
7. Aísla el trabajo con contain
La propiedad contain le indica al navegador que los cambios dentro de un elemento no afectan al resto de la página. Así limita el recálculo a esa caja. En listas o tarjetas que se actualizan, se nota.
.widget {
contain: layout paint; /* aísla layout y pintado */
}8. Escribe media queries mobile-first
Parte de los estilos base para el móvil y añade lo de escritorio con min-width. Así el móvil, que es la mayoría de tu tráfico, carga primero lo suyo y no arrastra reglas de escritorio que no necesita.
/* Base: móvil */
.contenedor { padding: 1rem; }
/* Se amplía en pantallas grandes */
@media (min-width: 768px) {
.contenedor { padding: 2rem; }
}Evita también @import dentro del CSS: encadena descargas y retrasa el render. Enlaza cada hoja desde el HTML.
Para la maquetación responsive en sí (rejillas, breakpoints y anchos flexibles) tienes guías dedicadas más abajo. Aquí me centro solo en la velocidad.
Cómo medir el rendimiento (PageSpeed y Lighthouse)
No optimices a ciegas. Mide antes y después con datos reales.
- Abre PageSpeed Insights, pega tu URL y mira la pestaña Móvil. Te da LCP, CLS e INP con datos de campo cuando existen.
- En Chrome, abre las DevTools (F12) y ejecuta un informe de Lighthouse en modo móvil para el laboratorio.
- Aplica una técnica, vuelve a medir y compara. Prioriza lo que mueva el LCP y el CLS, que son los que más pesan en el móvil.
Un extra que no es CSS pero suma mucho: el hosting. Si el servidor tarda en responder, arrastra el LCP hagas lo que hagas en el front.
Tip: si tu servidor responde lento, un hosting rápido baja el tiempo de respuesta y ayuda al LCP. Optimiza el CSS y el servidor a la vez para notar el salto.
Guías complementarias para maquetar
- Cómo hacer una página web responsive, para la estructura base.
- Cómo usar vw, vh y rem para anchos variables, para dimensionar sin píxeles fijos.
- Configurar el viewport para un diseño móvil óptimo, el paso previo a todo lo demás.
- Buenas prácticas con imágenes web, para completar la parte de imágenes.
Preguntas frecuentes
¿El CSS afecta de verdad a la velocidad en el móvil?
Sí. El CSS bloquea el render: el navegador no pinta hasta procesarlo. En el móvil, con menos potencia, ese retraso golpea directo al LCP y a la sensación de web lenta.
¿Qué es lo primero que debo tocar para optimizar el CSS móvil?
Empieza por reservar el espacio de imágenes con aspect-ratio para frenar el CLS, y por diferir el CSS no crítico. Son cambios rápidos con impacto visible en las métricas.
¿content-visibility funciona en todos los navegadores?
Tiene buen soporte en navegadores basados en Chromium y va llegando al resto. Como es una mejora progresiva, donde no está soportada la página se ve igual, solo sin ese ahorro. Comprueba el estado actual en MDN antes de depender de ella.
¿Por qué solo debo animar transform y opacity?
Porque la GPU las resuelve sin recalcular el diseño ni repintar toda la página. Animar tamaños o posiciones fuerza ese recálculo en cada fotograma y provoca tirones, sobre todo en el móvil.
¿Cómo sé si mis cambios han mejorado el rendimiento?
Mide con PageSpeed Insights en modo Móvil y con Lighthouse antes y después de cada cambio. Compara LCP, CLS e INP. Si bajan, vas bien.
Aplica las técnicas de una en una y mide. Verás cómo la misma web se siente mucho más rápida en el móvil. Si te ha servido, compártela con quien esté peleando con su PageSpeed.
