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:
- Pinterest aumentó el tráfico del motor de búsqueda y la cantidad de registros en un 15 % cuando redujo el tiempo de espera percibido en un 40 %.
- COOK aumentó la conversión en un 7 %, redujo el índice de rebote en un 7 % y aumentó la cantidad de páginas por sesión en un 10 % cuando redujeron el tiempo promedio de carga de página en 850 milisegundos.
Aquí presentamos algunos casos de éxito en los que un bajo rendimiento afectó negativamente los objetivos comerciales:
- La BBC determinó que perdía un 10 % adicional de usuarios por cada segundo adicional que el sitio tardaba en cargarse.
- DoubleClick de Google determinó que un 53 % de las visitas a sitios móviles se abandonaban si una página tardaba más de 3 segundos en cargarse.
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.
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:
- Para Mobify, cada reducción de 100 ms en la velocidad de carga de su página principal generó un aumento del 1,11 % en la conversión basada en sesión, lo que generó un aumento promedio de ingresos anuales de casi $380 000. Asimismo, una reducción de 100 ms en la velocidad de carga de la página de finalización de la compra representó un aumento del 1,55 % en la conversión basada en sesión, que a su vez representó un aumento promedio de los ingresos anuales de casi $530 000.
- DoubleClick descubrió que los publicadores cuyos sitios se cargaban en cinco segundos o menos generaban hasta el doble de ingresos por anuncios que los sitios que tardaban hasta 19 segundos en cargarse.
- Cuando AutoAnything redujo el tiempo de carga de páginas a la mitad, sus ventas aumentaron entre un 12 y 13 %.
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.
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.
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.
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
querySelectoryquerySelectorAll. La vinculación de eventos es fácil de implementar conaddEventListener.classList,setAttributeygetAttributeofrecen 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.
- Migración a HTTP/2. HTTP/2 soluciona muchos problemas de rendimiento inherentes de HTTP/1.1, como límites de solicitudes concurrentes y la no comprensión de encabezados.
- Descarga recursos de manera anticipada mediante
sugerencias.
rel=preloades una de estas sugerencias de recursos que permite obtener recursos críticos antes de lo que el navegador detectaría. Esto puede tener un efecto positivo muy marcado en la representación de la página y la reducción del tiempo de carga cuando se lo usa con buen criterio.rel=preconnectes otra sugerencia de recursos que puede enmascarar la latencia de la apertura de nuevas conexiones para recursos alojados en dominios de terceros. - Los sitios modernos envían mucho_código JavaScript y CSS por lo general. Era común agrupar estilos y secuencias de comandos en conjuntos de mayor tamaño en entornos HTTP/1. Esto se hacía porque tener una gran cantidad de solicitudes perjudicaba del rendimiento. Este ya no es el caso ahora que está HTTP/2, ya que es menos costoso el uso de varias solicitudes simultáneas. Considera usar fraccionamiento de código en webpack para limitar la cantidad de secuencias de comandos descargadas a la que se necesita para la página o vista actual. Separa el código CSS en archivos de plantilla o específicos de componentes que sean de menor tamaño e incluye solo los recursos donde sea probable que se los use.
Sé consciente de la cantidad de datos que envías
Las siguientes son algunas sugerencias para limitar la cantidad de datos que envías:
- Minifica los recursos de texto. La minificación es la eliminación del espacio en blanco, los comentarios y otro contenido innecesario en recursos basados en texto. Reduce de forma significativa la cantidad de datos que envías a los usuarios sin afectar la funcionalidad. Usa la uglificación en JavaScript para generar más ahorros al acortar los nombres de variables y métodos. Como SVG es un formato de imagen basado en texto, se lo puede optimizar con SVGO.
- Configura tu servidor para comprimir recursos. La compresión reduce de forma drástica la cantidad de datos que envías a los usuarios, especialmente en el caso de recursos de texto. GZIP es una opción popular, pero la compresión de Brotli puede ir más allá. Sin embargo, debes comprender que la compresión no es una solución mágica para los problemas de rendimiento: Algunos formatos de archivo que tienen compresión intrínseca (p. ej., JPEG, PNG, GIF, WOFF, etc.) no responden a la compresión porque ya están comprimidos.
- Optimiza las imágenes para asegurarte de que tu sitio envíe la menor cantidad posible de datos de imagen. Como las imágenes representan una porción grande de la carga útil promedio por página en la Web, la optimización de las imágenes es una oportunidad inigualable de mejorar el rendimiento.
- Si tienes tiempo, considera publicar formatos de imagen alternativos. WebP goza de una compatibilidad razonablemente amplia con navegadores y utiliza menos datos que JPEG y PNG a la vez que conserva una calidad visual elevada. JPEG XR es otro formato alternativo compatible con IE y Edge que ofrece ahorros similares.
- Entrega imágenes
de manera receptiva.
La enorme diversidad de dispositivos y sus pantallas representa una oportunidad
excelente a fin de mejorar el rendimiento al enviar imágenes que sean óptimas para
las pantallas en donde se las visualiza. En el más simples de los casos de uso, puedes agregar un atributo
srcseta un elemento<img>para especificar una matriz de imágenes de entre las cuales el navegador puede elegir. Como algo más complejo, puedes usar<picture>para ayudar al navegador a elegir el formato óptimo (p. ej., WebP por sobre JPEG o PNG) o bien publicar tratamientos completamente distintos de imágenes para tamaños de pantalla diferentes. - Usa video en lugar de GIF animados. Los GIF animados son enormes. Los videos de calidad similar son mucho más pequeños, generalmente un 80 %. Si tu sitio utiliza bastantes GIF animados, probablemente esto sea lo mejor que puedas hacer para mejorar el rendimiento de carga.
- Las sugerencias de cliente pueden
adaptar la entrega de recursos en función de las condiciones de red actuales y las características del
dispositivo. Los encabezados
DPR,WidthyViewport-Widthte pueden ayudar a entregar las mejores imágenes para un dispositivo mediante código desde el servidor y utilizar menos lenguaje de marcado. El encabezadoSave-Datapuede ayudarte a entregar experiencias de aplicación más livianas para los usuarios que específicamente te lo pidan. - La
NetworkInformationAPI expone información acerca de la conexión de red del usuario. Esta información se puede usar a fin de modificar la experiencia de la aplicación para aquellos usuarios cuyas redes son más lentas.
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.