WordPress

Cómo Lograr 100/100 en Google PageSpeed con tu WordPress en México

22 Abr 2025 20 min de lectura VacaWeb Blog

💯

Google PageSpeed Insights mide las Core Web Vitals que determinan tu posición en los resultados de búsqueda. Esta guía técnica te lleva paso a paso desde un WordPress genérico con 40/100 hasta un score consistente de 90+ en móvil, sin pagar por herramientas caras.

Entender los Core Web Vitals antes de optimizar

PageSpeed no es solo un número: es la suma ponderada de 6 métricas. Las tres más importantes son:

Métrica	Qué mide	Umbral bueno	Peso en score
LCP (Largest Contentful Paint)	Tiempo hasta renderizar el elemento más grande	< 2.5s	25%
FID/INP (Interaction to Next Paint)	Tiempo hasta responder a primera interacción	< 200ms	25%
CLS (Cumulative Layout Shift)	Estabilidad visual de la página	< 0.1	15%
FCP (First Contentful Paint)	Tiempo hasta primer contenido visible	< 1.8s	10%
TTFB (Time to First Byte)	Velocidad de respuesta del servidor	< 600ms	10%
TBT (Total Blocking Time)	Tiempo en que el hilo principal está bloqueado	< 200ms	30%

📊

Reporte de PageSpeed Insights mostrando LCP de 1.2s, CLS de 0.02 y TBT de 45ms en un WordPress en VacaWeb con LiteSpeed + NVMe. Score: 94/100 en móvil.

Paso 1: Medir el estado actual desde línea de comandos

# Medir TTFB desde el servidor (sin latencia de red cliente)
curl -o /dev/null -s -w   "TTFB: %{time_starttransfer}s
Total: %{time_total}s
Size: %{size_download} bytes
"   https://tudominio.com/

# Medir múltiples peticiones y promediar
for i in {1..5}; do
  curl -o /dev/null -s -w "%{time_starttransfer}
" https://tudominio.com/
done | awk '{sum+=$1} END {printf "TTFB promedio: %.3fs
", sum/NR}'

# Verificar que la caché está sirviendo (debe ver X-Cache: HIT en headers)
curl -I https://tudominio.com/ | grep -i "x-cache\|cache-control\|x-litespeed"

Paso 2: Resolver el LCP — imagen hero optimizada

El LCP suele ser la imagen hero o el logo. El error más común es no precargarla:

<!-- En <head>: preload de la imagen LCP crítica -->
<link rel="preload" as="image"
      href="/wp-content/themes/mitema/img/hero.webp"
      fetchpriority="high">

<!-- La imagen LCP NO debe tener loading="lazy" -->
<img src="hero.webp"
     alt="Hosting WordPress optimizado en México"
     width="1200" height="630"
     fetchpriority="high">
     <!-- Sin loading="lazy" en imagen above-the-fold -->

# Convertir imágenes a WebP en batch desde servidor
find ~/public_html/wp-content/uploads/ -name "*.jpg" -o -name "*.png" |   xargs -P 4 -I{} sh -c 'cwebp -q 82 "$1" -o "${1%.*}.webp"' _ {}

# Con LiteSpeed Cache, la conversión es automática
wp litespeed-option set optm-img_webp 1 --path=/home/usuario/public_html --allow-root
wp litespeed-option set optm-img_webp_replace_srcset 1   --path=/home/usuario/public_html --allow-root

Paso 3: Eliminar render-blocking resources (TBT)

// En functions.php: diferir todos los scripts no críticos
function vacaweb_defer_scripts($tag, $handle, $src) {
    // No diferir scripts críticos
    $no_defer = ['jquery', 'wc-cart-fragments'];
    foreach ($no_defer as $script) {
        if ($handle === $script) return $tag;
    }
    return str_replace(' src', ' defer src', $tag);
}
add_filter('script_loader_tag', 'vacaweb_defer_scripts', 10, 3);

