PageSpeed Insights tus Google es una herramienta excelente para obtener rápidamente una visión general del potencial de optimización de tu sitio web. Hoy te mostraré cómo utilizar este potencial y aumentar tu PageSpeed Score. Sin embargo, no debes seguir servilmente los resultados de Google. Porque los mensajes de error de PageSpeedno siempre son útiles.

Hace algún tiempo, Caspar Hübinger encontró palabras muy claras para su resultado en Google PageSpeed Insights en uno de sus blogposts. Y no sólo critica la herramienta, sino también el uso de la propia herramienta. Porque si no sabes cómo interpretar y solucionar las sugerencias de optimización individuales, puedes perderte rápidamente en la búsqueda sin sentido de una puntuación de 100. Pero eso sería imprudente. Al fin y al cabo, las utópicas puntuaciones de Google PageSpeed suelen ser una pérdida de tiempo. Optimizar el tiempo de carga es más importante.

Totalmente responsivo, carga en 500 ms, y la brillante herramienta de mierda de Google me dice que mi rendimiento en móviles es "justo", debido al maldito CSS.

Caspar Hübinger(Glueckpress)

PageSpeed Insights tu Hoy te mostraré cómo interpretar los mensajes de error más importantes de Google y optimizar en consecuencia.

Pero antes de mostrarte cómo interpretar los mensajes de error individuales y solucionar los errores, me gustaría profundizar en cómo utilizar Google PageSpeed Insights correctamente. Ya hemos visto que algunas personas se fijan mucho en su PageSpeed Score sin vigilar el tiempo de carga de su sitio web.

Si no te interesa esta sección, sáltatela y aprende directamente cómo solucionar el mensaje de error "Comprimir CSS".

Los mensajes de error de Google PageSpeed no siempre son correctos e importantes

Nunca debes fiarte exclusivamente de los resultados o mensajes de error de Google PageSpeed Insights . Porque la herramienta de Google no mide el parámetro más importante del sitio web tus : el tiempo de carga de la página. Para medirlo correctamente, te recomiendo Webpagetest.org.

tus Sólo si tienes en mente el tiempo de carga de la página desde el principio al optimizar, podrás hacer afirmaciones significativas sobre el éxito de la optimización. Porque el objetivo de cualquier optimización debe ser siempre mejorar la experiencia del usuario. En el caso de la optimización del rendimiento, se trata, por supuesto, del tiempo de carga de la página y del tiempo de carga de la página percibido.

Para la experiencia del usuario, tiempos de carga de página más rápidos y tamaños de página más pequeños son siempre beneficiosos. La paciencia y la capacidad de atención de la gente siguen disminuyendo(como muestra este estudio de Microsoft) -esto es especialmente crucial para el comercio electrónico- y cada vez hay más tráfico a través de dispositivos móviles. Ya en 2016, el 56% de los alemanes accedían regularmente a Internet a través de teléfonos inteligentes o tabletas. Aquí, las velocidades de conexión y los volúmenes de datos no siempre son ilimitados. Por lo tanto, son apropiados los sitios web ágiles y rápidos.

tus Google PageSpeed, sin embargo, sólo da indicaciones sobre los potenciales de optimización del sitio web y sólo permite sacar algunas conclusiones sobre la experiencia del usuario. El escaso valor informativo de los mensajes de error de Google PageSpeed se ve reforzado por el hecho de que la herramienta no puede tranquilizarse en determinadas áreas, o sólo con un considerable esfuerzo adicional.

Por ejemplo, la referencia a la caché del navegador siempre aparecerá cuando se integren recursos externos, incluidos los propios servicios de Google. tus Sin embargo, estos recursos no pueden ser cubiertos por el sitio web de caché del navegador. tus Por tanto, el mensaje de error no tiene relevancia para el sitio web de la experiencia del usuario, sino que es producido por la lógica de la propia herramienta. En el peor de los casos, sin embargo, el mensaje se interpreta como si no hubiera ninguna caché de navegador activa.

Así que no te centres principalmente en la puntuación de Google, sino en el tiempo de carga. Este es el único factor realmente importante.

Pero, ¿qué pasa con mi clasificación en Google?

El ejemplo del mensaje con la falta de caché del navegador aclara por qué no debes inquietarte por un supuesto mal resultado de PageSpeed.

tus Si has integrado Google Maps o Google Analytics en tu sitio web, por ejemplo, éstos generarán el siguiente mensaje de error:

