Vous utilisez un framework Javascript tel que jQuery, Mootools, Ext, Prototype ou Dojo sur votre site web? Au lieu d’inclure les .js depuis votre serveur web, chargez-les depuis Google API! En effet, Google nous offre la possibilité de charger depuis leurs serveurs les fichiers JavaScript nécessaires au fonctionnement de ces frameworks.

En temps normal, lorsque vous souhaitez inclure la librairie jQuery, vous deviez inclure la librairie de la façon suivante:

Avec Google API, vous avez deux manières de charger la librairie:

  • soit en utilisant la fonction google.load() qui permet de sélectionner la dernière version de la librairie ou une version particulière.  Cette méthode est celle recommandée par Google.
  • soit en allant chercher directement le fichier js.

J’ai donc fait quelques tests pour déterminer quel était la manière la plus rapide grâce à Yslow, un outil qui fera l’objet d’un billet prochainement.

Première méthode

On récupère la librairie depuis Google API en utilisant la fonction google.load(). Cette fonction prend deux arguments, le premier est le nom de la librairie, le second est la version souhaitée. Le code ci-dessous récupère la version 1.3.2 de jQuery. En indiquant ‘1.3’, vous récupérez la dernière version de la branche 1.3.x


Deuxième méthode

En faisant directement un lien vers la libraire stockée sur Google API

Comparatif

En comparant la taille des fichiers, on remarque que les librairies chargées depuis Google API sont beaucoup moins lourdes que celle disponible en local: elles sont déjà compressés au format Gzip. La première méthode est moins légère que la seconde étant donné qu’on charge un second js, celui qui nous permet d’utiliser la fonction google.load() par la suite.

En comparant cette fois-ci la vitesse de chargement des librairies, nous remarquons que le chargement de jQuery depuis Google API est environ deux fois plus rapide que celle stockée en local. La différence est plus marquée entre les deux méthodes. Le chargement du second fichier JS de la première méthode ralentit donc le chargement de la page de l’ordre de 80-90 ms.

Pour conclure

  • Charger les frameworks JS depuis Google API vous permet de réduire le poids total et la vitesse de chargement de vos pages web.
  • La méthode google.load() apporte plus de flexibilité, elle peut être très utile si vous souhaitez toujours récupérer la dernière version de la librairie, sinon préférez la récupération directe du fichier JS.
  • Si vous avez plusieurs librairies à charger depuis Google API, une succession de google.load() rend votre code plus clair.
  • Vivement déconseillé dans le cadre d’une application web en Intranet.
Be Sociable, Share!