Rendimiento móvil: cómo pasar de 57 a 94 en Google (caso real)

Un cliente nos escribió con una captura de Google PageSpeed y una frase: «esto está en rojo, ¿es grave?». Su web de reformas marcaba 57 sobre 100 en la prueba de móvil. Sí, era grave. Semanas después, la misma prueba daba 94. El rendimiento móvil web es ingeniería aburrida: se mide, se ordenan los arreglos por impacto real y se aplican uno detrás de otro. Aquí tienes los números de cinco proyectos que pasaron por ese proceso, qué significa cada métrica sin jerga y en qué orden conviene tocar las cosas.

Qué mide Google cuando prueba tu web en el móvil

Detrás de PageSpeed Insights está Lighthouse. Las cifras de este artículo salen de la versión 13.4.1 en modo móvil, con la misma prueba repetida antes y después. Devuelve cuatro notas de 0 a 100 que no miden lo mismo:

• Rendimiento: lo rápido que el visitante ve y puede usar la página. Es la nota que casi todo el mundo mira y la que depende de más factores a la vez.
• Accesibilidad: si alguien con baja visión, daltonismo o que navega con teclado puede usar la web. Contraste, etiquetas de formulario, textos alternativos, orden de los encabezados.
• Prácticas recomendadas: higiene técnica. Librerías con vulnerabilidades conocidas, errores en la consola, imágenes servidas a una resolución que no corresponde.
• SEO: comprobaciones básicas de rastreo. Título, meta descripción, enlaces con texto descriptivo y que la página no esté bloqueada a los buscadores.

La prueba de móvil es dura a propósito: simula un teléfono de gama media con peor conexión que la de tu oficina. Por eso una web que en escritorio marca 98 cae a 55 en móvil. Y como Google indexa con el rastreador móvil, esa es la nota que cuenta.

Las métricas, en cristiano

Dentro de la nota de rendimiento hay varias medidas. Tres explican casi todo lo que se siente al abrir una web desde el móvil.

Primer pintado: cuándo aparece algo

Es el segundo en el que el visitante deja de ver una pantalla en blanco. Si tarda 6 o 7 segundos, mucha gente ya se ha ido: no ha visto tu oferta ni tu teléfono, ha visto un rectángulo vacío. En la web de reformas de Cartagena el primer pintado estaba en 7,6 segundos. Ahí no hay copy que salve la conversión.

Pintado más grande: cuándo la página parece cargada

Mide cuándo termina de dibujarse el elemento más grande que se ve sin hacer scroll, normalmente la foto de cabecera. Google lo considera aceptable por debajo de 2,5 segundos. Es la métrica que más se resiste, porque casi siempre depende de una imagen mal preparada o de una tipografía que llega tarde. Tienes los umbrales oficiales en la documentación de web.dev sobre el pintado más grande.

Saltos de diseño: cuándo el contenido se mueve solo

Ese momento en el que vas a pulsar un botón, carga un banner por encima y acabas pulsando otra cosa. Se mide entre 0 y 1, y por encima de 0,1 se nota. Lo provocan las imágenes sin dimensiones, los avisos de cookies y las tipografías personalizadas que sustituyen a la fuente del sistema a mitad de carga. Es lo más fácil de arreglar y lo que más agradece el visitante.

Cinco webs reales, la misma prueba antes y después

Cinco proyectos medidos con Lighthouse 13.4.1 en móvil. Misma herramienta, mismo modo y misma página en las dos tomas. «n/d» significa que esa comprobación no entraba en el trabajo de esa web.

Web	Rendimiento	Accesibilidad	Prácticas	SEO	Primer pintado	Pintado más grande	Saltos
mejoresempresasmadrid.com	60 → 95	83 → 100	96 → 100	92 → 100	6,6 s → 1,8 s	8,1 s → 2,8 s	n/d
reformasintegralescartagena.es	57 → 94	n/d	73 → 100	n/d	7,6 s → 1,4 s	n/d	n/d
reformasintegralescoslada.es	94 → 100	86 → 100	n/d	n/d	n/d	n/d	0,141 → 0
reformasenmadridya.es	94 → 98	n/d	73 → 100	n/d	n/d	n/d	n/d
negociosoptimizados.com	59 → 83	90 → 97	77 → 100	n/d	n/d	n/d	0,189 → 0,018

Fíjate en dos cosas. Las que ya iban bien (94) también mejoraron, con un trabajo distinto: más de accesibilidad y de saltos que de velocidad pura. Y negociosoptimizados.com se quedó en 83. Tiene mucho contenido y bastante código de terceros, y llevarla al verde oscuro habría exigido tocar la plantilla a fondo. No todas las webs terminan en 95, y prometerlo de entrada es vender humo.

Qué se tocó, y en qué orden

Una auditoría de rendimiento móvil web bien hecha no empieza por comprar un plugin de caché. Empieza por mirar la cascada de carga y preguntarse qué está bloqueando el primer pintado. Este es el orden que seguimos, de más impacto a menos.

1. CSS y JavaScript que bloquean el pintado

El navegador no dibuja nada hasta que ha procesado las hojas de estilo y los scripts de la cabecera. En una web WordPress típica hay entre 15 y 30 de esos archivos, casi todos de plugins que solo se usan en una página. Dejamos en cabecera únicamente el CSS que pinta lo que se ve sin scroll, aplazamos el resto y movimos el JavaScript al final. Es el cambio que más movió la aguja en las webs que partían de 57 y 60.

2. Imágenes en WebP con ancho y alto declarados

