La optimización del rendimiento web siempre ha sido crucial para sitios web y aplicaciones. Ya sea al proporcionar servicios, entretenimiento o información, las actividades se ven afectadas cuando el rendimiento es lento o inconsistente. Hoy en día, los sitios tienen una mayor sofisticación y más capacidades que nunca. Los usuarios esperan que todo funcione sin problemas, pero si no es así, en un mercado competitivo hay muchas opciones alternativas. Entonces, ¿qué puedes hacer para asegurarte de que el rendimiento de tu sitio web se mantenga a la vanguardia?
¿Qué es el rendimiento web?
El rendimiento web se determina por varios factores. Consideremos algunas de las métricas clave.
- Tiempo de carga. Probablemente la métrica más básica para el rendimiento web, el tiempo de carga mide la demora entre la solicitud inicial de la página y el contenido que se muestra completamente en el navegador. A menudo se considera un factor importante en los rankings de los motores de búsqueda.
- Primer contenido pintado (FCP). Obtener algo en la pantalla rápidamente es un indicador importante de progreso. FCP es una medida del tiempo entre la carga inicial y la representación de una parte del contenido de la página.
- Tiempo de interacción (TTI). TTI mide el tiempo entre FCP y la interactividad completa de la página. Una página puede parecer completamente cargada, pero puede llevar más tiempo para que los controles sean completamente interactivos. Por lo tanto, TTI es una medida de responsividad.
- Cambio acumulado de diseño (CLS). Esta es una medida del punto en el que el diseño de una página se vuelve estable. El cambio de diseño de las páginas mientras se carga es una irritación común para los usuarios, especialmente con elementos interactivos. Por lo tanto, CLS es una métrica clave de usabilidad.
Hay otras métricas que podemos considerar, pero este trío de velocidad, responsividad y usabilidad proporciona un buen punto de partida para considerar la optimización. Con estas métricas en mente, consideremos las principales técnicas para mejorar el rendimiento.
Estrategias para la optimización del rendimiento web
Separación de código (Code Splitting)
La separación de código consiste en dividir el código en componentes independientes que se pueden cargar de forma independiente. Las aplicaciones web actuales a menudo tienen una huella significativa en términos de CSS y JavaScript. Sin embargo, no todos estos recursos son necesarios para la carga inicial de la página y algunos pueden no ser necesarios en absoluto. Al dividir el código en paquetes, se puede optimizar con precarga selectiva o carga diferida (lazy loading).
Los paquetizadores como Webpack modularizan el código y utilizan gráficos de dependencias para determinar cuándo y dónde se necesitan los recursos. Esto permite usar importaciones dinámicas, que responden a las llamadas de funciones dentro de los módulos. La separación de paquetes es un enfoque complementario a la separación de código, aunque menos granular. Implica la separación mediante configuración en lugar de decisiones de carga en el lado del cliente. Un caso de uso común es separar las dependencias de terceros del código de la aplicación. De esta manera, cada uno solo se carga cuando hay cambios.
La separación de código también permite el «tree shaking» (agitar el árbol), que es un análisis realizado en el servidor que elimina el código no utilizado de su paquete de producción. La mayoría de los paquetizadores lo hacen por defecto, reduciendo el tamaño del código sin cambiar el comportamiento.
Carga Diferida (Lazy Loading)
Las estrategias de lazy loading separan los recursos críticos de los no críticos y solo sirven los últimos cuando son necesarios. Es una técnica que está estrechamente relacionada con la separación de código.
Claramente, una pregunta central para cualquier estrategia de carga diferida es la determinación de sus desencadenantes. Esto puede ser tan simple como especificar loading=»lazy» en las etiquetas img, lo que demorará la carga de imágenes hasta que sean requeridas. También puedes configurar la carga diferida de otros recursos observando directamente los elementos que entran en la vista. El API Intersection Observer es un ejemplo típico. Monitorea de forma asíncrona la intersección de un elemento específico con la ventana gráfica, momento en el cual puedes activar tus solicitudes de recursos.
Utilizando estas técnicas, la carga diferida se puede aplicar tanto a imágenes como a recursos multimedia para videoclips y animaciones. Los módulos de JavaScript también pueden cargarse de forma asíncrona, al igual que el CSS. Esto no solo ayuda a acelerar el rendimiento de la red, sino que también evita que el navegador renderice elementos antes de que sean necesarios.
Precarga (Preloading)
Mientras que la carga diferida pospone las acciones hasta que sean necesarias, la precarga las realiza anticipadamente. Algunos recursos no son necesarios de inmediato al cargar la página, pero es probable que se necesiten en algún momento. En tales casos, puede ser valioso precargarlos. Esto se logra fácilmente utilizando el atributo «preload«. Por ejemplo, para precargar un módulo de JavaScript:
<code><link rel=»preload» as=»script» href=»myscript.js>
</code>»>
Desde HTTP/2, también puedes utilizar el «server push» para enviar activos al cliente antes de que sean solicitados directamente. Por supuesto, es necesario tener precaución con estas técnicas para evitar la competencia de ancho de banda con otros recursos. El preloading debe ser utilizado con moderación, ya que los navegadores modernos ya optimizan el orden de carga de recursos.
Optimización de Imágenes
La optimización de imágenes es una de las formas más conocidas de mejora del rendimiento web. Sin embargo, puede ser fácilmente pasada por alto por los diseñadores que pueden haberse vuelto complacientes con el rendimiento de la red o que saben poco sobre los formatos de imágenes. Antes que nada, considera si realmente se necesita una imagen. CSS3 ahora ofrece efectos sofisticados como sombras y degradados que los diseñadores solían lograr con GIF o PNG. Para imágenes vectoriales más complejas, SVG también es una buena opción. Estas opciones no solo tienen menos peso en términos de bytes, sino que también suelen ofrecer una mejor calidad al ajustarse a cualquier resolución requerida.
Para las imágenes fotográficas, el nivel de compresión es clave. Los diseñadores deben equilibrar la calidad de la imagen con el tamaño del archivo. Se necesita buen juicio y un ojo cuidadoso, así como una comprensión de las variaciones en la presentación en diferentes dispositivos y resoluciones. Además, asegúrate de utilizar el mejor formato para el tipo de imagen. El contenido fotográfico tradicionalmente se ha representado como JPEG, pero en la actualidad, WebP y AVIF ofrecen reproducciones de mejor calidad con tamaños de archivo más pequeños. Sin embargo, la compatibilidad puede ser un problema; todos los navegadores modernos admiten WebP, pero AVIF aún no está completamente implementado en algunos de ellos.
Minificación y Compresión
Además de la compresión de imágenes, los activos textuales como CSS y Javascript se pueden minificar y comprimir para mejorar las tasas de transferencia de red. Esto implica una inversión del pensamiento habitual sobre el estilo de código: al escribir código, es importante considerar la legibilidad y el mantenimiento. Esto significa nombres de variables significativos, buen uso de espacios en blanco y el uso juicioso de comentarios. Sin embargo, cuando se trata de servir estos activos, debes abandonar la legibilidad a favor del tamaño.
La minificación elimina espacios en blanco excesivos, comentarios y delimitadores de bloques redundantes. Incluso la eliminación de caracteres de nueva línea puede tener un impacto medible en los tiempos de carga. La minificación es fácil de lograr: encontrarás una variedad de herramientas de minificación de línea de comandos que puedes incorporar en tu cadena de herramientas, como JSMin y UglifyJS. UglifyJS también puede cambiar cosas como nombres de variables para ahorrar aún más espacio, así como ofuscar el código para evitar su reutilización.
Otra opción es la compresión gzip para reducir el tamaño de los activos basados en texto. Normalmente, esto se habilita como parte de la configuración de tu servidor web. Por ejemplo, con Apache, puedes usar el módulo mod_deflate.
Caché
Por último, no olvidemos la caché. La caché puede mejorar el rendimiento web al reducir la carga del servidor y disminuir las cargas de transferencia de red. La caché puede ser tanto del lado del servidor como del navegador. Las cachés web del navegador almacenan activos solicitados recientemente para evitar descargarlos nuevamente cada vez que se solicitan. Los elementos en caché se actualizan después de que hayan caducado, cuando la cabecera de última modificación muestra que están obsoletos o en respuesta a una actualización manual del usuario. Recursos que cambian con frecuencia o sensibles también se pueden establecer como «sin caché» para evitar información desactualizada.
Una innovación más reciente es el uso de los service workers. Estos son activos de Javascript que se sitúan entre los servidores web y los navegadores, actuando como un proxy que permite el acceso sin conexión y mejora el rendimiento de las páginas. Incluyen una interfaz de caché programable, que es completamente independiente de la caché HTTP utilizada directamente por los navegadores. Esto significa que la caché de service worker permite un ajuste más detallado para aplicaciones específicas. Los tipos de activos a cachear, así como sus estrategias de actualización, se pueden configurar para ofrecer una experiencia rápida y precisa, así como capacidades sin problemas casi sin conexión.
Conclusión
La optimización del rendimiento web es vital para cualquier sitio web, aplicación o servicio. Hay muchos enfoques, configurables para adaptarse a los resultados deseados. Estos incluyen técnicas de larga data y básicas como la compresión de imágenes y la caché del navegador, así como innovaciones más recientes como los service workers de Javascript y la gestión de activos agrupados que permite la optimización mediante la separación de código, la carga lenta y la precarga. También hemos visto los beneficios que puede aportar incluso una técnica simple como la minificación.
Aunque hemos cubierto lo básico, la optimización no termina aquí. Si deseas explorar más sobre el tema, también puede que te interese explorar tecnologías más orientadas al lado del servidor, como la optimización de bases de datos y la configuración de infraestructura, incluido el uso de CDN para aprovechar técnicas como la caché distribuida.
Únete a nuestra comunidad
¿Te apasiona la accesibilidad web? ¿Quieres cambiar tu trayectoria laboral? En nuestra plataforma de Talent puedes encontrar la forma de llevar tu carrera al siguiente nivel. Entra en nuestra web y encuentra tu trabajo ideal- Échale un vistazo.
Ser parte de la comunidad de Codemotion te permitirá potenciar tu experiencia y enfrentar nuevos desafíos que impulsarán tu carrera, aprendiendo nuevas habilidades técnicas y creciendo junto a otros miembros con intereses similares al tuyo mediante el intercambio de opiniones y la creación de contenido de valor. Tenemos dos comunidades para ti según tu experiencia:
- Si eres wanna-be-dev, junior-dev o early-mid-dev nuestra comunidad de Discord es para ti. Allí encontrarás recursos, eventos, formación, muchos compañeros de viaje y beneficios exclusivos.
Súmate aquí. - Si eres late-mid-dev, senior-dev, Tech Lead o CTO nuestra comunidad de Telegram es para ti. Allí encontrarás el mejor networking, artículos high-tech, debates de tendencias tech y beneficios exclusivos.
Súmate aquí.
¡Nos vemos en Codemotion!
