Presupuesto de rendimiento web: ¿Qué es + cómo configurarlo y medirlo?

El rendimiento es esencial para la experiencia del usuario y para mejorar las tasas de conversión en su sitio. Es menos probable que renuncie a una página web si está cobrando e interactúa rápidamente sin problemas. Pero, ¿qué tan rápido es lo suficientemente rápido? No hay una sola respuesta para ello. Como cualquier empresa, cada sitio web es único, con sus propios objetivos, usuarios demográficos y presupuestos. Establecer un presupuesto de rendimiento elimina esta confusión, ayudándole a obtener el máximo rendimiento de su presupuesto en este artículo, aprenderá cómo medir el rendimiento del sitio con los valores correctos y configurar un presupuesto de rendimiento para lograr sus objetivos comerciales. .
¿Qué es un presupuesto de rendimiento? El rendimiento del sitio es un juego para dar y recibir. ¿Debería priorizar la experiencia o el diseño del usuario? ¿Qué tal agregar un chatbot en comparación con tocar la velocidad de carga de su página? ¿Su sitio realmente tiene que cobrar un guión de terceros y fuentes personalizadas? Si es así, ¿qué funcionalidad ofrece sus usuarios? Y ayudarte a generar conversiones?

Un presupuesto de rendimiento lo ayuda a optimizar mejor su sitio para lograr un rendimiento óptimo para su sitio, debe encontrar el equilibrio adecuado entre el diseño, la funcionalidad, los objetivos comerciales y la experiencia del usuario. Cuando crea un nuevo sitio web o lo renovas, es más fácil tomar todos estos factores.
Pero, con el tiempo, a medida que el tráfico del sitio aumenta y agregue más funciones al sitio, encontrará que el rendimiento de su sitio no es tan bueno como originalmente. Aquí ayuda al presupuesto de rendimiento. Un presupuesto de rendimiento es exactamente como parece: establezca un “presupuesto” en su página y no permita que la página lo supere. Esto puede ser un cierto tiempo de carga, pero generalmente es una conversación más fácil cuando desglosa el presupuesto en la cantidad de solicitudes o el tamaño de la página. Tim Kadlec, un experto en rendimiento, un presupuesto de rendimiento es una colección de límites que impone a los diferentes valores del sitio web que influye en su rendimiento. Algunos valores del presupuesto de rendimiento incluyen: tamaño total de la página
Número total de solicitudes HTTP
Tiempo de carga de la página en redes móviles
Primera pintura satisfactoria (FCP)
Pintura larga contenida (LCP)
Puede establecer un presupuesto de rendimiento para todo el sitio web o en una página por página, o ambos (recomendado). Usando los valores mencionados anteriormente, puede establecer objetivos claros, bien definidos y medibles para su sitio web, para asegurarse de que continúe teniendo un buen rendimiento. Ejemplos de presupuestos de rendimiento
La “página inicial” debe tener menos de 200 kb de tamaño y cargos en menos de 2 segundos en una red móvil rápida de 3G.
La “página de búsqueda” debe tener menos de 1.5 MB de imágenes en su sitio web de escritorio.
La “página del blog” debe cargarse en 1.5 segundos y volverse interactiva en menos de 5 segundos en la red lenta 3G.
La “página de destino” debe tener una puntuación de rendimiento más de 85 en auditorías de rendimiento del faro.
Los beneficios de establecer un presupuesto de rendimiento que definen un presupuesto de rendimiento lo ayudan a dar el primer paso para mejorar el rendimiento de su sitio cuando agregue funciones adicionales en su sitio web, servirá como punto de referencia para todos en el equipo o su organización, ya sea que ellos son diseñadores, desarrolladores o vendedores. Por ejemplo, si ha establecido un límite para la cantidad de imágenes y fuentes (y sus dimensiones de archivos), los diseñadores comprenderán mejor lo que pueden usar y no. Del mismo modo, imponer una limitación del número de scripts y bibliotecas de terceros permitirá a los desarrolladores abordar mejor sus objetivos. Con un presupuesto de rendimiento, también le ayudará a rastrear mejor el rendimiento de su sitio si el rendimiento de su sitio disminuye gradualmente, entonces puede volver al presupuesto de rendimiento y probar dónde las cosas se volvieron tontas.
Mida el rendimiento con los valores correctos si no puede medir algo, entonces no puede seguirlo o mejorarlo, y mucho menos medir su impacto en el rendimiento del sitio. Veamos los diversos valores medibles que puede usar para establecer un presupuesto de rendimiento del sitio web.
Tres valores distintos de los valores del presupuesto de rendimiento basados ​​en la cantidad Este tipo de métrica es el más fácil de entender, medir y establecer. Son muy útiles durante la fase de desarrollo web, porque pueden ayudar tanto a los diseñadores como a los desarrolladores a trabajar mejor. Los valores cuantitativos más utilizados para establecer un presupuesto de rendimiento incluyen:
Peso máximo de la página, en el que puede dividir:

Tamaño máximo de imagen
Tamaño máximo de fuentes web Fuente web máxima
Tamaño máximo de la Escritura (por ejemplo, cuadros, bibliotecas)
Número máximo de scripts
Tamaño máximo de HTML y CSS
Tamaño máximo de videos
El número total de recursos externos, en los que puede dividir:
Número máximo de solicitudes HTTP
Número máximo de scripts de terceros
Debe tener en cuenta que los valores anteriores no deciden la experiencia real del usuario. Sin embargo, sirven como un punto de partida maravilloso para el presupuesto de rendimiento.
La representación progresiva de la página mejora la experiencia del usuario (Fuente: Google), por ejemplo, un usuario puede percibir dos páginas con el mismo tamaño y la misma cantidad de solicitudes que lenta o rápida, dependiendo de cómo las páginas cargan sus recursos. La página que está mejor optimizada para la entrega de recursos críticos parecerá mucho más rápido para el usuario que la que no lo es. Por lo tanto, debe combinar los valores con respecto a la cantidad con otros valores centrados en el usuario para lograr una comprensión más clara del rendimiento del sitio. Los valores basados ​​en el tiempo le dicen cuán rápido se cargan diferentes aspectos de la página. Dos de los eventos más comunes utilizados para medir la velocidad de carga de la página son eventos de carga y carga doméstica. Sin embargo, no le dan una imagen completa de las experiencias del usuario, ya que el servidor puede proporcionar al usuario una página mínima y puede posponer la carga real y la visualización del contenido hasta unos segundos más tarde.
Para remediar esto, W3C Web Performance Group ha ratificado API para medir los valores de rendimiento del usuario basados ​​en el monitoreo de los usuarios reales. Estos son algunos de los valores de sincronización más importantes que puede usar en el presupuesto de rendimiento: el primer FCP de pintura satisfactoria (FCP) mide el tiempo requerido para que una página cargue cualquier contenido que se repite en la pantalla (o navegador). Captura el comienzo de cargar una página. Consulte nuestra guía si desea hundirse en las técnicas de mejorar la primera pintura.
Google considera una puntuación LCP por debajo de 2.5 segundos como buena (Fuente: Google) LCP mide el tiempo requerido para que una página muestre el texto o imagen más grande en el navegador. Debido a que LCP ofrece una mejor medida de experiencia de carga percibida que FCP y la primera pintura significativa (FMP), es una excelente medida para medir la experiencia del usuario. Según Google, el LCP es su opción favorita para medir el rendimiento centrado en el usuario a partir de ahora. El retraso a la primera entrada (FID) FID mide el tiempo requerido para que una página responda a cualquier interacción del usuario. Por ejemplo, cuando un usuario hace clic en un enlace o toca un botón en la página, el navegador debe tener todos los scripts e información relevantes para responder a las entradas del usuario.