Lo mismo se aplica a otros servicios de terceros. Por ejemplo, nuestro chat de asistencia.

PageSpeed Insights Por lo tanto, cada vez que probamos nuestro sitio web en , este punto se tacha. Esto significa que sabemos que este factor siempre distorsiona negativamente nuestros resultados y, por tanto, simplemente lo ignoramos.

tus Para el sitio web SEO, esto significa que el tiempo de carga y la experiencia del usuario también son mucho más importantes para la clasificación en Google que la puntuación específica de PageSpeed.

tus Porque si optimizas el tiempo de carga de , trabajarás automáticamente en muchas de las áreas que son importantes para Google. Por tanto, mejorar el tiempo de carga y la puntuación de Google PageSpeed Score están conectados en cierto modo.

Sin embargo, en mi opinión, no debes perderte en la búsqueda de una puntuación de 100.

Pero ahora, ¡a los pasos de optimización!

Mensaje de error 1: Comprimir CSS

Según nuestra experiencia, este es uno de los mensajes de error más desagradables de Google PageSpeed Insights.

tus Significado: Este mensaje de error indica que todavía se pueden comprimir los archivos CSS del sitio web (o, en el caso anterior, que ya se ha hecho con éxito). Al hacerlo, se reduce el número de caracteres de los documentos. Esto reduce el tamaño del archivo. Se eliminan, por ejemplo, los comentarios, los espacios y el formato.

Puesta en práctica: Aunque esta sugerencia parezca desalentadora, la puesta en práctica es concebiblemente sencilla. En principio, hay dos soluciones posibles para este caso: Si eres un usuario experto en CSS, puedes reducir manualmente el número de archivos CSS y utilizar una notación abreviada al crearlos. También puedes reducir tú mismo el tamaño de los archivos CSS utilizando herramientas en línea como CSS Minifier.

Por supuesto, también existe la cómoda solución de los plugins de minificación de CSS en WordPress. Algunos plug-ins hacen un trabajo completo y pueden comprimir y optimizar no sólo CSS, sino también JavaScript y HTML.

Con HTTP/2, la fusión de CSS no tiene necesariamente sentido

Los plugins Minify que acabamos de mencionar son muy utilizados. Esto se debe a que son cómodos y se encargan de comprimir y fusionar CSS (y mucho más) de forma totalmente automática. Hasta hace poco, fusionar archivos CSS también tenía mucho sentido. Entretanto, las cosas han cambiado: desde que se introdujo el estándar HTTP/2, los navegadores pueden cargar varios archivos del servidor web al mismo tiempo.

Esto significa que los datos ya no tienen que estar necesariamente combinados, porque con HTTP/2 se pueden intercambiar varios paquetes de datos al mismo tiempo. HTTP/2 debe ser configurado por el hoster, por ejemplo, y sólo puede utilizarse con un certificado SSL.

Así que antes de decidirte por un plugin con varias docenas de funciones y opciones de configuración, piensa bien si lo necesitas. Especialmente si estás seguro de que puedes optimizar el CSS tú mismo.

tu Porque un plugin adicional puede hacer que el sitio web sea más lento en determinadas circunstancias. Sobre todo si las demás funciones de los plugins todoterreno no pueden desarrollar todo su potencial.

Mensaje de error 2: Eliminar los recursos que bloquean la representación

Este mensaje también trae gotas de sudor a la frente de mucha gente, porque no es tan fácil de aplicar y también es uno de los eternos puntos de crítica de Google PageSpeed.

Significado: Un sitio web se construye en un orden determinado. Este orden de carga puede optimizarse. PageSpeed casi siempre se queja de que los archivos CSS bloquean este orden de carga óptimo. Y esto es cierto incluso para sitios web que ya se han optimizado muy bien(como demuestra el caso de Caspar Hübinger). No obstante, la sugerencia puede ser muy valiosa para la optimización del tiempo de carga. Básicamente, esta sugerencia te indica que el código JavaScript o CSS que es importante para que se cargue un elemento -por ejemplo, un color de fondo- aún no está disponible en el momento en que se carga el elemento. Esto significa que no se mostrará hasta que se haya cargado el comando CSS correspondiente. Aunque esto no aumenta el tiempo de carga de tus , afecta sobre todo a la experiencia del usuario, ya que el sitio web da la sensación de tardar más en cargarse.

Implementación: Una solución habitual es implementar una regla general: CSS en la cabecera. Esto significa que mueves el código CSS de la parte principal del documento HTML, el "cuerpo", al principio del documento, la "cabecera", y lo incluyes allí como "estilo".

