Comment différer le chargement de fichiers CSS volumineux pour optimiser les performances d'un site Web ?

Améliorez la livraison CSS en différant le chargement des fichiers CSS volumineux

La documentation de Google destinée aux développeurs conseille d'optimiser la livraison CSS pour améliorer les performances du site Web. L'une des stratégies recommandées consiste à intégrer les CSS critiques dans l'en-tête, tout en chargeant le fichier CSS d'origine plus volumineux après le chargement de la page.

Chargement de gros fichiers CSS après le chargement de la page

L'exemple fourni gère efficacement le inline d'un petit fichier CSS, mais laisse des questions sur la façon d'aborder des fichiers CSS plus volumineux.

Pour différer le chargement d'un gros fichier CSS jusqu'après le chargement de la page, vous pouvez utiliser des extraits de code comme les suivants :

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

Invoquez simplement cette fonction dans votre fonction $(document).ready() ou window.onload pour obtenir un chargement différé pour les gros fichiers CSS.

Une autre alternative consiste à désactiver JavaScript dans votre navigateur et à observer le comportement qui en résulte. Ce faisant, vous pouvez vérifier que le CSS est chargé de manière asynchrone, améliorant ainsi les performances globales du site Web.

N'oubliez pas qu'effectuer une recherche rapide sur Google peut souvent fournir des informations précieuses sur les défis de programmation. Par exemple, la requête « post-chargement css » donne des résultats utiles tels que celui mentionné dans la réponse.

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!