Tiempo de tiempo interactivo (TTI) para medidas interactivas El tiempo total requerido para que una página repita todos sus elementos, cargue sus scripts (si los hay) y luego pueda responder a las entradas de los usuarios. Tiempo total de bloqueo (TBT) El tiempo de bloqueo total es un valor acompañante de TTI. Se define como el tiempo entre FCP y TTI. TTI mide el momento en que el proceso de carga de la página bloqueó al usuario para interactuar con la página. También está relacionado con el valor de FID. El cambio acumulativo de apariencia (CLS) CLS es una medida de la estabilidad visual de una página. Mide el total de todos los cambios inesperados de apariencia que tienen lugar en una página al cargar. Por ejemplo, cuando carga cualquier página, su botón de bloque o texto cambia repentinamente después de que la página se ha cargado por completo. Mire este video en profundidad en el CLS de Annie Sullivan para obtener más información. De todos los valores enumerados anteriormente, LCP, FID y CLS son los más útiles para rastrear el rendimiento general de su sitio. Son parte del nuevo Google Valores. Core Web Vitals.
Los últimos valores de Google Core Web Vitals (Fuente: Google) pueden medir todas estas métricas de sincronización utilizando herramientas de desarrollo de navegadores y sitios de prueba de velocidad en línea (WebPageTest, PageSpeed ​​Insights, Lighthouse, etc.).
Las reglas basadas en las puntuaciones de rendimiento calculadas por las herramientas de prueba de velocidad, como Lighthouse y WebPagetest, pueden servir como valores para establecer el presupuesto de rendimiento de su sitio. Debido a que estas herramientas cumplen con las reglas generales. Las mejores prácticas para medir el rendimiento del sitio , puede confiar en ellos para que sean relativamente estables. Puede usar el puntaje de PageSpeed ​​InSights como una medida de rendimiento si usa Lighthouse, también recibirá indicaciones para optimizar el rendimiento e incluso para establecer un presupuesto de rendimiento. Para obtener los mejores resultados, use una combinación de valores de rendimiento basados ​​en la cantidad, el tiempo y las reglas. Cómo establecer un presupuesto de rendimiento Ahora que está familiarizado con lo que es un presupuesto de rendimiento y los diferentes valores que puede usar para establecerlo, exploremos cómo establecer un presupuesto de rendimiento para su sitio web. Paso 1: Investigación preliminar El desempeño de un sitio web depende de muchos factores. Es difícil decidir inmediatamente sobre un presupuesto. Comience con la investigación de su competencia y sitios similares a usted (o lo que está considerando). Si no está seguro de cómo encontrar competencia o sitios similares, aquí hay algunas técnicas:

Busque en Google con el operador de búsqueda avanzada “Relacionado: palabra clave”
Encuentra sitios similares en Alexa
Usar WEB similar

Si su página inicial tiene una diapositiva de imagen y tres secciones más con imágenes y textos, busque páginas similares en la naturaleza y mida su rendimiento.Al realizar mediciones de rendimiento de estos sitios, concéntrese en valores clave, como el peso de la página, el tiempo de carga de la página, las solicitudes HTTP, LCP, FID y TBT.Si rediseña su sitio web sin cambiar su contenido, puede usar los valores de su sitio actuales como punto de partida.Comience por identificar las páginas más importantes de su sitio. Es una página de destino o páginas que atraen el mayor volumen de tráfico.Para obtener una imagen clara de cómo se compara su sitio con la competencia, cree un gráfico con todos los valores de los valores de rendimiento.

Registre todos los valores importantes de los valores de rendimiento (fuente: Google) Según la investigación psicofísica, las personas observan la diferencia entre los cambios en el rendimiento solo cuando la diferencia es al menos el 18%. Puede simplificar esto aún más en una regla del 20%. Entonces, si la página inicial de su sitio actual se cobra en 3 segundos, para que los usuarios observen una diferencia de rendimiento, deben cobrar al menos un 20% más rápido. Esto significa que debe dirigirse a una velocidad de carga de página de al menos 2.4 segundos. Paso 2: Establezca una línea básica para el rendimiento Use WebPageTest y/o desarrolladores de Chrome para medir el rendimiento. Los valores que obtengan no serán precisos para todas las condiciones, pero le servirán como un excelente punto de referencia para confiar en su presupuesto de rendimiento. Es difícil definir un presupuesto solo con valores de cantidad. Por ejemplo, un sitio de comercio electrónico tendrá muchas imágenes de productos, pero un sitio de noticias tendrá principalmente elementos de texto. Sin embargo, si se trata de una plataforma de noticias respaldada por anuncios, entonces debe cargar anuncios de tercera parte y el seguimiento de los usuarios que pueden afectar su rendimiento. Si mide el rendimiento de un sitio utilizando la herramienta de prueba de navegador incorporada, asegúrese de eliminar el caché de su navegador antes de funcionar. Puede usar la extensión Clear Cache Chrome para que este proceso sea mucho más rápido. Si todavía le resulta difícil establecer una línea de referencia, aquí hay valores decentes para comenzar: tiempo de carga de la página en debajo de 3 segundos

