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

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

Patricia Arquette
Libérer: 2024-11-02 16:37:02
original
661 Les gens l'ont consulté

How to Defer Loading Large CSS Files for Optimized Website Performance?

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal