🔥 Solo 5 minutos para cambiar la vista.

¿Qué es la sacudida de los árboles? ¿Y por qué es importante para el rendimiento de su web?

¿Hasta mucho tiempo, quieres leer?

¿La web se carga lentamente como una tortuga que se arrastra? Problemas que todas las personas en la web tienen que encontrar

¿Alguna vez has sentido que el sitio web que pretendemos hacerlo bien, tanto hermoso como completo? Pero cuando es hora de usarlo, "lento" es frustrante? Los clientes han entrado y tienen que esperar mucho tiempo antes de que termine el sitio web. Mucha gente no puede soportarlo. Presione antes de ver nuestros productos o servicios, incluso las estadísticas impactantes son solo unos segundos para descargar la web, puede hacer que la tasa de rebote (tasa de clics) aumente y la tasa de conversión cae. Este es un problema real que no es causado por diseños poco atractivos, pero es el "rendimiento" del sitio web lo que le advierte.

Aviso: la imagen del usuario muestra una expresión irritada mientras mira la pantalla de la computadora o el móvil. Que tiene un símbolo de carga de vino transmite la sensación de esperar el sitio web de descarga

¿Por qué es lenta la web? La fuente del código que no se usa (pero aún tiene que descargar)

En la era de los sitios web más complejos, tendemos a usar biblioteca o marcos para ayudar a que sea más fácil y más rápido, como React, Vue o incluso agregar complementos en nuestro sistema. Estas herramientas a menudo vienen con una gran cantidad de código JavaScript, pero el problema está en una página web. Podemos llamar solo al 10-20% del código completo que importa, pero el navegador del usuario debe descargar el código "completo" que no usamos. Haciendo que el tamaño del archivo JavaScript (tamaño del paquete) sea más grande de lo necesario, como pedimos una pizza grande, pero solo una pieza del resto tuvo que llevarlo de regreso a casa también. Esta es la razón principal por la que su sitio web "gordo" y "lento" sin saberlo.

Aviso: las imágenes infográficas comparan dos árboles. Un árbol tiene una rama completa. (En lugar de todo el código en la biblioteca) y otro árbol solo tiene las ramas necesarias y tiene una hoja exuberante. (En lugar del código activo real) con una flecha que apunta desde el primer árbol al segundo árbol con el mensaje "Código no utilizado" fue asesinado.

¿Deja que el sitio web "gordo" continúe sucediendo?

Tener un código no utilizado en el sitio web, hay mucho peor impacto de lo que creo. No es solo una cuestión de sentimientos lentos. Pero afecta directamente su negocio y su rango de SEO:

  • Core Web Vitals cae: el sitio web que carga mucho de JavaScript bloqueará la operación del navegador, lo que empeora el LCP (pintura contenta más grande) e INP (interactiva a la siguiente pintura) , que Google usa como un factor importante en la clasificación.
  • Ranking de SEO: cuando los malos vitales, Google verá que su sitio web ofrece malas experiencias para los usuarios. Y puede hacer que su rango esté fácilmente de acuerdo
  • Escapar de los usuarios: a nadie le gusta esperar. Si su sitio web es lento, el usuario presionará para cerrar y encontrar competidores en la web más rápido.
  • La tasa de conversión disminuyó: cuando el usuario escapó de todas las oportunidades para que cambie a la audiencia a un cliente (conversión) es casi cero.

En otras palabras, dejar que su sitio web tenga un exceso "gordo" del código que no se usa. Es como destruir sus propias oportunidades comerciales. Los recursos de bloqueo de renderizado son algo que no debe pasarse por alto.

Aviso: 3 imágenes de gráficos que muestran resultados negativos: 1 'clasificación de SEO', la segunda barra, la 'frustación del usuario' aumenta, la tercera plomería de 'tasa de conversión' con un icono fácil de entender.

"Shaking de árboles", el héroe que ayudará a reducir el exceso de código.

