20 formas de optimizar los resultados en Google PageSpeed Insights

¿Qué es pagespeed y por qué debemos mencionarlo?

En pocas palabras, la velocidad de la página es una herramienta que mide el tiempo que tarda un sitio web en cargarse por completo. ¿Te preguntas por qué es tan importante? Hay al menos dos razones principales que debemos mencionar.

En primer lugar, la experiencia del usuario; cuanto menor sea el tiempo que se necesita para cargar el sitio web, mejor será la primera impresión del usuario y menor será la posibilidad de abandono. Un estudio realizado en 2017 por Google y SOASTA Research muestra que la tasa de rebote puede aumentar hasta en un 32% si el sitio web tarda 3 segundos en cargar en lugar de 1.

Además, si la tasa de rebote es demasiado alta, Google podría considerar tu web hostil para el usuario y evitar que aparezca en los resultados de búsqueda.

Esto nos lleva a la segunda razón por la cual la velocidad de la página es tan importante: los motores de búsqueda. Cuanto más rápido se cargue tu web, más alto lo colocará Google en los resultados de búsqueda orgánicos, por lo que la velocidad de la página tiene un verdadero impacto en el posicionamiento.

¿Qué herramientas funcionan mejor para mejorar el rendimiento web?

Hay muchas herramientas diferentes para el análisis de velocidad de página disponibles en el mercado. Uno de los más populares es probablemente el PageSpeed Insight de Google. Es una herramienta gratuita que analiza la velocidad de carga de cualquier sitio web en función de su dirección URL. Además, los resultados se proporcionan tanto para las versiones móviles y de escritorio con respecto a sus diferentes requisitos.

Google proporciona resultados en una escala de 1-100 que representan el rendimiento de tu sitio web:

0-49 pts – malo (el resultado sale rojo)
50-89 pts – mediocre (el resultado aparece en naranja)
90-100 pts – bueno (el resultado aparece en verde)
Sin embargo, no es solo el resultado lo más importante, también debes prestar atención a las recomendaciones que brinda la herramienta.

¿Cómo mejorar tus resultados en Google PageSpeed Insights?

La velocidad de carga del sitio web se ve afectada por muchos factores. A continuación te mostramos una lista de los más importantes, así como algunos consejos sobre cómo optimizar rápidamente los resultados.

1.- Eliminar recursos de bloqueo de renderizado

Para que el navegador represente el sitio web, es necesario crear un árbol DOM como parte del análisis HTML. Por eso, cada vez que el navegador detecta un script, tiene que parar y completar ese proceso antes de continuar. En caso de un script externo, el navegador también debe detenerse para descargarlo. El problema aquí es asegurarse de que el código HTML se carga primero después el, JavaScript.

La solución más fácil para evitar este problema es (en el caso de una secuencia de comandos pequeña) inyectar la secuencia del script o utilizar etiquetas asíncronas y diferidas. Recuerde colocar el script antes de cerrar la etiqueta del cuerpo.

2.- Evita encadenar solicitudes críticas

Este punto se refiere a cómo se prioriza el script. Las cadenas de solicitudes críticas son una colección de solicitudes de red dependientes cruciales para el proceso de carga de la página. En general, cuanto mayor sea la longitud de la cadena y mayores sean los tamaños de los archivos descargados, menor será el rendimiento del sitio. Para reducir el impacto negativo de este factor en el rendimiento de la página, minimiza la cantidad de recursos críticos suspendiendo sus descargas o etiquetándolas como asíncronas. Los recursos críticos deben moverse más arriba en la estructura.

3.- Mantén los recuentos de solicitudes bajos y los tamaños de transferencia pequeños

Otra recomendación que Google PageSpeed Insights puede ofrecer es mantener el número de consultas y tamaños de archivo lo más pequeños posible, esto significa reducir su número y tamaño al mínimo necesario para que el sitio funcione correctamente. Para cumplir con estos requisitos, primero debes limitar la cantidad de fuentes de la web, reducir la cantidad de scripts descargados de fuentes externas. Además, debes asegurarte de que la compresión y la optimización de tus archivos se realicen correctamente. Ampliaremos este punto en las siguientes secciones con respecto a los tipos de archivos específicos.

4.- Minificar CSS / JavaScript

La esencia de este proceso es comprimir el código fuente eliminando caracteres innecesarios o reemplazar nombres largos de variables con equivalentes (es decir, x, y, z). Este cambio no afecta la funcionalidad de la página en sí, sino que solo reduce el peso y el tamaño del código. Para minimizar el código fuente, usa programas como WebPack, ParcelJS o prueba los compresores online y los plugins de WordPress, por ejemplo. Autooptimize.

5.- Elimina el CSS no utilizado

La implementación de esta idea se basa en dos instancias: la eliminación de clases innecesarias si no se usan en la pestaña dada o la eliminación del código HTML que ya no se usa activamente para que no cargue archivos innecesarios. En este caso, puede ser útil usar ChromeDev Tools, que puede indicar la cantidad de datos no utilizados en la pestaña de fuentes.

6.- Minimizael trabajo del hilo principal

El hilo principal es lo que vuelve a mezclar el código en un sitio web y se encarga en todas las interacciones del usuario. Las formas de corregir el rendimiento web descritas en esta sección están directamente relacionadas con la minificación y eliminación del código no utilizado antes mencionado. Además, se recomienda utilizar la memoria caché durante la implementación de esta idea.

