Leçon 14Pour aller plus loin, quelques pratiques de codage
- Notion 86 - Introduction aux pratiques de codage de l'éco-conception web avec le projet The Good Manager
- Notion 87 - Nettoyer le code pour l'efficacité énergétique
- Notion 88 - Code asynchrone : faire plus, en moins de temps
- Notion 89 - Des serveurs plus efficaces et moins gourmands en ressources
- Notion 90 - Gérez la charge de travail de vos serveurs
- Notion 91 - Utiliser des bibliothèques externes : l'exemple des CDN de Bootstrap
- Notion 92 - Vérification des pratiques de code
Notion 91
Utiliser des bibliothèques externes : l'exemple des CDN de Bootstrap
Compétences ciblées
Exercice
Bootstrap est une célèbre bibliothèque permettant de styliser rapidement les pages et d'ajouter des fonctionnalités interactives.
Vous pouvez l'utiliser soit avec des fichiers locaux, soit via un CDN.
Dans cet exercice, apprenez-en plus sur Bootstrap et essayez d'évaluer son impact lorsqu'il est importé sur une page Web.
Ressources
Code Bootstrap
Vous pouvez en apprendre davantage sur Bootstrap dans la documentation officielle : https://getbootstrap.com/docs/5.1/getting-started/introduction/.
Le code Bootstrap est disponible à ces adresses :
- Code CSS, pour la mise en page : https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css
- Code JS, pour les interactions : https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js
Utiliser le code Bootstrap sur votre propre site
Vous pouvez consulter les différents CDN utilisés pour importer les éléments nécessaires au fonctionnement de Bootstrap : https://www.bootstrapcdn.com/
Pour utiliser le code Bootstrap sur votre propre site, vous devez encapsuler ces adresses dans des balises HTML spécifiques :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
A partir de ces ressources, vous pouvez évaluer le poids de ces fichiers, en allant à l'une de ces adresses et en faisant "enregistrer sous".
Correction
Pour utiliser Bootstrap, vous devez importer 2 fichiers depuis des CDN :
- Un fichier de style (CSS), qui pèse 160kb
- Un fichier de script (Javascript), qui pèse 76 kb.
Cela peut sembler peu, mais toutes les fonctionnalités de Bootstrap ne sont généralement pas utilisées sur une seule page web, ce qui signifie que certains éléments sont transférés pour rien.
Cet exercice met en perspective le poids du code inutile qui peut être importé de bibliothèques externes et comment l'évaluer.