Es el héroe de este evento. ** ¿Qué es la sacudida de los árboles? ** La respuesta más fácil es el proceso "Ensalada del código muerto (código muerto) que queda". Imagine el árbol que "sacudimos" para que se sequen las hojas. Los muertos cayeron. Dejando solo ramas y hojas que aún son frescas y fuertes en el mundo de la escritura de códigos, el sacudido de los árboles es el proceso que Bundler (las herramientas que combinan diferentes archivos de código como Webpack o Rollup) analizarán nuestro código, tanto el proyecto. Luego busque `` function`, `variable`, o 'módulo` ¿Cuáles son` `importar sdpo, pero nunca se ejecuta en uso? "Dejar solo el código que es realmente necesario, lo que hace que el sitio web se descargue significativamente

Aviso: la imagen de animación o infografía muestra el proceso: 1. El cuadro grande tiene mucho código. (Tanto usados ​​como no utilizados) fluye hacia la máquina llamada "Bundler de sacudidas de árboles". 2. Algún código se ha separado en la basura. 3. El resultado es una pequeña caja. Con solo el código necesario

Ejemplos de lo real: reduzca el tamaño del archivo 70%. Solo usa sacudidas de árboles.

Digamos que hay una empresa de desarrollo de aplicaciones web para la gestión de proyectos. Al principio, el trabajo de su aplicación fue muy lento debido al uso de una gran biblioteca de interfaz de usuario, pero solo unos pocos componentes usan el equipo de desarrollo, descubrió que el archivo JavaScript principal es de 1.5MB, que es demasiado grande. Después de verificar el proceso de compilación, descubrieron que el agitación de los árboles no se activaba correctamente en el modo desarrollado.

El equipo ha mejorado la configuración en el webpack para funcionar correctamente cuando la compilación para la producción. El resultado es la temblor de los árboles. Puede analizar y cortar el componente que no se usa enorme. ¡El tamaño final del archivo JavaScript se reduce de 1.5MB a solo 450 kb o ** reducido a casi el 70%! ** El sitio web se ha descargado más de 2 segundos. La experiencia del usuario también mejoró también. Este es el poder de "corte de grasa" para su código.

Aviso: Claramente antes/después: 'antes', un gráfico de tamaño de archivo de 1.5Mb y tiene una página de descarga lenta. 'After' es un gráfico que muestra el tamaño del archivo de 450kb y tiene la misma página web que ha terminado de descargar con las sonrisas de los usuarios.

¿Quieres hacer sacudidas de los árboles, cómo comenzar? (Lista de verificación para desarrolladores)

