Use jQuery jsDelivr

Mis à jour le
Un plugin WordPress ultra light pour charger les bibliothèques JQuery depuis la plateforme de CDN jsDelivr

Ce plugin a été supprimé du dépôt de WordPress suite à un différent avec l’équipe des plugins de WordPress. Lire : WordPress : le partage est mort ! Vive le commerce !
  • Présentation générale

    1. Ce plugin combine la puissance des CDN de CloudFlare et de MAXCDN.
    2. Ce plugin a été conçu pour mon usage personnel sur ce présent site web qui est hébergé sur les pages perso de FREE. Néanmoins, il fonctionne parfaitement chez tout autre hébergeur.
    3. Il a été conçu pour être le plus simple possible à l’usage : il ne nécessite aucun réglage et est entièrement automatique. Il fonctionne avec n’importe quel thème WordPress.
    4. Il permet d’utiliser le cache du navigateur web du visiteur plutôt que de charger les 3 scripts jquery, jquery-migrate et masonry (version 3) depuis son propre site web.
    5. Le script Masonry est passé de la version v2 sous WordPress 3.8 à la version v3 sous 3.9. Son handle est devenu ‘masonry’, l’ancien handle ‘jquery-masonry’ est devenu un complément qui assure la rétrocompatibilité avec la version v2.
    6. Ce plugin est utile pour les sites qui n’utilisent pas de plugin de cache. Les sites utilisant un plugin de cache bien configuré n’ont pas besoin de faire appel à un CDN pour charger ces scripts.
    7. Il accélère le chargement des pages de votre site web très facilement comme le montrent ces deux captures d’écrans des tests effectués avec GTmetrix (Cliquez sur les images pour voir l’intégralité des tests sur GTmetrix).

      Plugin non activé :
      Report generated: Tue, Aug 12, 2014, 2:22 AM -0700
      Report generated: Tue, Aug 12, 2014, 2:22 AM -0700
      Plugin activé :
      Report generated: Tue, Aug 12, 2014, 2:23 AM -0700
      Report generated: Tue, Aug 12, 2014, 2:23 AM -0700

      Soit un gain de 5 % pour le « Page Speed Grade » et un chargement de la même page 1,83 seconde plus vite.
    8. Sur certains sites déjà bien optimisés, seuls les tests de Google Page Speed Insights permettent de mesurer les gains qui n’ont lieu que pour un appareil mobile.

      Plugin non activé :
      Plugin non activé
      Plugin non activé

      Plugin activé :

      Plugin activé
      Plugin activé
    9. Ce plugin fait suite à une discussion sur le forum USENET de support des pages perso de FREE au sujet de l’optimisation d’un site WordPress hébergé chez FREE. Je remercie chaleureusement les bénévoles de ce forum pour leur conseils et tout particulièrement « Al » l’administrateur du site Les Pages Perso Chez Free
    10. WordPress 3.9.1 consommant 26 Mo (nu, sans aucun plugin) sur les 32 Mo de mémoire PHP disponible sur les pages perso de FREE, je l’ai conçu afin qu’il soit aussi léger que possible. Il est écrit en seulement 14 lignes de code et consomme environ 0,008 Mo de mémoire PHP sur les pages perso de FREE.
  • Intérêt

    • La bibliothèque jQuery est utilisée par presque tous les sites web existant.
    • Charger cette bibliothèque depuis le serveur de son propre site web consomme inutilement de la bande passante sur le serveur de votre site web et n’a strictement aucun intérêt.
    • En chargeant cette bibliothèque depuis un CDN (Content Delivery Network) comme celui de la fondation jQuery, le navigateur web du visiteur met en cache cette dernière uniquement lors de la première visite d’un site qui y fait appel.
    • Ainsi, cette bibliothèque mise en cache est partagée par tous les sites web qui y font appel.
      Et donc, les pages sont chargées bien plus rapidement, le plus souvent dès la première visite.
  • Schématiquement

        Sans utiliser un CDN, lorsqu’un visiteur va sur le

      • site n°1, le navigateur met en cache la bibliothèque jQuery
      • site n°2, le navigateur met à nouveau en cache la bibliothèque jQuery
      • site n°3, le navigateur met encore en cache la bibliothèque jQuery

    La même bibliothèque jQuery est donc téléchargée à chaque fois.

        Mais en utilisant un CDN, lorsqu’un visiteur va sur le

      • site n°1, le navigateur met en cache la bibliothèque jQuery
      • site n°2, la bibliothèque jQuery n’est pas chargée puisqu’elle est déjà dans le cache local et il n’y a donc aucune requête effectuée.
      • site n°3, idem

    La même bibliothèque jQuery est donc téléchargée une seule fois.

  • Fonctionnement

    • Le plugin détecte automatiquement la version des scripts jQuery, jQuery Migrate et Masonry utilisés par votre thème WordPress et effectue une requête vers la même version de ces scripts sur la plateforme CDN jsDelivr. Par exemple, dans le cas de mon propre site, il remplace les requêtes nativement effectuées par WordPress dans le header suivantes :
      <script type='text/javascript' src='http://additifstabac.free.fr/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
      <script type='text/javascript' src='http://additifstabac.free.fr/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
      <script type='text/javascript' src='http://additifstabac.free.fr/wp-includes/js/masonry.min.js?ver=3.1.2'></script>

      Par les requêtes faites dans le footer vers le CDN de jQuery suivantes :

      <script type='text/javascript' src='https://cdn.jsdelivr.net/jquery/1.11.0/jquery.min.js'></script>
      <script type='text/javascript' src='https://cdn.jsdelivr.net/jquery.migrate/1.2.1/jquery-migrate.min.js'></script>
      <script type='text/javascript' src='https://cdn.jsdelivr.net/masonry/1.2.1/masonry.min.js'></script>
    • Si votre site utilise un plugin de cache bien configuré, normalement ce plugin est inutile.
    • Il fonctionne en arrière plan et ne nécessite aucun réglage.
  • Installation

    1. Placez le dossier dézippé « use-jquery-jsdelivr » dans le dossier wp-content/plugins via FTP (avec Filezilla, par exemple)
    2. Puis activez-le depuis le tableau de bord, c’est tout.
  • Téléchargement (cliquez sur l’image)

    jsdelivr
     <---- Use jQuery jsDelivr
    Cliquer sur l’image pour aller sur le dépôt de WordPress

  • Variantes avec d’autres CDN

      Le même plugin est disponible pour utiliser d’autres CDN, mais ils ne font que 2 requêtes et non pas 3 (celle vers masonry n’est pas effectuée) :

    • Celui de CloudFlare :

      jquery_cloudflare
       <---- Use jQuery CloudFlare
      Cliquer sur l’image pour aller sur le dépôt de WordPress

    • Celui de jQuery’s CDN délivré par MAXCDN :

      jquery-cdn
      <---- Use jQuery CDN
       Cliquer sur l’image pour aller sur le dépôt de WordPress

    • Celui de Microsoft ASP.NET :

      asp-net
      <---- Use jQuery ASP.NET
        Téléchargé fois depuis le

