Por qué es importante el rendimiento

En nuestra búsqueda compartida de lograr que la red haga cada vez más cosas, nos encontramos con un problema común: el rendimiento. Los sitios tienen más funciones que nunca. Tanto es así, que muchos tienen dificultades para lograr un nivel de rendimiento elevado en una variedad de dispositivos y condiciones de red.

Los problemas de rendimiento varían. En el mejor de los casos, crean pequeñas demoras que solo resultan levemente molestas para los usuarios. En el peor de los casos, hacen que tu sitio sea completamente inaccesible o no responda a las entradas del usuario (o ambos).

El rendimiento como herramienta para retener a los usuarios

Queremos que los usuarios encuentren lo que buscan al interactuar con lo que desarrollamos. Si es un blog, queremos que las personas lean las publicaciones. Si es una tienda en línea, queremos que compren cosas. Si es una red social, queremos que interactúen entre ellos.

El rendimiento juega un papel importantísimo en el éxito de cualquier actividad en línea. A continuación, presentamos algunos casos de éxito que muestran cómo los sitios con rendimiento elevado logran atraer y retener a los usuarios mejor que aquellos que presentan un rendimiento inferior:

Aquí presentamos algunos casos de éxito en los que un bajo rendimiento afectó negativamente los objetivos comerciales:

En este mismo estudio de DoubleClick de Google, se determinó que los sitios que se cargan dentro de los 5 segundos tenían sesiones un 70 % más largas, índices de rebote un 35 % más bajos y una visualización de anuncios un 25 % mayor que en sitios que tardaban casi cuatro veces más en cargarse (19 segundos). Para tener una idea general de cómo se compara el rendimiento de tu sitio con el de tus competidores, consulta la herramienta Speed Scorecard.

Captura de pantalla de la herramienta
Speed Scorecard en la que se compara el rendimiento de cuatro sitios de noticias populares.
Figura 1. Comparación hecha en Speed Scorecard del rendimiento de cuatro sitios competidores usando datos de Chrome UX Report de usuarios de redes 4G en Estados Unidos.

El rendimiento para mejorar conversiones

La retención de usuarios es crucial para mejorar las conversiones. Los sitios lentos afectan negativamente los ingresos, y viceversa. A continuación, hay algunos ejemplos que muestran cómo el rendimiento ha tenido un papel fundamental en hacer que las empresas sean más (o menos) rentables:

Si usas la Web para realizar actividades comerciales, el rendimiento es crucial. Si la experiencia de tu sitio es rápida y con buena respuesta a las entradas del usuario, saldrás beneficiado. Para ver cómo el rendimiento podría afectar tus ingresos, usa la herramienta Impact Calculator.

Captura de pantalla de Impact
Calculator, donde se estiman los ingresos que un sitio podría ganar si
se hicieran mejoras en el rendimiento.
Figura 2. Impact Calculator estima los ingresos que podrías ganar si mejoraras el rendimiento de tu sitio.

El rendimiento para mejorar la experiencia del usuario

Cuando visitas una URL, lo haces desde una variedad de lugares de origen potenciales. En función de una serie de condiciones, como la calidad de conexión y el dispositivo que usas, tu experiencia podría ser muy distinta de la de otro usuario.

Comparación de dos carretes de tiras de imágenes
de una página que se está cargando. El primer caso muestra la página cargándose con una conexión lenta, mientras que
el segundo muestra la misma página cargándose con una conexión rápida.
Figura 3. Comparación de la carga de una página con una conexión muy lenta (arriba) y una más rápida (abajo).

Cuando un sitio web comienza a cargarse, hay un período durante el cual los usuarios deben esperar a que el contenido aparezca. Hasta que esto ocurra, no se puede hablar de la experiencia del usuario. Esta ausencia de experiencia es fugaz con conexiones rápidas. Con conexiones más lentas, sin embargo, los usuarios se ven obligados a esperar. Los usuarios pueden tener más problemas porque los recursos de la página se reciben muy lentamente.

El rendimiento es un aspecto fundamental de una buena experiencia del usuario. Cuando los sitios envían mucho código, los navegadores deben usar megabytes del plan de datos del usuario para descargarlo. Los dispositivos móviles tienen capacidad de procesamiento de CPU y memoria limitados. Con frecuencia, se ven afectados por lo que podría considerarse una pequeña cantidad de código no optimizado. Esto genera un rendimiento deficiente que conduce a la falta de respuesta. Teniendo en cuenta lo que sabemos sobre el comportamiento de los seres humanos, los usuarios tolerarán aplicaciones con rendimiento bajo durante poco tiempo antes de abandonarlas. Si deseas obtener más información acerca de cómo evaluar el rendimiento de tu sitio y encontrar oportunidades para mejorarlo, consulta las Consideraciones acerca de herramientas de velocidad.

Descripción general del rendimiento de páginas en
Lighthouse.
Figura 4. Descripción general del rendimiento de páginas en Lighthouse.

El rendimiento y las personas

Los sitios y las aplicaciones con rendimiento bajo también pueden representar costos reales para las personas que los usan.

