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

Tobias Schüring Última actualización 21.10.2020
11 min.
Google PageSpeed Insights Mensajes de error
Última actualización 21.10.2020

Google PageSpeed Insights es una buena manera de obtener una rápida visión del potencial de optimización de tus sitio . Hoy te mostraré cómo utilizar este potencial y aumentar tu puntuación de PageSpeed. Pero no hay que seguir servilmente los resultados de Google. Porque los mensajes de error de PageSpeed no siempre son útiles.

El colega Caspar Hübinger ha encontrado hace algún tiempo en uno de sus blogposts post, digamos, palabras muy claras para su Google PageSpeed Insights-resultado. Y no sólo critica la herramienta, sino también el uso que hacen de ella los usuarios. Al fin y al cabo, si no sabes interpretar y solucionar cada sugerencia de optimización, puedes perderte rápidamente en la búsqueda sin sentido de una puntuación de 100. Sin embargo, eso sería poco inteligente. Porque las valoraciones utópicas de Google PageSpeed suelen ser una pérdida de tiempo. Más importante es la optimización del tiempo de carga.

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 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 experimentado que los usuarios se fijaban mucho en su puntuación PageSpeed sin tener en cuenta el tiempo de carga de su sitio .

Si esta sección no te interesa, 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 únicamente 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 se tiene en cuenta el tiempo de carga de la página desde el principio al optimizar tus sitio , 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 de la página percibido.

RECORDATORIO.

Mida siempre el tiempo de carga de la página antes de optimizar el rendimiento de tus sitio . Esta es la única manera de estimar 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 proporciona indicaciones sobre el potencial de optimización tus sitio y sólo permite sacar algunas conclusiones sobre la experiencia del usuario. La escasa importancia de los mensajes de error de Google PageSpeed se ve reforzada por el hecho de que la herramienta no puede ser silenciada en ciertas áreas, o sólo con un considerable esfuerzo adicional.

Por ejemplo, la referencia a la caché del navegador siempre aparecerá cuando se incluyan recursos externos, incluidos los propios servicios de Google. Sin embargo, estos recursos no pueden ser cubiertos por la caché del navegador tus sitio en absoluto. 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 clasificación de Google, sino en el tiempo de carga. Este es el único parámetro realmente importante.

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

El ejemplo de la falta de caché del navegador muestra muy bien por qué no hay que dejarse desanimar por un supuesto mal resultado de PageSpeed.

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

Típico mensaje de error de Google PageSpeed Insights: El almacenamiento en caché del navegador no se utiliza, supuestamente, de forma adecuada

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

Por lo tanto, cada vez que probamos nuestro sitio en PageSpeed Insights , este punto se anota. Es decir, sabemos que este factor siempre sesga negativamente nuestros resultados, así que simplemente lo ignoramos.

Para el SEO tus sitio esto significa: También para el ranking en Google el tiempo de carga y la experiencia del usuario son mucho más importantes que la calificación concreta 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 conectadas en cierto modo.

Sin embargo, en mi opinión, no te pierdas 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 tus sitio todavía pueden ser comprimidos (o en el caso anterior que esto ya se ha hecho con éxito). Esta reducción disminuye 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.

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 usted mismo es apto en CSS, puede reducir manualmente el número de archivos CSS y utilizar una notación abreviada al crearlos. También puede reducir los archivos CSS usted mismo utilizando herramientas en línea 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 mediante la minificación de CSSPlugins en WordPress . Algunos Plugins hacen directamente un golpe de efecto y pueden comprimir y optimizar no sólo CSS, sino también JavaScript y HTML.

Más información

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

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

Los Minify-Plugins 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, fusionar 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, ya que con HTTP/2 se pueden intercambiar varios paquetes de datos simultáneamente. HTTP/2 debe, por ejemplo, haber sido configurado por hoster 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 bien si lo necesita. Especialmente si tienes confianza para optimizar el CSS por tu cuenta.

Porque un Plugin adicional puede hacer que tu sitio sea más lento en determinadas circunstancias. Sobre todo si las demás funciones del todoterreno -Plugins - no pueden desarrollar todo su potencial.

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

También este mensaje conduce a muchos usuarios las gotas de sudor en la frente, porque no es tan fácil de implementar y también uno de los puntos de crítica eterna 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 páginas que ya están muy bien optimizadas(como muestra el caso de Caspar Hübinger ). Aun así, la pista puede ser muy valiosa para la optimización del tiempo de carga. Básicamente, esta sugerencia le indica que el código JavaScript o CSS que es importante para que un elemento se cargue -por ejemplo, un color de fondo- aún no está disponible en el momento en que se carga el elemento. Como resultado, no se mostrará hasta que se haya cargado el comando CSS apropiado. Esto aumenta el tiempo de carga tus sitio , pero afecta sobre todo a la experiencia del usuario, ya que sitio da la sensación de que tarda más en cargarse.

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>

Una vez más, puede aplicar esta medida de optimización de dos maneras: Puedes tocar el código tú mismo y mover los códigos CSS en la cabecera, o puedes dejar que un Plugin haga el trabajo. De nuevo, Plugins como Better WordPress Minify le ayudará en este caso.

Google PageSpeed Insights mensajes de error - extracto de la Plugin Mejor WordPress  Minify

