Muchos sitios WordPress sacan menos de 60 en PageSpeed móvil por las mismas razones. Esta es la checklist que usamos en proyectos reales antes de tocar el diseño.
1. Mide primero (y mide bien)
- Usa Lighthouse en modo móvil y repite la prueba 3 veces: los resultados varían.
- Identifica el elemento LCP. En la mayoría de sitios es la imagen o el banner de la portada.
2. La imagen principal
- Sírvela en el tamaño que se muestra (
large, no la original de 4000 px) y en WebP. - No la cargues en diferido: el lazy load en la imagen de arriba empeora el LCP.
- Agrega
fetchpriority="high"o un<link rel="preload">si el tema lo permite.
3. CSS y JavaScript
- Minifica CSS, JS y HTML (LiteSpeed Cache, Perfmatters o WP Rocket lo hacen).
- Difiere el JS que no se necesita para pintar la primera pantalla.
- Retrasa Google Tag Manager y Analytics hasta la primera interacción: suelen pesar más de 250 KB.
- Ojo con "combinar archivos": puede romper sliders y menús. Prueba antes de dejarlo activo.
4. Fuentes
- Usa
font-display: swapy aloja las fuentes en tu servidor. - Limita las familias: cada fuente extra es una descarga más.
- Cargar Google Fonts "de forma asíncrona" no siempre mejora: en un proyecto nos empeoró el FCP de 1,6 s a 3,7 s. Mide antes y después.
5. Caché y servidor
- Activa la caché de página. Un TTFB por debajo de 400 ms es un buen objetivo.
- Si el sitio está detrás de un modo mantenimiento por IP, recuerda que la caché de página puede saltarse ese filtro.
6. Lo que casi nadie revisa
- Plugins de chat, sliders y constructores que cargan sus scripts en todas las páginas.
- Iconos en fuente (Font Awesome completo) cuando bastarían SVG.
- Imágenes sin
widthyheight, que causan saltos de diseño (CLS).
Con estos pasos solemos pasar de 50–60 a 80+ en móvil sin rediseñar el sitio.
Escrito por el equipo de El Creativo Web, especialistas en diseño de páginas web en Bogotá.
Top comments (0)