Mon site est ~ 500 Ko Gzipped, y compris JS, CSS et images. Il est construit sur l'angularjs. Beaucoup de gens de ma compagnie se plaignent du site étant lent dans des largeurs de bande passante. Il y a quelques questions que je voudrais avoir répondu,
est de 500kb gzippé trop élevé pour les largeurs de bande inférieure? Les gens prétendent que cela prend 20 secondes pour charger sur leur machine, ce qui, à mon avis, est une exagération. Est-ce vraiment dû à Anugularjs et à son temps d'évaluation?
Comment la taille de l'application est-elle importe dans des largeurs de bande passante? Si mon site est de 500 Ko et si je le réduit à 150 Ko en faisant un cadre personnalisé, cela m'aiderais-t-il vraiment à une bande passante inférieure? Si oui, combien?
3 Réponses :
comme Pour diminuer l'heure de chargement de la page Essayez de créer des morceaux de vos fonctionnalités JavaScript, qui ne consistent que des fonctionnalités nécessaires à par exemple. la page d'index pour diminuer le temps de chargement.
Par exemple, lorsque vous utilisez WebPack, la taille de fichier maximale par défaut recommandée est d'environ 244 kb voir ici
angular.js lui-même a une taille gzippée de 57kb il semble qu'il y a beaucoup plus chargé avec cet appel de page initial qui est ~ 10 fois la taille de angular.js .
Tout est subjectif et la définition de "bande passante basse" est plutôt large. Cependant ... en utilisant https://www.download-time.com/ Vous pouvez obtenir un Une idée approximative du temps qu'il faudrait pour télécharger 500kb sur différentes passivres passantes.
Donc, sur n'importe quelle connexion supérieure à 512Kbps (vitesses minimales ADSL, la plupart sont maintenant meilleures que 5 Mbps, et 3G mobile est autour de la même marque), il est peu probable que la taille du fichier soit le problème.
Si "Low Bandwidth" implique également un "matériel limité" (RAM, CPU), il est possible que le problème de performance réside dans le décompression et le traitement de votre application. Angulaire est assez réactif, mais le matériel bas de gamme peut avoir du mal à lutter.
Les causes profondes ci-dessus justifieraient de réécrire l'application à l'aide de votre propre cadre personnalisé.
Le problème le plus probable, cependant, est tout actif / ressources / modèles Votre application angulaire nécessite lors de l'initialisation - images, fichiers JSON, etc. Ceci est difficile à comprendre sans détails spécifiques - chaque application est différente. La bonne nouvelle est que vous n'auriez pas besoin de réécrire votre demande - vous devriez pouvoir utiliser votre application existante et le modifier. Je suppose que l'application de 500 ko ne peut pas être considérablement réduite en taille sans réécriture et que le problème de la vitesse est réduit pour charger des actifs supplémentaires dans le démarrage.
J'utiliserais les outils de développement de Google Chrome pour voir ce qui se passe. L'onglet «Performances» a une option permettant de simuler différents types de conditions de réseau. L'onglet "Réseau" vous permet de voir quels actifs sont chargés et combien de temps ils prennent. Je regarderais quels actifs prennent du temps et voyant lequel de ceux-ci peuvent être chargés de paresseux. Par exemple, si l'application est chargée d'un très grand fichier d'image au démarrage, cela pourrait peut-être être chargé de paresseux, permettant à l'application d'apparaître plus rapidement à l'utilisateur final plus rapidement. Un moyen courant d'améliorer les performances perçues consiste à utiliser Chargement paresseux .
logique. permet d'ignorer le facteur matériel pour l'instant. Dans le monde d'aujourd'hui avec les vitesses Internet, 500 Ko sont-ils vraiment importants pour envisager une chargement paresseux?
J'ai essayé de clarifier ma réponse. Je suppose que la vitesse de démarrage lente est due au code de votre application 500K charger des actifs supplémentaires dans le cadre du lancement des applications. Si tel est le cas, le chargement paresseux aidera certainement. Je ne pense pas que vous obtiendrez beaucoup d'avantage de convertir l'application 500K existante en chargement paresseux.
Pour diminuer votre temps de chargement, traiter votre mise en cache et trouver le bon outil de téléchargement pour calculer la vitesse de téléchargement de votre fichier. Vous pouvez utiliser https://downloadtime.org pour référence. Si vous avez des problèmes, faites-le moi savoir. De plus, pour diminuer l'heure de chargement de la page, essayez de créer des morceaux de vos fonctionnalités JavaScript, qui ne consistent que des fonctionnalités nécessaires à par exemple. la page d'index pour diminuer le temps de chargement.
Avez-vous mis en cache les modèles? Ou fait-il que Angularjs récupère chaque modèle 1 de 1? Essayez de regrouper votre application entière, vous devriez avoir 2 demandes: angular.min.js et app.min.js. Voir la cache de modèle de gervul
Permet de considérer incaché. Puisque le site est toujours lancé sur le mode Incognito.
Utilisez cette NPMJS.com/package/gulp-templateCache , il intégrera vos modèles dans Les fichiers JS, aucune demande nécessaire pour récupérer des modèles. augmenter considérablement le démarrage de l'application.