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

Tobias Schüring Actualizado por última vez el 21.10.2020
11 min.
Mensajes de error de GooglePageSpeed Insights
Actualizado por última vez el 21.10.2020

Google PageSpeed Insights es una excelente herramienta para darle una rápida visión general del potencial de optimizacióntus sitio . Hoy les mostraré cómo usar este potencial y aumentar su puntuación de PageSpeed. Pero no deberías seguir servilmente los resultados de Google. Porque los mensajes de error de PageSpeed son no siempre es útil.

Hace algún tiempo, nuestro colega Caspar Hübinger una de las entradas de su blogdigamos, palabras muy claras para su Google PageSpeed Insights-resultado encontrado. Y critica no sólo la herramienta, sino también el uso de la herramienta por los usuarios. Porque si no sabes cómo interpretar y corregir las sugerencias de optimización individual, puedes perderte rápidamente en la caza sin sentido de una calificación de 100. Pero eso sería imprudente. Porque los utópicos altos índices de Google PageSpeed suelen ser una pérdida de tiempo. Más importante es la optimización del tiempo de carga.

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

Pero antes de mostrarte cómo interpretar los mensajes de error individuales y cómo corregir los errores, me gustaría explicarte cómo utilizar Google PageSpeed Insights correctamente. Porque hemos visto a menudo que los usuarios están muy fijos en su puntuación de PageSpeed sin tener en cuenta el tiempo de carga de la suyasitio .

Si esta sección no te interesa, Sólo sáltatelo. y aprender directamente a arreglar 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 en los mensajes de error de GooglePageSpeed Insights . La herramienta de Google no mide el parámetro más importantetus sitio : el tiempo de carga de la página. Para medir esto correctamente, recomiendo webpagetest.org.

Sólo si se tiene en cuenta el tiempo de carga de la página desde el principio del tus sitio proceso de optimización, se pueden hacer afirmaciones significativas sobre el éxito de la optimización. Porque el objetivo de toda optimización debe ser siempre una mejor experiencia para el usuario. En el caso de la optimización del rendimiento, esto es, por supuesto, el tiempo de carga de la página y el tiempo de carga de la página percibido.

¡AVISO!

Mida siempre primero el tiempo de carga de la página antes de optimizar el rendimientotus sitio . Esta es la única manera de estimar cuán exitosa fue la optimización.

Desde la perspectiva del usuario, un tiempo de carga de la página más rápido y un tamaño de página más pequeño son siempre una ventaja. La paciencia y la capacidad de atención del usuario medio está disminuyendo constantemente (como muestra este estudio de Microsoft) - esto es particularmente crucial para el comercio electrónico - y cada vez más visitantes vienen a través de dispositivos móviles. Ya en 2016 El 56 por ciento de los alemanes usan Internet regularmente a través de teléfonos inteligentes o tabletas llamado. Las velocidades de conexión y los volúmenes de datos no siempre son ilimitados. Por lo tanto, las páginas delgadas y rápidas son apropiadas.

Google PageSpeed, sin embargo, sólo da pistas sobre el tus sitio potencial de optimización y permite sólo unas pocas conclusiones sobre la experiencia del usuario. El bajo valor informativo de los mensajes de error de Google PageSpeed se ve reforzado por el hecho de que la herramienta no se puede apagar en ciertas áreas o sólo con un considerable gasto adicional.

Por ejemplo, la referencia al almacenamiento en caché del navegador siempre aparecerá cuando se integren los recursos externos, incluidos los propios servicios de Google. Pero estos recursos no pueden ser tus sitio cubiertos en absoluto por el almacenamiento en caché de los navegadores. El mensaje de error no tiene relevancia para la experiencia tus sitiodel usuario, sino que se produce por la lógica de la propia herramienta. En el peor de los casos, el mensaje se interpreta como si no estuviera activo el almacenamiento en caché del navegador.

Así que no juzgues principalmente por el rating de Google, sino por el tiempo de carga. Esto es la única variable realmente importante.

¿Pero qué hay de mi ranking en Google?

El ejemplo de la falta de almacenamiento en caché del navegador deja muy claro por qué no debe inquietarse por un resultado supuestamente malo de PageSpeed.

Por tus sitio ejemplo, si ha incluido Google Maps o Google Analytics, causarán el siguiente mensaje de error:

Típicos mensajes de error de GooglePageSpeed Insights: Se alega que el almacenamiento en caché del navegador no se utiliza adecuadamente

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

Así que cada vez que PageSpeed Insights probamos el nuestrositio , este punto se marca con tiza. Eso significa que sabemos que este factor siempre distorsiona negativamente nuestros resultados y por lo tanto simplemente lo ignoramos.

Para el SEOtus sitio , esto significa que el tiempo de carga y la experiencia del usuario son también mucho más importantes para el ranking de Google que la calificación real de PageSpeed.

Porque si optimizas el tiempo de cargatus sitio , editarás automáticamente muchas de las áreas que son importantes para Google. Así que mejorar el tiempo de carga y la puntuación de Google PageSpeed están relacionados de alguna manera.

Pero en mi opinión no deberías perderte en la búsqueda de un rating de 100.

Pero ahora a los pasos de optimización!

Mensaje de error 1: Comprimir el CSS

En nuestra experiencia, este es uno de los mensajes de error más aterradores de GooglePageSpeed Insights.

¡Cállate Google PageSpeed! Arreglar 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 compresión reducirá el número de caracteres de los documentos. Esto reduce el tamaño del archivo. Por ejemplo, se eliminan los comentarios, los espacios y el formato.

Aplicación: Aunque esta referencia tiene un efecto disuasorio, la aplicación es muy simple. En principio, hay dos posibles soluciones para este caso: Si usted mismo se ajusta a CSS, puede reducir el número de archivos CSS manualmente y crear un Forma abreviada uso. También puedes usar los archivos CSS a través de herramientas en línea, como Compresor CSS o Minificador CSS...reducirlo a mano.

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

Por supuesto que también existe la cómoda solución de usar la miniaturización de CSSPlugins en WordPress . Algunos Plugins de ellos hacen directamente un envoltorio completo y pueden comprimir y optimizar no sólo el CSS, sino también el JavaScript y el HTML.

Más información

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

Con HTTP/2 no necesariamente tiene sentido combinar el CSS

El MinifaldaPlugins que acabamos de mencionar es muy utilizado. Porque son cómodos y se encargan de la compresión y el resumen del CSS (y mucho más) de forma totalmente automática. Hasta hace poco, la fusión de archivos CSS también tenía mucho sentido. Ahora es diferente: Desde el Estándar HTTP/2 los navegadores son capaces de cargar múltiples archivos simultáneamente desde el servidor web.

Esto significa que ya no es necesario combinar los datos, ya que el HTTP/2 permite intercambiar varios paquetes de datos simultáneamente. HTTP/2 debe haber sido configurado hoster por , por ejemplo, y sólo se puede iniciar con Certificado SSL puede ser usado.

Así que antes de decidirte por uno Plugin con varias docenas de funciones y opciones de configuración, piensa cuidadosamente si lo necesitas en absoluto. Especialmente si crees que puedes optimizar el CSS por ti mismo.

Porque uno adicional Plugin puede tu sitio hacerte más lento en ciertas circunstancias. Especialmente si las otras funciones del todoterrenoPlugins no pueden desarrollar todo su potencial.

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

Este mensaje también hace sudar a muchos usuarios, porque no es tan fácil de implementar y es también una de las eternas críticas de Google PageSpeed.

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

Significado: Una página web se construye en un cierto orden. Esta orden de carga puede ser optimizada. PageSpeed casi siempre se queja de que los archivos CSS bloquean este orden de carga óptimo. Esto es cierto incluso para las páginas que ya están muy bien optimizadas (como muestra el caso de Caspar Hübinger). Sin embargo, la nota 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 un elemento se cargue - por ejemplo, un color de fondo - no está todavía disponible en el momento en que el elemento se carga. Por lo tanto, no se mostrará hasta que se cargue el comando CSS correspondiente. Esto aumenta el tiempo de cargatus sitio, pero sobre todo influye en la experiencia del usuario, ya que el tiempo de carga sitio se siente más largo.

Implementación: Una solución común es implementar una regla empírica: CSS en la cabecera. Esto significa que mueves el código CSS del cuerpo del documento HTML, el , al principio del documento, el , y incluyes allí como .

Este ejemplo deja claro lo que quiero decir. El fragmento de código a continuación define nuestro color de fondo específico para el blog. El