Como los usuarios móviles son una porción considerable de las personas que utilizan Internet en todo el mundo, es importante tener en cuenta que muchos de estos usuarios acceden a la Web a través de redes móviles LTE, 4G, 3G e incluso 2G. Como Ben Schwarz de Calibre indica en este estudio de rendimiento en el mundo real, el costo de los planes de datos prepagos está bajando, lo que hace que el uso de Internet sea más accesible en lugares donde antes no lo era. Los dispositivos móviles y el acceso a Internet ya no son lujos. Son herramientas comunes necesarias para navegar y funcionar en un mundo cada vez más interconectado.

El tamaño total de las páginas viene aumentando de manera constante desde al menos 2011, y la tendencia parece continuar. Con el aumento de la cantidad de datos que envía una página cualquiera, los usuarios deben recargar sus planes de datos medidos con más frecuencia, lo que les cuesta dinero.

Además de hacerles ahorrar dinero a tus usuarios, una experiencia rápida y ligera también puede ser crucial para aquellas personas en crisis. Los recursos públicos como hospitales, clínicas y centros de atención tienen recursos en línea que brindan a los usuarios información importante y específica que podrían necesitar durante una crisis. Si bien el diseño es fundamental al presentar información relevante de manera eficaz en momentos difíciles, no se debe subestimar la importancia de publicar estos datos con rapidez. Es parte de nuestro trabajo.

Lo que vendrá

Si bien las siguientes listas pueden parecer abrumadoras, no es necesario que hagas todas estas cosas para mejorar el rendimiento de tu sitio. Son simplemente puntos por los que puedes empezar, así que no te desanimes. Cualquiera de estas cosas que hagas para mejorar el rendimiento será útil para tus usuarios.

Sé consciente de los recursos que envías

Un método eficaz de desarrollar aplicaciones de buen rendimiento es auditar qué recursos envías a tus usuarios. Si bien el panel de red de Chrome DevTools resume muy bien los recursos que se usan en una página específica, puede resultar abrumador entender por dónde empezar si no has considerado el rendimiento hasta ahora. He aquí algunas sugerencias:

  • Si usas Bootstrap o Foundation para desarrollar la IU, pregúntate si son necesarios. Estas abstracciones agregan mucho código CSS que el navegador debe descargar, analizar y aplicar a una página, todo ello antes de que el código CSS específico del sitio entre en juego. Flexbox y Grid son excelentes para crear diseños simples y complejos con relativamente poco código. Como CSS es un recurso de bloqueo de representación, la sobrecarga de un marco de trabajo CSS puede retrasar la representación de forma significativa. Puedes acelerar la representación si eliminas la sobrecarga innecesaria cada vez que sea posible.
  • Las bibliotecas de JavaScript son convenientes, pero no siempre necesarias. Toma a jQuery como ejemplo: La selección de elementos se ha simplificado mucho gracias a métodos como querySelector y querySelectorAll. La vinculación de eventos es fácil de implementar con addEventListener. classList, setAttribute y getAttribute ofrecen maneras sencillas para trabajar con clases y atributos de elementos. Si necesitas usar una biblioteca, investiga para encontrar alternativas más eficientes. Por ejemplo, Zepto es una alternativa de menor tamaño que jQuery y Preact es una alternativa mucho más pequeña que React.
  • No todos los sitios web tienen que ser aplicaciones de una sola página (SPA), y con frecuencia hacen mucho uso de JavaScript. JavaScript es el recurso más costoso de publicar en la Web byte por byte, ya que no solo se debe descargar el código, sino que además se lo debe analizar, compilar y ejecutar. Por ejemplo, los sitios de noticias y blogs con arquitectura front-end optimizada pueden tener un rendimiento tan bueno como el de las experiencias tradicionales multipágina. En particular, si el almacenamiento en caché de HTTP está bien configurado y, de manera opcional, si se usa un service worker.

Sé consciente de cómo envías recursos

La publicación eficiente es vital para el desarrollo de experiencias de usuario rápidas.

Sé consciente de la cantidad de datos que envías

Las siguientes son algunas sugerencias para limitar la cantidad de datos que envías:

Para consultar una guía más integral sobre cómo mejorar el rendimiento, consulta nuestro artículo sobre el modelo de rendimiento RAIL, que se enfoca en mejorar tanto el tiempo de carga como la capacidad de respuesta de la aplicación. Nuestra guía sobre el patrón PRPL también es un gran recurso para mejorar el rendimiento de aplicaciones de una sola página moderna.

Si te entusiasma el tema y quieres leer más acerca del rendimiento y cómo hacer que tu sitio sea más rápido, explora nuestra documentación sobre rendimiento para obtener guías acerca de una variedad de temas. Agregamos constantemente nuevas guías y actualizamos las existentes, así que regresa con frecuencia.

Agradecemos especialmente a Addy Osmani, Jeff Posnick, Matt Gaunt, Philip Walton, Vinamrata Singal, Daniel An y Pete LePage por sus comentarios detallados para mejorar y publicar este recurso.

Comentarios

Was this page helpful?