Si alguna vez has visitado cualquier página web moderna, notarás que a veces las cosas en pantalla (como imágenes, elementos de entrada, etc.) se cargarán antes que otras partes del sitio. Las páginas web a menudo se cargarán en etapas, con algunas cosas apareciendo solo después de un retraso inicial. Esta escalonada puede ser intencional para mejorar el rendimiento del sitio, pero también podría ser solo un efecto secundario de cómo tu navegador está procesando la página.
Carga Diferida
La carga diferida es una técnica usada por desarrolladores web para retrasar la carga de cosas no importantes en la página. Cosas como imágenes, videos y contenido incrustado generalmente se cargan al final, o hasta que realmente se necesitan en la página. En lugar de cargar ansiosamente todo de una vez (lo que puede obstruir tu navegador con un montón de solicitudes), tu navegador esperará para cargar el contenido fuera de pantalla hasta que el usuario se desplace cerca de él. Al no cargar todo este contenido cada vez, la carga inicial de la página es mucho más rápida y se siente más ligera, mejorando la percepción del rendimiento.
Por ejemplo, esta publicación de blog podría cargar nuestro banner superior e ícono de autor primero, pero retrasar la carga de las imágenes cerca del pie de página del sitio hasta que te desplaces a él. Esto acelera la carga inicial, ya que solo la primera imagen se está cargando.
Desde el lado de la experiencia del usuario, la carga diferida es claramente beneficiosa: ves las cosas críticas e importantes más rápido, y tu ancho de banda no se desperdicia en imágenes y videos que el usuario puede que nunca vea en primer lugar. Esto mejora la Primera Pintura de Contenido de la página, que es una métrica del navegador usada para cronometrar qué tan rápido aparece el primer elemento en pantalla.
Puede haber implementaciones negativas de carga diferida, y en última instancia depende del desarrollador de la página asegurarse de que la usen correctamente. Por ejemplo, cargar cualquier cosa por encima del pliegue (que es cualquier contenido visible sin desplazarse hacia abajo en la página) no debería cargarse de forma diferida. Otra preocupación es el cambio de diseño, que es cuando el espacio de una imagen no está reservado en la página y se carga más tarde, empujando todo el contenido hacia abajo.
Renderizado del Lado del Cliente e Hidratación
Las aplicaciones web modernas son principalmente JavaScript estos días, lo que significa que el contenido a menudo se renderiza y luego se muestra al usuario. En marcos de renderizado del lado del cliente (CSR) como React, Angular y Vue, el servidor enviará una página HTML muy básica, y luego esperará hasta que el navegador genere el contenido. Esto significa que en la primera carga de una página, podrías solo ver una pantalla en blanco o un indicador de carga mientras el navegador está descargando y generando el contenido.
Esta implementación a menudo puede llevar a una percepción negativa del rendimiento de tu sitio, ya que los usuarios podrían pensar que nada se está cargando o que está tomando demasiado tiempo cargar en primer lugar. La métrica Primera Pintura de Contenido de la que hablamos anteriormente podría ser empujada significativamente hacia atrás en una situación CSR pura, porque nada significativo aparece en la página hasta mucho, mucho más tarde.
Resolviendo esto con Renderizado del Lado del Servidor
Para mitigar algunos de los retrasos de espera del renderizado del lado del cliente, muchos marcos web usarán Renderizado del Lado del Servidor (SSR). Esto significa que un servidor enviará una página web completamente desarrollada a tu navegador (para que veas contenido inmediatamente), y luego la hidratará más tarde con elementos más interactivos.
La hidratación todavía requiere generar ese contenido del navegador del lado del cliente, pero solo significa que tus usuarios no están mirando una pantalla en blanco mientras tanto. A su vez, mejora el rendimiento percibido de tu página y lleva a menos pensamientos sobre “¿por qué esta página es tan lenta?”.
Dicho esto, SSR e hidratación aún pueden introducir problemas a un sitio si no se implementan correctamente. El problema del parpadeo de contenido es cuando el servidor no conoce al usuario o qué contexto ya tienen (como, si un usuario ya está conectado o no), y como resultado les dará una versión genérica del sitio. Una vez que el sitio está hidratado y se da cuenta de que el usuario está conectado, podría reemplazar partes de la UI con contenido personalizado o actualizado. Aunque no tan malo como una página completamente en blanco, estos cambios de contenido a mitad de camino pueden ser distractores y confundir momentáneamente al usuario.
Desde el punto de vista de la experiencia del usuario, el objetivo es minimizar el retraso antes de que los usuarios vean contenido útil. Si estás usando CSR, es clave mantener tu JavaScript delgado e incluir un indicador de carga bien diseñado o un esqueleto para que tus usuarios sepan que hay contenido en camino. Aún mejor, usar SSR para la vista inicial asegura que los usuarios vean algo primero, y obtengan su contenido segundo.
Recursos que Bloquean Renderizados
No todos los retrasos se deben a scripts, y en su lugar también pueden ser de cómo tu navegador maneja recursos críticos como CSS y fuentes. Los navegadores no saben priorizar estos inherentemente, o podrían no darse cuenta de que el contenido está estilizado hasta más tarde, lo que lleva a que el contenido parpadee en tu página con la fuente o estilo incorrecto.
CSS es el más clásico de los problemas de bloqueo de renderizado. Por lo general, los navegadores retrasarán renderizar el contenido de la página hasta que el CSS se descargue y procese, pero si tu archivo CSS es demasiado grande o demasiado complejo, cualquier elemento que dependa de ese archivo CSS aparecerá tarde hasta que se cargue. Asegurar que tu CSS esté optimizado y que el estilo de diseño básico exista en tu sitio asegurará que el contenido se muestre temprano, y mejorará el tiempo de carga percibido del usuario.
La fuente de un sitio también puede retrasar la aparición del texto, pero a menudo de maneras más sutiles. Cuando un sitio usa una fuente personalizada (vía `@font-face`, o algo como Google Fonts), los navegadores los manejarán cuidadosamente para asegurar que no aparezca una fuente de respaldo. Los navegadores implementaron “el parpadeo de texto invisible”, lo que significa que el texto está oculto hasta que se carga el archivo de fuente. El texto esencialmente está ahí, en la página, simplemente no puedes verlo. Y si tu fuente tarda demasiado en cargar, el usuario no podría ver ninguna palabra, no llevando a una experiencia ideal para ellos.
Equilibrar Rendimiento con Experiencia
En resumen, siempre es importante para los desarrolladores web proporcionar la página más rápida, mientras no sorprenden al usuario con contenido sin estilo, texto faltante o tiempos de carga largos. Cada elemento retrasado en una página debería tener una buena razón para estar retrasado, y el retraso debería gestionarse en la UI a través de indicadores de carga y marcadores de posición.
Al entender las razones técnicas detrás de estas apariciones retrasadas, los desarrolladores pueden tomar mejores decisiones sobre cómo quieren cargar su contenido y mejorar la experiencia para sus usuarios.
