Rendimiento-web.-Optimizacion

Que es el Rendimiento Web. Optimizando La Carga

¿Qué es el rendimiento web?

En un alto nivel, el rendimiento web es la velocidad con la que el contenido solicitado se descarga, procesa y está listo para interactuar. Ese tiempo se cuantifica de varias maneras a través de varias métricas de rendimiento centradas en el usuario (de las que hablaremos en detalle más adelante).

Lo que hace que el rendimiento web sea tan complejo es que lo que consideramos rápido a través de la observación de las métricas por sí solo, podría no representar con precisión la experiencia de nuestros usuarios, por lo que hablamos de rendimiento objetivo (medible por métricas) y subjetivo (perceptible por las personas).


El rendimiento web está continuamente equilibrando entre mejorar las métricas clave y probar nuestras suposiciones con las personas que usan nuestro software.


Si bien el rendimiento web se manifiesta principalmente en el front-end (a través de la interacción con las interfaces), las optimizaciones en ese espacio abarcan no solo HTML, CSS o JavaScript. A veces, mejorar el rendimiento web significa optimizar las consultas de la base de datos, reelaborar los componentes internos de la aplicación (lo que es especialmente cierto en el caso de las aplicaciones móviles) o ajustar los canales de alojamiento y CDN.


El rendimiento web no tiene que ser específico para el desarrollo. Puede llegar a definir el rendimiento como uno de los principios de su producto: ¿qué tan fácil y rápido es el usuario capaz de alcanzar sus objetivos?


¿Qué afecta el rendimiento web?

El bajo rendimiento web tiene un impacto de gran alcance no solo en la experiencia y accesibilidad del usuario, sino también en el crecimiento del negocio, la capacidad de anunciar y comercializar sus productos.

Las organizaciones que invierten en mejoras de velocidad observan reducciones significativas en las tasas de rebote, aumentos en el tráfico, participaciónconversión y, en consecuencia, ingresos.


Cuando un retraso de 1 segundo puede costar hasta un 20% de pérdida de conversión, el rendimiento se vuelve demasiado costoso como para ignorarlo.


El impacto del mal desempeño en la experiencia del usuario es cuantificable. El 53% de los usuarios de dispositivos móviles abandonan las páginas que no se cargan en solo 3 segundos. Nuestra percepción también es limitada; después de 1 segundo, nuestro flujo de pensamiento se interrumpe, y 10 segundos nos distraemos de la tarea que estábamos tratando de completar.

El algoritmo de clasificación de búsqueda de Google penaliza los sitios lentos ya que los resultados se ordenan en función de la velocidad móvil. Además, sus anuncios pueden ser más caros en efecto. En el futuro, Google podría estar marcando visiblemente sitios lentos en las interfaces de su navegador, indicando efectivamente a los espectadores que están a punto de sufrir una mala experiencia.

La velocidad lenta es un vector de diseño que se refleja directamente en su marca: su confiabilidad y calidad.

¿Cuáles son las métricas de rendimiento web más importantes?

Docenas de métricas de rendimiento web retratan diferentes etapas en el proceso de solicitud, representación e interacción con una página. Elegir cuáles son relevantes para usted y también representan con precisión la experiencia del usuario puede ser difícil. Comprender cómo se ubican dentro del espectro de entrega y ejecución de páginas es crucial.

Así es como clasificamos las métricas de rendimiento web:

CategoríaDescripciónMétricas de ejemplo
Pintar

 

Métricas que describen los cambios visuales que ocurren durante la carga de la página.Primera pintura, primera pintura con contenido, primera pintura con significado, pintura con mayor contenido
Tiempo de ejecuciónLas métricas se calculan observando la actividad en el hilo principal de JavaScript, que depende en gran medida de las capacidades de hardware.Tiempo total de bloqueo, análisis y compilación de JavaScript, tiempo de interacción, primer CPU inactivo
SolicitudMétricas que describen el tamaño comprimido de los activos transferidos y el tiempo que tomó responder a las solicitudes.Tiempo hasta el primer byte, página total transferida, JavaScript total transferido, imagen total transferida
Tamaño de byteMétricas que representan el tamaño sin comprimir de los activos una vez que se han entregado a los usuarios.Tamaño total de página en bytes, Tamaño total de imagen en bytes, Tamaño total de CSS en bytes
FaroCalificaciones de auditoría agregadas proporcionadas por Lighthouse, que se basan en otras métricas de rendimiento y condiciones personalizadas.Puntaje de rendimiento, puntaje de accesibilidad, puntaje SEO, puntaje de mejores prácticas

Al comenzar a rastrear el rendimiento web, un conjunto útil de métricas para comenzar sería Tiempo para la pintura interactiva, la más grande de contenido, el tiempo de bloqueo total, la primera pintura de contenido, el tiempo hasta el primer byte y la puntuación de rendimiento de Lighthouse.

Esta selección proporciona una colección completa de métricas que representan no solo el rendimiento web general sino también la experiencia del usuario desde el punto de vista visual y la interactividad.

