Accélérez le chargement de jQuery dans WordPress en utilisant CDN et AJAX_jquery

Êtes-vous sûr de vouloir le mettre dans la section Tête ?

En fait, la meilleure situation est que les fichiers js ne doivent pas être chargés dans la section , sinon cela affectera la vitesse de chargement de la section head et entraînera directement un retard dans le chargement du contenu (corps) de le site Web. Si vous êtes sûr de ne pas avoir besoin de charger jQuery dans la section head, veuillez déplacer le code de chargement avant , pour être précis, avant le premier code javascript qui utilisera la fonction jQuery.

Bien sûr, si vous devez charger jquery dans la partie head, veuillez également vous assurer que tous les fichiers js, y compris jquery, sont placés après le code qui appelle le fichier CSS pour obtenir un téléchargement synchrone. C'est également la recommandation officielle donnée par Google. Par exemple, le chargement suivant n'est pas recommandé :

<script src=jquery.js></script>

<link href="style.css" .../>

Utilisez plutôt :

<link href="style.css" .../>

<script src=jquery.js></script>

Êtes-vous sûr de ne pas vouloir charger de manière asynchrone ?

Le chargement asynchrone ne bloquera pas le chargement des pages Web, tandis que le chargement non asynchrone bloquera brièvement le chargement des pages Web dans le navigateur avant de charger le js lui-même. Cela peut affecter votre expérience de navigation.

Si votre code de chargement est

<script type="text/javascript" src="jquery.js"></script>

Ensuite, vous devez savoir qu'il ne s'agit pas d'un chargement asynchrone, c'est d'un chargement synchrone. Si vous n'avez pas besoin d'appeler la fonction jquery à temps après le chargement de la page, vous pouvez utiliser le chargement asynchrone pour charger jquery avant le chargement de la page Web, ce qui accélère considérablement la vitesse de chargement. Ce code ressemble au code Google Analytics.

(function(doc){

var j =doc.createElement("script");

j.type = "text/javascript"; j.async = true; j.src = "jquery.js";

var s = doc.getElementsByTagName("script")[0];

s.parentNode.insertBefore(j, s);

})(document);

Mais d'après mon observation, la plupart du temps nous devons charger de manière synchrone, surtout lorsqu'il faut également introduire le plug-in jQuery.

Quelle version de jQuery utiliser ?

Wordpress est toujours livré avec la dernière bibliothèque jQuery, et l'utilisation de chaque version est toujours légèrement différente. Plus la version de jQuery est récente, plus l'amélioration des performances est importante. Cependant, certains plug-ins jquery peuvent ne pas être compatibles avec les nouveaux plug-ins et n'ont pas eux-mêmes publié de mises à jour. Peut-être que certaines des fonctions de la méthode que vous utilisez ont été modifiées dans la nouvelle version et que ce qui fonctionnait auparavant ne fonctionne plus. Dans ce cas, il faut suivre le principe qui est d’utiliser au maximum la dernière bibliothèque jQuery tout en assurant la compatibilité.

Par exemple, vous utilisiez la version 1.6.2 de jquery, et maintenant vous constatez que certaines fonctions de la 2. C'est bien. Pour le moment, vous pouvez abandonner la version 1.6.2 et remplacer la nouvelle version de 2.X par la version 1.7.2 de jQuery.

Quelle bibliothèque CDN jQuery utiliser ?

jQuery est tout simplement trop gros ! Si votre site Web n'est pas rapide, jquery affectera certainement la vitesse de chargement de vos pages. Heureusement, Baidu, Sina, Microsoft, Google et d'autres sociétés ont lancé des bibliothèques publiques js, que les propriétaires de sites Web peuvent facilement appeler pour réduire le temps de téléchargement, et disposent de serveurs CDN ultra-rapides, ce qui permet de gagner du temps de téléchargement.

La bibliothèque jquery fournie par Google est actuellement la plus couramment utilisée :

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Bien sûr, la vitesse d’accès domestique de Baidu ne peut être sous-estimée :

<script type="text/javascript" src="//libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

Le CDN de Sina est également très rapide :

<script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

Si vous ne souhaitez pas suivre la tendance, vous pouvez également choisir le CDN jquery de Microsoft :

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

Vous pouvez modifier directement le numéro de version qui apparaît ci-dessus pour sélectionner une version différente. Lequel est le plus rapide ? Comment choisir ?

Si votre site Web reçoit de nombreux visiteurs étrangers, il est recommandé de choisir Google. Si les principaux visiteurs viennent de Chine, ce n'est pas un problème de choisir Baidu. Cependant, la vitesse d'accès à l'étranger de Baidu n'est pas aussi rapide que celle de Google.

Et comme la plupart des sites Web choisissent le CDN de Google, en raison des principes de mise en cache, le CDN de Google peut être plus rapide lors de la visite de votre site Web.

Si vous n'êtes pas sûr que la vitesse de téléchargement de votre site Web soit rapide, je suggère qu'il est préférable d'utiliser le CDN public mentionné ci-dessus pour économiser du temps de chargement et du trafic.

Avez-vous vraiment besoin d'utiliser jQuery ?

Si votre site Web n'a besoin que d'une petite fonction avec jquery, pourquoi avez-vous besoin de télécharger un fichier aussi volumineux ? Pourquoi pas sans jquery ?

Par exemple, vous pouvez considérer zepto.js, dont l'objectif de conception est de "maximiser la compatibilité de l'API jQuery avec la plus petite taille". Il ne fait que 10 Ko après compression gzip.

De plus, jQuery a une conception de modules, vous pouvez donc choisir uniquement les modules dont vous avez besoin. Vous pouvez vous référer au constructeur jquery.

La bonne façon de charger jQuery

Cela dit, quelle est la bonne façon de charger jquery ?

Choisissez d'abord le CDN, ou votre propre site Web, pour héberger le fichier js, et déterminez si l'emplacement appelant est dans l'en-tête ou dans le corps. Prenons l'exemple de la bibliothèque jquery de Google. La méthode de chargement normale est

.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Cependant, les services de Google sont interrompus par intermittence en Chine, je peux donc m'occuper des visiteurs nationaux et écrire ceci :

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

De cette façon, si jQuery ne parvient pas à se charger, la bibliothèque jquery de Baidu sera automatiquement chargée, ce qui la rendra infaillible.