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 ]}

Web performance optimization improves user experience (UX) when visiting a website and therefore is highly desired by web designers and web developers. They employ several techniques that streamline web optimization tasks to decrease web page load times. This process is known as front end optimization (FEO) or content optimization. FEO concentrates on reducing file sizes and "minimizing the number of requests needed for a given page to load."

In addition to the techniques listed below, the use of a content delivery network—a group of proxy servers spread across various locations around the globe—is an efficient delivery system that chooses a server for a specific user based on network proximity.^[9] Typically the server with the quickest response time is selected.

The following techniques are commonly used web optimization tasks and are widely used by web developers:

Web browsers open separate Transmission Control Protocol (TCP) connections for each Hypertext Transfer Protocol (HTTP) request submitted when downloading a web page. These requests total the number of page elements required for download. However, a browser is limited to opening only a certain number of simultaneous connections to a single host. To prevent bottlenecks, the number of individual page elements are reduced using resource consolidation whereby smaller files (such as images) are bundled together into one file. This reduces HTTP requests and the number of "round trips" required to load a web page.

Web pages are constructed from code files such JavaScript and Hypertext Markup Language (HTML). As web pages grow in complexity, so do their code files and subsequently their load times. File compression can reduce code files by about 40 percent,^[10] thereby improving site responsiveness.

Web Caching Optimization reduces server load, bandwidth usage and latency. CDNs use dedicated web caching software to store copies of documents passing through their system. Many website platforms, such as SiteGround, IONOS, Wix, and Hostinger, rely on global CDNs and caching technologies to deliver faster page loads across different geographical regions.^[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 ]}