En nuestra búsqueda continua de la velocidad de la página, a menudo nos encontramos regresando al mismo punto. A pesar de los esfuerzos de los equipos de producto, marketing y crecimiento para motivar a los equipos de tecnología, las tareas que podrían mejorar el rendimiento del sitio a menudo se posponen debido a la necesidad de refactorización, e incluso cuando se realizan, no siempre arrojan resultados completos. En este ciclo, es beneficioso considerar algunas perspectivas reveladoras sobre cómo lograr un desempeño real. Por ejemplo, ¿qué lecciones podemos aprender de la velocidad de React.js y Vue.js o sus extensiones SSR (representación del lado del servidor) como Next.js y Nuxt.js en comparación con otras plataformas? ¿No es hora de optimizar los MB de los archivos jQuery y CSS? ¿Cuándo despertarán las grandes empresas que sacrifican su rendimiento web por desarrolladores front-end mal informados? Abordemos estas preguntas una por una.
¿Por qué los sitios basados en Next.js y Nuxt.js son rápidos?
Las plataformas Next y Nuxt, que son estructuras compatibles con SEO construidas sobre React y Vue, se destacan por su velocidad de rendimiento. Pero ¿por qué estas plataformas son tan rápidas?
React.js y Vue.js son marcos basados en componentes que dividen cada página en subcomponentes, como se muestra a continuación.
Tomemos un ejemplo del mundo real para ilustrar este punto: una página de listado de comercio electrónico. Se puede considerar que esta página de listado tiene los siguientes subcomponentes:
- Encabezamiento
- Publicaciones
- Información de entrada del listado
- Título de la página
- Breadcrumb
- Recuento de productos
- Filtrar
- Filtro de categoria
- filtro Precio
- ...
- Clasificación:
- Tarjetas de productos
- Foto del producto
- Detalles del producto
- Nombre de Producto
- Precio del producto
- Precio tachado
- Precio de venta
- Tasa de descuento
- Información de campaña
- Paginación
- Contenido de la categoría
- Información de entrada del listado
- Pie de página
Al crear una aplicación basada en componentes con Nuxt.js, cada uno de estos componentes se codifica por separado y se incluye en la página maestra. Por ejemplo, considere un archivo llamado ProductPhoto.js. Independientemente de las funciones necesarias para las fotografías de productos (carrusel, visualización de imágenes receptivas, etc.), el código JS está escrito dentro de este componente. Del mismo modo, solo se incluyen los archivos CSS utilizados por este componente. Esto significa que solo se ejecutan los archivos requeridos por cada componente si se utiliza el componente.
¿Cómo se maneja este proceso actualmente en la mayoría de las plataformas web?
Un archivo script.js incluye código para todo, desde membresía, filtros y páginas de carrito hasta el menú, que se ejecuta en todas las páginas. ¿El resultado?
Sitios web con un Archivo JS de 3 MB y CSS de 1.5 MB archivo. El principal problema no es sólo el tamaño de los archivos, sino el hecho de que no se puede esperar que la CPU de un dispositivo móvil Android promedio ejecute miles de líneas de código en milisegundos. Al ejecutar solo el código que necesita, puede lograr mejoras en el rendimiento.
¿Cómo eliminar los recursos que bloquean el renderizado?
Hoy en día, el 32% del millón de sitios web principales utilizan la biblioteca de fuentes Font Awesome, que tiene un promedio de alrededor de 1 KB. Teniendo en cuenta que no se prefiere la carga asincrónica debido al efecto de movimiento rápido, piense en cuántas fuentes son visibles en la primera pantalla de una página cuando se abre en un dispositivo móvil o de escritorio. Un breve estudio en 250 plataformas diferentes encontró que se utilizan un promedio de 50 íconos (más comúnmente: carrito, usuario, menú, notificación). Así, para cargar sólo cuatro iconos sin problemas, cargamos toda la biblioteca.
¿Cómo gestionan esto los marcos JS avanzados? Al importar solo el formato SVG de los íconos utilizados en el componente relevante, se elimina la necesidad de cargar bibliotecas enteras de fuentes o CSS.
¿Qué nos dice el uso de Bootstrap versus React JS?
La biblioteca Bootstrap JS tiene una participación de mercado del 26% en todos los sitios del mundo, mientras que el uso de React ronda el 4%. Bootstrap es popular por su flexibilidad y facilidad de uso, lo que permite un desarrollo rápido. Sin embargo, esta flexibilidad tiene un costo: su proyecto incluye funciones generales de JS, una amplia cobertura de código y funciones para características que quizás nunca utilice.
Entonces, preguntémonos: ¿Qué significa un aumento de más del 100% en el uso del Los 10,000 primeros a los 1,000 sitios principales indican? Demuestra que los mejores están aprovechando los detalles para ser aún mejores.
En resumen, en lugar de reescribir nuestros sitios con tecnologías como Siguiente, Nuxt, Angular, React, Vue, etc., debemos comprender qué hacen bien estas tecnologías para aumentar la velocidad y aplicar estas mejores prácticas a nuestras aplicaciones web.
