La mayoría de los sitios web no ofrecen una experiencia de usuario satisfactoria debido a unos frontales mal optimizados. Y, la mayoría de las veces, se debe a una carga de datos y optimización de imágenes subóptimas.
Así que, en este artículo, hablaré de nueve buenas prácticas que serán útiles para optimizar el frontend y el rendimiento en la carga de datos.
Tienes 50 milisegundos para causar una primera buena impresión a tus visitantes potenciales. Así que sí, los usuarios tardan sólo 50 milisegundos en formarse una opinión sobre tu sitio web para decidir si se quedan o se van.
1. Minificar los recursos
La minificación de los recursos se refiere al proceso de eliminar los datos innecesarios y redundantes de tu HTML, CSS y JavaScript que no es necesario cargar. Esto incluye la eliminación de los comentarios y el formato del código, los caracteres de espacio en blanco, los códigos no utilizados, los caracteres de nueva línea, etc. Esta es y será una de las primeras medidas que el desarrollador deberá tomar en cuanto a optimizar el frontend se refiere.
La minificación de HTML, CSS y JavaScript acelera los tiempos de carga del frontend, ya que reduce la cantidad de código que hay que solicitar al servidor.
Consulta las siguientes herramientas para generar una versión optimizada de tus códigos HTML, CSS y JavaScript.
- HTML: PageSpeed Insights, HTML Minifier.
- CSS: cssmin.js, Coverage tool in Chrome Dev Tools, YUI Compressor.
- JavaScript: JSMin, Coverage tool in Chrome Dev Tools.
2. Reduce el número de llamadas al servidor
En general, cuantas más llamadas haga tu frontend al servidor, más tiempo tardará en cargarse. Esto se debe a que el envío de cualquier petición al servidor requiere una comunicación completa antes de que la página pueda ser renderizada. Puedes seguir varias formas de reducir el número de peticiones al servidor necesarias para que la página se cargue.
- Utiliza CSS Sprites – Esta es una de las formas más fáciles de reducir el número de llamadas al servidor. En lugar de cargar diez imágenes individuales en el sitio, el sprite carga un único archivo de imagen combinado con una colección de imágenes. Puedes utilizar las propiedades background-image y background-position en CSS para mostrar el segmento de imagen deseado. Al hacer esto, estás reduciendo el número de peticiones al servidor requeridas.
- Reduce los plugins de terceros que hacen un gran número de peticiones externas.
- Evita los enlaces rotos a archivos que no existen.
Además, también puedes considerar el renderizado del lado del servidor para acelerar la carga inicial de la aplicación.
Si los datos mínimos también están ahí con la carga de la primera página, supondrá una diferencia real para el rendimiento percibido.
3. Eliminar las fuentes personalizadas innecesarias
Las fuentes personalizadas se han hecho muy populares, ya que ayudan a añadir personalización al sitio web. Sin embargo, también tienen un coste de rendimiento y una de las claves para optimizar el frontend de la web será deshacerte de aquellas que no vas a usar pero estás cargando de todos modos en la cabecera o en un webpack, por ejemplo.
Las fuentes personalizadas pueden tener un tamaño bastante grande, y las fuentes web, como las de Google, añaden peticiones HTTP a recursos externos. Esto perjudica la velocidad de representación de la página.
A continuación se indican algunas de las medidas que puedes tomar al utilizar fuentes en tu sitio web:
- Convierte las fuentes al formato más eficiente: Cargar un formato moderno como el WOFF2 puede lograr una reducción de ~30% en el tamaño del archivo con respecto a otros formatos.
- Subconjunta las fuentes para eliminar los caracteres no utilizados: Los archivos de fuentes completos contienen caracteres para muchos idiomas que quizá nunca se utilicen. Al subconjuntar las fuentes, podemos eliminar los caracteres no deseados de la fuente y mantener sólo lo que necesitamos para escribir el contenido del sitio.
- Precarga las fuentes que requiere explícitamente la página.
Utilizar un par de fuentes personalizadas puede no causar daño, pero usarlas en exceso puede tener un efecto considerable en el tiempo de carga de tu frontend. Por lo tanto, asegúrate de reevaluar constantemente el impacto y la necesidad de las fuentes personalizadas que estás utilizando.
4. Comprimir archivos
La cantidad de ancho de banda limita la cantidad de datos entregados en un tiempo determinado. Cuanto mayor sea el tamaño del archivo, más tiempo tardará en cargarse. Los sitios web modernos suelen tener grandes paquetes de HTML, CSS y JavaScript.
Comprimiendo los archivos con un método adecuado, puedes conseguir fácilmente una gran diferencia en el tiempo de carga conseguirás optimizar el frontend. A continuación se presentan dos buenas opciones que puedes seguir para la compresión de archivos:
- Gzip — Es el método más popular de compresión y descompresión de datos, que actualmente soportan todos los navegadores modernos. Gzip comprime los paquetes HTML, CSS y JavaScript del sitio en el lado del servidor antes de enviarlos al navegador, y en el lado del cliente, descomprime los archivos y entrega el contenido.
- Brotli — Esto ofrece los mejores ratios de compresión en comparación con los métodos de compresión disponibles actualmente. Según una investigación de CertSimple, Brotli comprime los archivos JavaScript un 14% menos que Gzip, mientras que los índices de compresión de HTML y CSS son un 21% y un 17% mejores que Gzip.
5. Optimizar frontend optimizando las imágenes
Cuando se trata de sitios web, las imágenes son una parte vital. Según W3Techs el 93,7% de los sitios web en Internet utilizan al menos un formato de archivo de imagen porque ayudan a mejorar el compromiso del usuario, en otras palabras, las imágenes es la parte visual de una web y lo que la hace más atractiva.
Sin embargo, el lado negativo de utilizar imágenes es que afecta negativamente al tiempo de carga del frontend, y mucho, a menos que estén optimizadas.Por eso, hay varias formas de tratar las imágenes para optimizar el frontend de forma adecuada:
Utiliza WebP o AVIF
El uso de nuevos formatos de imagen, como WebP y AVIF, ofrece un mejor rendimiento que los formatos más antiguos, como JPEG y PNG. Según los expertos, la mejor forma de optimizar el frontend de tu página es empezar por convertir tus imágenes en estos nuevos formatos de imagen.
WebP es un 26% más pequeño que PNG y un 25-35% más pequeño que JPEG. El AVIF es un 50% más pequeño que el JPEG y un 20% más pequeño que el WebP.
Sin embargo, el inconveniente está en la compatibilidad con los navegadores. WebP ha ganado soporte en los navegadores recientemente, por lo que las versiones más antiguas podrían no soportarlo. Por otro lado, AVIF sólo es compatible con Chrome y Opera. Por lo tanto, tienes que utilizar el formato en HTML nativo con el elemento <picture> con soporte fallback. Un verdadero problema.
Muestra imágenes de dimensiones correctas.
Otra forma de reducir el tiempo de entrega de las imágenes y optimizar el frontend de un sitio web es utilizar imágenes responsivas. Más del 50% del tráfico procede de smartphones y tabletas. Escalar la imagen a las dimensiones populares de los dispositivos y servirlas utilizando un srcset para optimizar el frontend reduciendo drásticamente el tiempo de carga de sus elementos.
Además de elegir el formato y las dimensiones adecuadas, hay otras formas de optimizar el frontend mediante la reducción de tiempo de carga de las imágenes. A continuación se indican algunas buenas prácticas adicionales que puedes utilizar:
- Compresión de imágenes.
- Utilizar JPEG progresivos.
- Servir imágenes más pequeñas a los usuarios con conexiones lentas.
- Utilizar HTTP/2 en lugar de HTTP/1.1.
- Utilizar conjuntos de imágenes.
6. Aplicar Lazy Loading
La carga perezosa o lazy loading ayuda a optimizar el frontend acrotando aún más los tiempos de carga de forma considerable. Con la carga perezosa, la página web carga primero sólo el contenido necesario y luego el resto del contenido cuando el usuario lo necesita.
Por ejemplo, en los resultados de imágenes de Google, sólo se carga primero un pequeño conjunto de imágenes. Se cargan las imágenes del contenido oculto en lugar de las reales, lo que reduce el tiempo de carga. El contenido real se mostrará si el usuario se desplaza hacia abajo en la página.
Aparte de la carga perezosa, hay otras opciones como «Carga perezosa nativa» y «Efecto de imagen borrosa», entre las que puedes elegir para optimizar el frontend de tu web.
7. Caché
Cada vez que hay una visita única, todo, desde el HTML hasta el CSS y el JavaScript, debe descargarse individualmente. Esto hace que los tiempos de carga de los datos sean más lentos.
La mejor manera de evitar este problema es utilizar las opciones de caché. Si se configuran adecuadamente, los navegadores almacenarán los archivos en su caché local y evitarán cargar los mismos activos en las siguientes visitas a la página desde el servidor.
Aparte de la caché del navegador, existen otras opciones de caché para mejorar el tiempo de carga.
- Cache server — La petición del usuario se envía al servidor de caché más cercano de entre un conjunto de servidores de caché. (Por ejemplo, las redes de distribución de contenidos, de las que hablaremos en el punto 9)
- Memory cache — Almacenando ciertas partes de los datos en la memoria (por ejemplo: las variables de JavaScript) sin recargarlas por los cambios de ruta.
- Disc cache — Es similar a la memoria caché, excepto que hace uso del almacenamiento de archivos convencional que suele manejar el navegador.
8. Habilitar la precarga
La precarga de recursos es otra técnica de mejora del rendimiento que se puede utilizar para optimizar el frontend y acelerar la carga de datos.
Como desarrolladores, ustedes conocen su aplicación mejor que el navegador. Por ello, Prefetching utiliza esta información para indicar al navegador los recursos que podría necesitar en el futuro.
El prefetching carga el recurso en previsión de su necesidad para reducir el tiempo de espera del recurso y así optimizar el frontend de tu web. Existen principalmente tres tipos de prefetching. Mientras que el prefetching de enlaces es el método más popular y ampliamente utilizado, el prefetching de DNS y el prerendering también son opciones muy útiles y notan conocidas.
Percarga de Links
El Link prefetching permite a un navegador recopilar los recursos que probablemente solicitará un usuario en un futuro próximo. Así, los desarrolladores pueden suponer dónde es probable que los usuarios visiten una página web concreta.
Sin embargo, la precarga de enlaces sólo funciona con recursos almacenables en caché, como imágenes y JavaScript.
Precargar DNS
Cada vez que un usuario solicita un activo alojado en una dirección IP específica, se realiza una búsqueda de DNS para encontrar el nombre de dominio al que pertenece la dirección IP.
La precarga de DNS permite al navegador realizar la búsqueda de DNS para los enlaces de la página web en segundo plano mientras el usuario navega por la página actual para minimizar la latencia cuando un usuario hace clic en un enlace con la precarga de DNS activada lo que ayudará a optimizar el frontend de tu página de forma más efectiva.
9. Utilizar una red de distribución de contenidos o CDN
Cuando el usuario está alejado geográficamente del servidor, la latencia aumenta. Además, la carga de solicitudes también podría afectar al tiempo de servicio de los contenidos.
La velocidad de carga de los contenidos del frontend, incluidas las páginas HTML, las hojas de estilo, los archivos JavaScript y las imágenes, puede optimizarse utilizando una CDN. Una red de distribución de contenidos (CDN) es un grupo de servidores distribuidos en varias ubicaciones geográficas que almacenan una versión en caché del contenido para entregarlo rápidamente al usuario final. Desde hace unos cuantos años, es la forma de optimizar el frontend más recurrida por los desarrolladores, ya que cada día hay más opciones y, la mayor parte de añadidos externos, se pueden cargar directamente por CDN.
La CDN redirige las peticiones de los usuarios al servidor más cercano.
También hay un tipo específico de CDN llamado CDN de imágenes que es excelente para optimizar el frontend mediante la carga de las imágenes desde un servidor externo. Con ellas se puede conseguir un ahorro del 40-80% en el tamaño de los archivos de imagen. Dado que las imágenes suelen ocupar más de la mitad del peso de la página, la integración de una CDN para imágenes puede suponer un impulso significativo en la velocidad de carga.
Conclusión
Regla de oro del rendimiento: el 80-90% del tiempo de respuesta del usuario final se gasta en la descarga de componentes del frontend, como imágenes, hojas de estilo, scripts, etc.
Por lo tanto, optimizar el frontend haciendo la carga de datos más rápida es fundamental para reducir las tasas de rebote y aumentar el tiempo de los visitantes en el sitio. En este artículo, he comentado algunas de las mejores prácticas que estoy utilizando para mejorar la carga de datos del frontend. Hágame saber lo que está utilizando en la sección de comentarios.
¡¡Gracias por leernos!!
