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