Google PageSpeed Insights Mensajes de error

¡Cállate Google PageSpeed! Corregir los mensajes de error más importantes

Google PageSpeed Insights es una excelente herramienta para obtener rápidamente una visión general del potencial de optimización de tussitio . Hoy te mostraré cómo utilizar este potencial y aumentar tu puntuación de PageSpeed. Sin embargo, no hay que 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ó 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 solucionar las sugerencias de optimización individuales, puedes perderte rápidamente en la búsqueda sin sentido de una puntuación de 100. Sin embargo, eso sería poco inteligente. Después de todo, las puntuaciones utópicas de Google PageSpeed suelen ser una pérdida de tiempo. Optimizar el tiempo de carga es más importante.

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

Pero antes de mostrarte cómo interpretar los mensajes de error individuales y solucionar los errores, me gustaría entrar en cómo utilizar Google PageSpeed Insights correctamente. 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 le interesa esta sección, sáltela y aprenda 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 tussitio : el tiempo de carga de la página. Para medirlo correctamente, recomiendo Webpagetest.org.

Sólo si se tiene en cuenta el tiempo de carga de la página desde el principio al optimizar tussitio se pueden 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 percibido.

¡RECORDATORIO!

Mida siempre el tiempo de carga de la página antes de optimizar el rendimiento de tussitio . Sólo así se puede evaluar el éxito de la optimización.

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 son más los visitantes que 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 smartphones o tabletas. Aquí, las velocidades de conexión y los volúmenes de datos no son siempre ilimitados. Por lo tanto, son apropiadas las páginas rápidas y sencillas.

Sin embargo, Google PageSpeed sólo da indicaciones sobre el potencial de optimización tussitio 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 ser inmovilizada en ciertas á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. Sin embargo, estos recursos no pueden ser cubiertos por la caché del navegador tussitio . Por lo tanto, el mensaje de error no es relevante para la experiencia del usuario tussitio , 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 clasificació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 caché en el navegador deja muy claro por qué no hay que dejarse desanimar por un supuesto mal resultado de PageSpeed.

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

Mensajes de error típicos de Google PageSpeed Insights: El almacenamiento en caché del navegador supuestamente no se utiliza correctamente

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

Por lo tanto, cada vez que probamos nuestro sitioen 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 tussitio , esto significa que el tiempo de carga y la experiencia del usuario también son 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 tussitio , 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 debe perderse en la búsqueda de una puntuación de 100.

Pero ahora pasemos 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.

¡Cállate Google PageSpeed! Corregir los mensajes de error más importantes

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

Puesta en práctica: Aunque esta sugerencia parezca desalentadora, la puesta en práctica 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 el tamaño de los archivos CSS tú mismo utilizando herramientas online como CSS Compressor o CSS Minifier.

¡Cállate Google PageSpeed! Corregir los mensajes de error más importantes

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.

Más información

Puedes encontrar una explicación detallada de las formas de reducir HTML, CSS y JavaScript en WordPress en este artículo.

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

Los plug-ins 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 son capaces de 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 decidirse por un plugin con varias docenas de funciones y opciones de configuración, piense detenidamente si lo necesita. Especialmente si está seguro de que puede optimizar el CSS usted mismo.

Porque un plugin adicional puede hacer que tusitio 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 trae gotas de sudor a la frente de muchos usuarios, porque no es tan fácil de implementar y también es uno de los eternos puntos de crítica de Google PageSpeed.

¡Cállate Google PageSpeed! Corregir los mensajes de error más importantes

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 le 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. Por lo tanto, no se muestra hasta que se haya cargado el comando CSS correspondiente. Esto aumenta el tiempo de carga tussitio , pero sobre todo afecta a la experiencia del usuario, ya que sitioda 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>

Esta medida de optimización se puede aplicar 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. Plugins como Better WordPress Minify pueden ayudar aquí también.

Google PageSpeed Insights Mensajes de error - extracto del plugin Better WordPress Minify

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

Google PageSpeed Insights Mensajes de error - extracto del plugin de optimización Autoptimize

El plug-in Autoptimize, en cambio, adopta un enfoque integral: Aquí se seleccionan 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: Codificación eficaz de las imágenes