Puede implementar esta medida de optimización de dos maneras: Puedes tocar el código tú mismo y mover el código CSS en el encabezado, o puedes dejar que uno Plugin haga el trabajo. De nuevo, puedes usarPlugins WordPress Minimizar mejor Continúa.

Mensajes de error PageSpeed Insightsde Google - extracto de PluginBetter WordPress Minify

El MinifaldaPlugin muestra en las opciones por ejemplo, qué archivos CSS ya han sido movidos al encabezado. También podrías añadir manualmente más recursos de CSS aquí.

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

La Plugin Autoptimización, por otro lado, da un giro para mejor: Aquí se seleccionan las opciones para todos los archivos CSS no 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: Codificando las imágenes eficientemente

También en este punto, hay muchas quejasPageSpeed Insights. Sin embargo, este caso es casi siempre rápido y fácil de aplicar y suele aportar ventajas tangibles en cuanto al tiempo de carga.

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

Significado intencional: Muchos usuarios subestiman el papel del tamaño de la imagen en el tiempo de carga de su sitio. Las fotos son a menudo uno de los mayores frenos en el tiempo de carga. Aunque sólo se guarden pequeñas cantidades de datos en imágenes individuales, el volumen total guardado puede sumar una cantidad considerable de datos.

Debido a que una imagen rara vez es sólo una imagen. WordPress genera automáticamente varias miniaturas de la imagen al subirla. Así que si no usas los originales de la tus página de inicio, sino versiones más pequeñas de ellos, es decir, miniaturas o Imágenes destacadasentonces, por supuesto, estos también deben ser optimizados. De una imagen tan rápidamente varios archivos, que también traen consigo una carga de datos múltiples.

Implementación: En principio, tiene dos opciones para optimizar las tu imágenes. O bien optimizas las imágenes antes de la subida o después o durante la subida. El primero lo puedes hacer a través de herramientas en línea o fuera de línea, el segundo lo haces a través de las correspondientes WordPress Plug-ins de mejora de imagen.

Si puedes integrar sensatamente la compresión en tu flujo de trabajo, tiene sentido optimizar las imágenes antes de subirlas. Para este propósito hay herramientas en línea, como Pulpo.io. O puede reducir la calidad y por lo tanto el tamaño tus del archivo de las imágenes fuera de línea, por ejemplo directamente en Photoshop. De esa manera ahorras extra Plugin y te mantienes tu sitio delgado.

La solución más cómoda es, por supuesto, unaPlugin... Los complementos como Optimus o Smush optimizar no sólo la imagen principal, sino también todas las variaciones de la misma. Smush también es capaz de optimizar todas tu las imágenes existentes después.

Entre otras cosas, Pluginstrabajan con un llamado "compresión sin pérdidas". Esto significa que aunque el tamaño del archivo de las imágenes se reduce, 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 tus sitio reducir significativamente el tiempo de carga.

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

Significado: Ya has reducido las imágenes y el CSS tus sitio tanto como ha sido posible. ¡Eso es! Pero este no es el final de la historia. Porque ahora puedes usar otro mecanismo de compresión. Probablemente conoces este proceso por descargar grandes paquetes de datos: Normalmente están en forma comprimida y con cremallera. Esto hace que los datos sean más pequeños durante la descarga y por lo tanto la descarga es más rápida. Sin embargo, los paquetes de datos todavía tienen que ser descomprimidos después de la descarga. Exactamente lo mismo ocurre durante la construcción de la página: El servidor web entrega los paquetes de datos en forma comprimida, 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á establecida en el lado del servidor, o tienes que activarla tú mismo. Si eres un RAIDBOXES cliente, no tienes que preocuparte por nada. Porque tenemos el particularmente fuerte Compresión de brotli activa.

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


 mod_gzip_on Sí
 mod_gzip_dechunk Sí
 mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^texto/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Codificación de contenido:.*gzip.*
 
 
 
 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
 

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

En mi opinión, la referencia al almacenamiento en caché del navegador es, con mucho, la más molesta de GooglePageSpeed Insights. Porque sólo puedes configurar el caché del navegador para tus propios recursos. El almacenamiento en caché del navegador no es posible para los recursos externos.

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

Significado: El almacenamiento en caché del navegador significa que el navegador tus sitio guarda una versión estática y no tiene que solicitar al servidor web una visita repetida, sino que la versión sitio ya está cargada.

