Latencia: la demora entre que un usuario envía una solicitud a una aplicación web y recibe una respuesta puede desempeñar un papel importante en el rendimiento del sitio web.
Al minimizarlo, puede asegurarse de que la solicitud de un usuario, ya sea que esté revisando un sitio de comercio electrónico o haciendo clic en un enlace interno, se satisfaga lo antes posible. Esto es clave para garantizar una experiencia sin problemas en el sitio web.
Hablaremos en este post cual es el retraso y como esta funcionando. Luego veremos algunas maneras de hacer mejorar el tuyo. Empecemos.
¿Qué es la latencia?
La latencia es el retraso entre el navegador que envía la solicitud al servidor y el procesamiento de la solicitud por parte del servidor en la red o conexión a Internet. Suele medirse en milisegundos.
La latencia se puede medir de dos maneras. El primero es el tiempo de ida y vuelta (RTT), o el tiempo que tarda la solicitud en transferirse del navegador al servidor y viceversa. El segundo es el tiempo hasta el primer byte (TTFB) o el tiempo entre que el navegador envía una solicitud al servidor y recibe el primer byte de datos.
El retraso asociado con la página HTML básica u otro recurso único puede parecer insignificante. Sin embargo, un retraso en el sitio web puede marcar una gran diferencia en la experiencia del usuario, ya que generalmente involucra muchas solicitudes de páginas HTML, así como CSS, scripts y archivos multimedia.
¿Qué causa el retraso?
La distancia es la principal causa de retraso. Cuanto mayor sea la distancia entre el navegador solicitante y el servidor que responde a esa solicitud, más tiempo tardarán los datos solicitados en viajar de un lado a otro.
Por lo tanto, los visitantes del sitio web de EE. UU. recibirán respuestas del centro de datos en Council Bluffs, Iowa (uno de los Ubicaciones de centros de datos de SiteGround), por ejemplo, antes que los visitantes del sitio web en Europa.
Considere el siguiente escenario: el navegador tarda 800 ms en enviar una solicitud al servidor y 900 ms en recibir una respuesta. En este caso, el retraso sería de 1,7 segundos.
Otras causas de retrasos incluyen el tamaño de los recursos solicitados y los problemas del usuario final. Por ejemplo, si un usuario solicita un sitio web con muchas imágenes, archivos CSS y JS, o contenido de varios sitios de terceros, el servidor tardará más en responder. O bien, el usuario puede estar usando un dispositivo con poca memoria, mala conexión a Internet o algún otro problema que aumenta la latencia.
¿Qué es una buena latencia?
Dado que la latencia es el tiempo que se tarda en completar un viaje de ida y vuelta entre el navegador y el servidor, en realidad no puede ser cero. Pero sería mejor si estuviera lo más cerca posible de cero.
Si bien una buena latencia, como una buena tasa de rebote, es relativa, cualquier valor inferior a 100 milisegundos es generalmente aceptable. El rango óptimo es aún más bajo, de 20 a 40 milisegundos.
¿Cómo funciona el retraso?
La latencia es el tiempo que transcurre desde que el usuario envía la solicitud hasta que recibe la respuesta. Cuando un usuario hace una solicitud, hay varios pasos involucrados antes de recibir una respuesta.
Tomemos el siguiente ejemplo. Supongamos que un usuario navega por un sitio de comercio electrónico y hace clic en una categoría. Para mostrar elementos de esta categoría en el navegador del usuario, se deben realizar los siguientes pasos:
- El usuario hace clic en una categoría.
- El navegador del usuario envía una solicitud al servidor del sitio de comercio electrónico.
- La solicitud va al servidor del sitio web con toda la información necesaria. Se necesita tiempo para proporcionar esta información. Cuanta más información se envía, más tiempo se tarda en transmitir.
- El servidor recibe la solicitud.
- El servidor acepta o rechaza la solicitud antes de procesarla. Cada uno de estos pasos lleva tiempo. La cantidad de tiempo depende del poder de procesamiento del servidor y la cantidad de información procesada.
- El servidor envía una respuesta al usuario final con la información necesaria sobre su solicitud.
- El navegador del usuario recibe una respuesta y muestra la categoría del producto.
Los pasos 1 a 4 representan la primera parte del ciclo de latencia. Los pasos 5-7 representan la segunda parte. Para obtener el retraso total de la solicitud, sume todos los incrementos de tiempo desde el momento en que un usuario hace clic en una categoría hasta que ve esos productos.
¿Por qué corregir los retrasos?
La velocidad de la página es crucial para la experiencia del usuario. Tanto es así que allá por 2010, Google anunció que la velocidad de la página fue un factor de clasificación de búsqueda. Y aunque no dieron un número exacto, dijeron que su objetivo era menos de medio segundo.
Si bien puede parecer difícil lograr este objetivo, hay varias formas de optimizar la velocidad de su sitio web. La forma principal es corregir los retrasos.
No puede eliminar el retraso por completo, pero puede minimizarlo. Aquí hay algunos pasos que puede seguir para minimizar las demoras.
¿Cómo mejorar el retraso?
- Usar CDN.
- Minimice el tamaño de los archivos CSS y JavaScript.
- Comprime tus imágenes.
- Reduzca la cantidad de recursos que bloquean el renderizado.
Si bien hay pasos que puede tomar para reducir la latencia de su parte, a continuación solo nos centraremos en las soluciones del lado del servidor.
1. Utilice CDN.
Dado que la latencia está relacionada con la distancia entre el navegador y el servidor, puede reducir la latencia acercándolos. Si bien no puede eliminar literalmente la ubicación del servidor y acercarla a todos los usuarios, puede usar una red de entrega de contenido (CDN).
Una CDN es un sistema de servidor distribuido diseñado para entregar contenido web a los visitantes lo más rápido posible, sin importar dónde se encuentren. Con CDN, no tiene que depender de un solo servidor para enviar su contenido a todo el mundo. En cambio, la CDN seleccionará diferentes servidores en la red que estén más cerca de cada visitante único para entregar los recursos solicitados.
Cuando el servidor más cercano al usuario entrega y muestra el contenido solicitado, ese servidor crea una copia de ese recurso de Internet. Cuando otro visitante en la misma parte del mundo intenta acceder a ese contenido, la CDN puede redirigir la solicitud desde el servidor de origen al servidor más cercano, y ese servidor puede entregar el contenido en caché mucho más rápido porque tiene una distancia más corta para viajar. Aquí hay una ilustración:
Hay dos formas de utilizar la CDN. Puede comprarlo de un proveedor de CDN como Cloudflare. O puede elegir una plataforma de desarrollo de sitios web con un CDN incorporado, por ejemplo Centro CMS.
2. Minimice el tamaño de los archivos CSS y JavaScript.
La mayoría de los sitios web contienen una combinación de HTML, CSS y JavaScript. El problema es que cada vez que el visitante carga la página, los archivos CSS y JavaScript deben enviarse desde el servidor al navegador. Esto significa más solicitudes HTTP, lo que puede aumentar significativamente la latencia. Si bien no puede eliminar CSS y JavaScript de sus páginas web, puede reducir el tamaño de estos archivos. Cuanto más pequeños sean los archivos, más rápido se transferirán del servidor al navegador.
La buena noticia es que puede automatizar este proceso con un minificador como Closure Compiler Service de Google. Simplemente agregue su código al compilador, haga clic en el botón «Compilar» y descargue el archivo abreviado.
3. Comprime tus imágenes.
Optimizar sus imágenes es otra forma de reducir las solicitudes HTTP de su sitio. Lo ideal es reducir el tamaño de cada imagen a menos de 100 KB. No tiene que reducir tanto si afecta la calidad de la imagen, pero intente mantenerlo lo más cerca posible de 100 KB.
Puede cargar, cambiar el tamaño y comprimir sus imágenes una a la vez usando una herramienta como aplastar o todo a la vez con una herramienta como pequeño png.
4. Reduzca la cantidad de recursos que bloquean el renderizado.
A medida que se carga la página, los navegadores descargan y analizan cada activo, incluidas imágenes, CSS y más, antes de mostrarlos al usuario de front-end. El navegador considera críticos algunos recursos, como las fuentes y los archivos JavaScript, por lo que el navegador deja de descargar y analizar otras partes de la página hasta que se procesan.
Estos recursos se denominan «recursos de bloqueo de procesamiento» y pueden ralentizar significativamente su sitio. Reducir la cantidad de recursos que bloquean el procesamiento en su sitio no reducirá técnicamente la latencia, pero mejorará su percepción del tiempo de carga de su sitio.
Minimizar los retrasos
Minimizar la latencia puede marcar una gran diferencia en el rendimiento y la experiencia del usuario de su sitio. Menos latencia ayuda a garantizar que los usuarios obtengan los recursos que desean lo más rápido posible, por lo que tienen más motivos para volver a su sitio una y otra vez.
Nota del editor: esta publicación se publicó originalmente en diciembre de 2020 y se actualizó para que sea más completa.