El rendimiento web se refiere a la velocidad a 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 del sitio web es el campo de conocimiento sobre cómo aumentar el 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 los usuarios con conexiones lentas a Internet y aquellos en dispositivos móviles . [3] El rendimiento web también conduce a que se transmitan menos datos por la web, lo que a su vez reduce el consumo de energía y el impacto medioambiental 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 procesarse. [5] El rendimiento de la página web se puede mejorar mediante técnicas como la caché de varias capas, el diseño ligero de los componentes de la capa de presentación y la comunicación asincrónica con los componentes del lado del servidor.
Historia
En la primera década de la existencia de la web, la mejora del rendimiento web se centró principalmente en optimizar el código del sitio web y empujar las limitaciones del hardware. Según el libro de 2002 Web Performance Tuning de Patrick Killelea, algunas de las primeras técnicas utilizadas fueron utilizar servlets simples o CGI, aumentar la memoria del servidor y buscar la pérdida y retransmisión de paquetes. [6] 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. [7] En ese momento, Souders hizo varias predicciones sobre el impacto que la WPO como "industria emergente" traería a la web, como que los sitios web fueran rápidos por defecto, consolidación, estándares web de rendimiento, impactos ambientales de la optimización y velocidad como diferenciador. [8]
Un punto importante que Souders hizo en 2007 es que al menos el 80% del tiempo que se tarda en descargar y ver un sitio web está controlado por la estructura del front-end. Este tiempo de retraso se puede reducir mediante el conocimiento del comportamiento típico del navegador, así como de cómo funciona HTTP . [9]
Técnicas de optimización
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 reducir los tiempos de carga de la página web. Este proceso se conoce como optimización de front-end (FEO) u optimización de contenido. FEO se concentra 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 enumeradas a continuación, el uso de una red de entrega de contenido, un grupo de servidores proxy distribuidos en varias ubicaciones alrededor del mundo, es un sistema de entrega eficiente que elige un servidor para un usuario específico en función de 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 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 solo 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 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 de ancho de banda y la latencia . Los CDN utilizan un software de almacenamiento en caché web dedicado para almacenar copias de los documentos que pasan por su sistema. Las solicitudes posteriores de la caché pueden cumplirse si se aplican ciertas condiciones. Los cachés web se encuentran en el lado del cliente (posición de avance) o en el lado del servidor web (posición inversa) de un 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é se puede utilizar para cumplir con una solicitud. Si se realiza una coincidencia de este tipo, 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 desarrolladores web y cómo los elementos de la red interpretan el código. La minificación elimina los comentarios y los espacios adicionales, así como los nombres de las 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 que se utilizan con los archivos de audio) eliminan la 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 de forma notable la percepción de la imagen. Otra técnica es la sustitución de gráficos vectoriales por gráficos rasterizados independientes de la resolución . La sustitución de ráster 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, todo lo cual tiene un impacto positivo en el rendimiento del sitio web. Se utiliza para aplazar la inicialización de un objeto 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.
HTTP / 1.xy HTTP / 2
Dado que los navegadores web utilizan múltiples conexiones TCP para solicitudes de usuarios en paralelo, pueden producirse congestión y monopolización de los recursos de red del navegador. Debido a que las solicitudes HTTP / 1 vienen con una sobrecarga asociada , el rendimiento web se ve afectado por un ancho de banda limitado y un mayor uso.
Comparado con HTTP / 1, HTTP / 2
- es binario en lugar de textual
- está completamente multiplexado en lugar de ordenado y bloqueado
- Por lo tanto, puede usar una conexión para el paralelismo.
- utiliza la compresión del encabezado para reducir los gastos generales
- permite a los servidores "enviar" respuestas de forma proactiva a las cachés de los clientes [10]
En lugar del servidor de alojamiento de un sitio web, las CDN se utilizan en conjunto 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]
Referencias
- ^ "Google agrega velocidad del sitio a la clasificación de búsqueda" . Consultado el 4 de diciembre de 2012 .
- ^ Sharon, Bell. "WPO | Preparación para el tráfico de Cyber Monday" . CDNetworks . Consultado el 4 de diciembre de 2012 .
- ^ Souders, Steve. "Web First for Mobile" . Consultado el 4 de diciembre de 2012 .
- ^ Bellonch, Albert. "Optimización del rendimiento web para todos" . Consultado el 4 de diciembre de 2012 .
- ^ "Por qué es importante la velocidad del sitio web [infografía] - LoveUMarketing" . LoveUMarketing . 2018-10-06 . Consultado el 21 de octubre de 2018 .
- ^ Killelea, Patrick (2002). Optimización del rendimiento web . Sebastopol: O'Reilly Media. pag. 480. ISBN 059600172X.
- ^ Frick, Tim (2016). Diseñar para la sostenibilidad: una guía para crear productos y servicios digitales más ecológicos . Boston: O'Reilly Media. pag. 195. ISBN 1491935774.
- ^ Frick, Tim (2016). Diseñar para la sostenibilidad: una guía para crear productos y servicios digitales más ecológicos . Boston: O'Reilly Media. pag. 56. ISBN 1491935774.
- ^ Souders, Steve (2007). Sitios web de alto rendimiento . Farnham: O'Reilly Media. pag. 170. ISBN 0596529309.
- ^ "Preguntas frecuentes sobre HTTP / 2" . Grupo de trabajo HTTP . Consultado el 14 de abril de 2017 .
- ^ "HTTP / 2 - Una prueba y análisis de rendimiento en el mundo real" . Trucos CSS . Consultado el 14 de abril de 2017 .