La gente ahora espera que los servicios web respondan rápidamente, por lo que debe asegurarse de brindar esa experiencia dinámica. Hay muchas maneras de hacer esto. Aquí hay 5 de ellos.
La carga lenta de la página puede obstaculizar la experiencia del usuario (UX) cuando se trata de desarrollo web . Las personas se han acostumbrado a interactuar digitalmente con las empresas de forma directa y sin fricciones, por lo que todos los sitios web deben lograr un delicado equilibrio entre funcionalidad, usabilidad y velocidad.
¿Cómo pueden los desarrolladores lidiar con tiempos de carga de páginas lentos?
Aquí hay una lista de pequeños trucos que pueden ayudarlo a usted y a su equipo de desarrollo a trabajar en uno de los pilares de esta trifecta, es decir, la velocidad y, más precisamente, el tiempo de carga de la página. La gente ahora espera que los servicios web respondan rápidamente a todo lo que buscan, por lo que debe asegurarse de brindar esa experiencia dinámica.
Hay muchas maneras de hacer esto. Aquí hay 5 de ellos.
1. Prefiere fuentes seguras para la web
Es fácil perderse en los detalles cuando se trata de desarrollo web, especialmente si esos detalles aportan cierto estilo a la apariencia del proyecto. Sin embargo, agregar demasiado estilo ciertamente puede afectar los tiempos de carga de la página. Esto se debe a que puede haber demasiadas solicitudes, demasiados elementos para cargar o archivos demasiado grandes que afectan el tiempo de carga final. Hay muchas acciones que puedes tomar para evitar que esto suceda, pero una a la que pocos desarrolladores web prestan atención tiene que ver con las fuentes.
Cuando trabajan en proyectos de desarrollo web, muchos ingenieros no lo piensan dos veces antes de añadir fuentes de servicios como Google Fonts o Adobe Fonts. Pero el uso de fuentes personalizadas puede aumentar el tiempo de carga de una página, especialmente para usuarios con conexiones más lentas. Es más, una fuente personalizada puede terminar congelando toda la página, lo que puede hacer que no responda.
¿La solución? Utilizar fuentes seguras para la web, que son fuentes instaladas en muchos sistemas operativos . De esta manera, los usuarios no necesitan descargar nuevas fuentes, ya que utilizarán una que ya tienen instalada. Y si bien puede haber algunas diferencias entre las fuentes en diferentes sistemas, siempre puedes recurrir a una pila de fuentes segura para la web para elegir varias fuentes que se vean similares para que todos los usuarios tengan la misma experiencia al usar tus productos web.
2. Minimizar el tiempo hasta el primer byte
La mayoría de las personas se obsesionan con cuánto tiempo tarda una página en cargarse por completo, pero a pocas les importa cuánto tiempo tarda en comenzar a cargarse. Este tiempo se conoce como "tiempo hasta el primer byte" (TTFB) y mide cuánto tiempo tiene que esperar un navegador antes de obtener el primer byte del servidor. Cuanto más tarde, peor será la experiencia. Es por eso que Google recomienda que TTFB sea inferior a 200 ms.
Del lado del servidor, puedes trabajar en el TTFB de tus páginas centrándote en los factores que influyen en él. Esto incluye problemas de red, tráfico, creación de contenido dinámico y configuración del servidor web. No puedes hacer nada con los 2 primeros ya que dependen de terceros. Pero definitivamente puedes hacer algo para crear contenido dinámico y configurar el servidor web.
Cuando se trabaja con contenido dinámico, el servidor utilizado necesita crear un archivo dinámico antes de responder a la solicitud. En otras palabras, el servidor necesita interactuar con una base de datos para crear el contenido con PHP antes de entregarlo al navegador. Naturalmente, este proceso puede llevar algún tiempo, lo que puede afectar los tiempos de carga.
Es por eso que necesita habilitar el almacenamiento en caché , lo que puede ahorrarles a los visitantes que regresan un tiempo valioso y, al mismo tiempo, mejorar la experiencia del usuario. Es cierto que el almacenamiento en caché no afectará a los visitantes nuevos, pero puede mejorar significativamente su experiencia mientras navegan por su plataforma web.
3. Utilice carga diferida para imágenes
La carga diferida se refiere al proceso de evitar que se carguen elementos de una página cuando no son necesarios. Así, la página no carga todos los recursos que tiene, sino sólo aquellos que el usuario necesita en un momento determinado. Esta es una gran práctica para evitar cargar elementos ocultos o innecesarios, ya que solo se centra en la carga frontal de recursos esenciales.
La aplicación de esta carga selectiva de elementos tiene un impacto significativo en el rendimiento, al mismo tiempo que mejora el uso de recursos del dispositivo y reduce el tiempo de carga general de un producto web. En términos generales, puedes aplicar carga diferida a cualquier elemento de tu página, pero te recomiendo que la uses al menos con tus imágenes.
La mejor parte de utilizar la carga diferida para imágenes es que es muy simple. Solo necesita agregar carga = "lazy" a una etiqueta de imagen en el código. Esto le indicará al navegador que esa imagen sólo debe cargarse cuando el usuario lo solicite, y no tarde o temprano. La carga diferida es compatible con la mayoría de los navegadores modernos, lo que significa que no afectará la experiencia de los diferentes usuarios.
Además del código mencionado anteriormente, también puede introducir la carga diferida a través del atributo polyfill, la API de Intersection Observer o los controladores de eventos. Estas tres técnicas son la mejor opción si desea aumentar la compatibilidad del navegador. En otras palabras, deberías utilizarlos si sospechas que tus usuarios están utilizando navegadores antiguos o incompatibles.
4. Utilice una red de entrega de contenidos
Usar un único servidor para alojar su sitio web no es su única opción. También puede utilizar una red de servidores para garantizar el tiempo de actividad, el rendimiento y los tiempos de carga reducidos para todos sus visitantes. Esto evita que un servidor se atasque con solicitudes al dividir la carga de solicitudes entre varios servidores. Además, el uso de esta red puede mejorar los tiempos de carga para los usuarios que se conectan a su producto web desde ubicaciones más distantes.
Esta red de servidores se denomina red de entrega de contenido (CDN), y almacena en caché un sitio web o una aplicación web en una red global de servidores . Cada vez que surge una nueva solicitud de usuario, la CDN responde procesando esa solicitud a través del servidor más cercano al usuario que envía la solicitud. El contenido que se sirve no cambia; lo que cambia es que el servidor está más cerca, por lo que el tiempo de carga es más rápido.
Usar una CDN es una excelente manera de eliminar retrasos en la carga y problemas de latencia que pueden afectar a los usuarios que se encuentran lejos de los servidores de alojamiento. Algunas de las CDN más conocidas incluyen Cloudflare y StackPath (anteriormente MaxCDN). La primera es una solución de alojamiento más completa que combina servicios CDN con funciones de seguridad, mientras que la segunda se centra más en los servicios CDN. Ambos son muy fáciles de usar y configurar y pueden ayudarte a controlar el tiempo de carga de tus páginas.
5. Minimizar archivos CSS y JavaScript
La mayoría de los proyectos web modernos cargan muchos archivos externos en el navegador del usuario. Por eso es de capital importancia mantener estos archivos manejables para evitar un impacto considerable en el tiempo de carga. Esta es también la razón por la que tantos marcos de JavaScript tienen funciones integradas para trabajar en la minimización de archivos JavaScript y CSS, incluida la minificación y la sacudida de árboles .
Sin embargo, no necesita un marco para minimizar el tamaño de los archivos CSS y JavaScript. Existen herramientas poderosas y simples que lo ayudarán a hacer precisamente eso de una manera muy fácil y eficiente. Algunos de los más interesantes son ViteJS y ParcelJS, que son muy fáciles de configurar y tienen un rendimiento impresionante.
Ambas herramientas admiten preprocesadores CSS e incluso funcionan con TypeScript. Pero lo más importante es que son muy eficientes a la hora de minimizar el tamaño de diferentes archivos y lo hacen increíblemente rápido. El uso de estas herramientas puede ayudarlo a reducir drásticamente los tiempos de carga y brindar una experiencia de usuario más satisfactoria.
El comienzo de un largo viaje.
Desde las fuentes que eliges hasta los idiomas y archivos que utilizas, hay muchas formas de acelerar los tiempos de carga de una página web. Si bien las 5 sugerencias anteriores te ayudarán a disminuir los tiempos de carga, la realidad es que son solo algunos ejemplos de las muchas cosas que puedes hacer para optimizar tu sitio web. Optimizar la entrega de CSS, priorizar el contenido de la mitad superior de la página mediante carga diferida, reducir las redirecciones y reducir el uso de complementos son otros trucos fáciles de aplicar que pueden ayudarlo con el tiempo de carga.
Si bien definitivamente deberías utilizar los trucos anteriores, debes verlos como el punto de partida de un largo viaje. En este viaje, deberá profundizar en el mundo del desarrollo web para descubrir las muchas formas en que puede abordar los tiempos de carga, una parte crucial para brindar una experiencia web superior.
Si le gustó esto, asegúrese de consultar nuestros otros artículos sobre desarrollo web.
- Diez tipos de desarrollo de aplicaciones web y cuáles elegir
- Aplicación web versus sitio web: ¿cuál es la “mejor” opción?
- Emocionantes tendencias de diseño web
- Soluciones web para empresas
- ¿Qué es un matraz?
Preguntas frecuentes
1. ¿Por qué es importante centrarse en los tiempos de carga de las páginas para el desarrollo web?
Es importante centrarse en los tiempos de carga de la página en el desarrollo web porque los tiempos de carga afectan la experiencia del usuario. Si su sitio se carga demasiado lento, los usuarios pueden abandonar su página por completo. Esto también afecta el SEO y las clasificaciones de búsqueda, así como el compromiso.
2. ¿Cuáles son algunos de los factores que pueden afectar el tiempo de carga de la página de un sitio web?
Varios factores afectan el tiempo de carga de una página web, como por ejemplo:
- Tamaño del sitio
- Optimización de código
- Velocidad de la red
- Caché de navegador
- Los complementos y funciones que utilizas
- Tiempo de respuesta del servidor
- Optimización de imagen
3. ¿Qué es la carga diferida y cómo se puede utilizar para mejorar el tiempo de carga de la página?
La carga diferida es una técnica que utilizan los desarrolladores web para mejorar el tiempo de carga de las páginas web. Mediante este método, los desarrolladores esencialmente retrasan la carga de recursos como imágenes y videos hasta que el usuario los necesita.
Fuente: BairesDev
