Factores técnicos mínimos a considerar en una estrategia Web Performance Optimization

Resumen: En este documento se describen algunas recomendaciones para mejorar la velocidad de carga de páginas web.

Introducción

El desempeño web se refiere al tiempo que tarda un sitio web en cargarse, interactuar y responder, así como a la fluidez del contenido durante las interacciones del usuario. Incluye medidas objetivas como el tiempo de carga, los fotogramas por segundo, el tiempo de interacción y la experiencia subjetiva de cuánto tiempo se tarda en cargar el contenido.

Cuanto mayor sea el tiempo de respuesta del sitio, más usuarios abandonarán el sitio. Al hacer que la experiencia sea lo más usable e interactiva posible lo antes posible, mientras se carga de forma asíncrona durante la mayor parte de la experiencia, es importante minimizar los tiempos de carga y respuesta y agregar funciones adicionales para ocultar la latencia.

 

Minificar

Los comentarios del código y las tabulaciones son una buena práctica de desarrollo, pero el navegador los ignora debido a que no son necesarios para el despliegue de las páginas. Por lo que se recomienda eliminarlos de los documentos CSS, HTML y JavaScript para reducir la cantidad de bytes transmitidos por la red. Debido a que el código será poco legible, se recomienda mantener una "versión de desarrollo" y eliminar los comentarios y las tabulaciones únicamente en el documento que será publicado.

Los algoritmos más extendidos en la actualidad son GZIP y Brotli.

 

GZIP

Se utiliza principalmente para comprimir archivos de texto, es un algoritmo de compresión sin pérdidas, es decir, reduce el tamaño de los archivos sin perder información. Es soportado por los servidores web y los navegadores actuales. La Figura 1 muestra el tamaño original y comprimido de algunas librerías populares, así como su porcentaje de compresión.

 

 

Brotli

Brotli es un algoritmo de compresión de datos desarrollado por Google. Al igual que Gzip, es un algoritmo de compresión sin pérdidas. Brotli puede proporcionar una mayor tasa de compresión que Gzip en algunos casos. En promedio, en comparación con Gzip la compresión de Brotli es:

- 14% mayor en archivos JavaScript

- 21% mayor en archivos HTML

- 17% mayor en archivos CSS

Aunque Brotli proporciona una mayor compresión que Gzip y la velocidad de descompresión es similar, el proceso de compresión en Brotli es más lento que en Gzip, por lo que para contenidos no almacenables en caché Gzip puede ser una mejor opción.

Existen herramientas en línea para verificar si la compresión se aplica a una página. Por ejemplo: Check Gzip/Brotli Compression.

 

Imágenes

Existen diferentes formatos de imágenes que son usados para realzar la apariencia y funcionalidad de un sitio web, cada uno con un propósito diferente. Los más utilizados son JPEG, PNG, GIF y SVG. En los últimos años surgió el formato WebP que ha incrementado su uso.

Es importante elegir el formato de imagen adecuado para su uso en la web, ya que cada formato tiene sus propias ventajas y desventajas en términos de calidad, tamaño de archivo y compatibilidad con diferentes dispositivos.

 

JPEG

Las imágenes JPEG (Joint Photographic Experts Group) son un tipo de archivo de imagen comprimido utilizado comúnmente en la web y en la fotografía digital. Estas imágenes se comprimen mediante un algoritmo de compresión de pérdida de calidad, lo que significa que se eliminan algunos detalles de la imagen durante el proceso de compresión para reducir su tamaño. Esto permite que las imágenes JPEG sean más pequeñas en tamaño y se carguen más rápido en la web, pero también significa que pueden tener menos calidad que otras imágenes sin comprimir.

El formato JPEG es uno de los formatos más populares para imágenes en la web y se utiliza comúnmente para imágenes que contienen una gran cantidad de detalles o colores, como fotografías. El formato JPEG utiliza una técnica de compresión que reduce el tamaño del archivo de la imagen sin perder demasiada calidad visual. Esto hace que las imágenes JPEG sean ideales para usar en la web, ya que se cargan más rápidamente que las imágenes en otros formatos más grandes.

Sin embargo, hay algunas cosas a tener en cuenta al utilizar imágenes JPEG en web:

● No es adecuado para imágenes con áreas de color sólido o con poco detalle, ya que la compresión puede hacer que se vean pixeladas o borrosas. En estos casos, es mejor utilizar un formato sin pérdida de calidad, como PNG.

● No admite transparencias, por lo que no es adecuado para imágenes con elementos que se superponen o con un fondo transparente. En estos casos, es mejor utilizar un formato que soporte transparencias, como PNG o GIF.

En general, el formato JPEG es una excelente opción para imágenes que sean de alta calidad y contengan una gran cantidad de detalles y colores. Si se usan imágenes con áreas de color sólido o transparencias, es mejor utilizar un formato diferente.

 

PNG

Las imágenes PNG (Portable Network Graphics) son un formato de imagen que utiliza compresión sin pérdida de calidad. Se utilizan comúnmente para imágenes con transparencias y para imágenes con detalles y colores precisos, como gráficos o imágenes de alta resolución. A diferencia de otros formatos de imagen como JPEG, el formato PNG no reduce la calidad de la imagen al comprimirla, lo que significa que la imagen original se mantiene sin pérdida de detalle.

