Pourquoi vous devez UNIQUEMENT charger jQuery à partir des bibliothèques Google


Vous savez probablement déjà qu’il est préférable de charger des fichiers statiques à partir d’un réseau de distribution de contenu (CDN). Les fichiers JavaScript, CSS et image entrent dans cette catégorie. Cependant, il existe une autre étape au-delà des bibliothèques hébergées sur CDN. Ces bibliothèques hébergées sont des serveurs à grande vitesse et géographiquement distribués qui servent de réseaux de distribution de contenu pour les bibliothèques Javascript open source populaires. Vous pouvez faire appel à ces bibliothèques JavaScript bien connues et les ajouter à votre site avec un peu de code.

Il existe de nombreuses bibliothèques hébergées bien connues – les deux plus célèbres étant Google et CDNJS. Cela peut sembler une bonne idée de servir tous vos fichiers JavaScript à partir de ces bibliothèques, mais ce n’est peut-être pas une bonne idée en général. Dans cet article, je vais vous montrer que le cas d’utilisation le plus important pour les utiliser est jQuery. Et cela aussi UNIQUEMENT à partir du réseau de Google.

Acheter des plans Hostgator avec un CDN intégré

Les bibliothèques hébergées et les CDN partagent les mêmes objectifs. Ils servent votre contenu à partir de serveurs situés géographiquement proches des utilisateurs à des vitesses très élevées. Mais tous les plans d’hébergement Web n’incluent pas de CDN dédié. Par exemple, les packages WordPress optimisés d’Hostgator utilisent le réseau SiteLock CDN, mais pas les plans d’hébergement partagé, qui reposent sur Cloudflare. Voici le Liste de coupons Hostgator pour vous aider à trouver la meilleure offre!

Cependant, il existe quelques différences entre les bibliothèques publiques hébergées et les CDN traditionnels.

Résolution DNS

Certains CDN comme Cloudflare utilisent une configuration de «proxy inverse». Cela signifie que vos fichiers statiques seront diffusés sur l’URL de votre site comme ceci: https://www.yoursite.com/jquery.js, au lieu de cela: https://yoursite.somecdnnetwork.com/jquery.js

Cela a un effet secondaire important. Cela signifie que pour la première URL, le navigateur n’aura pas à effectuer une recherche DNS supplémentaire pour récupérer le fichier jquery.js. Cependant, la deuxième URL est hébergée sur un nom de domaine différent de celui de votre propre site, il y a donc un décalage supplémentaire pendant que le navigateur obtient l’adresse IP du nouveau domaine.

Idéalement, nous souhaitons réduire autant que possible le nombre de recherches DNS. Les tests internes m’ont convaincu que dans la plupart des cas, la recherche DNS supplémentaire n’en vaut pas la peine. Par conséquent, je préfère les CDN qui fonctionnent sur un modèle de proxy inverse comme Cloudflare au lieu des réseaux traditionnels qui modifient les URL des fichiers statiques.

Cependant, les bibliothèques publiques sont par définition hébergé sur une URL externe. Les URL de Google commencent par «ajax.googleapis.com» et les URL CDNJS sont «cdnjs.cloudflare.com». Cela signifie qu’à moins que le navigateur n’ait déjà mis en cache la réponse d’un autre site, il y aura toujours être une recherche DNS supplémentaire. Cela rend les bibliothèques publiques très difficiles à utiliser, par rapport aux CDN à proxy inverse, ou tout simplement à héberger les fichiers sur votre propre serveur.

Comparaison des réseaux distribués à l’échelle mondiale

Tous les CDN ne sont pas construits de la même manière. Alors que la plupart essaient de faire un travail assez décent pour répartir leurs serveurs à travers le monde, certains endroits sont chroniquement mal desservis. L’Afrique en est un exemple flagrant. Aucun des CDN de détail bien connus que j’ai testés ne dessert assez bien le sous-continent africain. Ils ont généralement un seul endroit à Johannesburg et c’est tout.

Cependant, les bibliothèques hébergées publiquement comme Google et CDNJS ont un réseau beaucoup plus puissant que la plupart des CDN. CDNJS utilise désormais le réseau de Cloudflare, ce qui signifie qu’il a une très forte présence à travers le monde avec plusieurs emplacements de serveur pour une zone donnée.

Conclusion: les grandes bibliothèques JavaScript publiques sont plus rapides que les réseaux CDN ordinaires.

Tout le JavaScript n’est pas tout aussi important – jQuery est unique

jQuery occupe une position distinguée parmi les bibliothèques JavaScript. Actuellement, presque 75% de tous les sites Web l’utilisent comme indiqué ici:

exemple de la façon dont jquery est unique

Il est également assez volumineux par rapport aux autres fichiers JavaScript externes de votre site. Donc, si vous deviez choisir une bibliothèque JavaScript pour accélérer, ce serait sans aucun doute par jQuery.

jQuery bloque généralement le rendu

J’ai déjà écrit sur le blog Hostgator comment optimiser la vitesse de votre site. Là, nous voyons que vous devez « reporter » ou « asynchroniser » tout votre JavaScript afin qu’il n’empêche pas votre site de s’afficher. Malheureusement, jQuery est référencé souvent par les deux externes et scripts en ligne. Cela signifie qu’en règle générale, vous devez conserver jQuery chargé dans l’en-tête, ce qui ralentit le rendu de votre page.

Si vous ignorez mes conseils et chargez jQuery via « defer » ou « async », votre site s’arrêtera un jour et vous ne saurez pas pourquoi. Faites-moi confiance. J’adorerais reporter le chargement de jQuery, mais c’est tout simplement trop instable pour le faire.

Pour cette raison, je souhaite utiliser tous les moyens possibles pour accélérer la livraison de jQuery. Et pour cela, les bibliothèques hébergées publiquement sont les meilleures.

