Google PageSpeed Insights: ¿a qué velocidad funciona tu web?

Las páginas web que tardan en cargarse no solo irritan a los usuarios, sino que incluso Google prefiere no verlas. La velocidad de carga de una página web es, desde 2018, uno de los factores de po­si­cio­na­mie­n­to en Google. Eso significa que, ya sea en el ordenador o en el móvil, el algoritmo penaliza las páginas lentas, hasta el punto de que las páginas que tardan más de dos segundos en cargarse son to­ta­l­me­n­te ignoradas por los ra­s­trea­do­res. En cuanto a los usuarios, el 32 % también abandona las páginas cuyo tiempo de carga supera los tres segundos.

Por eso, Google ha añadido Google PageSpeed Insights a su re­pe­r­to­rio: con esta he­rra­mie­n­ta puedes analizar los tiempos de carga de una página web y, si es necesario, op­ti­mi­zar­los.

PageSpeed Insights es una he­rra­mie­n­ta de SEO de Google que calcula y evalúa, en primer lugar, el tiempo de carga de un URL. Para ello, basta con teclear la dirección deseada en el campo co­rre­s­po­n­die­n­te. A co­n­ti­nua­ción, se muestran los re­su­l­ta­dos, es decir, los pagespeed insights (detalles sobre la velocidad de la página), de forma muy intuitiva, tanto de la versión móvil como de la versión de es­cri­to­rio: para cambiar entre los re­su­l­ta­dos de una versión y otra solo hay que hacer clic en los símbolos de la barra superior. La he­rra­mie­n­ta es capaz de evaluar cualquier URL válido.

El análisis tiene en cuenta las ex­pe­rie­n­cias de usuarios reales de Chrome User Ex­pe­rie­n­ce (abreviado como CrUX). Se trata de datos que Google obtiene de usuarios que usan su navegador, Google Chrome, y que comparten vo­lu­n­ta­ria­me­n­te sus datos es­ta­dí­s­ti­cos.

Otra fuente de datos para el análisis es Li­gh­thou­se, una he­rra­mie­n­ta que evalúa el acceso, el re­n­di­mie­n­to y la facilidad de uso de la página que se desea analizar.

El resultado global del análisis de Google PageSpeed Insights se muestra en forma de pu­n­tua­ción de re­n­di­mie­n­to, en una escala de 0 a 100. Esta pu­n­tua­ción te permite hacerte una idea del re­n­di­mie­n­to en cuestión en pocos segundos. Sin embargo, además de este valor, el resultado completo aporta mucha más in­fo­r­ma­ción: de hecho, está formado por numerosos pa­rá­me­tros.

A co­n­ti­nua­ción, aparecen los datos de campo de CrUX (datos de los últimos 28 días), siempre y cuando los haya en relación con el URL es­pe­ci­fi­ca­do. Si no los hubiera, apa­re­ce­ría el mensaje “El informe ‘Ex­pe­rie­n­cia de Usuario de Chrome’ no tiene su­fi­cie­n­tes datos a tiempo real sobre la velocidad de esta página”.

Cuando, en cambio, sí hay datos de campo di­s­po­ni­bles de la página web, la eva­lua­ción se basa en los si­guie­n­tes pa­rá­me­tros:

• First Co­n­te­n­t­ful Paint (FCP): indica cuánto tarda la página web en mostrar co­m­ple­ta­me­n­te la primera imagen o el primer texto.
• First Input Delay (FID): mide el tiempo que ha de pasar para que un usuario pueda in­ter­ac­tuar con la página web.
• Largest Co­n­te­n­t­ful Paint (LCP): mide cuánto tarda la página web en mostrar el elemento más grande de su contenido.
• Cu­mu­la­ti­ve Layout Shift (CLS): mide el de­s­pla­za­mie­n­to ine­s­pe­ra­do de elementos de la página durante el periodo de carga.

Estos pa­rá­me­tros de los datos de campo se cla­si­fi­can, a su vez, según su velocidad:

Rápido (verde):

• FCP de entre 0 y 1 segundos
• FID de entre 0 y 0,1 segundos
• LCP de entre 0 y 2,5 segundos
• CLS de entre 0 y 10 por ciento
• Velocidad media (naranja):
• FCP de entre 1 y 3 segundos
• FID de entre 0,1 y 0,3 segundos
• LCP de entre 2,5 y 4 segundos
• CLS de entre 10 y 25 por ciento
• Lento (rojo):
• FCP de más de 3 segundos
• FID de más de 0,3 segundos
• LCP de más de 4 segundos
• CLS de más del 25 por ciento