// Eliminar jQuery del frontend si no lo necesitas
function vacaweb_dequeue_jquery() {
    if (!is_admin() && !is_woocommerce()) {
        wp_deregister_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'vacaweb_dequeue_jquery');

Paso 4: Fonts sin bloqueo

<!-- Preconectar con Google Fonts antes de la solicitud -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Cargar fuentes de forma no bloqueante -->
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      media="print" onload="this.media='all'">
<noscript>
  <link rel="stylesheet" href="https://fonts.googleapis.com/...&display=swap">
</noscript>

<!-- Mejor aún: alojar las fuentes localmente -->
<!-- Descarga con: https://gwfh.mranftl.com/ -->

Paso 5: Eliminar CLS — reservar espacio para elementos dinámicos

/* Reservar espacio para imágenes antes de que carguen */
img {
  aspect-ratio: attr(width) / attr(height);
  height: auto;
}

/* Reservar espacio para embeds de YouTube/iframes */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* Evitar CLS por fuentes: usar font-display swap */
@font-face {
  font-family: 'MiFuente';
  src: url('/fonts/mifuente.woff2') format('woff2');
  font-display: swap; /* Muestra fallback hasta que cargue */
}

Tip: El CLS más común en WordPress es causado por el banner de cookies. Asegúrate de que tu plugin de cookies (CookieYes, Complianz) use CSS para mostrar el banner sin desplazar el contenido, no JavaScript que lo inserta después de que la página ya se renderizó.

Script de monitoreo continuo de PageSpeed

#!/bin/bash
# guardar como monitor_pagespeed.sh y ejecutar con cron diariamente

API_KEY="tu-api-key-de-google-pagespeed"
URL="https://tudominio.com/"

# Consultar PageSpeed Insights API
RESULT=$(curl -s "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${URL}&strategy=mobile&key=${API_KEY}")

SCORE=$(echo $RESULT | python3 -c "
import sys, json
data = json.load(sys.stdin)
cats = data.get('lighthouseResult', {}).get('categories', {})
perf = cats.get('performance', {}).get('score', 0)
print(int(perf * 100))
")

LCP=$(echo $RESULT | python3 -c "
import sys, json
data = json.load(sys.stdin)
audits = data.get('lighthouseResult', {}).get('audits', {})
print(audits.get('largest-contentful-paint', {}).get('displayValue', 'N/A'))
")

echo "$(date '+%Y-%m-%d %H:%M') | Score: ${SCORE}/100 | LCP: ${LCP}" >> /var/log/pagespeed_monitor.log

# Alerta si score cae por debajo de 80
if [ "$SCORE" -lt 80 ]; then
  echo "ALERTA: PageSpeed cayó a ${SCORE}/100" | mail -s "PageSpeed Alert" admin@tudominio.com
fi

Escenarios Prácticos: PageSpeed en WordPress

Escenario 1 — Blog de recetas con score PageSpeed de 45 en móvil: Diagnóstico y solución paso a paso. Las oportunidades típicas encontradas por Lighthouse en WordPress sin optimizar:

# Auditoría via Lighthouse CLI (resultado en JSON para análisis)
npx lighthouse https://tublog.com.mx   --output=json --output-path=audit.json   --emulated-form-factor=mobile   --chrome-flags="--headless --no-sandbox"

# Extraer las oportunidades más impactantes:
cat audit.json | python3 -c "
import json, sys
data = json.load(sys.stdin)
audits = data['audits']
for k, v in audits.items():
    if v.get('score', 1) < 0.9 and 'details' in v:
        print(f'{v["title"]}: {v.get("displayValue", "-")}')
"

# Resultado típico de WordPress sin optimizar:
# Eliminar recursos que bloquean el renderizado: 2.8s
# Reducir JavaScript no utilizado: 1.2s
# Codificar imágenes eficientemente: 854 KiB
# Usar formatos de imagen de proxima generacion: 612 KiB

Escenario 2 — WooCommerce pasando de 55 a 90+ en PageSpeed: El checkout es la página más crítica. Inline del CSS crítico + defer de JS no esencial + preconnect a dominios de terceros (Conekta, Google Fonts):

<!-- Preconectar a dominios críticos para reducir latencia -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://js.conekta.io" crossorigin>
<link rel="dns-prefetch" href="https://www.google-analytics.com">

Errores Comunes que Bajan el Score de PageSpeed

Error	Penalización	Causa	Solución rápida
Google Fonts sin preload	-5 a -15 puntos	Font descargada tarde	Alojar fuente localmente o usar preload
jQuery cargado en <head>	-10 a -20 puntos	Script render-blocking	Mover a <footer> con atributo defer
Imágenes sin dimensiones	CLS score negativo	Sin width/height en img	Agregar width y height a todas las <img>
Plugins de slider pesados	-15 a -30 puntos	Slider carga CSS/JS en todas las páginas	Cargar assets de slider solo en páginas con slider
SSL mixto (HTTP + HTTPS)	Advertencia y posible bloqueo	Recursos en HTTP dentro de HTTPS	Buscar con Really Simple SSL y forzar HTTPS

Preguntas Frecuentes sobre PageSpeed en WordPress

¿Qué score de PageSpeed es suficiente para no perder ranking en Google?

Google no usa el score de PageSpeed directamente como factor de ranking, sino las métricas reales de Core Web Vitals (LCP, INP, CLS). El score de PageSpeed es un proxy. En la práctica, un score mayor a 75 en móvil y 90 en desktop indica que las métricas CWV probablemente estén en el rango "Bueno". Enfócate en las métricas reales, no en el número.

¿LSCWP, WP Rocket o W3 Total Cache: cuál elegir?

LiteSpeed Cache (LSCWP): gratis y superior si tu servidor es LiteSpeed. WP Rocket ($49/año): el más completo para cualquier servidor; excelente para servidores Apache o Nginx. W3 Total Cache: gratuito y potente pero complejo de configurar correctamente. Para principiantes: WP Rocket. Para usuarios con hosting LiteSpeed: LSCWP. Para máximo control sin costo: W3TC con guía de configuración.

¿Cómo saber si mi tema de WordPress afecta el rendimiento?

Crea un sitio de prueba con Twenty Twenty-Four (tema stock de WordPress) y compara el score de PageSpeed con tu tema actual. Si la diferencia es mayor a 20 puntos, el tema es el problema. Temas conocidos por buen rendimiento: Kadence, Astra, GeneratePress, Blocksy. Temas conocidos por mal rendimiento: muchos multipropósito con builders propietarios pesados (Avada, Divi, WPBakery).

¿Cuánto tiempo tarda en verse el impacto SEO de mejorar PageSpeed?

Google recrawlea sitios activos cada 2-4 semanas. Los datos de CrUX (Chrome User Experience Report) que usa Google para ranking tienen un período de acumulación de 28 días. Por lo tanto, mejoras de PageSpeed se reflejan en el ranking en 4-8 semanas. Usa Google Search Console > Core Web Vitals para ver cuando Google reconoce las mejoras implementadas.

¿Las imágenes WebP son compatibles con todos los navegadores en México?

WebP es compatible con el 96.6% de navegadores globales (2025), incluyendo Chrome, Firefox, Safari 14+, Edge y Opera. El 3.4% restante son principalmente navegadores muy antiguos. En México, donde el 71% de usuarios usa Chrome, la compatibilidad es prácticamente universal. LSCWP y Smush sirven automáticamente WebP cuando el navegador lo soporta y JPEG/PNG como fallback.

📚 Profundiza en estos temas

👨‍💻

Juan Vaca

Cloud Infrastructure Expert & Founder de VacaWeb

Fundador de VacaWeb con más de 15 años administrando infraestructura Linux en producción. Especialista en LiteSpeed, CloudLinux, cPanel/WHM y arquitectura de hosting de alto rendimiento para el mercado mexicano. Ha diseñado y migrado la infraestructura de más de 1,200 sitios web empresariales.

Tags: #pagespeed #wordpress #core-web-vitals