¿Por qué obtengo una puntuación baja en PageSpeed y a qué se debe?
Una puntuación PageSpeed baja resulta frustrante. Ajustas todo tipo de cosas, pero el medidor sigue en rojo o naranja. En esta guía, te muestro los problemas que encontramos en nuestro propio sitio web theseo.co.uk, por qué los banners de cookies y los plugins de traducción echan por tierra tu puntuación, y cómo puedes conseguir tranquilidad en tu informe con unos pocos plugins específicos y pequeños fragmentos de php sin sacrificar el diseño.
En primer lugar, entienda qué le dice exactamente PageSpeed
Mucha gente mira ciegamente un número. En realidad, PageSpeed es un resumen de varios componentes. Algunos pueden ser percibidos directamente por los visitantes, mientras que otros son sobre todo teóricos. Así que no es necesario llegar a cien para tener un sitio web rápido y tranquilo, pero una puntuación muy baja indica problemas reales.
| Sección | Qué significa | Lo que usted dirige |
|---|---|---|
| Tiempo de carga del primer contenido | Cuando alguien ve algo por primera vez en la pantalla | Importante para la primera impresión y la tranquilidad |
| Tiempo de carga mayor elemento | Cuando la imagen o el texto principal | Aclarar imágenes y bloques de héroes |
| Interactividad | La rapidez con que reaccionan los botones cuando alguien hace clic | Aplazar scripts, limitar plugins pesados |
| Cambio de disposición | O las piezas saltan durante la carga | Alturas fijas, sin banners ni fuentes tardías |
Pruebe su página de inicio y al menos una página de destino clave en móvil y escritorio.
Página que estoy probando Puntuación móvil Puntuación de escritorio Advertencias clave Recomendaciones más importantes Qué parte me molesta más como visitante
Antes de hacer retoques, hay que partir de lo básico
En el caso de muchos clientes con sitios web antiguos, vimos que las pequeñas optimizaciones no servían de mucho mientras lo básico no estuviera bien. Versiones antiguas de php, basura en la base de datos y demasiados plugins hacen que tu puntuación baje incluso antes de fijarte en las imágenes o los scripts.
Progreso paso básico
Un administrador que trabaje específicamente con WordPress marca una gran diferencia. Elige un proveedor con servidores cerca de tus visitantes y una capa de caché en el servidor. Eso te da ventaja incluso antes de pensar en los plugins.
Elimine las revisiones antiguas, los transitorios caducados y las tablas vacías. Esto se hace de forma segura con un plugin de mantenimiento o manualmente después de hacer una copia de seguridad. Sólo vimos realmente una diferencia con nuestros clientes cuando limpiamos sus bases de datos y ya no estaban llenas de restos de plugins antiguos.
Reconocer a los verdaderos culpables scripts, banners de cookies y plugins de traducción
Las mayores caídas en la puntuación PageSpeed de theseo.co.uk no se debieron al tema, sino a scripts adicionales. En particular, los banners de cookies, los scripts de seguimiento, los widgets de chat y (en otros clientes, los plugins de traducción) pesaban más de lo que podría pensarse a primera vista.
Todos los banners de cookies pegan javascript y css adicionales encima de tu página. Algunas soluciones incluso cargan scripts externos antes de que el resto de la página esté lista. Elija un banner ligero, desactive las animaciones y cárguelo sólo después de que se muestre el contenido principal. En casos extremos, es mejor cambiar a un sistema más sencillo que cargue menos integraciones.
Revise la lista de guiones y decida para cada elemento si puede quedarse.
Nombre del script o plugin Finalidad Se sigue utilizando activamente sí o no ¿Existe una alternativa más ligera? ¿Debería cargarse sólo en algunas páginas? Decisión de eliminar, limitar o mantener
Utiliza algunos plugins de rendimiento específicos y pequeños fragmentos de php
En theseo.es hemos hecho muchas pruebas. Los mayores beneficios se obtuvieron con la combinación de un buen plugin de caché, un plugin de optimización de imágenes y algunas pequeñas funciones php a través de Code Snippets. No diez plugins de rendimiento diferentes mezclados, sino un conjunto tranquilo con tareas claras.
Utiliza un plugin de caché moderno con funciones de caché de página, optimización de scripts y caché de navegador. Active primero sólo las funciones básicas. Después, prueba en silencio opciones adicionales como el aplazamiento de javascript. Una configuración demasiado agresiva también puede dar errores, especialmente con formularios y tiendas web.
Instala un plugin que redimensione automáticamente las nuevas cargas y, preferiblemente, las convierta a un formato de archivo moderno. Combínalo con la función lazy load para que las imágenes se carguen solo cuando se vean.
En lugar de colocar funciones separadas en un tema, optamos por el plugin Code Snippets. Esto le permite añadir fragmentos de código php seguros sin tener que trastear con los archivos. Piensa en desactivar scripts emoji, funciones oEmbed o cadenas de consulta en archivos estáticos.
Pegue esto en un nuevo fragmento y actívelo en todo el sitio. A continuación, vuelva a probar su informe PageSpeed.
// Desactivar el script emoji
remove_action('wp_head','print_emoji_detection_script',7);
remove_action('wp_print_styles','print_emoji_styles');
// Desactiva el script OEmbed si no lo usas
remove_action('wp_head','wp_oembed_add_discovery_links');
remove_action('wp_head','wp_oembed_add_host_js');Aligera los bloques de héroes y las imágenes sin ponerte feo
Al principio, nuestra página de inicio tenía un encabezado muy recargado con muchas capas, sombras y fondos grandes. Quedaba bien, pero deprimía la puntuación de PageSpeed y, sobre todo, la experiencia en móviles. Al usar menos efectos e imágenes mejor escaladas, el estilo seguía siendo el mismo, pero todo parecía mucho más ligero.
PageSpeed se fija de forma muy estricta en la primera pantalla que alguien ve. Los vídeos grandes, los sliders con tres capas de texto y los conjuntos de iconos pesados ocupan mucho tiempo. Sustitúyelos por un titular tranquilo, un texto breve y una imagen ligera.
Utiliza un tamaño diferente para móvil que para escritorio cuando sea necesario. Así evitarás cargar una imagen demasiado ancha para pantallas pequeñas. Esto ahorra inmediatamente tiempo de carga y puntuación del informe.
¿Hay sólo un mensaje claro en la primera pantalla? ¿Es el fondo una imagen ligera en lugar de un vídeo pesado? ¿Se carga la fuente rápidamente y sin saltos? ¿Se puede hacer clic en los botones al instante y sin demora? ¿Es la primera pantalla tan silenciosa en el móvil como en el ordenador?
Cómo mejoramos el PageSpeed de theseo.co.uk
Para concretar, un breve resumen de lo que hicimos en nuestro propio sitio web. No es perfecto, pero es honesto. Estos son los pasos que dieron la mayor diferencia.
- Demasiados scripts y estilos en bloques en la página de inicio.
- Una pancarta de galleta que no se deslizó hasta tarde y cambió el diseño.
- Imágenes más grandes de lo necesario y que no siempre utilizaban lazy load.
- Múltiples guiones pequeños para el seguimiento y herramientas de lado a lado.
- El diseño se ha simplificado y algunos efectos se mantienen sólo en el escritorio.
- Un plugin de rendimiento elegido y fijado en silencio.
- Cookie banner reemplazada y configurada para bloquear menos.
- Imágenes re-cargadas en formas más ligeras y lazy load activado.
- Rastreo limpiado y pasado por una capa central.
Utilice esta estructura para definir su enfoque para cada sitio web.
Principales páginas que optimizo Cuestiones clave del informe PageSpeed Acciones para el alojamiento y la base Acciones para plugins, banner de cookies y traducciones Acciones para imágenes y hero block Acciones para scripts y seguimiento Fecha en la que vuelvo a medir Puntuación objetivo para móvil y escritorio
Compruebe su puntuación PageSpeed y cómo se siente en la práctica
Después de todos los pasos, se trata de dos cosas. Un informe que ya no parpadea en rojo y un sitio web que parece tranquilo. Concluye este proceso con una breve repetición de la prueba y un ensayo con usuarios reales o colegas.
Respuestas a preguntas sobre una puntuación PageSpeed baja
No. Un cien queda bien en una captura de pantalla, pero no es un objetivo en sí mismo. El objetivo es una puntuación verde estable o naranja alta, manteniendo el sitio web tranquilo y usable. Algunas opciones, como un banner de cookies o determinadas estadísticas, son necesarias y cuestan algo en términos de puntuación.
Las pruebas en móviles son más rigurosas. La prueba presupone un dispositivo y una conexión más lentos. Por tanto, todo lo que sea pesado, como imágenes, scripts, banners de cookies y capas de traducción, se penalizará más. Por lo tanto, empiece siempre por la experiencia móvil.
Un buen plugin de rendimiento ayuda enormemente, pero no puede ocultar por completo las decisiones equivocadas. Si tienes veinte plugins pesados, tres widgets de chat y un vídeo hero de gran tamaño, seguirá siendo lento. Piensa en los plugins de rendimiento como una herramienta, no como una panacea.
Un banner siempre añade algo al tiempo de carga porque se cargan scripts y estilos adicionales. El impacto depende de lo pesado que sea y del momento en que se cargue. Elija una ligera y configúrela de modo que el contenido más importante se cargue primero. Entonces el daño será limitado.
A continuación, haz pruebas con usuarios reales. A veces, un formulario, una función de búsqueda o una página específica en particular son lentos mientras que el informe muestra valores medios. Optimiza esos momentos cruciales y mira más allá del informe.
Ahora ya sabe por qué obtiene una puntuación baja en PageSpeed y qué puede hacer al respecto
Ya has visto que una puntuación PageSpeed baja casi nunca se debe a una sola cosa. Es la suma del alojamiento, la configuración básica, los scripts, los banners de cookies, los plugins de traducción, las imágenes y las opciones de tu diseño. Limpiando, probando y volviendo a medir paso a paso, trabajarás tranquilamente para conseguir un sitio web que resulte agradable a los visitantes y envíe señales más claras a los motores de búsqueda y a los sistemas ai.
Ahora coge tu línea de base, elige una página y haz las primeras mejoras. Sólo entonces pase a las siguientes capas. De esta forma, mantendrá el control y PageSpeed se convertirá en una herramienta en lugar de una fuente de estrés.