Este es otro de los puntos de los que se queja a menudo PageSpeed Insights . Sin embargo, este caso es casi siempre rápido y fácil de aplicar y suele aportar también ventajas tangibles en el tiempo de carga.

¡Cállate Google PageSpeed! Corregir los mensajes de error más importantes

Importancia: 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 utiliza los originales en tus, sino versiones más pequeñas de los mismos, es decir, miniaturas o imágenes destacadas, éstas también deben optimizarse, por supuesto. 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, tiene 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 en línea para ello, como Kraken.io. O puedes reducir la calidad y, por tanto, el tamaño del archivo de las imágenes de tussin conexión, por ejemplo, directamente en Photoshop. Esto le ahorra el plugin adicional y mantiene tusitio 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 tussitio .

¡Cállate Google PageSpeed! Corregir los mensajes de error más importantes

Significado: Ya ha reducido el tamaño de las imágenes y del CSS tussitio tanto como sea posible. ¡Eso es bueno! Pero eso no es todo. Ahora puedes utilizar otro mecanismo de compresión. Probablemente conozcas este proceso por haber descargado grandes paquetes de datos: Por lo general, 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 todavía 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 tiene que activarla usted mismo. Si es cliente de Raidboxes, no tiene que preocuparse 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 puede activar manualmente la llamada compresión GZIP. Siempre que tenga 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 de 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 puede configurar el almacenamiento en caché del navegador para sus propios recursos. El almacenamiento en caché del navegador no es posible para los recursos externos.

¡Cállate Google PageSpeed! Corregir los mensajes de error más importantes

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

Implementación: O bien tuhoster ya ha activado el almacenamiento en caché del navegador en el lado del servidor, o puede establecerlo manipulando el archivo .htaccess (recuerde: 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 tussitio 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 usted es 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 tussitio , has reducido el CSS, lo has comprimido y puesto en el orden correcto y has hecho que los visitantes del navegador tusalmacenen en caché el sitio. Todas estas medidas acortan el tiempo de carga de la página tussitio .

Significado: Sin un caché adecuado, sin embargo, se regala gran parte de este potencial. El almacenamiento en caché es, y sigue siendo, el factor de rendimiento más importante. Un caché almacena temporalmente el contenido de tusWordPress-sitioy garantiza que no haya que recargar todo sitiocada vez. En su lugar, se entrega una variante estática, es decir, ya renderizada, tussitio desde una caché. Esto evita el lento PHP y la base de datos en particular.

Implementación: Una vez más, o bien tuhoster ya ha configurado una caché del lado del servidor, o usted utiliza un plugin de caché. Existen algunos plug-ins muy potentes que almacenan en caché grandes partes de tussitio y que permiten reducir significativamente el tiempo de carga para los visitantes del sitio web.

La gran potencia de los complementos de caché es también su mayor debilidad. Es posible que un plugin de caché haga que tusitio sea más lento para los visitantes que llegan por primera vez. Esto se debe a que cuanto más complicado es tuBlog o tusitio , más complicado y extenso debe ser también el motor de caché que almacena su 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.

Hay que 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, debería comprobar si el plugin de caché tuno hace ya superfluos los plugins para la optimización de CSS.

Si utiliza 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 de rendimiento.

Conclusión: Mover mucho con sólo 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 de encima. Pero no todo el trabajo. Los plugins de almacenamiento en caché también proporcionan 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 plug-ins que utilizas. Sólo si se sabe lo que ocurre cuando se utilizan determinadas funciones se puede optimizar de forma sensata. Sobrecargar sitiocon plugins de optimización no suele servir de mucho.

Y al optimizar, debe asegurarse de medir adecuadamente el éxito de tu. No importa si se optimiza a mano o a través de un plugin. Utilice PageSpeed Insights como primer punto de referencia para identificar los puntos débiles tussitio . A continuación, mida el tiempo de carga tussitio una vez antes de la optimización. Sólo después de esta evaluación de la situación inicial tiene realmente sentido optimizar tusitio paso a paso. Porque sólo cuando se conoce el tiempo de carga antes de la optimización y después de cada paso de optimización se puede determinar lo que han conseguido las medidas individuales de optimización.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

Tu dirección de correo electrónico no se publicará.