El desarrollo web Front-end consiste en la conversión de datos en una interfaz gráfica para que el usuario pueda ver e interactuar con la información de forma digital usando HTML, CSS y JavaScript. Esto explica a grandes rasgos cómo funciona una página web y es fundamental para cualquier persona que trabaje en el mundo digital. 

¡Hagamos 2021 rápido! Una lista de verificación anual de rendimiento de front-end con todo lo que necesitas saber para crear experiencias rápidas en la web hoy, actualizado desde 2016. 

 El rendimiento web es una bestia engañosa, ¿no es así? ¿Cómo sabemos realmente dónde nos encontramos en términos de desempeño y cuáles son exactamente nuestros cuellos de botella? ¿Es JavaScript caro, entrega lenta de fuentes web, imágenes pesadas o renderizado lento? ¿Hemos optimizado lo suficiente con agitación de árboles, izado de alcance, división de código y todos los patrones de carga sofisticados con observador de intersección, hidratación progresiva, sugerencias de clientes, HTTP / 3, trabajadores de servicio y, oh, Dios mío, trabajadores de borde? Y, lo más importante, ¿por dónde empezamos a mejorar el desempeño y cómo establecemos una cultura de desempeño a largo plazo?

En el pasado, la actuación era a menudo una simple ocurrencia diferida hasta el final del proyecto. Se reduciría a la minificación, la concatenación, la optimización de activos y, posiblemente, algunos ajustes finos en el archivo de configuración del servidor. Mirando hacia atrás, en el presente las cosas parecen haber cambiado significativamente.

El rendimiento ya no es solo una preocupación técnica, pues afecta todo. Desde la accesibilidad hasta la usabilidad y la optimización del motor de búsqueda. Por tanto, cuando se integra en el flujo de trabajo, las decisiones de diseño deben basarse en sus implicaciones en el rendimiento. El rendimiento debe medirse, monitorearse y refinarse continuamente, y la creciente complejidad de la web plantea nuevos desafíos que dificultan el seguimiento de las métricas, porque los datos variarán significativamente según el dispositivo, el navegador, el protocolo, el tipo de red y la latencia (CDN, ISP, cachés, proxies, firewalls, equilibradores de carga y servidores, todos juegan un papel en el rendimiento).

Entonces, si crearamos una descripción general de todas las cosas que debemos tener en cuenta al mejorar el rendimiento, desde el inicio del proyecto hasta el lanzamiento final del sitio web, ¿cómo sería?

A continuación, encontrarás una lista de verificación de rendimiento de front-end (con seguridad totalmente imparcial y objetiva) para 2021: una descripción general actualizada de los problemas que puedes necesitar considerar para asegurarte de que tus tiempos de respuesta sean rápidos, la interacción del usuario sea fluida y no agotar en tus sitios web, el ancho de banda del usuario.

 ¡A prepararnos! planificación y métricas.

 Las micro optimizaciones son excelentes para mantener el rendimiento encaminado, pero es fundamental tener objetivos claramente definidos en mente: objetivos medibles que influyen en las decisiones que se tomen durante el proceso. Hay un par de modelos diferentes, de los cuales presentaremos algunos a continuación. Asegúrate de establecer tus propias prioridades desde el principio.

1.Establece una cultura de actuación.

En muchas organizaciones, los desarrolladores de aplicaciones para usuario saben exactamente cuáles son los problemas subyacentes comunes y qué estrategias deben usarse para solucionarlos. Sin embargo, mientras no exista un respaldo establecido de la cultura de desempeño, cada decisión se convertirá en un campo de batalla de departamentos, dividiendo la organización en silos. Es necesaria la aceptación de las partes interesadas de la empresa y, para obtenerla, debes establecer un estudio de caso o una prueba de concepto sobre cómo la velocidad, una opción viable es Core Web Vitals, que beneficia las métricas y los indicadores clave de rendimiento(KPI) que les interesan.

Por ejemplo, para que el rendimiento sea más tangible, puedes exponer el impacto en el rendimiento de los ingresos mostrando la correlación entre la tasa de conversión y el tiempo de carga de la aplicación, así como el rendimiento de la representación. O la tasa de rastreo del robot de búsqueda.

Sin una alineación sólida entre los equipos de desarrollo / diseño y de negocios / marketing, el rendimiento no se mantendrá a largo plazo. Así que te recomendamos estudiar las quejas comunes que llegan al servicio al cliente y al equipo de ventas, al igual que estudiar las analíticas para detectar altas tasas de rebote y caídas de conversión. Explora cómo mejorar el rendimiento, eso te puede ayudar a aliviar algunos de estos problemas comunes. Así como ajustar el argumento según el grupo de partes interesadas con el que estas hablando.

Ejecuta experimentos de rendimiento y mide los resultados, tanto en dispositivos móviles como en computadoras de escritorio. Te ayudarán a crear un estudio de caso personalizado para la empresa con datos reales. Además, el uso de datos de estudios de casos y experimentos publicados en WPO Stats ayudará a aumentar la sensibilidad de las empresas sobre por qué es importante el rendimiento y qué impacto tiene en la experiencia del usuario y las métricas comerciales. Sin embargo, afirmar que el rendimiento importa por sí solo no es suficiente; también debes establecer algunos objetivos medibles y rastreables y observarlos a lo largo del tiempo. 

Al tener estas conversaciones en las organizaciones, es importante tener en cuenta que, al igual que la UX es un espectro de experiencias, el rendimiento web es una distribución. Así que esperar que un solo número pueda proporcionar una calificación a la que aspirar es una suposición errónea.  

