Optimiser

Importations Lean Sass

Lorsque vous utilisez Sass dans votre pipeline d'actifs, assurez-vous d'optimiser Bootstrap en n'utilisant @importque les composants dont vous avez besoin. Vos plus grandes optimisations proviendront probablement de la Layout & Componentssection de notre bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "maps";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

Si vous n'utilisez pas un composant, commentez-le ou supprimez-le entièrement. Par exemple, si vous n'utilisez pas le carrousel, supprimez cette importation pour économiser de la taille de fichier dans votre CSS compilé. Gardez à l'esprit qu'il existe certaines dépendances entre les importations Sass qui peuvent rendre plus difficile l'omission d'un fichier.

Javascript simplifié

Le JavaScript de Bootstrap inclut tous les composants de nos fichiers de distribution principaux ( bootstrap.jset bootstrap.min.js), et même notre dépendance principale (Popper) avec nos fichiers groupés ( bootstrap.bundle.jset bootstrap.bundle.min.js). Pendant que vous personnalisez via Sass, assurez-vous de supprimer le JavaScript associé.

Par exemple, en supposant que vous utilisiez votre propre bundle JavaScript comme Webpack, Parcel ou Vite, vous n'importeriez que le JavaScript que vous prévoyez d'utiliser. Dans l'exemple ci-dessous, nous montrons comment inclure simplement notre JavaScript modal :

// Import just what we need

// import 'bootstrap/js/dist/alert';
// import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
// import 'bootstrap/js/dist/collapse';
// import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/offcanvas';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

De cette façon, vous n'incluez aucun code JavaScript que vous n'avez pas l'intention d'utiliser pour des composants tels que des boutons, des carrousels et des info-bulles. Si vous importez des listes déroulantes, des info-bulles ou des popovers, veillez à répertorier la dépendance Popper dans votre package.jsonfichier.

import Modal from 'bootstrap/js/dist/modal'

const modal = new Modal(document.getElementById('myModal'))

Préfixe automatique .browserslistrc

Bootstrap dépend de Autoprefixer pour ajouter automatiquement des préfixes de navigateur à certaines propriétés CSS. Les préfixes sont dictés par notre .browserslistrcfichier, trouvé à la racine du référentiel Bootstrap. La personnalisation de cette liste de navigateurs et la recompilation du Sass supprimeront automatiquement certains CSS de votre CSS compilé, s'il existe des préfixes de fournisseur uniques à ce navigateur ou à cette version.

CSS inutilisé

Vous avez besoin d'aide pour cette section, veuillez envisager d'ouvrir un PR. Merci!

Bien que nous n'ayons pas d'exemple prédéfini pour utiliser PurgeCSS avec Bootstrap, il existe des articles et des procédures pas à pas utiles que la communauté a écrits. Voici quelques options :

• https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
• https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-or-other-frameworks/

Enfin, cet article CSS Tricks sur les CSS inutilisés montre comment utiliser PurgeCSS et d'autres outils similaires.

Minifier et gzip

Dans la mesure du possible, assurez-vous de compresser tout le code que vous servez à vos visiteurs. Si vous utilisez des fichiers dist Bootstrap, essayez de vous en tenir aux versions minifiées (indiquées par les extensions .min.csset ). .min.jsSi vous construisez Bootstrap à partir de la source avec votre propre système de construction, assurez-vous d'implémenter vos propres minificateurs pour HTML, CSS et JS.

Fichiers non bloquants

Bien que la réduction et l'utilisation de la compression puissent sembler suffisantes, rendre vos fichiers non bloquants est également un grand pas en avant pour rendre votre site bien optimisé et assez rapide.

Si vous utilisez un plugin Lighthouse dans Google Chrome, vous êtes peut-être tombé sur FCP. La métrique First Contentful Paint mesure le temps entre le début du chargement de la page et le moment où une partie du contenu de la page est affichée à l'écran.

Vous pouvez améliorer FCP en différant JavaScript ou CSS non critiques. Qu'est-ce que cela signifie? Simplement, JavaScript ou les feuilles de style qui n'ont pas besoin d'être présents sur la première peinture de votre page doivent être marqués avec des attributs asyncou .defer

Cela garantit que les ressources les moins importantes sont chargées plus tard et ne bloquent pas la première peinture. D'autre part, les ressources critiques peuvent être incluses sous forme de scripts ou de styles en ligne.

Si vous voulez en savoir plus à ce sujet, il existe déjà de nombreux articles intéressants à ce sujet :

• https://web.dev/render-blocking-resources/
• https://web.dev/defer-non-critical-css/

Utilisez toujours HTTPS

Votre site Web ne doit être disponible que via des connexions HTTPS en production. HTTPS améliore la sécurité, la confidentialité et la disponibilité de tous les sites, et il n'existe pas de trafic Web non sensible . Les étapes de configuration de votre site Web pour qu'il soit servi exclusivement sur HTTPS varient considérablement en fonction de votre architecture et de votre fournisseur d'hébergement Web, et sortent donc du cadre de ces documents.

Les sites servis via HTTPS doivent également accéder à toutes les feuilles de style, scripts et autres actifs via des connexions HTTPS. Sinon, vous enverrez aux utilisateurs un contenu actif mixte , ce qui entraînera des vulnérabilités potentielles où un site peut être compromis en modifiant une dépendance. Cela peut entraîner des problèmes de sécurité et des avertissements dans le navigateur affichés aux utilisateurs. Que vous obteniez Bootstrap à partir d'un CDN ou que vous le serviez vous-même, assurez-vous de n'y accéder que via des connexions HTTPS.