Héberger Bootstrap via un CDN réduit la latence et décharge le serveur d'origine, mais ces gains ne sont pas automatiques. Une mauvaise configuration peut transformer les fichiers CDN en goulet d'étranglement. Voici cinq pratiques concrètes pour accélérer le chargement des ressources Bootstrap.
- Valider les ressources avec l'intégrité de sous-ressource (SRI)
L'intégrité de sous-ressource permet au navigateur de vérifier que le fichier reçu correspond exactement à celui attendu. Cela bloque tout fichier altéré et favorise un cache plus agressif.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
- Injecter Bootstrap seulement lorsque le composant est présent
La plupart des pages n'utilisent qu'une fraction de Bootstrap. Charger systématiquement l'ensemble du framework est souvent superflu. Une injection conditionnée par la présence d'un composant permet d'éviter des requêtes inutiles.
function injectBootstrap() {
const sheet = document.createElement('link');
sheet.rel = 'stylesheet';
sheet.href = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css';
sheet.integrity = 'sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN';
sheet.crossOrigin = 'anonymous';
document.head.appendChild(sheet);
const bundle = document.createElement('script');
bundle.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js';
bundle.integrity = 'sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL';
bundle.crossOrigin = 'anonymous';
bundle.async = true;
document.head.appendChild(bundle);
}
if (document.querySelector('[data-bs-toggle], [data-bs-target]')) {
injectBootstrap();
}
- Appliquer un cache long et des noms de fichier versionnés
Les ressources statiques peuvent être conservées très longtemps par le navigateur si leur contenu est immuable. Associer une directive immutable à un nom de fichier comportant un hachage garantit que la nouvelle version sera toujours récupérée après un déploiement.
location ~* \.(css|js|woff2?)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
add_header Vary "Accept-Encoding";
}
Du côté applicatif, produisez des fichiers versionnés tels que bootstrap.7a3f1b.min.css, puis référencez-ns dans vos balises correspondantes.
- Anticiper le chargement des ressources critiques
Le pré-établissement d'une connexion vers le CDN et le préchargement des fichiers bloquants réduisent le temps avant le premier rendu. Placez ces directives dans l'head, avant tout autre appel de style ou de script.
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<link rel="preload" as="style"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<link rel="preload" as="script"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous">
- Activer Brotli et HTTP/2 sur le serveur
La compressoin Gzip est bien souvent activée par défaut, mais Brotli offre un gain supplémentaire. Couplé à HTTP/2, il permet de réduire le volume transféré et de multiplexer les ressources sur une seule connexion.
server {
listen 443 ssl http2;
ssl_certificate /etc/ssl/cert.pem;
ssl_certificate_key /etc/ssl/key.pem;
gzip on;
gzip_vary on;
gzip_types text/css application/javascript application/json;
brotli on;
brotli_comp 6;
brotli_types text/css application/javascript application/json;
}
Surveillez le ratio de compression avec les outils de développement du navigateur et ajustez le niveau Brotli pour trouver le meilleur compromis entre CPU et bande passante.