La web funciona por Wi-Fi, pero con datos móviles la portada queda incompleta, la imagen principal aparece tarde o el menú no responde. Esa diferencia es una evidencia útil: ancho de banda, latencia, capacidad del teléfono o contenido condicional están revelando un coste que el Wi-Fi oculta.
No empieces con una optimización genérica. Separa los factores para no comprimir una imagen cuando el retraso pertenece al servidor ni migrar el hosting cuando el navegador descarga varios megabytes de vídeo.
Confirmar que cambia la conexión
Usa el mismo teléfono, navegador y URL. Abre una pestaña privada, prueba dos veces con Wi-Fi, desactívalo y repite con datos móviles. Anota qué aparece tarde y el tipo e intensidad de señal.
No compares un ordenador por Wi-Fi con otro dispositivo por 4G: cambiarías conexión, hardware y navegador a la vez. Una cobertura interior débil también puede causar pérdida de paquetes y reintentos, así que repite desde una zona con señal estable.
Separar el primer byte del resto
Mide el comienzo de la respuesta y el tamaño descargado:
curl -s -o /dev/null
-w 'Primer byte: %{time_starttransfer}snTotal: %{time_total}snDescargado: %{size_download} bytesn'
https://example.com/pagina/La petición no imita un móvil, pero distingue HTML tardío de trabajo posterior. Si el primer byte es lento en todas las conexiones, revisa WordPress, PHP, MySQL y hosting. Si llega pronto y la página móvil sigue incompleta, analiza recursos y renderizado. Repite: la operadora puede usar otra ruta hasta el servidor.
Revisar los bytes realmente enviados
En las herramientas del navegador aplica vista móvil, abre Network y recarga sin caché para esta prueba. Ordena por tamaño transferido y comprueba qué recurso forma el Largest Contentful Paint.
Revisa si el teléfono recibe una imagen de escritorio, si se usan tamaños generados por WordPress, si los fondos CSS tienen alternativa móvil, si realmente se entrega WebP o AVIF y si un carrusel descarga diapositivas ocultas.
La extensión .webp no garantiza un archivo ligero. Debe corresponder a las dimensiones visibles y a una calidad razonable.
Verificar srcset y sizes
WordPress suele generar imágenes adaptables, pero el tema o constructor puede omitirlas:
<img
src="/uploads/hero-1200.webp"
srcset="/uploads/hero-480.webp 480w,
/uploads/hero-768.webp 768w,
/uploads/hero-1200.webp 1200w"
sizes="(max-width: 768px) 100vw, 1200px"
width="1200"
height="700"
alt="Servicio de rendimiento WordPress"
>El navegador combina srcset, sizes, ancho de pantalla y densidad. Si sizes declara erróneamente 1200 píxeles en móvil, elegirá un archivo excesivo. No copies un valor genérico por todo el tema: comprueba el ancho CSS real en cada breakpoint.
Tratar el vídeo como presupuesto independiente
Un MP4 decorativo necesita una decisión móvil explícita. Comprueba dimensiones, bitrate, audio innecesario, momento de reproducción, poster y precarga:
<video muted loop playsinline preload="metadata"
poster="/media/hero-poster.webp" aria-hidden="true">
<source src="/media/hero-mobile.mp4" type="video/mp4">
</video>No es una regla universal: una demostración de producto puede requerir controles y texto accesible. El objetivo es no forzar una descarga completa antes del contenido principal.
Reducir el coste de fuentes y terceros
Con mucha latencia, cada fuente paga DNS y conexión. Revisa familias, pesos, duplicados, caché, CORS, font-display y precargas. Precarga solo la fuente que usa el texto inicial; hacerlo con todos los pesos compite con CSS y la imagen principal.
Agrupa por dominio las peticiones de analítica, consentimiento, chat, mapas, vídeos y publicidad. Pregunta si cada servicio es necesario en esa página, si bloquea menú, formulario o checkout y qué sucede si no responde. No retrases scripts a ciegas: podrías romper la función que intentas proteger.
Medir JavaScript y contenido móvil duplicado
El teléfono no solo descarga más despacio: también tarda más en interpretar JavaScript. Graba una traza al cargar y abrir la interfaz afectada. Relaciona las tareas largas con constructor, slider, animaciones, variaciones, consentimiento o etiquetas duplicadas.
Comprueba si el tema genera secciones distintas para escritorio y móvil y oculta una con CSS. display: none no evita necesariamente descargar imágenes, vídeos o scripts. Busca duplicados de cabeceras, carruseles, menús y formularios.
Comparar el consentimiento
Prueba antes de decidir, tras rechazar lo opcional, después de aceptar y en una visita de retorno. Si el problema aparece solo al aceptar, identifica los servicios añadidos. Mantén el comportamiento de privacidad previsto mientras retiras trabajo innecesario.
Reparar con cambios verificables
No actives a la vez varios plugins de caché, imágenes y minificación ni sustituyas toda la biblioteca multimedia sin saber qué archivos se entregan. Registra el estado inicial, cambia una causa demostrada y conserva una reversión.
Una reparación correcta inicia la respuesta sin demora evitable, prioriza texto e imagen principal, entrega medios adecuados al móvil y mantiene menú, formularios y checkout utilizables mientras cargan elementos opcionales.
Repite las pruebas por Wi-Fi y datos móviles y comprueba también escritorio, analítica y WooCommerce. Para una evaluación inicial basta con URL, modelo de teléfono, navegador, país y síntoma; no son necesarias contraseñas.