¿Cuáles son los mayores delincuentes de rendimiento?

Los problemas importantes inevitablemente dependerán de su contexto, pero hay tipos de activos y áreas específicas que causan la mayoría de los problemas de rendimiento.

JavaScript es responsable de la gran mayoría de los problemas de rendimiento que vemos, especialmente a medida que su uso crece continuamente: el 90% de los sitios ahora ofrecen al menos 1 MB de script. Tanto la descarga como la ejecución del script son muy costosas en tiempo y consumo de datos, especialmente en dispositivos móviles.

Lo que a menudo se pierde al analizar el script es el hecho de que el tamaño sin comprimir suele ser 2-3 veces mayor que el paquete optimizado, generalmente enviado en un solo archivo que debe analizarse. Con el tamaño viene el alto precio de los tiempos de ejecución que empeoran con redes y dispositivos más lentos.


Evitar tareas de larga duración y bloquear el hilo principal de JavaScript es una de las estrategias de rendimiento más importantes para emplear.


Cuando se habla de guiones, es importante mencionar el impacto de los recursos de tercerosEl script externo es más difícil de controlar y, a menudo, no se optimiza, ya que los desarrolladores difieren la responsabilidad de los proveedores de servicios. Cuando la mayoría de los sitios sirven aproximadamente 40 scripts externos, su impacto no puede ser ignorado.

Podemos ser efectivos en la gestión de secuencias de comandos externas mediante la adopción de estrategias de carga progresiva. Siempre descargue y ejecute lo que sea relevante para un contexto de cliente determinado.

La gestión adecuada y la priorización de las solicitudes críticas es otra área que puede hacer o deshacer el rendimiento web de sus sitios. Con el poder de dirigir cómo los navegadores obtienen activos a través de sugerencias prioritarias, podemos garantizar que los activos esenciales estén disponibles a tiempo para proporcionar una experiencia de renderización rápida.

Conocer estas áreas comunes donde surgen cuellos de botella asegurará que sepa dónde buscar las mejoras más significativas.

¿Cómo controlar el rendimiento?

Elegir la herramienta de monitoreo adecuada que se adapte a sus necesidades y escala tendrá un impacto significativo en el éxito que tenga. Hay varios factores a tener en cuenta, sin importar cuáles sean sus requisitos específicos.

El primero de ellos es un principio general que guía su trabajo de rendimiento web.


Comprender a sus clientes es fundamental. Es necesario identificar el espectro de su audiencia.


Solo cuando haya visibilidad sobre dónde están las personas, qué dispositivos están usando y bajo qué condiciones de red, podrá ajustar su estrategia de rendimiento web en consecuencia. Así como analizamos los comportamientos, las condiciones y las personas al intentar crear productos exitosos, el trabajo de rendimiento requiere un pensamiento similar e intencional.

A menudo vemos organizaciones que utilizan una variedad de herramientas diferentes para medir la velocidad. Lo que a menudo no saben es que el uso de varias herramientas está condenado al fracaso. Cada proveedor varía en la infraestructura de prueba: la ubicación de las máquinas de prueba, las condiciones de la red, los dispositivos con diferentes CPU. Intentar establecer comparaciones entre plataformas que se ejecutan en varias pilas y algoritmos (WebPageTest, Lighthouse y PageSpeed ​​o una solución personalizada) es imposible. Introducirá una confusión innecesaria sobre la confiabilidad de las métricas mismas. Elija una plataforma y comprométase a un monitoreo a largo plazo para poder sacar conclusiones significativas.

La fiabilidad de los resultados es otro factor esencial a tener en cuenta. La verificación adecuada de la prueba evitará que ocurran picos sospechosos y llame la atención innecesariamente sobre un falso positivo. Busque herramientas de rendimiento web que tengan sistemas para garantizar que las mediciones sean confiables, en todo momento.

Las herramientas que introducen la transparencia en el estado de la experiencia del usuario que se extiende más allá del equipo de desarrollo lo ayudarán a fomentar una cultura de desempeño y obtener la aceptación de los interesados. Las plataformas que ofrecen características como alertas de Slack, informes por correo electrónico y comparaciones de solicitudes de extracción de GitHub harán que el rendimiento web sea una parte imperdible de su proceso de desarrollo.

Cualquiera sea la solución que elija, debe ser confiable, confiable, compatible con la nueva generación de métricas, extensible a través de API robustas y haciendo que los informes estén disponibles más allá de su equipo de desarrollo.


Ahora ha aprendido lo suficiente sobre el rendimiento web para comenzar a monitorear y mejorar con confianza la experiencia del usuario y la adopción de sus productos.

 

Contenido Relacionado:

 

La Visualización de Datos Optimiza El Rendimiento
Posiciónese en los SERPs
Volumen de búsquedas de palabras clave
Cómo Medir Core Web Vitals. Estas Importantes Señales de Calidad
Mejora First Contentful Paint
Herramientas CSS no usadas
Eliminar CSS no utilizadas
Porque es Malo el Contenido Duplicado Google

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

This function has been disabled for Blog de Marketing.