Rendimiento web

El rendimiento web se refiere a la velocidad con la que se descargan y se muestran las páginas web en el navegador web del usuario . La optimización del rendimiento web (WPO) , u optimización de sitios web , es el campo de conocimiento que se ocupa de aumentar el rendimiento web.

Se ha demostrado que las velocidades de descarga más rápidas de un sitio web aumentan la retención y la lealtad de los visitantes ^{[1] [2]} y la satisfacción del usuario, especialmente para los usuarios con conexiones a Internet lentas y aquellos que usan dispositivos móviles . ^[3] El rendimiento web también conduce a que menos datos viajen a través de la web, 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 el caché del navegador/servidor, la optimización de imágenes y el cifrado (por ejemplo, SSL), que pueden afectar el tiempo que tardan las páginas en renderizarse. El rendimiento de la página web se puede mejorar mediante técnicas como el caché de varias capas, el diseño liviano de los componentes de la capa de presentación y la comunicación asincrónica 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 del sitio 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 utilizadas consistían en utilizar servlets simples o CGI, aumentar la memoria del servidor y buscar la pérdida y retransmisión de paquetes. ^[5] Aunque estos principios ahora comprenden gran parte de la base optimizada de las aplicaciones de Internet, difieren de la teoría de optimización actual en que se intentó mucho menos 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 optimización del rendimiento web (WPO) como "industria emergente" traería a la web, como sitios web rápidos por defecto, consolidación, estándares web para el rendimiento, impactos ambientales de la optimización y la velocidad como diferenciador. ^[7]

Un punto importante que Souders planteó en 2007 es que al menos el 80% del tiempo que lleva descargar y ver un sitio web está controlado por la estructura del front-end. Este retraso se puede reducir si se tiene en cuenta el comportamiento típico del navegador, así como el funcionamiento del protocolo HTTP . ^[8]

La optimización del rendimiento web mejora la experiencia del usuario (UX) cuando visita un sitio web y, por lo tanto, es muy solicitada por los diseñadores y desarrolladores web . Emplean varias técnicas que agilizan las tareas de optimización web para disminuir los tiempos de carga de las páginas web. Este proceso se conoce como optimización de front-end (FEO) u optimización de contenido. La FEO se concentra en reducir el tamaño de los archivos y "minimizar la cantidad 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 (un grupo de servidores proxy distribuidos en varias 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 a la red. Normalmente, 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 de Protocolo de control de transmisión (TCP) independientes para cada solicitud de Protocolo de transferencia de hipertexto (HTTP) enviada al descargar una página web. Estas solicitudes suman el número de elementos de página necesarios para la descarga. Sin embargo, un navegador está limitado a abrir solo un cierto número de conexiones simultáneas a un único host. Para evitar cuellos de botella, el número de elementos de página individuales se reduce mediante la consolidación de recursos, mediante la cual los archivos más pequeños (como imágenes) se agrupan 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 lenguaje de marcado de hipertexto (HTML). A medida que las páginas web se vuelven más complejas, también lo hacen sus archivos de código y, en consecuencia, sus tiempos de carga. La compresión de archivos puede reducir los archivos de código hasta en un 80 por ciento, 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 almacenar copias de los documentos que pasan por su sistema. Las solicitudes posteriores del caché se pueden cumplir si se cumplen ciertas condiciones. Los cachés web se encuentran en el lado del cliente (posición delantera) 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 del caché HTTP o el caché web . Las solicitudes que realizan los navegadores web normalmente se enrutan al caché HTTP para validar si se puede utilizar una respuesta almacenada en caché para cumplir una solicitud. Si se produce dicha coincidencia, la respuesta se cumple desde el caché. Esto puede ser útil para reducir la latencia de la red y los costos asociados con la transferencia de datos. El caché HTTP se configura mediante encabezados de solicitud y respuesta.

La minimización de código distingue las discrepancias entre los códigos escritos por los desarrolladores web y la forma en que los elementos de la red interpretan el código. La minimización elimina los comentarios y los espacios adicionales, así como los nombres de las variables para minimizar el código, lo que reduce 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 que se utilizan con los archivos de audio) eliminan la información de encabezado no esencial y reducen la calidad de la 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 de forma notable 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 la más adecuada para imágenes geométricas simples. ^{[ cita requerida ]}

La carga diferida de imágenes y vídeos reduce el tiempo de carga inicial de la página, su peso inicial y el uso de los recursos del sistema, todo lo cual tiene un impacto positivo en el rendimiento del sitio web. ^[9] Se utiliza para posponer la inicialización de un objeto hasta el momento en que se lo necesita. El navegador carga las imágenes de una página o publicación cuando son necesarias, como 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 varias conexiones TCP para solicitudes de usuarios en paralelo, pueden producirse congestiones 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á completamente multiplexado en lugar de ordenado y bloqueado.
• Por lo tanto, 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 los cachés de los clientes ^[10]

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. ^[11]

En los últimos años, se han introducido varias métricas que ayudan a los desarrolladores a medir varios aspectos del rendimiento de sus sitios web. En 2019, Google introdujo métricas como Tiempo hasta el primer byte (TTFB), Primera pintura con contenido (FCP), Primera pintura (FP), Retraso de primera entrada (FID), Cambio de diseño acumulativo (CLS) y Pintura con contenido más grande (LCP) que permiten a los propietarios de sitios web obtener información sobre problemas que podrían afectar el rendimiento de sus sitios web y hacer que parezcan lentos para el usuario. Otras métricas que incluyen Request Count (número de solicitudes necesarias para cargar una página), ^[12] DOMContentLoaded (tiempo en el que el documento HTML se carga y analiza por completo, excluyendo hojas de estilo CSS, imágenes, etc.), ^[13] Above The Fold Time (contenido que es visible sin desplazarse), ^[14] Round Trip Time, ^[14] número de recursos de bloqueo de renderizado (como scripts, hojas de estilo), ^[15] Onload Time, Connection Time, Total Page Size ayudan a proporcionar una imagen precisa de las latencias y ralentizaciones que ocurren a nivel de red y que pueden ralentizar un sitio. ^{[16] [17] [18]}

Los módulos para medir métricas como TTFB, FCP, LCP, FP, etc. se proporcionan con las principales bibliotecas de JavaScript frontend como React , ^[19] NuxtJS ^[20] y Vue . ^[21] Google publica una biblioteca, la biblioteca core-web-vitals que permite una fácil medición de estas métricas en aplicaciones frontend. Además de esto, Google también proporciona Lighthouse, un componente de herramientas de desarrollo de Chrome y PageSpeed ​​Insight, 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. ^[22]

Además de esto, herramientas como el Network Monitor de Mozilla Firefox ayudan a proporcionar información sobre las ralentizaciones a nivel de red que pueden producirse durante la transmisión de datos. ^[16]