Las imágenes PNG se utilizan principalmente en los siguientes casos:

● Cuando se requiere transparencia en la imagen: Las imágenes PNG soportan transparencia y son ideales para utilizar en imágenes con formas irregulares o para superponer imágenes.

● Cuando se necesita alta calidad y detalle: Las imágenes PNG son ideales para imágenes con mucho detalle, como gráficos o ilustraciones de alta calidad.

● Cuando se necesita una imagen con texto: Las imágenes PNG mantienen la calidad del texto y son ideales para utilizar en imágenes con texto o logotipos.

● Cuando se requiere un archivo de tamaño reducido: Aunque las imágenes PNG tienen un tamaño de archivo mayor que los JPG, pueden comprimirse sin pérdida de calidad, lo que las hace ideales para imágenes con colores sólidos o líneas nítidas.

 

GIF

El formato GIF (Graphics Interchange Format) es un tipo de archivo de imagen que se utiliza para mostrar imágenes en movimiento o secuencias de imágenes en la web. Las imágenes GIF son archivos que contienen varias imágenes que se reproducen secuencialmente, lo que permite mostrar imágenes en movimiento sin tener que descargar un archivo de video. El formato GIF es ampliamente utilizado en la web para crear pequeñas animaciones y memes. Aunque el formato GIF es muy popular, también es conocido por su tamaño de archivo relativamente grande, lo que puede afectar la velocidad de carga de una página web.

 

SVG

El formato SVG (Scalable Vector Graphics) es un formato de archivo de gráficos vectoriales basado en XML que se utiliza para representar imágenes y gráficos vectoriales en la web. Las imágenes SVG son escalables y pueden ser redimensionadas sin pérdida de calidad, lo que las hace ideales para su uso en la web y en dispositivos móviles. Además, el formato SVG es compatible con muchos navegadores web y se puede utilizar en conjunto con otras tecnologías web, como HTML y CSS. También se utiliza en aplicaciones de diseño gráfico y en la creación de iconos y logotipos.

 

WebP

Las imágenes webp son un formato de imagen creado por Google con el objetivo de ofrecer una mayor eficiencia en el tamaño de las imágenes sin sacrificar calidad. Son compatibles con la mayoría de los navegadores web modernos y se utilizan a menudo en la web para reducir el tiempo de carga de las páginas y mejorar la experiencia del usuario. Las imágenes webp también pueden ser animadas, lo que las hace útiles para la creación de banners y otros elementos gráficos animados en la web.

Se pueden utilizar imágenes webp en caso de querer mejorar la velocidad de carga de la página web, ya que son imágenes con un tamaño más reducido que otras imágenes como JPEG o PNG. También se pueden utilizar si se desea mejorar la calidad visual de las imágenes sin aumentar su tamaño de archivo. Es importante tener en cuenta que no todos los navegadores soportan este tipo de imágenes, por lo que se debe tener una versión alternativa en otro formato para garantizar que se muestre correctamente en todos los dispositivos.

El formato WebP generalmente proporcionará una mejor compresión que los formatos más antiguos y debe usarse siempre que sea posible. Puede usar WebP junto con otro formato de imagen como respaldo.

 

HTTP Cache

El HTTP cache es una función que permite almacenar en caché (es decir, guardar temporalmente) contenido de un sitio web para poder acceder a él más rápidamente en futuras visitas. Esto se hace para reducir la cantidad de datos que necesitan ser descargados cada vez que un usuario abre una página web, lo que acelera la carga del sitio y mejora la experiencia del usuario. El HTTP cache también puede ayudar a reducir la carga en el servidor del sitio web, ya que no tiene que procesar tanta información cada vez que un usuario visita la página.

Para implementar el HTTP Cache, primero se deben añadir las cabeceras de caché en las respuestas HTTP. Estas cabeceras indican a los navegadores y proxies cuándo deben almacenar en caché y cuándo deben recuperar contenido desde el servidor. Se pueden usar las siguientes cabeceras de caché:

● Cache-Control: Esta cabecera indica al navegador y al proxy cómo deben manejar el contenido en caché. Por ejemplo, se puede usar "Cache-Control: public" para indicar que el contenido puede ser almacenado en caché por cualquier agente, como un proxy.

● Expires: Esta cabecera indica cuándo el contenido deja de ser válido y debe ser recargado, mediante la fecha y hora en formato UTC.

● ETag: Esta cabecera es un valor único que se asigna a cada recurso y se usa para determinar si el contenido en caché es válido o no. Si el ETag de la caché coincide con el ETag del servidor, el navegador puede usar el contenido en caché sin solicitarlo de nuevo al servidor.

Las siguientes configuraciones son un ejemplo básico inicial:

● Cache-Control: no-cache para recursos que deben consultarse con el servidor antes de cada uso.

● Cache-Control: no-store para recursos que no se deben almacenar en caché.

● Cache-Control: max-age=31536000 para recursos con versión.

● ETag o Last-Modified: ayudan a revalidar los recursos de caché caducados.

 

Es importante tener en cuenta que el HTTP Cache solo funciona para recursos estáticos, como imágenes o archivos CSS, y no para contenido dinámico generado por la aplicación.