Programacion Diaria
1 am. - 23 pm.

Rumberisima 92.3 FM

Publicado el Viernes, 07 de Mayo del 2021 rumberisima 923

Google pagespeed insights: la verdad sobre la puntuacion 100/100

  • rumberisma

MAR Soluciones Digitales

116 Visitas
Tecnologia

Google PageSpeed Insights es sin duda una herramienta útil para webmasters, desarrolladores y propietarios de sitios web de todo tipo. Sin embargo, hemos notado que mucha gente pasa horas obsesionada con la optimización de sus sitios, para tratar de obtener una puntuación de 100/100 en esta prueba.

La verdad es que no es así como se pretende utilizar Google PageSpeed Insights, ni tampoco es una búsqueda que valga la pena. Cuando se centra en la implementación de las recomendaciones de la plataforma en lugar de centrarse en el número de la parte superior de la página, creará muchos más beneficios para su sitio.

Esta publicación es una guía completa para utilizar Google PageSpeed Insights de la mejor manera posible. Explicaremos cómo utiliza Google tu puntuación, así como la forma de incorporar las recomendaciones que recibes.

Si aún no te has familiarizado con Google PageSpeed Insights, es una herramienta que se utiliza para comprobar el rendimiento de los sitios web. Puede introducir cualquier URL y hacerla analizar:

 

A continuación, Google proporciona una puntuación global de 100 para el sitio web que has probado, basada en varias de las mejores prácticas de optimización del rendimiento:

Junto con este resultado, también verás varias recomendaciones de Google sobre cómo mejorar tu rendimiento (y, por lo tanto, también tu puntuación de PageSpeed Insights):

A partir de 2018, las puntuaciones de PageSpeed Insights se calculan a través de Lighthouse, la herramienta automatizada de código abierto de Google para mejorar la calidad general de las páginas web. Esta plataforma puede evaluar todo tipo de factores, incluyendo el rendimiento, la accesibilidad, las aplicaciones web progresivas y más.

Para ver la evaluación completa de Lighthouse de su sitio, puede utilizar la herramienta de medición de Google:

Además de llevar a cabo una auditoría de rendimiento muy similar a la que realiza Google PageSpeed Insights, obtendrá puntuaciones en accesibilidad, mejores prácticas y optimización de motores de búsqueda (SEO).

Como mencionamos al principio de este post, vemos a muchos propietarios y desarrolladores de sitios web que se obsesionan por conseguir una puntuación perfecta en PageSpeed Insights. Desafortunadamente, esas personas tienden a pasar por alto el aspecto más importante de los resultados de la prueba: las recomendaciones.

Si bien es cierto que deberías esforzarte por mejorar los tiempos de carga de tu sitio web tanto como sea posible, conseguir un 100/100 en Google PageSpeed Insights no es realmente tan importante. Para empezar, no es ni siquiera la prueba de rendimiento del be-allend-allend-all.

A diferencia de PageSpeed Insights, Pingdom Tools le permite probar el rendimiento de su sitio desde varios lugares:

También puede realizar pruebas en plataformas como GTmetrix (que combina sus puntuaciones de PageSpeed Insights y YSlow) y WebPageTest. Lo más probable es que sus puntuaciones en estas diferentes herramientas no coincidan exactamente, lo que le muestra lo arbitrarios que pueden ser estos números.

Lo que realmente importa es la velocidad real de su sitio web. Para ponerlo en perspectiva, hemos visto sitios con tiempos medios de carga inferiores a 500 milisegundos (¡lo cual es extremadamente rápido!) que no tienen una puntuación de 100/100 en PageSpeed Insights.

El otro factor que debería influir en su enfoque de la optimización de la velocidad es el rendimiento percibido de su sitio. A tus visitantes no les importa cuál es tu puntuación de Google PageSpeed Insights. Sólo quieren poder ver su contenido lo más rápido posible.

El verdadero propósito de probar el rendimiento de su sitio con Google PageSpeed Insights no es conseguir una puntuación alta. En lugar de ello, se trata de encontrar puntos problemáticos en su sitio, para que pueda optimizarlos y disminuir tanto sus tiempos de carga reales como los percibidos.

Cómo utiliza Google PageSpeed Insights

Además de influir en la experiencia de usuario (UX) de su sitio, el rendimiento también juega un papel en el SEO. Dado que PageSpeed Insights está gestionado por el motor de búsqueda más grande y popular del mundo, es lógico que su puntuación pueda tener algún efecto en sus clasificaciones de la Página de Resultados de los Motores de Búsqueda (SERP) (al menos en el propio Google).

