¿Qué es velocidad de carga web y qué impacto tiene sobre el UX de nuestra web?

Si intentar abrir una página web que no termina de cargarse, la experiencia de usuario que tienes con respecto a esa página es nefasta. Por el contrario, si la página carga rápido y bien, la experiencia será mucho mejor. ¿Qué es lo que determina si los elementos de la página aparecen antes o después? Su velocidad web de carga.

No solo influye este dato en que se pueda ver una página antes o después. También en cómo reacciona el internauta ante ella. Por tanto, es un concepto que profesionales y estudiantes de distintas disciplinas, no solo del diseño web multidispositivo, tienen que tener en cuenta. Las campañas de publicidad también incluyen en muchos casos el desarrollo de webs y tienen que saber qué es lo que puede influir en el comportamiento de quienes accedan a ellas.  Descubre a qué nos referimos exactamente cuando hablamos de velocidad de carga web y hasta qué punto impacta en la experiencia de usuario.

¿Qué es la velocidad de la web?

La velocidad de una web es, en esencia, el tiempo que tarda en cargar una página y estar completamente disponible. Es decir, lo que tarda en aparecer todo su contenido en el navegador, para que quien abre la página pueda verlo. 

Eso sí, no hay que confundir la velocidad de una página con la de una web. Una web puede estar compuesta por una sola página o por varias, y cada una de ellas puede tener una velocidad de carga diferente. Por eso la velocidad de una web es solo una muestra de la velocidad que tiene toda la web. No obstante, dado que en el desarrollo de una web se suele emplear habitualmente la misma estructura, y a que sus páginas suelen tener diversos elementos similares para mantener una uniformidad, la variación entre la velocidad de las páginas de la web acostumbra a ser mínima. 

¿Cuánto influye el tiempo de carga web en la experiencia de usuario?

El tiempo de carga de una web, como hemos visto, influye bastante en la experiencia de usuario. Cuando un internauta navega no quiere pasar tiempo sin hacer nada esperando a que cargue una página. Y si la web tarda en cargarse, empeorará su opinión sobre la página. Incluso, si tarda demasiado, es posible que salga de ella y no espere a que se cargue.

Buscará lo que necesita en otra página que cargue más rápido. Así de importante es el tiempo de carga web en la experiencia de usuario. A menor tiempo de carga, mejor experiencia de usuario. Por el contrario, cuando mayor sea este, peor experiencia tendrá el internauta que quiere acceder a ella. 

¿Qué importancia tiene la velocidad web para Google?

Uno de los elementos que Google tienen en cuenta para clasificar a las páginas web que hay en internet es su velocidad. Tanto, que si quieres que una página aparezca en la primera página de los resultados de búsqueda cuando un internauta quiera localizar webs de temas relacionados con los que aparecen en ella, tienes que intentar que sea la menor posible. 

Esto se debe a que Google quiere siempre que los internautas tengan la mejor experiencia posible al navegar. Y cuanto menos tarda una web en cargar, mejor será en general esta experiencia. Por eso le gustará más a Google. 

La velocidad de carga está relacionada con otro concepto: la tasa de rebote de una página. Este, que también es importante para Google, aumenta cuando un usuario sale de una página sin haber realizado ninguna acción en ella. En el caso de que una página tarde en cargar, los usuarios suelen salir de ella sin verla. Por lo tanto, sube su tasa de rebote. Y cuanto mayor sea esta, más la penalizará Google en los resultados. 

¿Cómo medir la velocidad web para Google?

Para medir la velocidad de carga web para Google puedes utilizar diversas herramientas, creadas tanto por Google como por otras empresas desarrolladoras. Eso sí, en todos los casos tienes que insertar la URL de la página en el espacio indicado por la herramienta para que le comuniques la web cuya velocidad de carga quieres medir. 

La más conocida de esta herramientas está desarrollada por la propia Google: Google Page Speed Insights. A continuación te mostramos las bases de su funcionamiento: 

Google Page Speed Insights y los Core Web Vitals

La herramienta Page Speed insights está desarrollada para analizar páginas web, y como hemos mencionado, nos menciona su velocidad de carga. Pero no solo eso. Además, localiza los problemas que pueden estar influyendo en la ralentización de su velocidad de carga, y los indica, junto con las mejoras que puedes acometer para eliminarlos y optimizar así la velocidad de carga. 

Se trata de una herramienta bastante exhaustiva, y es también probablemente la que otorga puntuaciones de velocidad más bajas. Pero también es muy útil, gracias a sus recomendaciones para mejorar. Merece la pena mencionar que distingue entre las versiones de las webs desarrolladas para escritorio y para navegación con dispositivos móviles. Por eso, los resultados mostrarán dos puntuaciones distintas. Es más probable que la versión con mayor puntuación sea la de escritorio, y que tengas que optimizar, en caso de ser necesario, más elementos en la versión para móviles de la web. 