2.Ser al menos un 20% más rápido que tu competidor más rápido.

Según la investigación psicológica, si deseas que los usuarios sientan que tu sitio web es más rápido que el sitio web de tu competidor, debes ser al menos un 20% más rápido(Y esto es el límite inferior, por lo que debes aspirar siempre a más). Así que te recomendamos que estudies a tus principales competidores, recopiles métricas sobre su desempeño en dispositivos móviles y computadoras de escritorio y establezcas umbrales que te ayuden a superarlos. Sin embargo, para obtener resultados y objetivos precisos, primero debes asegurarte de obtener una imagen completa de la experiencia de tus usuarios al estudiar sus análisis. Luego, puedes imitar la experiencia del percentil 90 para las pruebas.

 Para tener una buena primera impresión de cómo se desempeñan tus competidores, puedes usar Chrome UX Report (CrUX, un conjunto de datos de RUM listo para usar, video de introducción de Ilya Grigorik y guía detallada de Rick Viscomi), o Treo, una herramienta de monitoreo de RUM que funciona con Chrome UX Report. Los datos se recopilan de los usuarios del navegador Chrome, por lo que los informes serán específicos de Chrome, pero te brindarán una distribución bastante completa del rendimiento, sobre todo las puntuaciones de Core Web Vitals, en una amplia gama de visitantes. Debes tener en cuenta que los nuevos conjuntos de datos de CrUX se publican el segundo martes de cada mes.

• Una vez que tengas un presupuesto establecido, incorpóralos en tu proceso de compilación con Webpack Performance Hints y Bundlesize, Lighthouse CI, PWMetrics o Sitespeed CI para hacer cumplir los presupuestos en las solicitudes de extracción y proporcionar un historial de puntuación en los comentarios de relaciones públicas.

  Para exponer los presupuestos de rendimiento a todo el equipo, debes integrarlos en Lighthouse a través de Lightwallet o usa LHCI Action para una integración rápida de Github Actions. Y si necesitas algo un poco más personalizado, puedes usar webpagetest-charts-api, una API de puntos finales para crear gráficos a partir de los resultados de WebPagetest.

  Al igual que en Pinterest, puedes crear una regla de eslint personalizada que no permita la importación de archivos y directorios que se sabe que tienen muchas dependencias y que inflarían el paquete. Puedes configurar una lista de paquetes “seguros” que se pueden compartir con todo el equipo.

  Además, piensa en las tareas críticas del cliente que son más beneficiosas para tu negocio. Estudia, discute y define límites específicos de tiempo aceptables para éstas y establece marcas de tiempo de usuario “listas para UX” que toda la organización haya aprobado. En muchos casos, los viajes de los usuarios tocarán el trabajo de muchos departamentos diferentes, por lo que la alineación en términos de tiempos aceptables ayudarán a respaldar o evitar discusiones de desempeño en el futuro. Asegúrate de que los costos adicionales de recursos y funciones adicionales sean visibles y se comprendan.

   

  Alinea los esfuerzos de desempeño con otras iniciativas tecnológicas, que van desde las nuevas características del producto que se está construyendo hasta la refactorización para llegar a nuevas audiencias globales. Entonces, cada vez que ocurre una conversación sobre un mayor desarrollo, el rendimiento también es parte de esa conversación. Es mucho más fácil alcanzar los objetivos de rendimiento cuando el código base está actualizado o simplemente se está refactorizando.

  Asimismo, vale la pena planificar una secuencia de carga y compensaciones durante el proceso de diseño. Si priorizas desde el principio qué partes son más críticas y define el orden en el que deben aparecer, también sabrás qué se puede retrasar. Idealmente, ese orden también reflejará la secuencia de tus importaciones de CSS y JavaScript, por lo que su manejo durante el proceso de compilación será más fácil. Además, puedes y debes considerar cuál debería ser la experiencia visual en estados “intermedios”, mientras se carga la página (por ejemplo, cuando las fuentes web aún no se cargan).

Una vez que hayas establecido una sólida cultura de desempeño en tu organización, intenta ser un 20% más rápido que tu antiguo yo para mantener intactas las prioridades a medida que pasa el tiempo (eso de superarte cada vez se toma más en serio). Pero debes tener en cuenta los diferentes tipos y comportamientos de uso de sus clientes (que Tobias Baldauf llamó cadencia y cohortes), junto con el tráfico de bots y los efectos de estacionalidad.

Planificación, planificación, planificación. Puede ser muy tentador entrar en algunas optimizaciones rápidas de “frutas fáciles de colgar” desde el principio, y podría ser una buena estrategia para obtener ganancias rápidas, pero será muy difícil mantener el desempeño como una prioridad sin una planificación y un establecimiento realista.

Las tecnologías Frontend están en constante evolución, hacen al desarrollador más productivo y resuelven diferentes necesidades. En el año 2021 habrán tecnologías nuevas y algunas habrán evolucionado, así que es necesario que las tuyas destaquen sobre tu competencia.

Sobre todo, hay que estar atentos a todo lo nuevo que nos pueda traer este año. Así que te recomendamos que te quedes pendiente de las nuevas tendencias. Ya sabes, si necesitas la ayuda de expertos, en Creante Lab estamos dispuestos a ayudarte siempre que lo necesites.

Fuentes

https://dev.to/betoarpi/como-ser-mejor-front-end-en-2021-2jpp

https://blog.nubecolectiva.com/5-tendencias-que-se-daran-en-el-desarrollo-frontend-para-el-2021/

https://platzi.com/blog/que-es-frontend-y-backend/

https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/