La realidad es que Google utiliza PageSpeed Insights para determinar las clasificaciones, más o menos. La velocidad del sitio es un factor de clasificación, simple y llanamente. El resultado de su prueba de rendimiento puede darle una idea bastante buena de su posición en ese frente.

Sin embargo, Google tiene en cuenta algo más que el número del círculo que aparece en la parte superior de los resultados de PageSpeed. Golpear un 100/100 no te garantizará un lugar en las SERPs.

Con eso dicho, usted todavía puede poner sus resultados de PageSpeed Insights a trabajar cuando mejorando su SEO. Por ejemplo, desde 2018, la velocidad de la página móvil ha sido un factor de ranking para Google. Notará que su prueba de rendimiento proporciona datos tanto para la versión de escritorio como para la móvil de su sitio:

Dado que más del 73% de los usuarios de Internet móvil afirman que se han encontrado con un sitio que tarda demasiado en cargarse, la información de la pestaña Google PageSpeed Insights Mobile tiene un valor incalculable. El uso de estas recomendaciones para reducir los tiempos de carga de los teléfonos inteligentes y otros dispositivos debería darle una ventaja competitiva.

Recomendaciones de Google PageSpeed Insights (24 formas de mejorar el rendimiento)

Hemos hablado mucho de las recomendaciones de Google PageSpeed Insights en esta publicación. Son la verdadera carne de sus resultados de las pruebas de rendimiento, y mucho más valiosos que su puntuación real. Por eso les hemos dedicado el resto de este puesto.

Sin embargo, antes de que nos sumerjamos en las sugerencias individuales, tendrá que entender la diferencia entre sus datos de campo y los datos de laboratorio. El primero compara tu sitio con otros en el Informe de Experiencia de Usuario de Chrome de los últimos 30 días.

También hay dos gráficos que muestran dónde cae el promedio de su pintura de primer contenido (FCP) y el primer retardo de entrada (FID):

En la imagen anterior, el FCP de nuestro sitio es aproximadamente igual al 45% de los sitios en el percentil 75, y nuestro FID es aproximadamente igual al 9% del percentil 95.

Datos de laboratorio muestra datos específicos para una carga de página simulada:

 

Notará que nuestros datos de campo y de laboratorio no match exactly. Eso es perfectamente normal. Los datos de laboratorio se crean bajo condiciones fijas, mientras que los datos de campo utilizan velocidades de carga reales recogidas a lo largo del tiempo.

Cuando se miran en combinación, los datos de campo y los datos de laboratorio deberían darle una idea de los tiempos de carga reales de su sitio. Como mencionamos anteriormente, esto es aún más importante que su puntuación global de PageSpeed, por lo que deberá prestar atención a estos números.

Una vez que haya considerado esta información, es el momento de empezar a mejorar el rendimiento de su sitio con las recomendaciones de Google PageSpeed.

1. Eliminar los recursos de bloqueo de la prestación

Una de las recomendaciones más comunes de Google PageSpeed Insights es la de eliminar los recursos de bloqueo del renderizado:

Esto se refiere a los scripts de JavaScript y CSS que impiden que su página se cargue rápidamente. El navegador del visitante tiene que descargar y procesar estos archivos antes de poder mostrar el resto de la página, por lo que tener muchos de ellos ‘encima del pliegue’ puede impactar negativamente en la velocidad de su sitio.

Puede obtener más información sobre este tema en nuestra guía para la eliminación de los scripts de bloqueo del renderizado. En lo que respecta a Google, hay dos soluciones que deberías considerar:

  • Si no tienes mucho JavaScript o CSS, puedes alinearlos para deshacerte de esta advertencia. Este proceso se refiere a la incorporación de su JavaScript y/o CSS en su archivo HTML. Puedes hacerlo con un plugin como Autoptimize. Sin embargo, esto sólo es válido para sitios muy pequeños. La mayoría de los sitios de WordPress tienen suficiente Javascript que este método podría en realidad ralentizarle.
  • La otra opción es diferir su JavaScript. Este atributo descarga su archivo JavaScript durante el análisis sintáctico de HTML, pero sólo lo ejecuta después de que el análisis sintáctico se haya completado. Además, los scripts con este atributo se ejecutan en orden de aparición en la página.