Menos de 5 segundos ttimapumum 200 kb de trabajo crítico recursos comprimidos
Paso 3: Establezca el presupuesto de rendimiento en función de los valores que descubrió, establezca el presupuesto de rendimiento inicial para su sitio. El primer presupuesto de rendimiento siempre será una estimación y un límite superior, pero debe esforzarse por establecer lo más preciso posible. Priorizar su sitio para la experiencia del usuario lo ayudará enormemente. Debido a que el contenido puede variar según las páginas de su sitio, establezca un presupuesto de rendimiento para cada tipo de página. Si está ejecutando un sitio web relativamente pequeño (<15 páginas), puede establecer un presupuesto de rendimiento para cada página, ya que no llevará mucho tiempo. ¿Todavía es difícil para usted establecer el presupuesto de rendimiento? Si se encuentra en las etapas de planificación o desarrollo de la construcción de su sitio, puede usar un instrumento como la computadora de presupuesto de rendimiento para estimar el tamaño objetivo de su página y sus diversos elementos para diferentes velocidades de red.
Calcule el presupuesto de rendimiento con esta simple computadora en línea, puede ajustar el tamaño de los elementos de página distintos de acuerdo con sus requisitos, pero siempre mantenga el tamaño total de la página por debajo del límite del presupuesto. Paso 4: Use el presupuesto de rendimiento Un presupuesto de rendimiento es una referencia que le guiará a usted y a su equipo para construir un sitio web de alto rendimiento. Ya sea que sea un diseñador, desarrollador, vendedor o propietario del sitio, si una decisión que tomó puede afectar el rendimiento del sitio, entonces debe consultar el presupuesto de rendimiento para asegurarse de que caiga dentro de los límites establecidos. Por ejemplo, si está a cargo de desarrollar el sitio y el jefe de marketing le pide que agregue un script de análisis hinchado en su sitio, entonces puede usar el presupuesto de rendimiento para explicar a las partes interesadas por qué no es posible agregarlo sin afectando el rendimiento del sitio. Además, si usted es un diseñador UI/UX y las partes interesadas quieren diseñar un sitio web en imágenes, puede usar el presupuesto de rendimiento para explicar por qué es en detrimento del rendimiento y, por lo tanto, de las conversiones. Nota:
Un presupuesto de rendimiento no es un evangelio. A veces, sea pragmático y adapte en consecuencia a medida que implementa ciertas funciones en su sitio. Sin embargo, un presupuesto de rendimiento lo ayudará a evitar estas situaciones con frecuencia. Seguimiento de rendimiento y aplicación de presupuestos de rendimiento en las primeras etapas de su sitio, concéntrese en medir las dimensiones de los activos y el seguimiento de los valores de rendimiento centrados en el usuario, como FCP y TTI. Monitoree y regístrelos regularmente, idealmente, obteniendo los valores directamente de usuarios reales. Esto le mostrará cómo los cambios del sitio pueden afectar su rendimiento y afectar los valores comerciales clave. Para facilitar la búsqueda del rendimiento del sitio web y aplicar presupuestos de rendimiento, puede usar estas herramientas: WebPageTest-One de las herramientas de prueba de velocidad del sitio más confiables. ¡Y es gratis! Si crea una cuenta allí, puede acceder a los resultados de la prueba por hasta un año. También puede automatizar las pruebas con la ayuda de la API WebPageTest.
Lighthouse Lightwallet – Google Lighthouse incluye una característica llamada Lightwallet que puede usar para establecer su presupuesto de rendimiento. Cada vez que pruebe su sitio en Lighthouse, le mostrará automáticamente advertencias si alguno de sus valores excede los límites de presupuesto. También puede usar Lighthouse Bot para establecer un presupuesto de rendimiento y automatizar las pruebas de rendimiento.

SpeedCurve-Este es una herramienta premium para probar y monitorear el rendimiento del sitio web, que también le permite establecer presupuestos de rendimiento. Si encuentra algún valor que exceda los límites de su presupuesto, lo alertará de inmediato. Siga el rendimiento del sitio al presupuesto de rendimiento en SpeedCurve
Calibre: otra herramienta premium para rastrear el rendimiento del sitio web que puede usar para establecer presupuestos de rendimiento y recibir alertas cuando cualquier valor excede el límite de presupuesto.
Completar un presupuesto de rendimiento lo ayuda a concentrarse en realizar su sitio sin afectar la experiencia del usuario o la funcionalidad del sitio. Le servirá como guía para usted y su equipo para decidir qué características agregar al sitio y rendirse. El resultado es un sitio que carga y se siente rápido para sus usuarios. Si es primero un negocio en línea, el rendimiento del sitio es más importante que cualquier otra cosa para lograr sus objetivos comerciales. Establecer un presupuesto de rendimiento permite a todas las partes interesadas integrarse y trabajar juntas como equipo para una causa común: el rendimiento del sitio. ¡Comience a establecer un presupuesto de rendimiento para su sitio hoy! ¿Le gustaría aprender más sobre cómo establecer un presupuesto de rendimiento para su sitio? Pon un comentario a continuación.