Implementación: El tu hoster cacheo del navegador ya está habilitado en el lado del servidor, o puedes configurarlo manipulando el archivo .htaccess (recuerda: esta configuración sólo funciona en los servidores web Apache). El código de muestra que figura a continuación establece el caché del navegador en un mes, por ejemplo, es decir, la versión estática tus sitio se almacena en el navegador del visitante durante un mes.


ExpiresActive On
ExpiraPor defecto "acceso 60 segundos".
ExpiraByType image/jpg "access plus 1 month
ExpiraByType image/jpeg "access plus 1 month
ExpiraByType image/gif "access plus 1 month
ExpiraByType image/png "access plus 1 month
ExpiraByType image/ico "access plus 1 month
ExpiraByType text/css "access 1 month
ExpiresByType text/javascript "access 1 month
ExpiresByType aplicación/javascript "acceso 1 mes
ExpiresByType application/x-shockwave-flash "access 1 month

También aquí se aplica: Si usted es un RAIDBOXES cliente, entonces el almacenamiento en caché del navegador ya está activo por defecto.

Mis 2 centavos: Sin el caché todo es nada

Bueno, ahora has optimizado las imágenestus sitio , reducido el CSS, comprimido y puesto en el orden correcto y has hecho que el tus visitante del navegador las guarde en cachésitio . Todas estas medidas acortan el tus sitiotiempo de carga de la página.

Significado intencional: Sin un caché adecuado, sin embargo, estás perdonando mucho de este potencial. El caché es y sigue siendo, con mucho, el factor de rendimiento más importante. Un caché almacena el contenido de su sitio web WordPress sitio y se asegura de que la página entera no tenga que ser recargada cada vez. En su lugar, una versión estática, ya renderizada, de su página se entrega desde un caché. Esto evita el lento PHP y la base de datos en particular.

Aplicación: También en este caso se aplica lo tu hoster siguiente: o bien una caché del lado del servidor o puedes usar un cachéPlugin. Aquí hay algunos muy poderososPlugins, que almacenan grandes partes tus sitio y conducen a una reducción significativa del tiempo de carga para los visitantes recurrentes del sitio web.

La alta potencia de la cachéPlugins es también su mayor debilidad. Puede ser que el almacenamiento en cachéPlugin tu sitio para los visitantes primerizos se ralentice inicialmente. Cuanto más complicado tu sitio sea tu tu blog, más complicado y extenso debe ser el motor de caché que lo almacena. Esto es especialmente relevante para las tiendas.

Si tienes un sitio web comparativamente simple, las soluciones minimalistas pueden ser mejores que el almacenamiento en caché de todo. Una de estas Plugins soluciones delgadas es, por ejemplo habilitador de la caché.

Debe tener en cuenta que el almacenamiento en caché tambiénPlugins suele utilizarse para reducir y fusionar CSS o JavaScript. Por lo tanto, deberías comprobar si tu elPlugin caching no hace innecesaria la Plugins optimización del 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 aportan alguna otra ventaja de rendimiento.

Conclusión: Moverse Pluginsmucho con sólo unos pocos

Ya lo has notado al leer: Para la optimización del CSS, las imágenes y la optimización del orden de carga hay Pluginsque te quitará mucho trabajo de las manos. Pero no todo el trabajo. También el caching.Plugins proporcionan rápidamente un efecto notable, pero a veces son muy extensos y ofrecen muchas opciones de configuración y funciones parcialmente redundantes.

Asegúrate de mirar de cerca los Pluginsque usas. Sólo si sabes lo que pasa cuando usas ciertas funciones, puedes optimizar con sensatez. Sobrecargar a los sitio de la optimización...Plugins tiende a traer poco.

Y debes asegurarte de medir correctamente tu los éxitos cuando optimizas. No importa si optimizas a mano o a través Plugin de Internet. Usar PageSpeed Insights como primer punto de orientación para identificar los tus sitio puntos débiles. Entonces mide el tus sitio tiempo de carga antes de la optimización. Sólo después de que se haya registrado la situación inicial tiene sentido tu sitio optimizar paso a paso. Porque sólo así, si se conoce el tiempo de carga antes y después de cada paso de optimización, se puede determinar lo que las medidas de optimización individuales han logrado.

Como administrador de sistemas, Tobías vigila nuestra infraestructura y encuentra todas las formas posibles de optimizar el rendimiento de nuestros servidores. Debido a sus incansables esfuerzos, a menudo se le Slack encuentra por la noche.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con * marcado.