Google PageSpeed Insights accede a los llamados Datos de ex­pe­ri­me­n­tos a través de la he­rra­mie­n­ta de código abierto Li­gh­thou­se, que evalúa el re­n­di­mie­n­to medio de la página web en cuestión haciendo un rastreo del URL.

Aquí en­co­n­tra­mos de nuevo la cla­si­fi­ca­ción en “rápido”, “velocidad media” y “lento”, así como los factores FCP, LCP y CLS. Sin embargo, en los datos de ex­pe­ri­me­n­tos estos pa­rá­me­tros se cla­si­fi­can según umbrales di­fe­re­n­tes. En este apartado, además, tenemos dos factores adi­cio­na­les: Time to in­ter­ac­ti­ve (TTI), que equivale al tiempo que tarda la página en ser capaz de in­ter­ac­tuar con el usuario; y el Total Blocking Time (TBT), es decir, la duración total del bloqueo.

El sexto parámetro de los datos de ex­pe­ri­me­n­tos es el Speed Index. Este índice mide la velocidad a la que se van mostrando los elementos visuales de la web durante la carga. Para ello, Li­gh­thou­se toma un vídeo del proceso de carga de la página en el navegador y calcula la tasa de fo­to­gra­mas por segundo.

Estos son los valores umbral de los datos de ex­pe­ri­me­n­tos:

• Rápido (verde):
• FCP de entre 0 y 2 segundos
• LCP de entre 0 y 2 segundos
• CLS de entre 0 y 10 por ciento
• TTI de entre 0 y 3,8 segundos
• TBT de entre 0 y 0,3 segundos
• Speed Index de entre 0 y 4,3 segundos
• Velocidad media (naranja):
• FCP de entre 2 y 4 segundos
• LCP de entre 2 y 4 segundos
• CLS de entre 10 y 25 por ciento
• TTI de entre 3,9 y 7,3 segundos
• TBT de entre 0,3 y 0,6 segundos
• Speed Index de entre 4,4 y 5,8 segundos
• Lento (rojo):
• FCP de más de 4 segundos
• LCP de más de 4 segundos
• CLS de más del 25 por ciento
• TTI de más de 7,3 segundos
• TBT de más de 0,6 segundos
• Speed Index de más de 5,8 segundos

Una de las prácticas funciones de Li­gh­thou­se es la muestra de capturas de pantalla, que ilustra con in­di­ca­cio­nes te­m­po­ra­les incluidas el proceso de carga de la página, es­pe­cia­l­me­n­te para el análisis de la Cu­mu­la­ti­ve Layout Shift (CLS).

El tiempo de carga de una página web es, desde hace años, un factor im­po­r­ta­n­te del po­si­cio­na­mie­n­to en bu­s­ca­do­res. Las guías de SEO (Search Engine Op­ti­mi­za­tion) cada vez hacen más hincapié en la in­flue­n­cia del tiempo de carga en el po­si­cio­na­mie­n­to. Sin embargo, el re­n­di­mie­n­to de un proyecto web no solo se refleja en cuánto tarda en cargarse, sino también en los tiempos de repuesta, el tamaño de la página y la velocidad de las descargas. Google tiene en cuenta todos estos factores a la hora de evaluar la página.

Si bien la velocidad de cada página web es relativa, ac­tua­l­me­n­te se habla de un tiempo medio de carga de entre 1,5 y 3 segundos. Por encima de este umbral, las páginas se co­n­si­de­ran lentas, mientras que los tiempos de carga ideales, propios de páginas rápidas, están por debajo. No obstante, estos valores varían a medida que la te­c­no­lo­gía avanza: el tiempo medio de carga de una página web en 2016 aún superaba los 3 segundos, por ejemplo.

Sin embargo, todas estas ve­lo­ci­da­des no bastan para que Google PageSpeed Insights evalúe po­si­ti­va­me­n­te la rapidez de una página. No se trata de contar cada mi­li­se­gu­n­do de tiempo de carga, sino de analizar la ex­pe­rie­n­cia global de los usuarios con la página. Este enfoque es es­pe­cia­l­me­n­te im­po­r­ta­n­te en el caso de las versiones móviles, cuyo re­n­di­mie­n­to es un factor de po­si­cio­na­mie­n­to en sí mismo para Google.