Si vous avez trouvé une faute d’orthographe, informez-nous en sélectionnant le texte et en appuyant sur Ctrl + Entrée

5 réflexions sur « Use jQuery jsDelivr »

  1. Bonjour,

    lorsque j’active cette extension sur mon site, le widget featured posts situé dans le header ne fonctionne pas…
    dans la console firefox j’ai le message « ReferenceError: jQuery is not defined »; peut être pas encore chargé ?
    merci de l’aide,
    cordialement,

    1. Bonsoir,
      C’est certainement car il chargé dans le footer.

      Pour qu’il soit chargé dans le header, il suffit de modifier les lignes 19 à 21 en supprimant le dernier paramètre 'true' pour obtenir les lignes suivantes :

      19
      20
      21
      wp_enqueue_script('jquery', 'http://cdn.jsdelivr.net/jquery/'.$jquery_ver.'/jquery.min.js', false, null);
      wp_enqueue_script('jquery-migrate', 'http://cdn.jsdelivr.net/jquery.migrate/'.$jquery_migrate_ver.'/jquery-migrate.min.js', false, null);
      wp_enqueue_script('masonry', 'http://cdn.jsdelivr.net/masonry/'.$jquery_masonry_ver.'/masonry.min.js', false, null);
      
  2. Bonjour,
    Avec le thème Customizr dernière version et WP4.0 ou WP4.1, l’extension use JqueryjdDelivr bloque l’effet de zoom automatique sur les vignettes. J’ai essayé en vain la suppression du « true » et du coup ai désactivé le plugin.

    Cordialement

    1. Bonsoir,
      J’ai regardé votre thème, il charge une version customisée du script « jquery », pour utiliser ce plugin, il faut supprimer les lignes 13; 16 et 19 suivantes :

      13
      16
      19
      $jquery_ver = $wp_scripts->registered['jquery']->ver;
      wp_deregister_script('jquery');
      wp_enqueue_script('jquery', 'https://cdn.jsdelivr.net/jquery/'.$jquery_ver.'/jquery.min.js', false, null,true);
      

Les commentaires sont fermés.