Cela est vrai pour deux raisons.

Les bibliothèques publiques sont idéales pour la mise en cache du navigateur

La plus grande différence entre un réseau CDN traditionnel et une bibliothèque publique est peut-être que le premier n’est accessible que par votre site Web et le second par des milliers, voire des millions de personnes.

Les navigateurs mettent généralement en cache le JavaScript qu’ils reçoivent pour différentes périodes de temps – même jusqu’à un an! L’idée est que s’il voit à nouveau la même URL, il ne avoir besoin pour le télécharger à nouveau. Il peut simplement utiliser sa copie en cache et contourner complètement le processus. C’est le meilleur scénario absolu pour nous. Idéalement, le navigateur du visiteur déjà avoir jQuery mis en cache dans sa mémoire et ainsi résoudre nos problèmes de blocage de rendu en une seule fois.

Mais pour cela, nous devons utiliser des bibliothèques publiques bien connues que tout le monde utilise. Un CDN privé n’apportera pas les mêmes avantages de mise en cache et de performances. C’est un énorme avantage en faveur des bibliothèques publiques hébergées.

Il en va de même pour les recherches DNS

Les navigateurs mettent en cache non seulement les fichiers, mais également les recherches DNS. Donc, si des millions de personnes utilisent une certaine bibliothèque publique, les chances sont qu’un utilisateur moyen aura déjà l’entrée DNS dans son navigateur et évitera ainsi complètement la recherche.

Cela évite la pénalité des recherches DNS. Mais encore une fois – cela ne fonctionnera qu’avec une bibliothèque publique hébergée où tout le monde utilise la même URL. Pas un CDN traditionnel.

Quelle bibliothèque publique est la meilleure?

Pour tester cela, j’ai téléchargé un programme simple qui sonde les fichiers mis en cache dans une variété de navigateurs. J’ai recherché les deux CDN les plus connus sur le marché actuel – Google et CDNJS.

Voici les résultats pour la bibliothèque de Google:

Bibliothèque Google

Et voici les résultats pour CDNJS:

Bibliothèque CDNJS

Comme vous pouvez le voir, les fichiers Google et CDNJS sont mis en cache dans mon navigateur à partir d’un site ou de l’autre. Du point de vue de la résolution DNS, Google et CDNJS sont donc à égalité. Les deux bibliothèques publiques ont probablement été utilisées, et elles sont toutes deux épargnées par la peine d’une recherche DNS.

Mais Google gagne pour jQuery

Mais regardez les résultats de plus près. Sur les deux, vous pouvez voir que CDNJS n’a que une version de jQuery mise en cache – 2.2.4. Alors que la bibliothèque de Google en compte 11! Donc, à moins que votre site Web n’utilise JavaScript version 2.2.4, la bibliothèque Google sera bien meilleure pour vous que CDNJS.

En effet, pour une raison ou une autre, plus de personnes utilisent les bibliothèques de Google pour télécharger jQuery que tout autre fichier. Je ne sais pas pourquoi c’est le cas, mais c’est comme ça.

WordPress n’utilise pas la dernière version de jQuery

Au moment d’écrire ces lignes, WordPress utilise toujours jQuery version 1.12.4. C’est pour la compatibilité, car beaucoup de plugins s’appuient sur les anciennes versions et ils ne veulent pas les casser. En regardant les captures d’écran ci-dessus, vous pouvez voir que seule la bibliothèque de Google a servi jQuery version 1.12.4. Si je devais utiliser CDNJS comme source, la plupart des navigateurs ne l’auraient pas dans leur cache et devraient le télécharger.

Il ne suffit donc pas qu’une bibliothèque hébergée serve jQuery. Ils doivent être populaires auprès de nombreux versions de jQuery, pour maximiser les chances qu’une version particulière soit dans le cache d’un navigateur aléatoire.

Utilisation de la bibliothèque de Google pour jQuery sur WordPress

La procédure sera différente pour chaque infrastructure logicielle. Mais si vous souhaitez utiliser la bibliothèque de Google pour jQuery avec WordPress, collez le code suivant dans le fichier functions.php de votre thème.

function load_google_jquery () {

if (is_admin ()) {

revenir;

}

global $ wp_scripts;

if (isset ($ wp_scripts-> registered[‘jquery’]-> ver)) {

$ ver = $ wp_scripts-> inscrit[‘jquery’]-> ver;

$ ver = str_replace (« – wp », «  », $ ver);

} autre {

$ ver = «1.12.4»;

}

wp_deregister_script (‘jquery’);

wp_register_script («jquery», «//ajax.googleapis.com/ajax/libs/jquery/$ver/jquery.min.js», false, $ ver);

}

add_action (« init », « load_google_jquery »);

Ce code vérifie la version de jQuery utilisée par WordPress, puis construit l’URL à utiliser avec la bibliothèque de Google.

Morale de l’histoire: Google est le meilleur pour jQuery

Je n’ai rien contre CDNJS. En fait, je les préfère d’un point de vue philosophique car ils sont des logiciels libres et partenaires avec Cloudflare – une autre entreprise que j’aime. Mais les chiffres sont des chiffres, et la technologie ne permet pas la sentimentalité. Dans le concours pour lequel la bibliothèque est préférable de servir jQuery, Google sort tête et épaules au-dessus de la concurrence. Et comme nous l’avons vu ci-dessus, jQuery est le une Bibliothèque JavaScript qui ne doit pas être différée ou asynchée. Et donc utiliser les bibliothèques Google est une évidence.

Pour les fichiers JavaScript restants, peu importe, car ils ne bloquent pas votre page. Mais faites particulièrement attention à jQuery – cela peut faire ou défaire les temps de vitesse de votre page!

Auteur de l’article : manuboss