En cuanto a los Core Web Vitals, hacen referencia a un nuevo paso de Google para dar un empujón a las velocidades de carga de las webs. Con ellos, la compañía quiere fijar una serie de criterios sencillos sobre lo que se pueden considerar una experiencia web buena, en cuanto a rapidez y usabilidad. Son tres, y cada uno está relacionado con un aspecto de gran influencia en la velocidad web. La primera es LCP (Largest Contenful Paint), que se encarga de medir cuánto tiempo tardan en cargar los contenidos de una página. Su valor marca el tiempo que tarda el componente de contenido mayor de lo que se ve en pantalla sin hacer scroll en cargar. Puede ser tanto una imagen como un vídeo o un párrafo de texto. Si su valor es bueno, será inferior a 2,5 segundos.

La segunda es FID (First Input Delay), y se encarga de medir la responsividad de la página que está analizando. Es decir, la posibilidad que tiene de interactuar con ella con rapidez. Mide el tiempo que transcurre desde que un internauta hace algo en ella hasta que el navegador responde a lo que ha hecho. Tiene que ser menos que 0,1 segundos para que se considere un buen tiempo. 

En cuanto a la tercera, es CLS (Cumulative Layout Shift), y mide el nivel de estabilidad visual de una página. Es decir, la frecuencia con la que los elementos de una página cambian de posición en función de la carga que va realizando su contenido. También mide cómo de grandes son estos cambios. A mayor movimiento, mayor puntuación, y por tanto peor resultado. Cuando al web se carga, se suma la puntuación obtenida por sus elementos. Esta debería ser también inferior a 0,1. 

Pingdom

Otra de las herramientas encargadas de medir la velocidad de una web más utilizadas es Pingdom. Menos estricta que Google Page Speed insights, indica el valor de distintos elementos de una página relacionada con su velocidad. Entre ellos está su grado de rendimiento, cuyos resultados muestra en primer lugar. Ofrece datos sobre el tamaño de una página y el número de peticiones que recibe, además del tiempo de carga que tiene. 

Uno de sus puntos fuertes es que permite efectuar la carga desde diferentes puntos del planeta. De esta manera puedes ver cuánto tarda la página en cargarse si se solicita su carga desde Asia, Europa o Estados Unidos, entre otros lugares. 

GTMetrix

Esta herramienta de medición de la velocidad de carga ofrece dos veriones. La completa es de pago, mientras que otra, con menos información, es gratuita. A pesar de que la totalidad de los detalles aparece en la de pago, la versión libre de cargos ofrece detalles suficientes para conocer hasta qué punto una página tiene una buena velocidad de carga o necesita mejorar.

¿Cómo rebajar la carga de velocidad web con efectividad?

Si la velocidad de carga de tu web no es satisfactoria, hay varias medidas que puedes tomar para reducirla. De esta manera conseguirás no solo que esté disponible al completo antes, sino que también lograrás mejorar la experiencia de usuario, y que la página le agrade más a Google. Estas son algunas de las principales medidas que puedes tomar para conseguirlo

Aprovechar la caché del navegador

La caché del navegador sirve para almacenar en un dispositivo el contenido de una web a la que se quiera acceder. Así, cuando se repite una visita a una página que está en caché del navegador, tardará menos en cargarse. Este almacenamiento se suele hacer de manera automática, pero puedes darle un empujoncito para facilitarlo mediante el uso de distintas herramientas a la hora de desarrollar la página.

Por ejemplo, en el caso de desarrollarla con Wordpress puedes utilizar diversos plugins específicos para optimizar el cacheado de páginas, como W3 Total Cache. 

Minify o minificar HTML, Javascript y CSS

La minificación o minimización de elementos HTML, Javascript y CSS de una página consiste en reducirlos, eliminando diversos elementos del código que no son necesarios, como los espacios en blanco. Para hacerlo tienes varias alternativas. Una de ellas la ofrece la herramienta GTMetrix que hemos mencionado. En ella basta con insertar la URL de la página a optimizar. Aparecerán los archivos que puedes optimizar para reducir su velocidad de carga. Selecciona la opción para acceder a su versión minificada con un click y descarga los archivos minificados. Acto seguido, con un cliente FTP sube estos archivos al espacio en el que está almacenada la página y sobreescribe con estos ficheros los originales. 

Este sistema puede resultar un poco complicado, así que si no te atreves, puedes utilizar algunas herramientas específicas para realizar esta tarea. Por ejemplo, la utilidad Minify Code. Está desarrollada para Wordpress, y sirve para minificar HTML, CSS y Javascript de manera independiente. 