Este ejemplo aclara lo que quiero decir. El fragmento de código siguiente define un color de fondo para un blog. El elemento "estilo" se carga en la "cabecera" del documento HTML. De esta forma, el fondo de la página no se carga al final del documento y crea un antiestético salto de color o incluso bloquea la renderización.

<head>
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #f5faff; }
</style>
</head>

Puedes aplicar esta medida de optimización de dos formas: Puedes tocar el código tú mismo y mover los códigos CSS a la cabecera, o puedes dejar que un plugin haga el trabajo.

El plugin Autoptimize, por ejemplo, adopta un enfoque global: Aquí seleccionas las opciones para todos los archivos CSS que no están excluidos del proceso.

El extracto de las opciones del plug-in muestra: Incluso la variante del plug-in no puede aplicarse sin una comprensión básica del proceso. Así que también tienes que familiarizarte con los plugins.

Mensaje de error 3: Codificar eficazmente las imágenes

Este es otro punto del que PageSpeed Insights suele refunfuñar. Sin embargo, este caso es casi siempre rápido y fácil de poner en práctica y suele aportar también ventajas tangibles en el tiempo de carga.

Importancia: Muchos subestiman el papel del tamaño de las imágenes en el tiempo de carga de su sitio web. Sin embargo, las imágenes son muy a menudo uno de los mayores frenos del tiempo de carga. Aunque sólo se guarden pequeñas cantidades de datos para imágenes individuales, el volumen total guardado puede sumar una cantidad considerable de datos.

Porque una imagen rara vez es sólo una imagen. WordPress genera automáticamente varias miniaturas de la imagen cuando la subes. Por lo tanto, si no utilizas los originales en tus , sino versiones más pequeñas de los mismos, es decir, miniaturas o imágenes destacadas, éstas, por supuesto, también deben estar optimizadas. De este modo, una imagen se convierte rápidamente en varios archivos, lo que también conlleva una carga de datos múltiple.

Aplicación: En principio, tienes dos opciones para optimizar las imágenes de tu . O bien optimizas las imágenes antes de subirlas, o bien después o durante la subida. Lo primero puede hacerse con herramientas online u offline, lo segundo con los plugins de optimización de imágenes de WordPress adecuados.

Si puedes integrar la compresión en tu flujo de trabajo, tiene sentido optimizar las imágenes antes de subirlas. tus Existen herramientas online para ello, como Kraken.io. O puedes reducir la calidad y, por tanto, el tamaño del archivo de las imágenes sin conexión, por ejemplo directamente en Photoshop. tu Así te ahorras el plugin adicional y te mantienes delgado.

La solución más cómoda es, por supuesto, un plugin. Plugins como Optimus o Smush optimizan no sólo la imagen principal, sino también todas sus variaciones. tu Smush también puede optimizar posteriormente todas las imágenes existentes.

Entre otras cosas, los plug-ins funcionan con la llamada "compresión sin pérdidas". Esto significa que el tamaño del archivo de las imágenes se reduce, pero su calidad visible no disminuye.

Mensaje de error 4: Activar la compresión de texto

tus Este mensaje de error de Google PageSpeed es muy rápido de solucionar y puede reducir significativamente el tiempo de carga del sitio web.

tus Significado: Ya has reducido al máximo el tamaño de las imágenes y del CSS. ¡Eso está muy bien! Pero eso no es todo. Ahora puedes utilizar otro mecanismo de compresión. Probablemente conozcas este proceso por haber descargado grandes paquetes de datos: Normalmente los tienes comprimidos, es decir, comprimidos. Esto hace que los datos sean más pequeños y la descarga más rápida. Sin embargo, los paquetes de datos tienen que descomprimirse después de la descarga. Ocurre exactamente lo mismo cuando se carga una página: El servidor web entrega los paquetes de datos comprimidos, el servidor web los desempaqueta. Esto hace que la transferencia de datos sea más rápida y reduce el tiempo de carga de la página.

Implementación: O bien la compresión de datos ya está configurada en el servidor o tienes que activarla tú mismo. En Raidboxes no tienes que preocuparte de nada. Hemos activado por defecto la compresión Brotli, especialmente fuerte.

tus Con la siguiente entrada en .htaccess también puedes activar manualmente la llamada compresión GZIP. Siempre que tengas un servidor web Apache.

