WordPress : ajouter ou retirer l’attribut Preload à un fichier JavaScript ou CSS
L’utilisation de l’attribut preload permet de charger un fichier JavaScript ou CSS en priorité, ce qui est utile pour les fichiers critiques nécessaires au premier affichage d’une page Web, que ce soit avec WordPress ou une autre solution. Cependant, le préchargement excessif de fichiers peut ralentir le site en surchargeant les ressources initiales.
Voici comment ajouter ou retirer l’attribut preload à un fichier JS ou CSS dans WordPress.
Ajouter l’Attribut Preload à un Fichier CSS ou JavaScript
Pour ajouter l’attribut preload à un fichier JavaScript ou CSS spécifique, il faut injecter ou réinjecter manuellement l’élément <link> (pour CSS et JS) dans l’en-tête HTML via WordPress. Voici comment faire en utilisant wp_head.
Pour faire ajouter ou retirer l’attribut Preload d’un fichier CSS ou JavaScript, il est nécessaire de connaitre son handle (identifiant WordPress). Si vous ne savez pas comment obtenir le handle d’un fichier javascript ou CSS avec WordPress, consultez notre guide.
- Ajouter le preload pour un fichier CSS : Ajoutez ce code dans le fichier functions.php de votre thème enfant :
function add_preload_css() {
// Désenregistrer le style actuel
wp_deregister_style('handle_css_du_theme'); // Remplacez par le handle de votre fichier CSS
// Réenregistrer le style avec les attributs requis
wp_register_style('handle_css_du_theme', 'https://votresite.com/wp-content/themes/votretheme/style.css', array(), null);
// Enqueue le style pour qu'il soit chargé comme stylesheet
wp_enqueue_style('handle_css_du_theme');
}
add_action('wp_enqueue_scripts', 'add_preload_css', 100);
// Ajouter l'attribut preload au lien du fichier CSS dans le head sans doublon
function add_preload_attribute($html, $handle) {
// Vérifiez si le handle correspond à votre fichier CSS
if ('handle_css_du_theme' === $handle) {
return str_replace("rel='stylesheet'", "rel='preload' as='style' onload=\"this.onload=null;this.rel='stylesheet'\"", $html);
}
return $html;
}
add_filter('style_loader_tag', 'add_preload_attribute', 10, 2);
Cette méthode charge le fichier CSS en priorité, mais le remplace ensuite par un chargement classique une fois le fichier prêt. Cela réduit les blocages de rendu.
L’ajout de onload= »this.onload=null;this.rel=’stylesheet' » dans le code <link> pour un fichier CSS préchargé transforme l’attribut preload en stylesheet une fois le fichier chargé. Cela a deux avantages principaux :
- Optimisation du Chargement : En utilisant preload, le fichier est priorisé lors du chargement initial, ce qui est utile pour les CSS critiques nécessaires au rendu de la page. Cependant, le préchargement ne l’applique pas comme CSS actif jusqu’à ce qu’il soit transformé en rel=’stylesheet’. Une fois le fichier chargé, l’attribut onload le bascule automatiquement en stylesheet, activant le CSS sans nécessiter de chargement supplémentaire.
- Éviter les Rendus Bloquants : Sans cette conversion automatique, le fichier CSS préchargé resterait comme un simple fichier « préchargé », ce qui n’affecterait pas immédiatement le rendu de la page. La bascule permet au navigateur d’interpréter et d’appliquer le CSS en toute transparence une fois que le fichier est prêt, minimisant ainsi les blocages de rendu et accélérant le chargement visible de la page.
Cette approche est courante pour les ressources critiques, car elle équilibre le préchargement sans provoquer de ralentissements supplémentaires dus au rendu.
- Ajouter le preload pour un fichier JavaScript : Pour le préchargement d’un fichier JavaScript, la méthode est légérement différente. Nous partons du principe que le fichier est déjà déclaré par WordPress.
La ligne de déclaration <script> est donc déjà présente dans votre page HTML.
L’objectif est d’ajouter une nouvelle ligne dans l’entête HTML (<head>) en plus de la balise script :
<link rel="preload" href="main.js" as="script" />Il n’est donc pas utile de passer par les fonction wp_deregister_script, wp_register_script et wp_enqueue_script.
// Ajouter une balise <link rel="preload"> dans le <head> pour précharger le script
function add_preload_link_for_js() {
echo '<link rel="preload" href="https://votresite.com/wp-content/plugins/votreplugin/script.js" as="script">';
}
add_action('wp_head', 'add_preload_link_for_js');Retirer l’Attribut Preload d’un Fichier CSS ou JavaScript
Si un fichier est préchargé par défaut par un plugin ou un thème WordPress et que vous souhaitez le désactiver, vous avez deux options : le désenregistrer et le réenregistrer sans preload, ou utiliser un plugin pour une gestion plus précise.
Désenregistrer et réenregistrer sans Preload : voici comment désenregistrer un fichier et le réenregistrer sans l’attribut preload dans WordPress :
Pour un fichier CSS :
function remove_preload_from_css() {
// Remplacez par le handle de votre fichier CSS
wp_deregister_style('handle_css_du_plugin');
wp_register_style('handle_css_du_plugin', 'https://votresite.com/wp-content/plugins/votreplugin/style.css', array(), null, 'all');
wp_enqueue_style('handle_css_du_plugin');
}
add_action('wp_enqueue_scripts', 'remove_preload_from_css', 100);En désenregistrant et réenregistrant le fichier, il est rechargé sans l’attribut preload.
Pour un fichier JavaScript :
Comme nous l’avons vu le fonctionnement est différent. Il y a une balise <script> et dans l’en-tête HTML (head) une ligne du type :
<link rel="preload" href="main.js" as="script" />L’objectif est donc de retirer cette ligne, mais de conserver la balise script. L’idéal est de trouver la ligne de code qui insére la balise link et de la supprimer.
Si vous n’avez pas la main sur cette partie, vous pouvez utiliser le code, mais il s’agit d’une solution de contournement et elle n’est pas idéale :
function remove_preload_link_for_js($buffer) {
// Supprime la balise de préchargement spécifique
$buffer = str_replace('<link rel="preload" href="https://votresite.com/wp-content/plugins/votreplugin/script.js" as="script">', '', $buffer);
return $buffer;
}
function buffer_start() { ob_start('remove_preload_link_for_js'); }
function buffer_end() { ob_end_flush(); }
add_action('wp_head', 'buffer_start', 1);
add_action('wp_footer', 'buffer_end', 100);Utiliser un Plugin pour gérer le Preload des fichiers javascript ou CSS
Pour une solution simple et sans code, vous pouvez utiliser des plugins de gestion des ressources comme Asset CleanUp ou Perfmatters. Ces plugins permettent de contrôler facilement le chargement et le préchargement des fichiers JavaScript et CSS sur une base par page, ce qui permet de gérer finement les ressources critiques.
Les plugins WP Rocket, Autoptimize, Asset CleanUp ou Perfmatters permettent chacun d’optimiser les performances d’un site WordPress, mais leur capacité à gérer directement l’attribut preload pour les fichiers CSS et JavaScript diffère.
- Perfmatters : Perfmatters propose une solution pour le préchargement des ressources critiques, comme les fichiers CSS/JS et les images situées au-dessus de la ligne de flottaison. Cette option est intégrée et permet de sélectionner les éléments à précharger sans configurations complexes, ce qui en fait une solution adaptée aux utilisateurs souhaitant un contrôle précis sur l’optimisation du chargement.
- Asset CleanUp : Asset CleanUp (version Pro) permet un contrôle fin sur les ressources de la page et offre la possibilité d’ajouter un preload pour des fichiers CSS et JavaScript spécifiques. Cette fonctionnalité est destinée aux utilisateurs expérimentés, car un mauvais préchargement peut nuire au fonctionnement des scripts JavaScript.
- WP Rocket : Bien qu’il optimise la mise en cache et la vitesse du site, WP Rocket ne permet pas d’ajouter directement l’attribut preload pour des fichiers CSS ou JavaScript spécifiques. Il se concentre davantage sur des solutions comme le chargement différé (lazy loading) et la génération de CSS critique pour améliorer le chargement perçu.
- Autoptimize : Ce plugin est principalement dédié à l’optimisation des fichiers CSS et JavaScript via la minification et la combinaison. Toutefois, il ne permet pas d’ajouter automatiquement un preload pour ces fichiers. Pour cela, il est nécessaire d’ajouter manuellement cet attribut avec du code personnalisé.
En conclusion, bien que WP Rocket et Autoptimize ne disposent pas de fonctionnalités de préchargement direct pour les fichiers CSS et JavaScript, Asset CleanUp Pro et Perfmatters le permettent, avec des options variées pour adapter le préchargement aux besoins spécifiques du site.
Quand utiliser le Preload ?
- Utilisez preload pour les fichiers critiques : Si le CSS ou JS est indispensable pour l’apparence initiale ou le fonctionnement du site, le preload peut améliorer le rendu de la page.
- Évitez de surcharger avec des préchargements : Un préchargement excessif augmente le temps de chargement initial. Privilégiez seulement les fichiers essentiels.
Cette méthode de gestion vous permettra de contrôler finement le préchargement pour optimiser les performances du site tout en minimisant les ressources non essentielles.
Comment optimiser les performances avec l’attribut Preload des fichiers JS ou CSS ?
L’attribut preload peut être très utile pour accélérer le rendu initial de votre site WordPress en priorisant le chargement des ressources critiques. Cependant, il doit être utilisé avec soin pour éviter de surcharger le chargement initial de la page.
Voici comment et quand utiliser preload pour les fichiers JavaScript et CSS, et des conseils pour optimiser son utilisation.
Quand Utiliser l’Attribut Preload pour un fichier JavaScript ou CSS
- CSS Critique pour le Rendu Initial :
Les fichiers CSS qui sont nécessaires pour le rendu initial de la page (comme les styles principaux qui définissent la mise en page, les couleurs et la typographie de l’en-tête et du contenu au-dessus de la ligne de flottaison) sont de bons candidats pour le preload. Cela garantit que ces styles sont prêts à l’utilisation dès le début du rendu. - JavaScript Indispensable au Fonctionnement Initial :
Les fichiers JavaScript qui sont absolument nécessaires pour le bon fonctionnement de la page, tels que ceux utilisés pour des éléments interactifs (menus, boutons ou formulaires) visibles dès l’affichage initial, peuvent bénéficier de preload. Cela évite les blocages au niveau des interactions utilisateurs. - Ressources Utilisées Très Rapidement Après le Chargement :
Si un fichier CSS ou JavaScript est appelé très peu de temps après l’affichage initial de la page (par exemple, un JS nécessaire pour des animations d’images), le preload permet de le charger discrètement en arrière-plan pour qu’il soit prêt quand il sera requis. - Police de Caractères :
Les polices de caractères peuvent également être préchargées pour éviter les changements de style visuel pendant le chargement de la page. Toutefois, elles doivent être déclarées en tant que font dans as=‘font’ avec type=’font/woff2′ pour les fichiers WOFF2, et cela se fait dans l’en-tête de votre page.
Optimiser le préchargement de fichiers JavaScript et CSS
Le préchargement doit être géré soigneusement pour ne pas saturer les ressources réseau, ce qui pourrait ralentir la page plutôt que l’accélérer. Voici comment optimiser ce processus :
- Précharger Uniquement les ressources critiques :
Limitez le préchargement aux fichiers CSS et JavaScript réellement critiques pour le rendu et l’interaction initiale. Trop de fichiers en preload peut augmenter les temps de chargement initiaux, notamment si les ressources sont lourdes. - Utiliser preload avec onload pour les Fichiers CSS :
Pour optimiser le chargement des fichiers CSS, vous pouvez combiner preload avec un événement onload qui convertit la ressource en une feuille de style après le préchargement. Cela permet d’éviter le blocage du rendu tout en s’assurant que le fichier est prêt quand nécessaire :
<link rel="preload" href="https://votresite.com/wp-content/themes/votretheme/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">- Tester l’impact du préchargement :
Utilisez des outils comme Google PageSpeed Insights ou Lighthouse (outils de développement dans Chrome) pour tester les performances de la page avant et après l’ajout de preload à certains fichiers. Cela permet de voir l’effet sur le « First Contentful Paint » (FCP) et le « Largest Contentful Paint » (LCP), qui sont des indicateurs clés pour le rendu rapide de la page. - Configurer le préchargement pour les polices :
Pour éviter les changements de style causés par le chargement différé des polices, utilisez preload pour vos polices principales avec le type MIME adéquat. Par exemple :
<link rel="preload" href="https://votresite.com/wp-content/themes/votretheme/fonts/votre-police.woff2" as="font" type="font/woff2" crossorigin="anonymous">- Utiliser prefetch pour les fichiers utilisés plus tard :
Si vous avez des fichiers JavaScript ou CSS qui seront utilisés plus tard sur la page (par exemple, un script pour un élément au bas de la page), utilisez prefetch au lieu de preload. prefetch signale au navigateur de charger la ressource en arrière-plan, mais sans l’accorder de priorité pour le rendu initial. - Gérer les priorités de chargement avec le déchargement conditionnel :
Utilisez des plugins comme Asset CleanUp ou Perfmatters pour charger certains fichiers uniquement sur les pages où ils sont nécessaires. En réduisant le nombre de ressources en charge, vous allégez le rendu initial et pouvez optimiser le préchargement des fichiers critiques restants.
Exemple complet d’optimisation du préchargement
Supposons que vous avez un fichier CSS critique et un fichier JS pour une interaction d’en-tête. Voici comment structurer le préchargement :
<!-- CSS Critique -->
<link rel="preload" href="https://votresite.com/wp-content/themes/votretheme/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<!-- JS Critique pour l'Interaction Initiale -->
<link rel="preload" href="https://votresite.com/wp-content/plugins/votreplugin/script.js" as="script">En appliquant ces principes, vous maximisez les performances du chargement initial de votre page tout en évitant une surcharge du réseau due au préchargement.
Quels sont les impacts d’un préchargement excessif en particulier sur mobile ?
Un préchargement (Preload) excessif de fichiers CSS ou JavaScript peut être problématique, que ce soit sur WordPress ou tout autre solution Web, surtout sur mobile, pour plusieurs raisons :
- Augmentation de la latence de chargement initiale : Les appareils mobiles, en particulier ceux dotés de processeurs moins puissants ou de connexions plus lentes, peuvent être rapidement surchargés par un trop grand nombre de fichiers à charger en priorité. Cela augmente la latence de chargement de la page, car le navigateur essaie de télécharger simultanément plusieurs ressources « prioritaires », ralentissant ainsi le rendu de la page.
- Consommation excessive de données : Chaque fichier préchargé est téléchargé, qu’il soit utilisé immédiatement ou non, ce qui peut épuiser les données des utilisateurs mobiles, surtout si le site contient des ressources lourdes ou des fichiers rarement requis.
- Surcharge de mémoire et énergie : Les appareils mobiles ont généralement une mémoire et une capacité de traitement plus limitées que les ordinateurs de bureau. Charger trop de fichiers en avance consomme plus de mémoire vive (RAM) et d’énergie, ce qui peut ralentir le téléphone ou provoquer des fermetures forcées d’autres applications en arrière-plan.
- Blocages du rendu (Render-Blocking) : Le navigateur doit d’abord gérer toutes les ressources marquées comme « préchargées » avant de pouvoir afficher la page. Si trop de CSS ou de JS sont en préchargement, cela peut retarder l’affichage du contenu principal, donnant l’impression que le site met longtemps à se charger.
- Diminution du score de performance : Des outils comme Google Lighthouse, qui mesurent les performances des sites web, identifient souvent un excès de préchargements comme une pratique non optimale. Un site qui utilise trop de préchargements sur mobile peut obtenir un score de performance plus faible, affectant négativement son SEO et, potentiellement, l’expérience utilisateur globale.
Solutions pour un préchargement efficace sur mobile
Pour éviter ces impacts négatifs, voici quelques pratiques :
- Limiter le préchargement aux ressources critiques, nécessaires au rendu initial (CSS principaux, scripts essentiels), c’est à dire au-dessus de la ligne de flotaison.
- Utiliser le préchargement différé pour des ressources non critiques, qui peuvent être chargées après le rendu de la page.
- Contrôler le préchargement via des outils d’analyse pour adapter les ressources prioritaires en fonction des besoins réels de la page.
En optimisant soigneusement le préchargement sur mobile, vous pouvez améliorer les temps de chargement et fournir une expérience plus fluide aux utilisateurs mobiles.
Comment identifier les scripts et CSS avec un attribut preload inutile ?
Pour identifier les scripts et fichiers CSS avec un attribut preload inutile dans Chrome, vous pouvez utiliser les outils de développement pour voir ce qui est chargé mais non utilisé par votre page WordPress. La méthode est valable pour n’importe quelle technologie Web.
Voici comment procéder étape par étape :
Étape 1 : ouvrir les outils de développement
- Ouvrez Chrome et rendez-vous sur la page à analyser.
- Appuyez sur F12 ou faites un clic droit et sélectionnez Inspecter pour ouvrir les outils de développement.
Étape 2 : identifier les fichiers JS et CSS avec l’attribut Preload
Tout d’abord, l’onglet console peut afficher le message « The resource XXXX was preloaded using link preload but not used within a few second from the windows’s load event. Please make sure it wasn’t preloaded for nothing« . En français, cela signifie « La ressource XXXX a été préchargée à l’aide de link preload, mais n’a pas été utilisée dans les quelques secondes suivant l’événement de chargement de la fenêtre. Veuillez-vous assurer qu’elle n’a pas été préchargée pour rien.« .
Si vous avez ce type de message dans la console, c’est un excellent moyen pour identifier les fichiers qui ne devraient pas être « preloaded ».
Il y a d’autres moyens pour identifier les fichiers JS et CSS avec un attribut Preload inutile. Ces méthodes permettent également d’approfondir le sujet et de vérifier l’impact :
- Dans l’onglet « Elements » des outils de développement
- Déplier la balise <head>
- Les fichiers CSS avec l’attribut Preload sont déclarés avec <link rel=preload
- Les fichier JS avec Preload sont déclarés avec une ligne spécifique (en plus de la ligne <script>) dans l’entête HTML comme ci-dessous :
<link rel="preload" href="main.js" as="script" />Une autre solution plus approximative mais plus rapide :
- Allez dans l’onglet « Network » (Réseau) des outils de développement.
- Filtrez les types de ressources : En haut de l’onglet Réseau, sélectionnez CSS et JS (avec la touche CTRL pour sélectionner le deuxième) pour ne voir que les fichiers CSS et JavaScript.
- Rechargez la page (F5 ou Ctrl + R).
- Les fichiers CSS et JS qui apparaissent en premier ont en général l’attribut Preload
Étape 3 : analyser les recommandations dans l’Onglet « Performance »
- Lancez un profilage de performance : Allez dans l’onglet Performance et cliquez sur le bouton Record pour enregistrer l’activité de la page au chargement.
- Rechargez la page, puis arrêtez l’enregistrement.
- Examinez les scripts et styles chargés et leur impact sur le rendu initial. Les scripts et styles préchargés qui ne contribuent pas à cette phase peuvent être optimisés ou supprimés du preload.
Déplier la ligne « Netwwork » pour voir le détail, comme le montre la capture d’écran ci-dessous. L’encart « Preload » correspond aux fichiers qui sont utilisés lors de la première phase de chargement, on y trouve des fichiers avec l’attribut Preload mais aussi des fichiers sans l’attribut. C’est ces derniers qui nous interessent, l’ajout de l’attribut Preload améliorera les performances.
Pour identifier les fichiers, sélectionner la ligne pour afficher des informations plus complétes en bas de la fenêtre.
Étape 4 : utiliser lighthouse pour des recommandations spécifiques
- Accédez à l’onglet Lighthouse dans les outils de développement.
- Sélectionnez Performance et lancez un audit de la page.
- Consultez les suggestions : Lighthouse vous indique les ressources critiques et celles qui sont inutiles pour le rendu initial, en précisant les preload inutilisés.
Ces étapes vous permettent d’identifier les scripts et styles avec un preload inutile dans Chrome, afin de réduire les temps de chargement et d’optimiser l’expérience utilisateur sur votre site, WordPress ou autre.
Pour ne rien rater, abonnez-vous à Cosmo Games sur Google News et suivez-nous sur X (ex Twitter) en particulier pour les bons plans en direct. Vos commentaires enrichissent nos articles, alors n'hésitez pas à réagir ! Un partage sur les réseaux nous aide énormément. Merci pour votre soutien !
