El rendimiento web se refiere a la velocidad con la que las páginas web se descargan y se muestran en el navegador web del usuario . La optimización del rendimiento web (WPO) , u optimización de sitios web, es el campo de conocimiento sobre el aumento del rendimiento web.
Se ha demostrado que 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 los usuarios con conexiones lentas a Internet y aquellos que usan dispositivos móviles . [3] El rendimiento web también genera menos datos que viajan 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 la 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 procesarse. El rendimiento de la página web se puede mejorar mediante técnicas como caché de múltiples capas, diseño liviano de los componentes de la capa de presentación y 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 de 2002, algunas de las primeras técnicas utilizadas fueron utilizar servlets simples o CGI, aumentar la memoria del servidor y buscar 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 hubo mucho menos intento de 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 WPO como "industria emergente" traería a la web, como que los sitios web serían rápidos por defecto, consolidación, Estándares web para rendimiento, impactos ambientales de la optimización y velocidad como diferenciador. [7]
Un punto importante que Souders destacó en 2007 es que al menos el 80% del tiempo que lleva descargar y ver un sitio web está controlado por la estructura frontal. Este retraso se puede reducir mediante el conocimiento del comportamiento típico del navegador, así como de cómo funciona 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 deseada 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 front-end (FEO) u optimización de contenido. 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 entrega de contenido (un grupo de servidores proxy repartidos en varias ubicaciones alrededor del mundo) es un sistema de entrega eficiente que elige un servidor para un usuario específico según la proximidad de 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 comúnmente utilizadas y 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 sólo un cierto número de conexiones simultáneas a un único host. Para evitar cuellos de botella, la cantidad 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 la cantidad 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 crecen en complejidad, también lo hacen sus archivos de código y, posteriormente, 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é pueden cumplirse si se aplican ciertas condiciones. Los cachés web están ubicados 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 se puede utilizar una respuesta almacenada en caché para cumplir con una solicitud. Si se realiza dicha coincidencia, la respuesta se completa desde la memoria caché. Esto puede resultar ú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 los códigos escritos por los desarrolladores web y cómo los elementos de la red interpretan el código. La minificación elimina comentarios y espacios adicionales, así como también procesa nombres de variables para minimizar el código, disminuyendo 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 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 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 de vectores es más adecuada para imágenes geométricas simples. [ cita necesaria ]
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, todo lo cual tiene un impacto positivo en el rendimiento del sitio web. [9] Se utiliza para diferir la inicialización de un objeto justo hasta el punto en el que se necesita. El navegador carga las imágenes en 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 múltiples conexiones TCP para solicitudes de usuarios paralelas, puede producirse congestión y monopolización de los recursos de la 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 mayor uso.
Comparado con HTTP/1, HTTP/2
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. proximidad al usuario final. [11]
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), Primera pintura con contenido (FCP), Primera pintura (FP), Retraso de la primera entrada (FID), Cambio de diseño acumulativo (CLS) y Pintura con contenido más grande (LCP) que permiten para que el propietario del sitio web obtenga información sobre problemas que podrían afectar el rendimiento de sus sitios web, haciéndolos parecer lentos o lentos para el usuario. Otras métricas, como el tiempo de carga, el tiempo de conexión y el tamaño total de la página, ayudan a proporcionar una imagen precisa de las latencias y ralentizaciones que se producen a nivel de red y que pueden ralentizar un sitio. [12] [13] [14]
Los módulos para medir métricas como TTFB, FCP, LCP, FP, etc. se proporcionan con las principales bibliotecas de JavaScript frontend como React , [15] NuxtJS [16] y Vue . [17] Google publica una biblioteca, la biblioteca core-web-vitals, que permite medir fácilmente 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. [18]
Además de esto, herramientas como Network Monitor de Mozilla Firefox ayudan a proporcionar información sobre las ralentizaciones a nivel de red que pueden ocurrir durante la transmisión de datos. [12]