Por eso, el hecho de que PageSpeed Insights considere rápida la versión de es­cri­to­rio de una web no significa que pueda suponerse lo mismo de la versión móvil. Cada vez son más los usuarios que navegan en Internet desde su sma­r­t­pho­ne, por lo que no debemos me­no­s­pre­ciar en ningún caso el papel de las versiones móviles. A co­n­ti­nua­ción, pre­se­n­ta­mos algunas de las medidas más útiles para que también puedas ponerle buena nota a la versión móvil de tu página web:

• Elimina el Ja­va­S­cri­pt que no utilices, para reducir así los datos de ac­ti­vi­da­des de red.
• Sube las imágenes en formatos modernos como JPEG 2000, JPEG XR o WebP, que suelen ofrecer una mejor co­m­pre­sión que PNG o JPEG y, por lo tanto, permiten acelerar las descargas y reducir el consumo de datos.
• Da a las imágenes el tamaño adecuado para reducir los datos móviles y el tiempo de carga que consumen.
• Elimina los recursos que bloquean el rendering, es decir, la re­pre­se­n­ta­ción gráfica de las imágenes. Redacta el código Ja­va­S­cri­pt y el CSS im­po­r­ta­n­te en formato inline y descarta los scripts y los estilos pre­s­ci­n­di­bles.
• Elimina el código CSS que no utilices para evitar el consumo de datos in­ne­ce­sa­rio debido a la actividad de red.
• Codifica las imágenes de forma eficiente. Las imágenes op­ti­mi­za­das se cargan más rápido y consumen menos datos móviles.
• Utiliza la función CSS font-display para ase­gu­rar­te de que el texto se mantiene visible para el usuario mientras se cargan las fuentes ti­po­grá­fi­cas.
• Minimiza el efecto del código de terceros, que puede ra­le­n­ti­zar co­n­si­de­ra­ble­me­n­te el proceso de carga.
• Obtén datos es­ta­dí­s­ti­cos mediante una co­n­fi­gu­ra­ción eficiente de la caché. Si alargas la duración de tu memoria caché, los usuarios podrán acceder más rápido a la web a partir de su segunda visita.
• Descarta imágenes que no puedan vi­sua­li­zar­se.
• Comprime Ja­va­S­cri­pt.
• Activa la co­m­pre­sión de texto.
• Establece una pre­co­ne­xión con los orígenes ne­ce­sa­rios.
• Evita re­di­re­c­cio­na­mie­n­tos in­ne­ce­sa­rios a la página.

Los re­su­l­ta­dos que obtenga la versión móvil en Google PageSpeed Insights deberían ser tan im­po­r­ta­n­tes para el po­si­cio­na­mie­n­to como los de la versión de es­cri­to­rio. Sin embargo, en lo que respecta a la po­n­de­ra­ción exacta, Google no muestra sus cartas. Puesto que los re­su­l­ta­dos de PageSpeed se basan en gran medida en la ex­pe­rie­n­cia de usuario, suponemos que ocurre lo mismo en el caso del po­si­cio­na­mie­n­to web. No obstante, puesto que la re­le­va­n­cia y la calidad del contenido también afectan el po­si­cio­na­mie­n­to, una página web también puede conseguir un buen po­si­cio­na­mie­n­to a pesar de tener una velocidad de carga mediocre. En cualquier caso, obtendrás los mejores re­su­l­ta­dos si cuidas tanto los aspectos técnicos como el contenido de tu página web.

Los re­su­l­ta­dos Google PageSpeed Insights te permiten hacerte una idea del re­n­di­mie­n­to, los problemas y las po­si­bi­li­da­des de mejora de un URL es­pe­cí­fi­co o de un dominio entero. A co­n­ti­nua­ción, te pre­se­n­ta­mos tres aspectos clave para que mejores tu eva­lua­ción en PageSpeed Insights:

Las imágenes suelen ser las pri­n­ci­pa­les re­s­po­n­sa­bles del consumo de recursos de una página web: a menudo son demasiado grandes, su formato es inade­cua­do y, por si fuera poco, tampoco se ha acertado con el nombre de archivo. De penalizar este tipo de fallos no solo se encarga Google, sino también los usuarios, que pierden la paciencia si tienen que esperar varios segundos a que se carguen todas las imágenes.

