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

Hace algún tiempo, Caspar Hübinger encontró unas 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 que hacen de ella los usuarios. Porque si no sabes interpretar y arreglar 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)

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

Pero antes de mostrarte cómo interpretar cada uno de los mensajes de error y solucionarlos, me gustaría profundizar en cómo utilizar correctamente Google PageSpeed Insights . Porque a menudo hemos visto que los usuarios se fijan en su puntuación de PageSpeed sin vigilar el tiempo de carga de su sitio .

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 confiar exclusivamente en los resultados o mensajes de error de Google PageSpeed Insights . Porque la herramienta de Google no mide el parámetro más importante tus sitio : el tiempo de carga de la página. Para medirlo correctamente, recomiendo Webpagetest.org.

Sólo si tienes en cuenta el tiempo de carga de la página desde el principio al optimizar tus sitio podrás hacer afirmaciones significativas sobre el éxito de la optimización. Porque el objetivo de cualquier optimización debe ser siempre la mejora de 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.

Desde el punto de vista del usuario, unos tiempos de carga de la página más rápidos y unos tamaños de página más pequeños son siempre beneficiosos. La paciencia y la capacidad de atención del usuario medio siguen disminuyendo(como muestra este estudio de Microsoft) -esto es especialmente crucial para el comercio electrónico- y cada vez más visitantes llegan a través de dispositivos móviles. Ya en 2016, el 56% de los alemanes accedía 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 apropiadas las páginas rápidas y esbeltas.

Sin embargo, Google PageSpeed sólo da indicaciones sobre el potencial de optimización tus sitio 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 se puede inmovilizar en determinadas áreas, o sólo con un esfuerzo adicional considerable.

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

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 de la falta de almacenamiento en caché del navegador deja muy claro por qué no debes desanimarte por un supuesto mal resultado de PageSpeed.

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

Lo mismo con otros servicios de terceros. Por ejemplo, nuestro chat de apoyo.

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

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

Porque si optimizas el tiempo de carga tus sitio , trabajarás automáticamente en muchas de las áreas que son importantes para Google. Por lo tanto, la mejora del tiempo de carga y la puntuación de Google PageSpeed están relacionadas 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.

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

Implementación: Aunque esta sugerencia parezca desalentadora, la implementación es posiblemente sencilla. En principio, hay dos soluciones posibles para este caso: Si eres un experto en CSS, puedes reducir el número de archivos CSS manualmente y utilizar una notación abreviada al crearlos. También puedes reducir tú mismo el tamaño de los archivos CSS utilizando herramientas online como CSS Compressor o 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 el CSS, sino también el JavaScript y el HTML.

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

Los plug-ins de Minify que acabamos de mencionar son muy utilizados. Esto se debe a que son convenientes y se encargan de comprimir y fusionar el CSS (y mucho más) de forma totalmente automática. Hasta hace poco, combinar archivos CSS también tenía mucho sentido. Mientras tanto, las cosas han cambiado: porque desde que existe 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.

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

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

Este mensaje también provoca gotas de sudor en la frente de muchos usuarios, porque no es tan fácil de aplicar y es también uno de los eternos puntos de crítica de Google PageSpeed.

Significado: Una página 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 las páginas que ya han sido optimizadas muy bien(como muestra el caso de Caspar Hübinger). Sin embargo, la pista puede ser muy valiosa para la optimización del tiempo de carga. Básicamente, esta pista te dice que el código JavaScript o CSS que es importante para que se cargue un elemento -por ejemplo, un color de fondo- no está todavía disponible en el momento en que se carga el elemento. En consecuencia, no se muestra hasta que se haya cargado el comando CSS correspondiente. Esto aumenta el tiempo de carga tus sitio , pero sobre todo afecta a la experiencia del usuario, ya que sitio da la sensación de que tarda más en cargar.

Umsetzung: Eine gängige Lösung ist die Umsetzung einer Daumenregel: CSS in den Header. Das bedeutet, dass du CSS-Code vom Hauptteil des HTML Dokuments, dem <body>, an den Anfang des Dokuments, den <head>, verschiebst und dort als <style> einbindest.

An diesem Beispiel wird deutlich, was ich meine. Der Codeschnipsel unten definiert unsere spezifische Hintergrundfarbe für den Blog. Das <style>-Element wird im head des HTML-Dokuments geladen. So lädt der Seitenhintergrund nicht erst am Ende des Dokuments und erzeugt einen unschönen Farbsprung oder blockiert gar das Rendering.

<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 maneras: 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. Los plugins como Better WordPress Minify también pueden ayudar en este caso.

El plugin Minify muestra en las opciones, por ejemplo, qué archivos CSS se han movido ya a la cabecera. También puedes añadir manualmente más recursos CSS aquí.

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