Para utilizarla solo tienes que descargar los archivos a minificar. Haz una copia de seguridad de cada uno por precaución. Después copia su contenido y pégalo en la herramienta. Después pega el código obtenido en el archivo descargado en sustitución del original y súbelo a la carpeta en la que estaba almacenado. 

Disminuye los redirects 301 y 302

Si una página web tiene muchas redirecciones aumentará su tiempo de carga. Esto se debe a que cuando se produce una redireción, hay que esperar a que se responda la solicitud de carga. Así que si tu página tiene este problema tendrás que reducirlos.

Optimizar las imágenes para la web

Uno de los principales elementos que influye en la velocidad de carga de una web es el tamaño de sus imágenes. Lógicamente, cuanto más grandes son, más tardarán en cargar. Por eso hay que optimizarlas para reducir si tiempo de carga. 

Esto no quiere decir que las imágenes vayan a perder calidad de imagen, ni mucho menos. Para ello puedes utilizar herramientas de conversión a otros formatos más ligeros, que te dejarán rebajar su tamaño sin tocar sus dimensiones (o rebajarlas a las que desees) ni reducir su calidad. Encontrarás varias gratuitas online. También puedes, en caso de que utilices Wordpress, utilizar algún plugin específico para ello. 

Eliminar los recursos que bloqueen el renderizado web

Los recursos que obstaculicen el renderizado de la web también ralentizarán su carga, empeorando la experiencia de sus visitantes y penalizando su SEO. Cuando se da este problema, los navegadores postergan la renderización de los contenidos mientras el navegador está descargando los ficheros que no se necesitan de manera inmediata. 

Para que la parte visible de una página se cargue con más rapidez, lo que puedes hacer es posponer la carga de los recursos y archivos que no se necesitan en un primer momento. Nuevamente, si creaste la web con Wordpress, puedes utilizar diversos plugins para conseguirlo. Por ejemplo, Autoptimize. 

Activar la compresión Gzip

Este paso es uno de los más eficaces para mejorar la velocidad de carga de una página. Para ello tienes que activar la compresión Gzip en el servidor web que tengas la página. De esta manera, quienes accedan a la página recibirán sus archivos comprimidos. No te preocupes por cómo los verán, porque los navegadores actuales cuentan con soporte para este tipo de compresión, y lo tienen activado por defecto. 

Activar la extensión Keep Alive

Al habilitar esta extensión estarás contribuyendo a mejorar no solo la velocidad de carga de una página, sino que también mejorarás su rendimiento. Si está activa, esta extensión permite que una página se cargue con solo hacer una conexión TCP. Lo normal es que esté activado por defecto. Pero si no lo está, puedes activarlo. Para saber si lo está necesitarás herramientas como GTMetrix. Si lo está, recibirás una puntuación del 100% en el apartado que lo indica. 

Si no es así tendrás que habilitarlo, para lo que necesitas modificar el código de, por ejemplo, el archivo .htaccess. Para ello tendrás que insertar la siguiente línea de código en su contenido: <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>. Esto bastará para servidores Linux. En caso de que el servidor sera Windows, podrás habilitarlo a través de la línea de comandos, con la siguiente orden: appcmd set config /section:httpProtocol /allowKeepAlive:true.

Eso sí, en caso de que no tengas conocimientos de desarrollo o no te atreves a hacer estos cambios, lo mejor es que te ayude un experto. 

Instalar un CDN

Mediante la instalación de un CDN, compuesto por una red de servidores seguros distribuidos en diversos puntos del planeta, consigues acceso a servidores configurados para que se encarguen de entregar contenido a gran velocidad y sin apenas latencia. 

Un CDN funciona almacenando copias de diversos elementos de una página. En concreto, los estáticos: fotos, vídeos o elementos Javascript, entre otros. De esta manera, los visitantes de una web, al intentar acceder a una página recibirán estos contenidos desde el servidor más cercano del CDN a donde se encuentran. Así reducen su velocidad de carga. 

Configura un AMP o un diseño responsive para la versión Mobile

La versión AMP de una página es la versión creada específicamente para dispositivos móviles de una página. Se trata de una opción desarrollada por Google para optimizar la carga de webs en móviles. Puede hacerse, si utilizas un CMS, mediante un plugin específico para ello. Lo hará automáticamente. 

También puedes desarrollar una web para que sea responsiva. Es decir, para que se adapte al dispositivo con el que la estás abriendo en cada momento. Así conseguirás que cargue más rápido en móviles y tablets. 

Estas son solo algunas de las medidas que puedes tomar para mejorar la velocidad web de carga de tus páginas, pero hay muchas otras. Como verás, todo tiene solución. Anímate a reducir el tiempo de carga web de tus páginas, y verás cómo mejora la experiencia de usuario de sus visitantes.