Comment charger un fichier CSS volumineux une fois la page chargée ?

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

Pour améliorer les performances des sites 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 le fichier tout en différant le chargement du fichier CSS d'origine jusqu'à ce que la page soit chargée. Cette approche optimise le rendu en privilégiant dans un premier temps l'affichage des styles essentiels.

Cependant, cela nous laisse avec la question : comment peut-on 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 extrait de code jQuery :

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

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

Vérification de la méthode

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 le

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!