La mayoría de las imágenes está en formato JPEG o PNG. Sin embargo, los formatos como JPEG 2000, JPEG XR y WebP son mucho más co­n­ve­nie­n­tes para las páginas web, ya que pueden co­m­pri­mi­r­se más fá­ci­l­me­n­te y sin que la calidad de imagen pague apenas por ello. Con estos nuevos formatos, una imagen en formato JPG de, por ejemplo, 440,7 kilobytes (KB), en JPEG 2000 solo re­que­ri­ría 135,1 KB. En conjunto, y es­pe­cia­l­me­n­te en páginas web con muchas imágenes, estas re­du­c­cio­nes suponen una gran di­fe­re­n­cia.

Hoy en día, en la era de las imágenes de alta re­so­lu­ción, ha cobrado especial im­po­r­ta­n­cia la co­m­pre­sión de cada una de las imágenes antes de subirlas a la página. Las imágenes con un tamaño de varios megabytes no son bie­n­ve­ni­das en los sitios web actuales. Los programas de edición de imágenes como Photoshop ofrecen funciones como “Guardar para web”, que permiten guardar las imágenes con una re­so­lu­ción más baja y op­ti­mi­za­da para su uso en una página web.

A veces, los pequeños detalles marcan la di­fe­re­n­cia. Es el caso del browser caching, que permite reducir la carga de tra­n­s­mi­sión de datos entre el servidor y el cliente, mejorando así la velocidad de carga de la página. Para no tener que descargar todos los archivos desde cero cada vez que se accede a la web en cuestión, el navegador puede acceder a los archivos guardados te­m­po­ra­l­me­n­te en la caché.

No obstante, la memoria caché solo funciona de forma óptima si el navegador sabe durante cuánto tiempo ha de guardar los archivos. Para que así sea, los archivos de una página web deben incluir una fecha de caducidad. Por ejemplo: puesto que el código HTML dinámico se modifica co­n­s­ta­n­te­me­n­te, por lo general debe ser guardado más a menudo que las imágenes.

La manera más habitual de adaptar el browser caching a las ne­ce­si­da­des de la web es la uti­li­za­ción del módulo “mod_expires” (al menos cuando se trata de páginas web alojadas en un servidor Apache). Con el comando “lfModule” puedes comprobar si el módulo ya está activado. Con “Ex­pi­re­s­B­y­T­y­pe”, en cambio, puedes acceder a los distintos tipos de archivo. A co­n­ti­nua­ción, puedes definir la fecha de caducidad usando “Access plus 7 days”. Al hacerlo, es­ta­ble­ce­rás un periodo mínimo de al­ma­ce­na­mie­n­to de los archivos en el navegador de siete días. Los archivos no se de­s­ca­r­ga­rán y guardarán de nuevo hasta que no haya tra­n­s­cu­rri­do dicho periodo, que también puedes definir de forma pe­r­so­na­li­za­da y para di­fe­re­n­tes tipos de archivo. Sin embargo, una semana es el periodo más habitual y da buenos re­su­l­ta­dos.

Una de las maneras en las que puedes activar el caching es in­tro­du­cie­n­do el siguiente código en el archivo .htaccess:

Esta co­n­fi­gu­ra­ción mejora si­g­ni­fi­ca­ti­va­me­n­te el tiempo medio de carga de una página web (su­po­nie­n­do que el usuario acceda a ella varias veces). Vale la pena echar un vistazo re­gu­la­r­me­n­te en Google PageSpeed Insights para ajustar los tiempos óptimos de cada tipo de archivo.

Este tema suele incluir muchos aspectos que requieren atención y mejora. La mayoría de páginas web se alojan en pla­ta­fo­r­mas de hosting co­m­pa­r­ti­do cuyos recursos son limitados, lo cual puede ra­le­n­ti­zar sus tiempos de acceso y de carga. Una de las so­lu­cio­nes a este problema es adquirir más capacidad de re­n­di­mie­n­to (CPU, memoria principal, etc.). Otra es tra­n­s­fe­rir la página web a un servidor dedicado. Si se opta por la segunda, sin embargo, es necesario dotar a la web del hardware adecuado. Un servidor de hosting adaptado a las ne­ce­si­da­des de la web puede mejorar eno­r­me­me­n­te su re­n­di­mie­n­to. Si quieres saber más y ver una co­m­pa­ra­ción directa de estas medidas, no te pierdas nuestro artículo “hosting co­m­pa­r­ti­do vs. hosting dedicado”.