Librairies : CDN ou local, que choisir ?

CDN ou local

Lorsque tout projet web débute ou arrive à terme, tout développeur se demande  comment optimiser le temps de chargement des pages et des contenus. De nombreuses solutions existent tant côté client (dev) que côté serveur (admin système). Pour autant le développeur ne peux qu’optimiser son code et les librairies qu’il utilise.

Dans l’utilisation les librairies css ou js, la question des chargements se posent donc : Local ou Content Delivery Network (CDN) ?
Voici une synthèse pour faire votre choix.

Définitions

Content Delivery Network (CDN)

Un Content Delivery Network (CDN) est constitué d’ordinateurs reliés en réseau à travers Internet et qui coopèrent afin de mettre à disposition du contenu ou des données (généralement du contenu multimédia volumineux) à des utilisateurs.

Local

Sur le serveur de votre site internet (votre hébergement).

Contraintes

  • L’internaute doit récupérer les données de votre site afin de l’afficher et de le rendre fonctionnel.
  • Les navigateurs limitent le nombre de connexions à un serveur web (de 2 à X).

Avantages du CDN

  • Les librairies peuvent exister en cache de votre navigateur, si elles ont été précédemment chargées lors de vos visites (librairies en cache).
  • Téléchargement en parallèle des fichiers de votre site (réduction de la latence).
  • Réduit le trafic vers le serveur.

Inconvénients du CDN

  • Les librairies ne fonctionneront pas si vous développer en local sans connexion internet (logique non ?!).
  • Les librairies chargés sont complètes (et la plupart du temps, vous n’avez pas besoin de tout).
  • Les CDN peuvent être hors-service (extrêmement rare)

Conseils

  • Choisir des CDN réputés : Google, Microsoft (gratuit), Amazon S3 (payant)…
  • Préciser explicitement la version de librairie requise, plutôt que la sélection de la dernière version. Cela réduit le risque que les mises à jour de ces librairies cassent votre code.
  • Utiliser Modernizr pour se laisser le choix CDN/local
  • Séparer vos « devs », des librairies : main.js pour vos devs, plugins.js pour vos librairies
  • Concaténer et « minifier » vos sources
  • Si vous utilisez jQuery ou Bootstrap, faites le tri ! Vous n’avez surement pas besoin de tous les composants.