J'ai besoin d'optimiser la vitesse de chargement de plusieurs sites Web existants. L'une des questions que j'ai est la quantité de demandes par page. Les sites Web ont 7 types de pages différents qui doivent charger différents types de CSS et JavaScripts car ils contiennent différents widgets ou fonctionnalités. Actuellement, chaque widget ou fonctionnalité possède son propre fichier JavaScript. Je prévois de combine et minifiez les fichiers pour avoir moins de demandes.
Je considère que je envisage des sites Web à grande échelle A.K.A. Des portails ou des réseaux sociaux.
(BTW, il existe certaines bibliothèques qui demandent que je ne peux pas contrôler, par exemple TinyMCE ou Google Maps).
homepage.js ,
listing.js ,
détail.js ,
jquery.js + jquery.cookie.js + commun.js ,
list.js + paging.js + favori.js ,
détail.js + favori.js ,
init.js va vers do.js va à
11 Réponses :
En général, je concaténe et miniez tous les scripts sur le site et ne servent que deux demandes - une pour JS et une pour CSS. L'exception à cette règle est si une certaine page a un script de taille considérable qui ne s'exécute que dans ce cas, il devrait être chargé séparément.
Chargez tous les scripts JS au bas de votre page pour empêcher les scripts de bloquer la charge de la page.
Dans ce cas, les fichiers JS et CSS peuvent être trop gros et il peut être trop long pour exécuter l'essai d'initialisation de tous les widgets disponibles.
Que voulez-vous dire "pourrait"? Vérifiez et voyez si c'est vrai. C'est une stratégie générale et, bien sûr, il y a des exceptions.
comme toujours: ça dépend. Plus les fichiers spécifiques à la page sont plus grands sont, plus il est logique de les garder séparément. S'ils ne sont pas gros (réfléchissez à 10 ko minifiés), il est probablement plus logique de rejoindre, de minimiser et de les compresser, de sorte que vous puissiez sauver quelques demandes et compter sur la mise en cache.
Minification et combinant JS ne font que partie de la bataille. Le placement des fichiers est plus important. JavaScript OBTRUSTATIF doit être la dernière chose chargée de la page, car elle fera arrêter la charge de la page jusqu'à ce qu'elle soit faite au chargement.
Consolider ce que vous pouvez, mais l'utilisation de la fermeture et l'utilisation de fermetures peut aider à garder le DOM propre de vos appels de fonction jusqu'à ce qu'ils soient nécessaires.
Il existe des outils pouvant tester la vitesse de la page de la page.
Le panneau net dans Firebug ainsi que Yslow sont des outils utiles que vous pouvez utiliser pour aider à déboguer la vitesse de chargement de la page.
bonne chance et javascripteur heureux!
Habituellement, vous pouvez utiliser le motif suivant:
Avec cette pratique, vous avez juste Vous pouvez également utiliser le même principe pour le CSS. Ceci est efficace, mais comme mentionné par une autre réponse, vous pouvez en réalité prendre cela plus loin et tout regrouper en 1 JS uniquement. C'est une préférence ou un style. J'aime le casser en 2 car il garde les choses logiques pour moi.
Assurez-vous ce qui suit:
EDIT:
Je pensais que je voudrais mettre à jour la réponse pour répondre à certains de vos points.
ANS: Personnellement, je ne le pense pas. Si vous servez tous les fichiers utilisés ensemble, peu importe le groupe qu'ils appartiennent ou comment ils atterrissent sur la page. C'est parce que nous combinons des fichiers JS pour réduire la quantité de demandes HTTP.
Une fois que votre JS est combiné & minifiée et à prod, vous ne vous attendez pas à déboguer ou à ne pas ressentir de cela. Donc, pour lier ensemble les fichiers JS associés logiquement sont un point de sujet. C'est dans votre environnement de développement où vous souhaitez que tous ces fichiers de code logiquement connexes soient ensemble.
ans ANS: Il existe certains cas où vous êtes obligé d'injecter JS dans la ANS: Cela semble être une approche raisonnable de scinder votre code JS. En fonction des privilèges utilisateur, vous pouvez forcer votre code JS.
ANS: Ceci est une question très subjective. Cela dépend de ce que vous construisez. Si vous craignez que trop de JS soit chargée sur la charge de la page, vous pouvez toujours la diviser et utiliser des méthodes d'injection à la demande pour diviser la charge.
Comme certains d'autres ont dit, mettez des scripts à usage-sur-plus-un à une page toutes ensemble dans un La seule chose que je voulais vraiment ajouter était que pour les bibliothèques comme JQuery, vous devez utiliser quelque chose comme Google bibliothèques API .
Oh, et enfin - n'oubliez pas de tourner la gzipping sur votre serveur! main.js , puis s'il y a des pages spécifiques spécifiques: home. JS , autre_page.js , etc.
1) Les chances d'un utilisateur ayant exactement la même bibliothèque avec exactement la même version d'exactement le même CDN dans son cache (et non remplacé par un autre contenu depuis) n'est pas si élevé. + Les limites de cache sont petites 2) Nouveau domaine désignent une nouvelle recherche DNS qui est lente 3) Navigateur est un seul environnement fileté, ce qui signifie qu'il ne peut traiter qu'un seul script à la fois. . Si vous voulez dire que le téléchargement est parallèle, vous vous trompez, dans un sens qu'il ne dépend pas de s'ils sont sur différents ou même domaine. Ne dépend que de la prise en charge du navigateur pour le téléchargement de script parallèle.
@galam 1) Plus les développeurs utilisent ces CDN, meilleures performances que nous verrons tous. 2) Je vais sortir sur un membre et dire qu'il est fort probable que l'utilisateur dispose déjà de Google dans leur cache DNS. 3) voir développeur.yahoo.com/performance/roules.html surtout le deuxième point : 80-90% du temps est passé à télécharger.
Selon votre environnement de développement, vous pouvez envisager d'automatiser le processus. C'est un peu plus de travail juste à l'avant, mais j'ai trouvé que cela en valait la peine à long terme. Comment allez-vous faire cela dépend en grande partie de votre projet et de votre environnement. Il y a plusieurs options, mais je vais expliquer (haut niveau) ce que nous avons fait.
Dans notre cas, nous avons plusieurs sites Web basés sur ASP.NET. J'ai écrit un contrôle ASP.NET qui contient simplement une liste de dépendances statiques - CSS et JavaScript. Chaque page répertorie ce dont il a besoin. Nous avons des pages avec des dépendances 7 ou 8 JS et des dépendances 4 ou 5 CSS, selon les bibliothèques / contrôles partagés utilisés. La première fois que la page se charge, je crée un nouveau fil d'entraînement d'arrière-plan qui évalue toutes les ressources statiques, les combine dans un seul fichier (1 pour CSS, 1 pour JS), puis effectue une minification sur eux à l'aide de la compresseur Yahoo Yui (peut faire des JS et CSS). Je publie ensuite le fichier dans un nouveau répertoire "fusionné" ou "optimisé".
La prochaine fois que quelqu'un charge cette page, le contrôle ASP.NET voit la version optimisée de la ressource et chargée qu'au lieu de la liste des 10 à 12 autres ressources.
En outre, il est conçu pour ne charger que les ressources optimisées lorsque le projet est exécuté en mode "Libération" (par opposition au mode de débogage à l'intérieur de Visual Studio). C'est fantastique parce que nous pouvons garder différentes classes, pages, contrôles, etc. Séparez-vous pour l'organisation (et partageant des projets), mais nous bénéficions toujours du chargement optimisé. C'est un processus totalement transparent qui ne nécessite aucune attention supplémentaire (une fois qu'elle fonctionne). Nous sommes même retournés et avons ajouté une condition où les ressources non optimisées ont été chargées si "Debug = True" a été spécifiée dans la chaîne de requête de l'URL pour les cas où vous devez vérifier / reproduire des bugs dans la production.
Il existe une multitude de choses à prendre en compte tout en décidant de combiner vos fichiers JS et CSS.
Utilisez-vous CDN pour servir vos ressources? Si vous le faites, vous pourriez vous échapper avec plus de demandes par page, puis sinon. Le plus grand tueur de performance avec plusieurs téléchargements est la latence. CND réduira votre latence.
Quels sont vos navigateurs cible. Si vous êtes auditoire utilise principalement des navigateurs IE8 +, FF3 et WebKit qui permettront à 6+ connexions simultanées à un sous-domaine donné, vous pouvez vous éloigner avec plus de fichiers CSS (mais pas JS). Plus que cela, dans le cas des navigateurs modernes, vous voudrez peut-être éviter de combiner toutes les CSS dans un grand fichier, car même si le temps total consacré au téléchargement de 1 gros fichier sera plus court, le temps passé à télécharger 6 fichiers plus petits de Taille égale à assembler en séquence, vous pouvez télécharger plusieurs fichiers simultanément et télécharger 6 fichiers plus petits termineront avant le téléchargement d'un fichier grand (car vos utilisateurs ne maximiseront pas leur bande passante sur le fichier de fichier CSS uniquement). < / li>
Combien d'autres actifs servez-vous du même domaine? Les images, flash, etc. compteront tous contre la limite de connexion du navigateur par sous-domaine. Si possible, vous voulez déplacer ceux-ci dans un sous-domaine séparé.
Est-ce que vous comptez fortement sur la mise en cache? Décider comment combiner des fichiers est toujours un compromis entre le nombre de connexions et la mise en cache. Si vous combinez tous les fichiers sur une page et 90% de ces fichiers sont utilisés sur d'autres pages, vos utilisateurs seront forcés de télécharger un fichier combiné sur chaque page du site, en raison de la modification toujours de 10%.
Utilisez-vous la scission de domaine. Si vous le faites, encore une fois pour CSS, vous pouvez vous éloigner avec plus de fichiers si vous les servez de plusieurs sous-domaines. Plus de connexions disponibles - Téléchargement plus rapide.
À quelle fréquence mettez-vous à jour votre site après la vie. Si vous effectuez un patch tous les quelques jours qui modifieront des fichiers CSS / JS, vous souhaitez éviter de tout combiner dans un seul fichier, car il détruira la mise en cache.
Globalement, ma suggestion générique, ne sachant pas tous les faits sur ce que votre situation est de combiner des fichiers utilisés sur toutes les pages (jQuery, jquery-ui, etc.) dans un seul fichier, après cela s'il y a plusieurs widgets qui sont utilisés sur toutes les pages, ou presque toutes les pages, combinent ceux-ci. Et ensuite combiner des fichiers qui sont uniques à la page ou utilisés uniquement sur une deux pages dans un autre groupe. Cela devrait vous donner le plus grand coup pour votre argent, sans avoir à avoir recours au calcul de la taille de chaque fichier, de toucher des numéros sur chaque page et de la trajectoire standard projetée de l'utilisateur sur le site pour atteindre une stratégie de combinaison ultime (oui, j'ai dû faire tout de ce qui précède pour de très grands sites).
En outre, un autre commentaire non liée à votre question, mais à propos de quelque chose que vous avez mentionné. Évitez d'ajouter des fichiers JavaScript à la tête du document. JavaScript télécharger, analyse et exécution bloquera toutes les autres activations du navigateur (à l'exception de l'IE9, je pense), vous voulez donc que votre CSS soit inclus le plus tôt possible sur la page, et que vous souhaitez que vos Javascripts soient inclus à la fin de la page que possible. possible, juste avant la fermeture du corps, si possible du tout.
Et un autre commentaire, si vous êtes tellement intéressé à obtenir la meilleure performance de votre site, je suggère de rechercher des techniques d'optimisation plus obscures, telles que les actifs de préchargement de la page suivante, après la fin de la page, ou éventuellement encore plus obscur, comme utiliser la comète pour desservir uniquement des fichiers JavaScript requis (ou des morceaux de code JS) requis lorsque elles sont demandées.
En supposant que c'est sur Apache, sinon, ignorez la réponse :)
Je n'ai pas encore essayé cela, mais vous voudrez peut-être consulter mod_pagespeed de Google.
Alot des fonctionnalités que vous souhaitez faire à la main en est déjà, jetez un coup d'œil ici aussi .
Je travaille sur un très grand projet dans la même zone qui a beaucoup de définitions de style et de différents scripts JS pour différentes tâches dans le projet. Le site avait les mêmes problèmes => Trop de demandes. Fondamentalement, nous avons mis en œuvre une solution comme suit:
Et ici, nous sommes venus Cela a résolu les problèmes de chargement pour nous.
considère
(s'il vous plaît, ne jugez pas à moi parce que nous avons une feuille de style 300k. Faire confiance, ça doit être pour diverses raisons.: D)
Une chose que vous devriez faire est d'optimiser votre fichier .htaccess pour compresser et mettre en cache correctement les fichiers:
Ceci est bien sûr si vous utilisez Apache comme serveur Web :-)
Je pense qu'il est nécessaire d'effectuer les optimisations suivantes:
côté serveur:
et côté client:
Si cela ne vous aidera pas, que tout est mauvais et que vous avez besoin de plus de serveurs pour servir des fichiers JS et CSS.
Personnellement, j'essaierais de quantifier les différences. Profilage d'une certaine manière. Si vous avez allongé de l'avant, pendant la promotion à votre environnement en direct, vous devriez aussi scripter ou lotter la minécrification.
Depuis que vous n'avez rien dit à ce sujet: Assurez-vous d'avoir les bons cache-en-têtes sur vos fichiers et que vous envoyez des versions compressées des fichiers (si le client l'accepte).