Rendimiento web

El rendimiento web se refiere a la velocidad con la que las páginas web se descargan y se muestran en el navegador del usuario . La optimización del rendimiento web (WPO, por sus siglas en inglés) , u optimización de sitios web, es el campo del conocimiento relacionado con la mejora del rendimiento web.

Se ha demostrado que las velocidades de descarga de sitios web más rápidas aumentan la retención y la lealtad de los visitantes ^{[ 1 ] [ 2 ]} y la satisfacción del usuario, especialmente para usuarios con conexiones a Internet lentas y aquellos en dispositivos móviles . ^{[ 3 ]} El rendimiento web también conlleva una menor cantidad de datos que viajan a través de la red, lo que a su vez reduce el consumo de energía y el impacto ambiental de un sitio web. ^{[ 4 ]} Algunos aspectos que pueden afectar la velocidad de carga de la página incluyen la caché del navegador/servidor, la optimización de imágenes y el cifrado (por ejemplo, SSL ), que puede afectar el tiempo que tardan las páginas en renderizarse. El rendimiento de la página web se puede mejorar mediante técnicas como la caché multicapa, el diseño ligero de los componentes de la capa de presentación y la comunicación asíncrona con los componentes del lado del servidor.

En la primera década de existencia de la web, la mejora del rendimiento web se centró principalmente en optimizar el código de los sitios web y superar las limitaciones del hardware. Según el libro Web Performance Tuning de Patrick Killelea, publicado en 2002, algunas de las primeras técnicas empleadas consistían en usar servlets o CGI sencillos, aumentar la memoria del servidor y buscar la pérdida y retransmisión de paquetes. ^{[ 5 ]} Si bien estos principios constituyen ahora gran parte de la base optimizada de las aplicaciones de internet, difieren de la teoría de optimización actual en que se hacía mucho menos esfuerzo por mejorar la velocidad de visualización del navegador.

Steve Souders acuñó el término "optimización del rendimiento web" en 2004. ^{[ 6 ]} En ese momento, Souders hizo varias predicciones sobre el impacto que la WPO, como "industria emergente", tendría en la web, tales como que los sitios web serían rápidos por defecto, la consolidación, los estándares web para el rendimiento, los impactos ambientales de la optimización y la velocidad como factor diferenciador. ^{[ 7 ]}

Un punto importante que Souders destacó en 2007 es que al menos el 80% del tiempo que se tarda en descargar y visualizar un sitio web está controlado por la estructura del front-end. Este tiempo de latencia se puede reducir conociendo el comportamiento típico del navegador, así como el funcionamiento de HTTP . ^{[ 8 ]}

La optimización del rendimiento web mejora la experiencia del usuario (UX) al visitar un sitio web y, por lo tanto, es muy valorada por diseñadores y desarrolladores web . Estos emplean diversas técnicas que agilizan las tareas de optimización web para reducir los tiempos de carga de las páginas. Este proceso se conoce como optimización de front-end (FEO) u optimización de contenido. La FEO se centra en reducir el tamaño de los archivos y minimizar el número de solicitudes necesarias para que se cargue una página determinada.

Además de las técnicas que se enumeran a continuación, el uso de una red de distribución de contenido (CDN), un grupo de servidores proxy distribuidos en diversas ubicaciones alrededor del mundo, es un sistema de distribución eficiente que elige un servidor para un usuario específico en función de la proximidad de la red. ^{[ 9 ]} Por lo general, se selecciona el servidor con el tiempo de respuesta más rápido.

Las siguientes técnicas son tareas de optimización web de uso común y son ampliamente utilizadas por los desarrolladores web:

Los navegadores web abren conexiones TCP ( Protocolo de Control de Transmisión ) independientes para cada solicitud HTTP ( Protocolo de Transferencia de Hipertexto ) que se envía al descargar una página web. Estas solicitudes suman el número de elementos de la página necesarios para la descarga. Sin embargo, un navegador solo puede abrir un número determinado de conexiones simultáneas a un único servidor. Para evitar cuellos de botella, se reduce el número de elementos individuales de la página mediante la consolidación de recursos, que consiste en agrupar archivos pequeños (como imágenes) en un solo archivo. Esto reduce las solicitudes HTTP y el número de viajes de ida y vuelta necesarios para cargar una página web.

Las páginas web se construyen a partir de archivos de código como JavaScript y HTML . A medida que las páginas web se vuelven más complejas, también lo hacen sus archivos de código y, por consiguiente, sus tiempos de carga. La compresión de archivos puede reducir el tamaño de los archivos de código en aproximadamente un 40 % ^{[ 10 ]} , mejorando así la capacidad de respuesta del sitio.

La optimización del almacenamiento en caché web reduce la carga del servidor, el uso del ancho de banda y la latencia . Las CDN utilizan software de almacenamiento en caché web dedicado para guardar copias de los documentos que pasan por su sistema. Muchas plataformas web, como SiteGround , IONOS , Wix y Hostinger , dependen de CDN globales y tecnologías de almacenamiento en caché para ofrecer cargas de página más rápidas en diferentes regiones geográficas. ^{[ 11 ] [ 12 ] [ 13 ]}