Encontrará una lista de los recursos más afectados por este tema debajo de la recomendación en los resultados de PageSpeed.

2. Evitar encadenar las solicitudes críticas

El concepto de encadenar peticiones críticas tiene que ver con el Camino de Rendimiento Crítico (CRP) y con la forma en que los navegadores cargan sus páginas. Ciertos elementos – como el JavaScript y el CSS que hemos discutido anteriormente – deben ser cargados completamente antes de que su página se haga visible.

Como parte de esta sugerencia, Google PageSpeed Insights le mostrará las cadenas de solicitudes en la página que está analizando:

Este diagrama le mostrará la serie de peticiones dependientes que deben ser cumplidas antes de que su página sea visible. También le dirá el tamaño de cada recurso. Lo ideal es que desee reducir al mínimo el número de solicitudes dependientes, así como su tamaño.

Varios métodos para lograr estos objetivos están cubiertos por otras recomendaciones discutidas en este post, incluyendo:

  • Eliminación de los recursos que bloquean el renderizado
  • Aplazamiento de las imágenes fuera de pantalla
  • Minimizando CSS y JavaScript

Además, puede optimizar el orden en el que se cargan los activos fijos para reducir la CRP. Esto significa mover el contenido de la parte superior de la página a la parte superior de su archivo HTML. Puede obtener más información sobre la optimización del CRP en nuestro post «Cómo to Optimize the Critical Rendering Path in WordPress«.

Es importante señalar que no hay un número mágico de cadenas de solicitud críticas en el que usted tenga que trabajar. Google PageSpeed Insights no cuenta esta auditoría como «aprobada» o «fallida», a diferencia de muchas de sus otras recomendaciones. Esta información se pone a su disposición para ayudarle a mejorar los tiempos de carga.

3. Mantenga los recuentos de solicitudes bajos y transfiera los tamaños pequeños

Cuantas más peticiones tengan que hacer los navegadores para cargar sus páginas, y cuantos más recursos devuelva su servidor en respuesta, más tiempo tardará su sitio web en cargarse. Por lo tanto, es lógico que Google te recomiende que minimices el número de solicitudes necesarias y que reduzcas el tamaño de tus recursos.

Al igual que la recomendación Evitar encadenar solicitudes críticas, ésta no resulta en un «aprobado» o «reprobado». En su lugar, simplemente verá una lista del número de solicitudes realizadas y sus tamaños:

No hay un número ideal de solicitudes o tamaños máximos a tener en cuenta. En su lugar, Google recomienda que establezcas esos estándares por ti mismo creando un presupuesto de rendimiento. Se trata de un conjunto de objetivos definidos que pueden estar relacionados con aspectos como:

  • Tamaño máximo de la imagen
  • El número de fuentes web utilizadas
  • Cuántos recursos externos llama a
  • El tamaño de los scripts y marcos

La creación de un presupuesto de desempeño le da un conjunto de estándares a los que debe rendir cuentas. Cuando usted se excede en su presupuesto, puede entonces tomar decisiones sobre si eliminar u optimizar los recursos para atenerse a sus pautas predeterminadas. Puedes obtener más información sobre la creación de uno en la propia guía de Google.

4. Minimizar CSS

Los archivos CSS suelen ser más grandes de lo necesario para facilitar su lectura a los humanos. Pueden incluir varios retornos de carro y espacios que no son necesarios para que los equipos comprendan su contenido.

Minimizar tu CSS es el proceso de condensar tus archivos eliminando caracteres, espacios y duplicaciones innecesarias. Google recomienda esta práctica porque reduce el tamaño de los archivos CSS y, por lo tanto, puede mejorar la velocidad de carga:

Recomendamos el uso de un plugin como Autoptimize o WP Rocket para minificar sus archivos CSS.

5. Minimizar JavaScript

Al igual que puedes reducir el tamaño de los archivos CSS mediante la minificación, lo mismo se aplica a tus archivos JavaScript:

Autoptimize o WP Rocket también pueden manejar esta tarea para su sitio de WordPress.

6. Eliminar el CSS no utilizado

Cualquier código en su hoja de estilo es contenido que tiene que ser cargado para que su página sea visible para los usuarios. Si hay un CSS en tu sitio que no es realmente útil, está poniendo una carga innecesaria en tu rendimiento.

Por eso Google recomienda eliminar cualquier CSS que no se utilice:

La solución aquí es esencialmente la misma que la de eliminar el bloqueo de renderizado de CSS. Puedes poner en línea o diferir los estilos de la forma que más te convenga para tus páginas. También puedes usar una herramienta como Chrome DevTools para encontrar CSS no utilizados que necesiten ser optimizados.

7. Minimizar el trabajo del hilo principal

El ‘hilo principal’ es el elemento principal del navegador del usuario que se encarga de convertir el código en una página web con la que los visitantes pueden interactuar. Analiza y ejecuta HTML, CSS y JavaScript. Además, se encarga de manejar las interacciones de los usuarios.

Esto significa que, cuando el hilo principal está trabajando a través del código de su sitio, no puede también manejar las peticiones de los usuarios. Si el trabajo de los hilos principales de su sitio tarda demasiado tiempo, esto puede resultar en un UX pobre y en tiempos de carga de página lentos.

Google PageSpeed marcará las páginas que tardan más de cuatro segundos en completar el trabajo del hilo principal y presentará una página web utilizable:

Algunos de los métodos utilizados para reducir el trabajo con los hilos conductores ya se han tratado en otras secciones de este puesto, entre ellos:

  • Minimizar su código
  • Eliminación del código no utilizado
  • Implementación del caching

Sin embargo, también puede considerar la división de código. Este proceso implica dividir el JavaScript en paquetes que se ejecutan cuando se necesitan, en lugar de requerir que los navegadores los carguen todos antes de que la página se vuelva interactiva.

Webpack se utiliza a menudo para implementar la división de código. Tenga en cuenta que se trata de una técnica bastante avanzada y que los principiantes deberían emprenderla solos.

8. Reducir el tiempo de ejecución de JavaScript

La ejecución de JavaScript es a menudo el contribuidor más prominente al trabajo de los hilos principales. PageSpeed Insights tiene una recomendación aparte para avisarle si esta tarea está teniendo un impacto significativo en el rendimiento de su sitio:

Los métodos sugeridos anteriormente para reducir el trabajo del hilo principal también deberían resolver esta advertencia en los resultados de PageSpeed.

9. Reducir los tiempos de respuesta del servidor (TTFB)

El Tiempo al Primer Byte (TTFB) es una medida del tiempo que tarda un navegador en recibir el primer byte de datos del servidor de su sitio web después de hacer una solicitud. Aunque esto no es lo mismo que la velocidad general de su sitio, tener un TTFB bajo es comprensiblemente bueno para el rendimiento de su sitio.

Por lo tanto, la reducción de los tiempos de respuesta del servidor es una de las recomendaciones de Google PageSpeed Insights. Si puede lograr un TTFB bajo, verá este mensaje en Auditorías Aprobadas:

Hay varios factores que pueden influir en su TTFB. Algunas estrategias para reducirlo incluyen:

  • Elección de un proveedor de alojamiento web de alta calidad
  • Uso de temas y plugins ligeros
  • Reducir el número de plugins instalados en su sitio web
  • Utilización de una red de entrega de contenido (CDN)
  • Implementación del cacheo del navegador
  • Selección de un proveedor de Sistema de Nombres de Dominio (DNS) sólido

Nuestro post en TTFB es un excelente recurso para obtener más detalles sobre la optimización en esta área.

10. Tamaño adecuado de las imágenes

Los archivos multimedia como las imágenes pueden ser un verdadero obstáculo para el rendimiento de su sitio. Dimensionarlas correctamente es una forma sencilla de reducir los tiempos de carga:

Si tu página incluye imágenes que son más grandes de lo necesario, se utiliza CSS para redimensionarlas adecuadamente. Esto lleva más tiempo que la simple carga de las imágenes en el tamaño correcto inicialmente, por lo que afecta al rendimiento de su página.

Para solucionarlo, puedes subir imágenes del tamaño adecuado o utilizar «imágenes de respuesta». Esto implica la creación de imágenes de diferente tamaño para varios dispositivos.

Puede hacerlo utilizando el atributo srcset, que se añade a las etiquetas

<img> para especificar archivos de imagen alternativos de diferentes tamaños. Los navegadores pueden leer esta lista, determinar qué opción es la mejor para la pantalla actual y ofrecer esa versión de su imagen.

Por ejemplo, digamos que tiene una imagen de encabezado y quiere que responda. Podrías subir tres versiones del mismo a 800, 480 y 320 píxeles de ancho. Entonces usted aplicaría el atributo srcset, así:

 