<ifModule mod_gzip.c>
 mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
 </ifModule>
 
 <IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 </IfModule>

Mensaje de error 5: Entrega contenido estático con una política de caché eficiente 

PageSpeed InsightsEn mi opinión, la referencia a la caché del navegador es, con diferencia, la más molesta de Google . Esto se debe a que sólo puedes configurar la caché de navegador para tus propios recursos. La caché de navegador no es posible para los recursos externos.

tus Significado: el almacenamiento en caché del navegador significa que el navegador guarda una versión estática del sitio web y no tiene que solicitarla al servidor web cuando se vuelve a visitar, pero el sitio web ya está cargado.

tu Implementación: O bien el hoster ya ha activado la caché del navegador en el lado del servidor, o puedes establecerla manipulando el archivo .htaccess (recuerda: esta configuración sólo funciona en servidores web Apache). tus Por ejemplo, el siguiente código de ejemplo establece la caché del navegador en un mes, es decir, la versión estática del sitio web se almacena en el navegador del visitante durante un mes.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 60 seconds"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
</IfModule>

Raidboxes Si eres cliente, la caché del navegador ya está activada por defecto.

Mis 2 centavos: Sin un caché todo es nada

tus tus Bien, ahora has optimizado el sitio web de imágenes, has reducido el CSS, lo has comprimido y ordenado correctamente y has hecho que los visitantes del navegador guarden el sitio web en caché. tus Todas estas medidas acortan el tiempo de carga del sitio web.

Significado: Sin una caché adecuada, sin embargo, regalas gran parte de este potencial. La caché es y sigue siendo, con diferencia, el factor de rendimiento más importante. tus Una caché almacena temporalmente el contenido del sitio web de WordPress y garantiza que el sitio web completo no tenga que recargarse cada vez. tus En su lugar, se entrega desde una caché un sitio web estático, es decir, una variante ya renderizada. Esto evita el lento PHP y la base de datos en particular.

Implementación: De nuevo, o bien tu hoster ya ha configurado una caché del lado del servidor, o bien utilizas un plugin de caché. Hay algunos plug-ins muy potentes que almacenan en caché grandes partes del sitio web tus y consiguen una reducción significativa del tiempo de carga en las visitas recurrentes al sitio web.

La gran potencia de los plug-ins de caché es también su mayor debilidad. Puede ocurrir que un plugin de caché haga que tu sea más lento para quienes lo visitan por primera vez. Porque cuanto más complicado sea el blog tu o el sitio web tu , más complicado y extenso debe ser el motor de caché que almacena tu blog. Esto es especialmente relevante para las tiendas.

Si tienes un sitio web relativamente sencillo, las soluciones minimalistas pueden ser mejores que los plugins de caché. Uno de estos plugins esbeltos es Cache Enabler, por ejemplo.

Debes tener en cuenta que los plugins de caché normalmente también reducen y combinan CSS o JavaScript. tu Por lo tanto, debes comprobar si el plugin de caché no hace ya superfluos los plugins para la optimización de CSS.

Si utilizas el almacenamiento en caché del lado del servidor, es aconsejable desactivar las funciones de almacenamiento en caché de plug-ins como Autoptimize, o comprobar si aportan alguna ventaja adicional de rendimiento.

Conclusión: Mover mucho con unos pocos plug-ins

Ya te habrás dado cuenta al leer: para la optimización del CSS, las imágenes y la optimización del orden de carga, existen plugins que te quitan mucho trabajo de encima. Pero no todo el trabajo. Los plugins de caché también proporcionan rápidamente un efecto notable, pero a veces son muy extensos y ofrecen muchas opciones de configuración y funciones a veces redundantes.

En cualquier caso, fíjate bien en los plug-ins que utilizas. Sólo si sabes qué ocurre cuando utilizas determinadas funciones podrás optimizar de forma sensata. Sobrecargar el sitio web con plug-ins de optimización no suele servir de mucho.

Y cuando optimices, debes asegurarte de medir correctamente el éxito de tu . No importa si optimizas manualmente o mediante un plugin. Utiliza PageSpeed Insights como primer punto de referencia para identificar los puntos débiles del sitio web tus . A continuación, mide el tiempo de carga del sitio web tus antes de la optimización. Sólo después de esta evaluación de la situación inicial tiene realmente sentido optimizar paso a paso el sitio web tu . Sólo cuando conozcas el tiempo de carga antes de la optimización y después de cada paso de optimización, podrás determinar lo que han conseguido las distintas medidas de optimización.