Las solicitudes posteriores a la caché pueden ser atendidas si se cumplen ciertas condiciones. Las cachés web se ubican en el lado del cliente (posición directa) o en el lado del servidor web (posición inversa) de una CDN . Los navegadores web también pueden almacenar contenido para su reutilización a través de la caché HTTP o la caché web . Las solicitudes que realizan los navegadores web generalmente se enrutan a la caché HTTP para validar si una respuesta almacenada en caché puede usarse para satisfacer una solicitud. Si se encuentra dicha coincidencia, la respuesta se obtiene de la caché. Esto puede ser útil para reducir la latencia de la red y los costos asociados con la transferencia de datos. La caché HTTP se configura mediante encabezados de solicitud y respuesta.

La minificación de código distingue las discrepancias entre el código escrito por los desarrolladores web y cómo los elementos de red lo interpretan. La minificación elimina comentarios y espacios adicionales, así como nombres de variables complejos, para minimizar el código, reduciendo el tamaño de los archivos hasta en un 60 %. Además del almacenamiento en caché y la compresión, las técnicas de compresión con pérdida (similares a las utilizadas con archivos de audio) eliminan información de encabezado no esencial y reducen la calidad de imagen original en muchas imágenes de alta resolución. Estos cambios, como la complejidad de los píxeles o las gradaciones de color, son transparentes para el usuario final y no afectan notablemente la percepción de la imagen. Otra técnica es la sustitución de gráficos rasterizados por gráficos vectoriales independientes de la resolución . La sustitución vectorial es más adecuada para imágenes geométricas simples.

La carga diferida de imágenes y videos reduce el tiempo de carga inicial de la página, el peso inicial de la página y el uso de recursos del sistema , lo que tiene un impacto positivo en el rendimiento del sitio web. ^{[ 14 ]} Se utiliza para diferir la inicialización de un objeto hasta el momento en que se necesita. El navegador carga las imágenes en una página o publicación cuando se necesitan, por ejemplo, cuando el usuario se desplaza hacia abajo en la página, y no todas las imágenes a la vez, que es el comportamiento predeterminado y, naturalmente, lleva más tiempo.

Dado que los navegadores web utilizan múltiples conexiones TCP para las solicitudes de usuario paralelas, pueden producirse congestión y monopolización de los recursos de red por parte del navegador. Debido a que las solicitudes HTTP/1 conllevan una sobrecarga asociada , el rendimiento web se ve afectado por el ancho de banda limitado y el aumento del uso.

En comparación con HTTP/1, HTTP/2

• es binario en lugar de textual
• está totalmente multiplexado en lugar de ordenado y bloqueado
• Por lo tanto, se puede utilizar una conexión para el paralelismo.
• Utiliza compresión de encabezado para reducir la sobrecarga.
• permite a los servidores "enviar" respuestas de forma proactiva a las cachés de los clientes ^{[ 15 ].}

En lugar del servidor de alojamiento de un sitio web, las CDN se utilizan junto con HTTP/2 para brindar un mejor servicio al usuario final con recursos web como imágenes, archivos JavaScript y archivos de hojas de estilo en cascada (CSS), ya que la ubicación de una CDN suele estar más cerca del usuario final. ^{[ 16 ]}

En los últimos años, se han introducido varias métricas que ayudan a los desarrolladores a medir diversos aspectos del rendimiento de sus sitios web. En 2019, Google introdujo métricas como Tiempo hasta el primer byte (TTFB), Primer dibujo con contenido (FCP), Primer dibujo (FP), Retraso de la primera entrada (FID), Desplazamiento acumulativo del diseño (CLS) y Dibujo con contenido más grande (LCP), que permiten a los propietarios de sitios web obtener información sobre problemas que podrían perjudicar el rendimiento de sus sitios web, haciéndolos parecer lentos o lentos para el usuario. Otras métricas, como Request Count (número de solicitudes necesarias para cargar una página), ^{[ 17 ]} DOMContentLoaded (tiempo en que el documento HTML se carga y analiza completamente, excluyendo hojas de estilo CSS, imágenes, etc.), ^{[ 18 ]} Above The Fold Time (contenido visible sin desplazamiento), ^{[ 19 ]} Round Trip Time, ^{[ 19 ]} número de Render Blocking Resources (como scripts, hojas de estilo), ^{[ 20 ]} Onload Time, Connection Time, Total Page Size ayudan a proporcionar una imagen precisa de las latencias y ralentizaciones que se producen a nivel de red y que podrían ralentizar un sitio. ^{[ 21 ] [ 22 ] [ 23 ]}

Las principales bibliotecas de JavaScript para frontend, como React , ^{[ 24 ]} NuxtJS ^{[ 25 ]} y Vue , ^{[ 26 ]} proporcionan módulos para medir métricas como TTFB, FCP, LCP, FP, etc. Google publica una biblioteca, core-web-vitals, que permite medir fácilmente estas métricas en aplicaciones frontend. Además, Google también ofrece Lighthouse, un componente de las herramientas para desarrolladores de Chrome, y PageSpeed ​​Insights, un sitio que permite a los desarrolladores medir y comparar el rendimiento de su sitio web con los mínimos y máximos recomendados por Google. ^{[ 27 ]}

Además, herramientas como el Monitor de red de Mozilla Firefox ayudan a comprender las ralentizaciones a nivel de red que pueden ocurrir durante la transmisión de datos. ^{[ 21 ]}