La página web MinifyPlugin 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 Plugin Autoptimize, en cambio, va a por todas: 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 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. 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 durante la carga. Si no utiliza las imágenes originales en tus , sino versiones más pequeñas de las mismas, es decir, miniaturas o imágenes destacadas, éstas, por supuesto, también deben optimizarse. Una imagen se convierte rápidamente en varios archivos, que además traen consigo una carga de datos múltiple.

Aplicación: En principio, tiene dos opciones para optimizar las imágenes de tu . O bien se optimizan las imágenes antes de subirlas, o bien después o durante la subida. Lo primero lo puedes hacer a través de herramientas online u offline, lo segundo lo haces a través de los correspondientesplugins de optimización de imágenes de WordPress .

Si puedes integrar la compresión en tu flujo de trabajo, tiene sentido optimizar tus 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 tus sin conexión, por ejemplo, directamente en Photoshop. Esto le ahorra el extra Plugin y mantiene tu sitio delgado.

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

Entre otras cosas, Plugins funciona 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 es muy rápido de solucionar y puede reducir significativamente el tiempo de carga tus sitio .

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

Es decir, las imágenes y el CSS tus sitio ya se han reducido al máximo. ¡Bien! Pero eso no es todo. Porque ahora puedes utilizar otro mecanismo de compresión. Probablemente conozcas este proceso por haber descargado grandes paquetes de datos: Por lo general, los tienes comprimidos, es decir, en forma de cremallera. 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. Lo mismo ocurre durante la carga de la 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. Porque tenemos activada por defecto 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 tus sitio y no tiene que solicitarla al servidor web cuando se vuelve a visitar, sino que la sitio ya está cargada.

Implementación: O bien tu hoster ya tiene activada la caché del navegador en el lado del servidor, o bien puede configurarla 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, lo que significa que la versión estática de tus sitio se almacenará 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 caché todo es nada

Bien, ahora has optimizado las imágenes tus sitio , has reducido el CSS, las 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, 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 tus WordPress -sitio y garantiza que no haya que recargar todo sitio cada vez. En su lugar, se entrega una variante estática, es decir, ya renderizada tus sitio desde una caché. Esto evita el lento PHP y la base de datos en particular.

Implementación: Una vez más, o bien tu hoster ya tiene configurada una caché del lado del servidor, o bien está utilizando una cachéPlugin. En este sentido, existen algunas herramientas muy potentes, como Plugins, que almacenan en caché grandes partes de tus sitio y permiten reducir considerablemente el tiempo de carga para los visitantes del sitio web.

La gran potencia de la cachéPlugins es también su mayor debilidad. Es muy posible que una cachéPlugin tu sitio se ralentice para los visitantes que llegan por primera vez. Esto se debe a que cuanto más complicado sea el blog tu o tu sitio , más complicado y extenso debe ser el motor de caché que almacena su blog. Esto es especialmente relevante para las tiendas.

Si tiene un sitio web relativamente sencillo, las soluciones minimalistas pueden ser mejores que los gigantes de la caché. Uno de estos delgados Plugins es, por ejemplo, Cache Enabler.

Hay que tener en cuenta que el almacenamiento en cachéPlugins suele encargarse también de reducir y fusionar CSS o JavaScript. Por lo tanto, debería comprobar si tu Caching-Plugin no hace ya superfluo Plugins para la optimización de CSS.

Si utiliza el almacenamiento en caché del lado del servidor, se recomienda desactivar las funciones de almacenamiento en caché de Plugins, como Autoptimize, o probar una vez si éstas aportan alguna ventaja de rendimiento adicional.

Conclusión: Mover mucho con sólo unos pocos Plugins

Ya te has dado cuenta al leer: Para la optimización de CSS, imágenes y la optimización del orden de carga, existe Plugins, que te ahorrará mucho trabajo. Pero no todo el trabajo. Caching-Plugins también ofrece rápidamente un efecto notable, pero en parte es muy amplio y ofrece muchas opciones de configuración y funciones en parte redundantes.

En cualquier caso, mira de cerca Plugins, que es lo que utilizas. Sólo si se sabe lo que ocurre cuando se utilizan determinadas funciones, se puede optimizar también de forma sensata. Sobrecargar la sitio con la optimizaciónPlugins suele aportar poco.

Y debe asegurarse de medir adecuadamente los éxitos de tu al optimizar. Tanto si optimiza a mano como si lo hace a través de Plugin . Utilice PageSpeed Insights como primer punto de referencia para identificar los puntos débiles tus sitio . A continuación, mida el tiempo de carga tus sitio una vez antes de la optimización. Sólo después de este registro de la situación inicial tiene realmente sentido optimizar tu sitio paso a paso. Porque sólo si se conoce el tiempo de carga antes de la optimización y después de cada paso de optimización, se puede determinar también lo que han aportado las distintas medidas de optimización.

Como administrador de sistemas, Tobias vigila nuestra infraestructura y encuentra cada tornillo para optimizar el rendimiento de nuestros servidores. Debido a sus incansables esfuerzos, a menudo se le puede encontrar por la noche en Slack.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

Tu dirección de correo electrónico no se publicará. Los campos obligatorios están marcados con *.