Guía completa de optimización WPO: cómo conseguir una puntuación de 90+ en Google PageSpeed

Alcanzar una puntuación superior a 90 puntos en Google PageSpeed Insights no es una cuestión de suerte, sino de aplicar una estrategia integral de optimización del rendimiento web (WPO). Google evalúa las métricas clave de rendimiento conocidas como Core Web Vitals (LCP, INP y CLS), las cuales impactan de manera directa tanto en la experiencia del usuario como en el posicionamiento SEO. En esta guía paso a paso, aprenderás a diagnosticar, corregir y mantener tu sitio web en la zona verde de rendimiento.

1. Fundamentos de las Core Web Vitals

Antes de aplicar cambios técnicos, es crucial entender qué métricas componen la nota de PageSpeed:

• LCP (Largest Contentful Paint): Mide el tiempo de carga del elemento visual más grande de la pantalla (normalmente una imagen de cabecera o un título H1). Debe mantenerse por debajo de los 2.5 segundos.
• INP (Interaction to Next Paint): Mide la capacidad de respuesta de la página ante la interacción del usuario (clics, toques en la pantalla). Debe ser inferior a 200 milisegundos.
• CLS (Cumulative Layout Shift): Mide la estabilidad visual evitando cambios inesperados en el diseño mientras la página se carga. Debe ser menor a 0.1.

2. Optimización de imágenes y entrega de medios

Las imágenes sin optimizar son la causa principal de la lentitud en la carga web.

Pasos para optimizar archivos multimedia

1. Convertir a formatos de nueva generación: Utiliza formatos WebP o AVIF en lugar de PNG o JPEG tradicionales. Reducen el tamaño del archivo entre un 30% y un 80% sin perder calidad visual.
2. Dimensionar correctamente: No subas imágenes de 4000px si se mostrarán en un contenedor de 800px.
3. Carga diferida (Lazy Loading): Activa el lazy loading nativo para las imágenes fuera de la pantalla inicial, pero excluye explícitamente la imagen del LCP.

HTML

<!-- Ejemplo de exclusión de lazy loading e inclusión de pre-carga para la imagen LCP -->
<link rel="preload" as="image" href="https://tusitio.com/wp-content/uploads/banner-principal.webp" fetchpriority="high">

Explicación: Esta etiqueta indica al navegador que descargue la imagen principal con máxima prioridad antes de procesar otros recursos secundarios, reduciendo significativamente el tiempo LCP.

3. Caché de servidor y optimización de base de datos

Un servidor lento destruye cualquier esfuerzo de optimización en el frontend.

Configuración en WordPress

1. Accede a la administración de tu sitio y dirígete a Ajustes > Enlaces permanentes para asegurarte de tener una estructura limpia (por ejemplo, %postname%), la cual optimiza la resolución de URLs en la caché.
2. Ve a la sección de tu plugin de WPO (como WP-Optimize o LiteSpeed Cache) en el menú lateral.
3. Activa la Caché de página para usuarios no autenticados y establece un tiempo de vida (TTL) de al menos 7 días para recursos estáticos.
4. Programa la limpieza periódica de transitorios caducados y revisiones de entradas en la pestaña Base de datos.

4. Reducción de código y aplazamiento de JavaScript/CSS

El código JavaScript y CSS no crítico bloquea el renderizado de la página, aumentando el tiempo hasta que el usuario ve el contenido.

Pasos para eliminar recursos que bloquean el renderizado

1. Minificación: Elimina espacios en blanco, comentarios y caracteres innecesarios en archivos CSS y JS.
2. Aplazar JavaScript no crítico: Añade los atributos defer o async a los scripts secundarios.
3. Optimización de fuentes web: Utiliza la propiedad font-display: swap; en tu CSS para evitar el texto invisible mientras se cargan las fuentes personalizadas.

PHP

// Añadir atributo defer a scripts de WordPress desde functions.php
function agregar_defer_scripts( $tag, $handle, $src ) {
    $scripts_a_aplazar = array( 'contact-form-7', 'custom-script' );
    if ( in_array( $handle, $scripts_a_aplazar ) ) {
        return '<script src="' . esc_url( $src ) . '" defer="defer"></script>' . "\n";
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'agregar_defer_scripts', 10, 3 );

Explicación: Este snippet inspecciona los scripts cargados en WordPress y añade la directiva defer a las librerías indicadas, permitiendo que el HTML se interprete sin interrupciones.

Conclusión

Conseguir una nota superior a 90 en Google PageSpeed exige optimizar la entrega de imágenes, reducir el bloqueo por código JavaScript/CSS y contar con una estrategia de caché eficiente. Aplica estas optimizaciones de forma gradual y realiza pruebas constantes en entornos de desarrollo antes de llevar las configuraciones a producción.

¿Necesitas una auditoría técnica de rendimiento o ayuda para optimizar los recursos de tu servidor? Ponte en contacto con nosotros para analizar tu proyecto.