Optimisation de la livraison CSS : Comprendre la technique de chargement CSS différé

Pour améliorer les performances du site Web, les développeurs optimisent souvent la livraison CSS. Une stratégie mentionnée dans la documentation des développeurs Google consiste à intégrer les CSS critiques dans la section

Cependant, cela nous laisse avec la question : comment charger un gros fichier CSS après le chargement de la page ?

Solution : Différer le chargement des gros fichiers CSS

Pour différer le chargement d'un gros fichier CSS, nous pouvons utiliser un simple code jQuery extrait :

    function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='" src " />"));
    }
};

En appelant cette fonction dans la fonction $(document).ready() ou window.onload, nous pouvons charger dynamiquement le fichier CSS une fois le chargement de la page terminé.

Méthode de vérification

Pour vérifier que cette méthode fonctionne, essayez de désactiver JavaScript dans votre navigateur, puis de recharger la page. Si la page se charge toujours correctement avec les feuilles de style appliquées, cela démontre le report réussi du chargement CSS.

Méthodes alternatives

Il existe des méthodes alternatives pour différer le chargement CSS, telles que comme en utilisant l'élément