Para los desarrolladores que desean estar seguros de que su proyecto es completamente útil por el temblor de los árboles. Esta es una lista de verificación simple que puede seguir de inmediato:

  • Utilice la sintaxis del módulo ES2015 (`` import 'y `export': el saco de árboles se basa en el análisis estático, que funciona mejor con el` `módulo de importación/exportación (módulo ES), por lo que evite el uso de los comanjs en los códigos del lado del cliente. MDN Web Docs Webs.
  • Configure su Bundler correctamente: para la Webpack, solo establece 'Modo:' Producción '', habilitará automáticamente el agitación de los árboles y otros optimizarán.
  • Tenga cuidado con los efectos secundarios: en su archivo 'json's paquete.json, intente buscar "efectos secundarios" clave: falso' para decirle al Bundler, "el código en este paquete no tiene efectos secundarios que no pueda reducir la importación". Lo que ayudará al regreso a trabajar de manera más eficiente.
  • Consulte los resultados: use herramientas como 'Webpack-Bundle-Analyzer' para ver en su último archivo de paquete. ¿Hay un código innecesario? Le ayudará a ver la imagen general y encontrar un punto que debe mejorarse.

La mejora del rendimiento no es solo la sacudida de los árboles. Otras técnicas, como la arquitectura de la isla o la estrategia de carga de fuentes, son algo que debe estudiar también.

Aviso: Imágenes de la lista de verificación con cada icono: icono JavaScript ES6, icono de configuración, efectos secundarios y analizar iconos para que sea fácil de entender y se puede usar.

Preguntas que la gente tiende a preguntarse sobre la sacudida de los árboles

¿Se puede usar la sacudida de los árboles con CSS?
¡bueno! Hay herramientas como Purgecss que funcionan de manera similar. Escaneará sus archivos HTML y JavaScript para ver qué nombre de clase se ha utilizado. Eliminará el CSS que no se usa desde el archivo final. Ayuda a reducir el tamaño del archivo CSS de manera eficiente

¿En qué se diferencia el árbol de los árboles de la minife?
La diferencia es clara. La minificación es eliminar caracteres innecesarios del código, como brechas, nuevas líneas o acortar el nombre de la variable. Pero todo el código (lógica) todavía está completo. El temblor de los árboles está "eliminando todo el blog" que no tiene utilidad. Ambas técnicas a menudo se usan juntas para obtener los archivos más pequeños.

¿Tienes que hacer temblar árbol solo cada vez?
No hay necesidad. En la mayoría de los casos, el marco moderno (como Next.js, Crear aplicación React, Vue CLI) establecerá automáticamente el Bundler (Webpack). Cuando realiza un pedido de construcción en el modo de producción, nuestro deber es escribir el código para que sea amigable.

Si mi código tiene efectos secundarios, ¿qué pasará?
El efecto secundario es un código que hace algo tan pronto como la importación (como editar el objeto global o agregar CSS a DOM), lo que puede hacer que los árboles de los árboles no se atrevan a cortar ese código debido al temor de que el programa se rompa. Si es necesario tener un archivo con un efecto secundario, el valor debe limitarse a `paquete.json` es" efectos secundarios ": [" ./path/to/your/file.js "]` `para decirle a Bundler y no cortar ese archivo.

Aviso: La gran imagen de icono de preguntas y respuestas con preguntas 2-3 se realizan respuestas importantes en torno al formato de burbuja del habla que es fácil de leer.

Resumen: Corte la grasa al mejor rendimiento.

En este punto, todos probablemente entienden qué es ** Tree Shoking ** y ¿por qué es una herramienta poderosa e indispensable en el desarrollo de sitios web modernos? Es un proceso automático que ayuda a "grasa de hierro" o código innecesario de nuestro proyecto. Hace que el sitio web sea más pequeño, cargando más rápido, proporcionando una buena experiencia para los usuarios y directamente con el rango de SEO

No permita que el código que no se utilice para mantener el rendimiento de su sitio web. Volvamos y verifiquemos su proceso de construcción hoy de que el héroe llamado "Tree Shaking" ya está abierto. Definitivamente dará una enorme recompensa a largo plazo

Y si necesita un experto para actualizar el desempeño de su sitio web, ya sea que haga un código que se divide, la optimización o el desarrollo complejo, nuestro equipo está listo para dar consejos, servicio de desarrollo de flujo web avanzado puede ayudarlo a crear el sitio web más rápido y más fuerte.

Aviso: Resumen poderoso: los cohetes se están elevando al cielo. La palabra "rendimiento web" se adjunta al cohete. Debajo del escudo se escribe "Shaking" de árboles para evitar el código no utilizado.

compartir

Blog reciente

WebFlow vs Frame: ¿Qué plataforma es adecuada para crear un sitio web de inicio que quiera crecer rápido?

Compare los choques, la conmoción entre el flujo web y el enmarcador para el inicio que enfatiza la velocidad de apertura, la belleza y la capacidad de escala.

"Core Web Vitals" para la web. Corporate: ¿Por qué la velocidad afecta la confiabilidad y las ventas?

¡La velocidad web no es solo técnica! En la profundidad de que la web central vital (LCP, INP, CLS) afecta la clasificación de SEO, la experiencia del usuario y cómo las ganancias de la Web de la organización

Cómo diseñar un pie de página de un sitio web para ser más "al final de la web" pero es "herramienta principal"

¡No pase por alto los pies de pie! Una colección de técnicas de diseño de pies de pie del sitio web que ayudan a mejorar UX, complementar el SEO y cambiar los visitantes para convertirse en el líder.