Optimisation de la livraison CSS : comprendre le report du chargement CSS

Lors de l'optimisation de la livraison CSS, différer le chargement de fichiers CSS volumineux après le chargement de la page peut améliorer considérablement les performances des pages. Bien que l'exemple fourni par les développeurs de Google démontre l'intégration de petits fichiers CSS pour un style critique, il laisse ouverte la question de savoir comment différer les fichiers CSS plus volumineux.

Accès au fichier CSS d'origine après le chargement

Pour différer le chargement d'un gros fichier CSS jusqu'au chargement de la page, nous pouvons utiliser l'extrait de code jQuery suivant :

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

Cette fonction crée dynamiquement une balise de lien dans l'en-tête HTML et définit l'attribut href sur le fichier CSS souhaité. Pour activer la feuille de style, appelez simplement la fonction dans le gestionnaire d'événements $(document).ready() ou window.onload.

Vérification des résultats différés

Pour vérifier si le fichier CSS se charge réellement après le chargement de la page, vous pouvez désactiver JavaScript dans votre navigateur. Si le fichier CSS n'apparaît pas sur la page, cela confirme qu'il se charge dynamiquement. De plus, il est recommandé de tester l'amélioration des performances à l'aide d'un outil tel que Google PageSpeed ​​Insights pour quantifier l'impact sur les temps de chargement des pages.

En utilisant cette technique, nous pouvons optimiser la livraison CSS et améliorer les performances globales de notre site Web. pages. Le report du chargement des fichiers CSS volumineux permet à la page de s'afficher rapidement et offre une expérience utilisateur plus fluide.