Le code JavaScript référencé dans la section head doit-il être servi à partir du même nom d'hôte que le document principal?
J'avais l'impression que, pour de meilleures performances, Javascript devrait être traité comme un contenu statique et servi depuis un domaine sans cookie avec des fichiers CSS, des images, etc.
Mais Google dit ici: Ne pas servir les fichiers JS externes chargés auparavant du domaine sans cookie
Pour JavaScript référencé dans l'en-tête du document et nécessaire pour le démarrage de la page, il doit être servi à partir du même nom d'hôte que le document principal. Comme la plupart des navigateurs bloquent les autres téléchargements et le rendu jusqu'à ce que tous les fichiers JavaScript aient été téléchargés, analysés et exécutés, il est préférable d'éviter le risque d'une recherche DNS supplémentaire à ce stade du traitement.
Alors maintenant, je suis en conflit. Je ne comprends pas ce que signifie "nécessaire au démarrage de la page".
J'ai généralement deux références JavaScript, JQuery servie par ajax.googleapis.com et un fichier master.js qui contient principalement des gestionnaires d'événements dans la fonction $ (document) .ready (). Est-ce nécessaire pour le démarrage de la page?
Etant donné les options disponibles (ajax.googleapis.com, domaine de cookie statique, nom d’hôte original), où dois-je servir mon JavaScript?
Alors maintenant, je suis en conflit. Je ne comprends pas ce que signifie "nécessaire au démarrage de la page".
Cela dépend beaucoup du fonctionnement de votre site. Fondamentalement, c'est le JavaScript qui doit être exécuté avant que quelqu'un puisse utiliser la page Web.
À titre d'exemple, si vous allez sur http://www.weather.com/ , vous pouvez voir que les braves gens ont décidé d'utiliser un peu de magie JavaScript pour fournir un indice pour le formulaire de recherche météo. C'est à dire. les mots Enter Zip, City or Place (e.g. Disney World) apparaissent dans le champ de saisie de texte. Malheureusement, il y a un léger retard lors du chargement de la page, du moins de mon côté. Donc, si la page est suffisamment lente pour charger et que vous êtes assez rapide pour commencer à taper dans la saisie de texte avant l'exécution de JavaScript - ce qui est pas un étirement - votre entrée peut être bloquée par le JavaScript qui place aveuglément ce texte dans la zone de saisie.
Cela pourrait être évité en vérifiant d’abord la saisie de l’utilisateur dans la zone de texte ou simplement en abandonnant cette technique anachronique. Cependant, cela ne servirait pas d'exemple.
Etant donné les options disponibles (ajax.googleapis.com, domaine de cookie statique, nom d’hôte original), où dois-je servir mon JavaScript?
On ne peut pas vraiment répondre à cette question sans savoir ce que fait votre JavaScript. En outre, comme le dit bpeterson76, cela dépend de la situation spécifique de votre site. C'est à dire. quelle est la taille de la page? quelle est la demande de votre hôte? combien de fichiers CSS, d'images, etc. est-il chargé? combien de ressources externes est-il en train de charger?
Selon votre situation spécifique, il peut s’agir d’une optimisation prématurée.
La règle "tout ce qui est nécessaire avant que la page commence à s'afficher doit provenir du même serveur" s'applique généralement aux serveurs votre ou à d'autres ressources plus petites - dans les cas où la recherche DNS peut prendre une fraction de seconde peut s’ajouter rapidement si vos objets sont éparpillés autour de nombreux domaines). Avec des ressources publiques communes telles que le cache de jQuery et d'autres bibliothèques de Google, il est fort probable que le navigateur de votre visiteur ait déjà effectué cette recherche DNS aujourd'hui (car d'autres sites référencent le contenu de ce service) et ont probablement le fichier dans le cache aussi le transfert doit être effectué (ou si une demande est formulée, une simple réponse "304 - non modifié" peut être récupérée). Même si un téléchargement complet est requis pour l'objet, le réseau de diffusion de contenu de Google sera plus rapide pour la plupart des utilisateurs que votre activité à plus petite échelle.
Une règle connexe: les objets qui ne sont pas nécessaires au bon fonctionnement de la page (tels que les voit l'utilisateur) doivent être référencés aussi tard que possible dans la réponse HTTP principale. Par exemple, des scripts tels que les scripts requis pour les services de publicité/statistiques (Google Analytics, par exemple) - transmettez votre contenu à l'utilisateur le plus rapidement possible, puis chargez les éléments d'arrière-plan qui ne vous intéressent vraiment que. J'ai bloqué quelques services d'annonces/statistiques (en les mappant à 127.0.0.1 dans mon fichier hosts) car ils sont souvent trop lents et que les sites qui les font référence plus tôt me donnent une page vierge pendant que les scripts sont attendus à la place. de leur parler tard pour que je puisse lire le contenu pour lequel je suis là pendant que les autres choses se traînent en arrière-plan.
L'utilité d'un domaine sans cookie pour le contenu statique est une question d'échelle. Si vous ne disposez que d'un identifiant de session de 10 octets dans les cookies et de dix mille visiteurs par jour demandant ~ 20 objets statiques par visite, vous ne économisez qu'environ 118 Mo de bande passante par mois (20 * 20 * 10000 * 31/1024/1024). Par contre, si votre site conserve un ou deux kilo-octets de valeur dans les cookies, la différence peut être beaucoup plus importante, en particulier si l'un de vos utilisateurs accède au site via des connexions lentes (c'est-à-dire le GPRS via un modem, liaison wifi encombrée dans une zone à forte interférence) ou si vous recevez des millions de visites par jour.
Pour résumer, pour les scripts qui doivent être chargés avant que la page puisse afficher, mes préférences sont les suivantes:
- ajax.googleapis.com, ou similaire
- nom d'hôte d'origine de la page appelante
- domaine statique sans cookie
Pour les ressources qui ne sont pas essentielles pour le rendu de page initial, reportez-vous-y le plus tard possible et inversez la liste de préférences ci-dessus (bien que la différence entre le nom d'hôte d'origine et le domaine sans cookie soit très probablement non significative, sauf si vous opérez à grande échelle. ).
Google exploite un vaste réseau de contenu distribué dans le monde entier, qui rapproche le contenu de l'utilisateur de tout serveur que vous êtes probablement en train de faire fonctionner (pensez à Akami, mais appartient à Google). Donc, d'un point de vue vitesse, il va de soi que Google transmettra votre fichier à l'utilisateur plus rapidement que votre serveur local ... sauf s'il se trouve à proximité de votre serveur personnel.
Cette question a fait le tour de Stackoverflow, et la réponse ci-dessus semble toujours faire consensus. Mais d’un point de vue réaliste, les avantages de l’hébergement entre l’un et l’autre seront assez minimes à long terme. Vous obtiendrez de bien meilleurs avantages en réduisant, en optimisant et en réduisant le nombre de requêtes http globales qu'en examinant avec soin l'emplacement des objets. Dans les situations où cela commence à compter (j'ai fait un travail où une page chargeait plus de 1,5 million de fois/jour, donc une amélioration de 5k signifie 5 Go d'économie de bande passante), il y a généralement une équipe de décideurs chargés d'examiner ces décisions.
Personnellement, j’héberge chez Google pour la seule raison pour laquelle je vais me fournir la copie la plus récente de ce que je recherche.
Il est important de noter que les navigateurs ont une limite quant au nombre de ressources qui seront téléchargées simultanément à partir du même domaine, généralement entre 2 et 6 en fonction du navigateur. L'utilisation d'un autre domaine permet au navigateur de télécharger plus d'éléments de votre domaine simultanément.
La meilleure solution consiste donc à utiliser un CDN populaire tel que ajax.googleapis.com, car il n’existe pas de cookies. L'utilisateur a probablement déjà effectué la recherche DNS et peut même avoir mis en cache la ressource. Les CDN sont optimisés pour la vitesse et ont probablement un serveur proche de votre utilisateur.
Si un CDN n'est pas une option, alors si vous avez beaucoup de cookies ou beaucoup de ressources à télécharger (images, etc.), utilisez un domaine sans cookies (vous n'avez de toute façon besoin de faire une recherche DNS).
Si vous avez peu de ressources (un seul fichier javascript personnalisé) et quelques cookies (juste un identifiant de session minuscule), hébergez le même domaine.
Bonnes ressources:
http://www.phpied.com/free-falling-waterfalls/
http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
Bien que les réponses ci-dessus aient disséqué l'essentiel de votre question, je contribuerai sur "nécessaire pour le démarrage de la page". Je traduis ceci en: ce script est-il essentiel pour utiliser le site Web? Par expérience, habituellement, la réponse est non. Cependant, les cas où je voudrais:
- Validation du formulaire
- Une navigation basée sur JavaScript (de toute façon pas idéale)
- Si la mise en page dépend de JavaScript
- Si JavaScript ou une bibliothèque (telle que jQuery) est utilisée pour les modifications DOM critiques
Et Yahoo YSlow performance guidelines pour référence.