Convertir las fotos a WebP recorta el peso a menos de la mitad frente a un JPG sin perder calidad visible. Declarar ancho y alto en el HTML evita que el navegador adivine cuánto espacio reservar, causa clásica de los saltos. Y sirve la imagen al tamaño en el que se va a ver: una foto de 3000 píxeles en un móvil de 390 es peso tirado a la basura.

3. Una fuente de respaldo con las mismas métricas

El arreglo que nadie ve y que resuelve medio problema. Con una tipografía personalizada, el navegador enseña primero una fuente del sistema y la sustituye al terminar la descarga. Si las dos tienen anchos distintos, el texto se reacomoda de golpe y cuenta como salto. La solución: una fuente de respaldo con las métricas ajustadas a la real. En reformasintegralescoslada.es bastó eso y un par de imágenes para pasar de 0,141 a 0 saltos de diseño.

4. Scripts de terceros solo cuando hacen falta

Mapas, chat de WhatsApp, captcha del formulario, píxeles de analítica. Cada uno mete su propio JavaScript y ninguno hace falta en el primer segundo. No los cargamos hasta que el visitante los necesita: el mapa cuando haces scroll hasta él, el captcha cuando tocas el formulario, el chat un par de segundos después. La experiencia es la misma y el primer pintado mejora muchísimo. Aquí se juega buena parte de la partida de optimizar velocidad web móvil en webs de servicios.

5. Caché y compresión en el servidor

Que el servidor entregue HTML ya montado en vez de construirlo en cada visita, que comprima los archivos de texto y que le diga al navegador cuánto puede guardarse imágenes y fuentes. Es lo primero que toca todo el mundo, y por eso va en quinto lugar: ayuda, pero solo no saca a nadie del rojo. En nuestro servicio de optimización web se configura al final, cuando ya sabemos qué se está sirviendo.

6. Contraste, etiquetas y textos alternativos

Esta nota sube rápido porque los fallos se repiten: gris claro sobre blanco que no llega al contraste mínimo, campos sin etiqueta asociada, botones con solo un icono y enlaces que dicen «leer más». El criterio de contraste lo fija el W3C en las pautas WCAG, así que es objetivo y no una opinión de diseño. Pasar de 83 a 100 en mejoresempresasmadrid.com fueron dos tardes.

Cuánto se nota de verdad

La nota de Lighthouse es una simulación de laboratorio, no una medición de tus visitantes reales. Subir de 57 a 94 no multiplica tus ventas por arte de magia. Lo que sí cambia es otra cosa.

Pasar de 7,6 segundos a 1,4 en el primer pintado significa que la gente ve tu web. Antes cerraba antes de que apareciera nada. Sin saltos de diseño, el botón de llamar sigue donde estaba cuando llega el dedo. Y accesibilidad y prácticas en 100 significan que has retirado errores de consola, librerías viejas y recursos rotos: deuda técnica que un día tumba el formulario sin avisar.

Para nosotros el rendimiento no es una fase al final del proyecto. Se decide antes, cuando se elige cuántas fuentes usar, cuántos plugins meter y qué peso va a tener la cabecera. Por eso va dentro del propio servicio de diseño web y no como un extra que se vende después.

El 94 no es para siempre

Esto es lo que casi nadie cuenta: una web optimizada se degrada sola. Alguien sube una foto de 4 MB desde el móvil, se instala un plugin nuevo para el aviso de cookies, se actualiza el tema y vuelve a cargar una hoja de estilos que habíamos aplazado. Hemos visto webs volver de 94 a 70 en cuatro meses sin que nadie tocara nada «importante».

Por eso el rendimiento vive en el mantenimiento web, con medición periódica y un aviso cuando la nota baja de cierto umbral. Y aquí encaja bien automatizar: una rutina que audita las páginas clave cada semana, guarda el histórico y avisa por correo cuando algo se rompe cuesta poco de montar y te ahorra enterarte tres meses tarde. Lo desarrollamos en nuestra guía sobre automatizaciones con IA para tu negocio, con la vigilancia técnica entre los casos más rentables.

Preguntas frecuentes

¿Cuánto se tarda en mejorar la puntuación Lighthouse de una web?

Depende del punto de partida y del tema que use la web. Una web de servicios con 10 o 15 páginas y plantilla comercial suele resolverse en unos días de trabajo efectivo. Una tienda online con muchos plugins lleva más, porque cada cambio hay que probarlo contra el carrito y el pago. Lo que sí sabes antes de empezar es qué frena la web: eso se ve en la primera auditoría.

¿Sirve de algo instalar solo un plugin de caché?

Ayuda, pero no toca el problema de fondo. Acelera la entrega del HTML, y eso está bien si el cuello de botella es el servidor. Si lo que te frena son 22 archivos CSS bloqueando el pintado y una cabecera de 2 MB, no lo arregla. Nos ha pasado con más de un cliente que llegaba con tres plugins peleándose entre ellos.

¿Cada cuánto conviene revisar el rendimiento móvil web?

Una vez al mes para las páginas que traen negocio (inicio, servicios principales, contacto) y siempre después de una actualización grande del tema o de un plugin. Si publicas contenido a menudo, vigila además el peso de las imágenes que se suben: es la vía por la que más rápido se estropea todo.

Ponle número a tu web antes de decidir nada

Si no sabes en qué nota estás, hablar de velocidad es discutir opiniones. Medimos tu web en móvil y te decimos qué tres cosas cuestan más puntos y cuánto trabajo hay detrás de cada una, sin prometerte un 100 que quizá no sea realista. Cuéntanos qué web quieres que midamos y te devolvemos el diagnóstico con las cifras delante.