7.- Reduce el tiempo de ejecución de JavaScript

Para minimizar el tiempo de carga del JavaScript, es necesario reducir su tamaño y asegurarse de que no se ejecute como parte del hilo principal.

8.- Reduce los tiempos de respuesta del servidor (TTFB)

Un servidor de alta calidad es crucial para mantener una buena velocidad de carga para tu web. Para mantener esa velocidad lo más alta posible, es bueno asegurarse de que el servidor esté cerca del usuario. Si esa no es una opción, se debe implementar CDN (Content Delivery Network). Otra cosa importante es la carga: el servidor no puede sobrecargarse con la cantidad de sitios web que se ejecutan en él. Elegir el mejor proveedor de hosting / alojamiento también es algo que hay que tener en cuenta.

9.- Mantén el tamaño adecuado de las imágenes.

Los archivos gráficos son cruciales para el tiempo de carga de la página. Deben ajustarse a un tamaño y una resolución apropiados antes de cargarse en el sitio web o debemos utilizar el atributo srcset si es imposible cargar el tamaño de imagen correcto.

10.- Diferir imágenes fuera de pantalla

Para optimizar el proceso de carga de la página, también debes asegurarte de que solo se carguen las imágenes que están actualmente en la ventana del usuario. Para este propósito, utilizamos el atributo nativo loading = «lazy» (solo para Chrome). También puedes usar bibliotecas JavaScript listas para usar que cargarán la imagen cuando se detecte en la ventana gráfica del usuario.

11.- Codificación eficiente de imágenes

Para lograr altos en la prueba Page Speed se requiere una codificación de imagen efectiva. Se puede obtener comprimiendo imágenes, manteniendo los tamaños correctos mencionados anteriormente y utilizando nuevos formatos de imagen, p.e. webp.

12.- Usa los formatos de imagen de próxima generación

Google nos anima a alejarnos de los formatos de imagen ineficientes como * jpg o * png y reemplazarlos con formatos modernos, es decir, * jpg2000 o * webp. Realizar esto afectará positivamente el resultado de la prueba.

13.- Usa formatos de video para contenido animado

De manera similar a lo anterior, Google fomenta el uso de formatos de video modernos. * Webm y * mp4 ya que se consideran los más efectivos. Por supuesto, también debe cuidar una compresión adecuada.

14.- Asegúrate de que el texto permanezca visible durante la carga de Webfont

Durante el proceso de carga de la página, el texto que ha sido diseñado con fuentes específicas no se mostrará hasta que esté completamente cargado. Para reducir el tiempo de espera y habilitar una visualización de texto inmediata (hasta que se carguen los archivos de fuentes deseados), usa el atributo font-display swap.

15.- Habilita la compresión de texto

Para reducir el peso de los archivos que componen una web, usa la denominada compresión GZIP. Esto te permite reducir la carga antes de enviarla al usuario. También tiene un efecto directo en el aumento de la velocidad de la página. El método más efectivo es agregar una regla en el archivo .htaccess o usar plugins de WordPress como w3 total cache.

16.- Evita el redireccionamientos de página

Cada redirección posterior ralentiza la velocidad de carga de la página. Para evitar esto, debes indicar con precisión los enlaces a las ubicaciones de los archivos seleccionados. Es particularmente importante evitar las redirecciones en los recursos necesarios para su ruta de acceso de representación crítica (CRP).

17.- Sirve archivos estáticos con una política de caché eficiente

Otra forma de aumentar la velocidad de la página es servir archivos estáticos con una política de caché efectiva. El uso de archivos de caché del navegador permitirá una carga más rápida de la página en visitas posteriores, ya que el usuario no tendrá que descargar constantemente los archivos que ya están en el caché del navegador. El método más efectivo es agregar reglas (control de caché y expires) en el archivo .htaccess.

18.- Reduce el impacto del código de terceros

Tener demasiados scripts de sitios externos puede reducir la velocidad de carga de la página. Para evitar esto, debes limitar la descarga (es decir, incluir botones para compartir, incrustar videos, iframes). Si ya se usan en la web y no puedes limitar su cantidad, te recomendamos mejorar su proceso de carga mediante el uso de los atributos asíncrono / diferido y de preconexión o para alojarlos en tu servidor

19.- Evita enormes cargas útiles de red

Como recomienda Google, el tamaño total de los archivos no debe exceder los 1600 kB. ¿Qué debes hacer para lograr este estado de cosas?

  • Aplica compresión de imagenes / gráficos
  • Aplica compresión del código JavaScript y CSS
  • Usa formatos next gen
  • Ten una política de caché válida

20.- Evita un tamaño excesivo de modelo de objeto de documento (DOM)

Para evitar lo anterior, limita el anidamiento de las etiquetas HTML. No debe haber 1.500 nodos en una página a la vez, un elemento no debe tener más de 60 nodos y la profundidad no debe exceder los 32 nidos.

Google PageSpeed Insights: asegura tu web

Google PageSpeed Insights es, sin duda, una herramienta útil tanto para programadores como para propietarios de webs. Te permite el control sobre una medida importante del rendimiento web, que es la velocidad de carga de la página. Lo más importante es que ofrece recomendaciones de nuestro sitio web, que pueden traducirse significativamente en un sitio web más rápido. La consecuencia será una reducción en la tasa de rebote y un crecimiento económico medible.

¿Necesitas más consejos?

Deja un comentario