Los extractos de las opciones de la plugins espectáculo: Incluso la variante del plugin no puede ser implementada sin una comprensión básica del proceso. También en el Plugins así que tendrás que acostumbrarte.

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.

Significado: Muchos usuarios subestiman el papel del tamaño de la imagen en el tiempo de carga de su sitio. Sin embargo, las imágenes son muy a menudo una de las mayores ralentizaciones en el 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. 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 de tus sin conexión, por ejemplo, directamente en Photoshop. Así te ahorras el plugin extra y mantienes tu sitio delgado.

La solución más conveniente es, por supuesto, un complemento. Complementos como Optimus o Smush optimizan no sólo la imagen principal, sino también todas sus variaciones. Smush también es capaz de optimizar a posteriori todas las imágenes existentes en tu .

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

Este mensaje de error de Google PageSpeed se puede arreglar muy rápidamente y puede reducir significativamente el tiempo de carga tus sitio .

Es decir, ya has reducido al máximo el tamaño de las imágenes y del CSS tus sitio . ¡Eso es bueno! Pero eso no es todo. Ahora puedes utilizar otro mecanismo de compresión. Probablemente conozcas este proceso al descargar grandes paquetes de datos: Normalmente los tienes en forma comprimida, 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 ser desempaquetados 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. Si eres cliente de Raidboxes, no tienes que preocuparte de nada. Esto se debe a que hemos activado de serie la compresión Brotli, especialmente fuerte.

Con la siguiente entrada en tus .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: Entregar contenido estático con una política de caché eficiente 

En mi opinión, la referencia a la caché del navegador es, con mucho, la más molesta en Google PageSpeed Insights. Esto se debe a que sólo puedes configurar la caché del navegador para tus propios recursos. El almacenamiento en caché del navegador no es posible para los recursos externos.

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

Implementación: O bien tu hoster ya ha activado el almacenamiento en caché del navegador en el lado del servidor, o puedes establecerlo manipulando el archivo .htaccess (recuerda: esta configuración sólo funciona en servidores web Apache). Por ejemplo, el código de ejemplo que aparece a continuación establece la caché del navegador en un mes, es decir, la versión estática de tus sitio 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>

Lo siguiente también se aplica aquí: Si eres un cliente de Raidboxes, el almacenamiento en caché del navegador ya está activo por defecto.

Mis 2 centavos: Sin un caché todo es nada

Bien, ahora has optimizado las imágenes tus sitio , has reducido el CSS, lo has comprimido y puesto en el orden correcto y has hecho que los visitantes del navegador tus almacenen en caché el sitio . Todas estas medidas acortan el tiempo de carga de la página tus sitio .

Significado: Sin un caché adecuado, sin embargo, regalas mucho de este potencial. El almacenamiento en caché es y sigue siendo, con mucho, el factor de rendimiento más importante. Una caché almacena temporalmente el contenido tus WordPress-sitio y garantiza que no haya que recargar cada vez la totalidad de sitio . En su lugar, se entrega una variante estática, es decir, ya totalmente renderizada, tus sitio desde una caché. 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 de tus sitio y permiten reducir considerablemente el tiempo de carga para los visitantes del sitio web que vuelven.

La gran potencia de los complementos de caché es también su mayor debilidad. Es muy posible que un plugin de caché haga que tu sitio sea más lento para los visitantes que llegan por primera vez. Esto se debe a que cuanto más complicado es tu Blog o tu sitio , 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 comparativamente sencillo, las soluciones minimalistas pueden ser mejores que los todoterrenos del caché. Uno de estos plugins ligeros es Cache Enabler, por ejemplo.

Debes tener en cuenta que los plugins de caché suelen encargarse también de la reducción y fusión de CSS o JavaScript. Por lo tanto, debes comprobar si el plugin de caché tu no hace ya superfluos los plugins de 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 probar si aportan alguna ventaja 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, hay plugins que te quitan mucho trabajo. Pero no todo el trabajo. Los plugins de almacenamiento en caché también producen rápidamente un efecto notable, pero a veces son muy extensos y ofrecen muchas opciones de configuración y a veces funciones redundantes.

En cualquier caso, fíjate bien en los complementos que utilizas. Sólo si sabes lo que ocurre cuando utilizas determinadas funciones puedes optimizar de forma significativa. Sobrecargar sitio con plugins de optimización no suele servir de mucho.

Y al optimizar, debes asegurarte de medir adecuadamente el éxito de tu . No importa si optimizas a mano o mediante un plugin. Utiliza PageSpeed Insights como primer punto de referencia para identificar los puntos débiles tus sitio . A continuación, mide el tiempo de carga tus sitio una vez antes de la optimización. Sólo después de esta evaluación de la situación inicial tiene realmente sentido optimizar tu sitio paso a paso. 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.