<img srcset="header-image-800w.jpg 880w,
		Header-image-480w.jpg 480w,
		Header-image-320w.jpg 320w"
	sizes="(max-width: 320px) 280px,
		(max-width: 480px) 440px,
		800px"
	src="header-image-800w.jpg">

 

El atributo srcset especifica los diferentes archivos disponibles, y el atributo sizes le dice a los navegadores cuál debe ser usado basado en el tamaño de la pantalla actual.

11. Diferir las imágenes fuera de pantalla

El proceso de diferir las imágenes fuera de la pantalla se conoce más comúnmente como «carga perezosa». Esto significa que en lugar de hacer que el navegador cargue todas las imágenes de una página antes de mostrar el contenido de la parte superior, sólo cargará las que sean inmediatamente visibles.

Una menor carga antes de que la página sea visible significa un mejor rendimiento, por lo que Google recomienda este método:

Hay varios plugins de WordPress hechos específicamente para la carga perezosa, incluyendo a3 Lazy Load y Lazy Load by WP Rocket. Varios plugins de optimización de imagen y rendimiento, como Autoptimize, también tienen funciones de carga lenta. Echa un vistazo a nuestra guía completa de imágenes y vídeos de Lazy Loading en WordPress.

 

12. Codificar eficientemente las imágenes

Como mencionamos anteriormente en este post, las imágenes tienen un impacto significativo en el rendimiento de su sitio. Una de las mejores prácticas de optimización más básicas que puede considerar es la compresión, que puede ayudar a reducir el tamaño de los archivos para que se carguen más rápidamente. También es el método principal para seguir la recomendación de Google de codificar eficientemente las imágenes:

La clave está en conseguir los tamaños de archivo más pequeños posibles, sin sacrificar la calidad de las propias imágenes. Los plugins como Imagify y Smush pueden ayudar en esta tarea. Puede aprender más sobre ellos en nuestra guía de optimización de imágenes.

Otras recomendaciones que influyen en el hecho de que «apruebe» o «suspenda» la auditoría de imágenes codificadas eficientemente incluyen:

  • Servir las imágenes en el tamaño correcto
  • Implementar la carga lenta (diferir las imágenes fuera de pantalla)
  • Conversión de imágenes a formatos de archivo de próxima generación, como WebP
  • Uso de formatos de vídeo para contenido animado, como los GIF

Además de comprimir sus imágenes, puede seguir los pasos para cumplir con estas sugerencias como se describe en otra parte de este post.

13. Servir la imagen en formatos de próxima generación

Hay algunos formatos de archivos de imagen que se cargan más rápidamente que otros. Desafortunadamente, no son los formatos PNG o JPEG más comunes. Las imágenes WebP se están convirtiendo en el nuevo estándar, y Google PageSpeed te informará si tus imágenes no se ajustan a él:

Esto puede parecer una recomendación difícil de cumplir, ya que es probable que ya tengas muchas imágenes en tu sitio de WordPress. Afortunadamente, hay plugins que pueden ayudar. Por ejemplo, tanto Imagify como Smush ofrecen una función de conversión a WebP.

14. Usar formatos de vídeo para el contenido animado

Los GIF pueden ser una forma efectiva de contenido visual en una variedad de situaciones. Las revisiones de los tutoriales, las reseñas y hasta las animaciones humorísticas pueden hacer que sus publicaciones sean más agradables y valiosas para los lectores.

Desafortunadamente, esos beneficios tienen un costo para su desempeño. Los GIF son exigentes en cuanto a su carga, por lo que PageSpeed Insights recomienda servir el contenido de vídeo en su lugar:

Desafortunadamente, la conversión de GIF a formatos de vídeo no es el más sencillo de los procesos. En primer lugar, tendrás que decidir qué tipo de vídeo quieres usar:

  • MP4: Produce archivos ligeramente más grandes, pero es compatible con la mayoría de los principales navegadores.
  • WebM: El formato de vídeo más optimizado, aunque tiene una compatibilidad limitada con los navegadores.

Una vez que haya tomado la decisión que tenga más sentido para su sitio, deberá convertir los formatos de archivo. La mejor manera de hacerlo es a través de la línea de comandos. Para empezar, instale FFmpeg. Esta es una herramienta de código abierto para la conversión de formatos de archivo:

 

A continuación, abra su interfaz de línea de comandos y ejecute el siguiente comando: