¿Mi sitio web se cargará más rápido si lo genero desde AngularJS en lugar de codificarlo todo en HTML?

Realmente, no hay una bala mágica para hacer que un sitio web se cargue más rápido, pero puede hacer algunas cosas para ayudar. Afortunadamente, puedes encontrar algo de esta magia cocinada directamente.

Echa un vistazo a algunos de los kits de inicio de reacción. Por ejemplo, React Boilerplate (GitHub – react-boilerplate / react-boilerplate: una base altamente escalable, fuera de línea, con la mejor experiencia de desarrollador y un enfoque en el rendimiento y las mejores prácticas). Como parte del proceso de compilación, la aplicación se dividirá en varias piezas más pequeñas que solo se cargarán cuando sean necesarias. Del mismo modo, hay kits de inicio para Angular2 que harán lo mismo, como Angular2 Webpack Starter (GitHub – AngularClass / angular2-webpack-starter: un kit de inicio angular con Angular 2 y Angular 4 (Router, Http, Forms, Services, Pruebas, E2E, Dev / Prod, HMR, Async / Lazy Routes, AoT via ngc), Karma, Protractor, Jasmine, Istanbul, TypeScript 2, TsLint, Codelyzer, Hot Module Replacement, @types y Webpack 2 de @AngularClass).

El verdadero truco en ambos casos lo lleva a cabo Webpack, que se utiliza en el proceso de compilación para vincular las distintas piezas de su aplicación, generalmente por ruta. Por lo tanto, si tiene dos partes de la aplicación, una debajo de / login y otra debajo de / app, ambas se cargarán individualmente, según el lugar donde el usuario cargue el sitio. Si su sitio está cargando todo el JavaScript y CSS inmediatamente en la carga de la página, esto definitivamente puede disminuir el tiempo de carga de la página.

Sin embargo, si el tiempo de carga pesado se basa completamente en la representación, en lugar de cargar activos, entonces tendrá que centrarse más en la aplicación misma. React tiene un conjunto de herramientas de rendimiento integradas (Performance Tools – React). Me imagino que Angular2 tiene algo similar. Un buen lugar para comenzar, en cualquier caso, es usar las Herramientas para desarrolladores de Chrome para tener una idea de cómo se procesa la página (Cómo usar la herramienta de línea de tiempo | Web
El | Desarrolladores de Google).

Finalmente, si su sitio web se carga lentamente debido a la carga de una gran cantidad de datos, el almacenamiento en caché agresivo de los datos de uso frecuente y el examen de los cuellos de botella en la base de datos pueden ayudar. Puede comenzar revisando el kit de herramientas de Percona para explorar una variedad de problemas (documentación del kit de herramientas de Percona).

¡Buena suerte!

¡Tal vez!

Eche un vistazo a la respuesta de Logan Etherton aquí, él le presenta algunas cosas interesantes para que su sitio web se procese en bloques, por lo que presentará información esencial más rápido para el usuario.

Pero antes de eso, intentaré echar un vistazo a Page Speed ​​Insights, es un servicio realmente bueno y ayuda mucho a acelerar los sitios web, no puede intentar optimizar todos sus activos, “estilos críticos” en línea, hacer sprites para reducir http solicitudes, configure el almacenamiento en caché en su servidor y muchas más cosas realmente buenas, puede verificar todo allí.

Si su sitio tiene muchas imágenes, también puede “cargarlas”, es un buen truco que acelera muchos sitios web con una gran cantidad de imágenes.

Incluso si rehace todo su sitio web para renderizar en Angular, vigile Page Speed.

Usar un marco front-end y cargar todo el contenido con eso hará que el tiempo de carga de tu página sea más lento.

Sin embargo, puede usar JavaScript para llenar dinámicamente partes de su página después de que el contenido principal se haya cargado para que el sitio parezca más rápido. Supongamos que tiene un diseño de página básico con contenido básico y una larga lista de cosas …

Primero puede representar el esqueleto de la página, el contenido básico y los primeros diez elementos de la lista. Luego implemente alguna forma de carga diferida para cargar los elementos de la lista subsiguiente a pedido.

Sin embargo, no necesariamente necesita un marco angular o de otro tipo … Solo algunas llamadas de Ajax y algún código para agregar nuevos elementos a la lista.

No soy un gran admirador de Angular, así que no puedo responder tu pregunta por completo; sin embargo, sé que una forma de acelerar cualquier sitio web es a través de la carga diferida, es decir, solo cargando datos cuando los necesita a través de AJAX. Hago esto en todos mis sitios web. Espero que esto ayude. 🙂

Deberías usar AMP