Préchargement et récupération prioritaires des images WordPress avec Elementor

Ces dernières années, les indicateurs liés à Performances Web sont devenus essentiels pour ceux qui développent ou gèrent des sites Web. L'avènement de Vitaux Web de base, en particulier du paramètre LCP (La plus grande peinture à contenu), a entraîné un changement radical dans la façon dont les développeurs optimisent les images dans leurs projets.
Pourtant, dans un écosystème de plus en plus complexe comme celui de hood.discount, où les plugins et les constructeurs de pages interviennent fortement sur le balisage, obtenir un comportement correct du navigateur n'est pas si évident.

L’un des cas les plus fréquents concerne précisément Elementor, le célèbre constructeur de pages visuelles, et la façon dont il gère chargement paresseux, préchargement et priorisation des imagesDans cet article, nous examinons en détail le fonctionnement réel du téléchargement d'images dans WordPress, car souvent les images « héros » (celles visibles au-dessus du pli, ou au dessus du pli) ne sont pas traités comme ils devraient l'être, et comment les corriger définitivement avec un simple correctif PHP.

Le problème fondamental : comment WordPress gère les images

À partir de WordPress 5.5, le noyau a automatiquement introduit l'attribut loading="lazy" sur toutes les images insérées dans le contenu.
Ce comportement a un objectif clair : réduire le temps de chargement initial éviter de télécharger des ressources qui ne sont pas visibles par l'utilisateur lors du premier rendu.

En pratique, si une image est en dessous de la ligne de flottaison (sous le pli), se charge uniquement lorsque le visiteur fait défiler la page. Cette solution est judicieuse pour réduire le poids global de la page, mais elle a un effet secondaire important :

Même l’image principale, qui représente souvent le contenu le plus grand et le plus visible à l’ouverture de la page, risque d’être chargée tardivement, pénalisant ainsi la métrique LCP.

Le navigateur ne fait pas la distinction a priori quelle image est la plus importante, et la charge paresseusement sans discernement.
WordPress fait de son mieux pour gérer automatiquement certaines exceptions, mais lorsque des créateurs de pages comme Elementor interviennent, le balisage change et les mécanismes de détection standard ne fonctionnent plus comme prévu.

Interférence de chargement paresseux d'Elementor

Elementor applique souvent son propre système de chargement paresseux sur les images, en chevauchement avec celle de WordPress.
Dans de nombreuses installations, l'attribut loading="lazy" Il est ajouté directement depuis les widgets d'image ou de galerie, ou hérité de plugins d'optimisation tels que NitroPack, WP Rocket ou LiteSpeed ​​​​Cache.

Le résultat?
Les images « héros » — c’est-à-dire celles positionnées au dessus du pli —ils sont toujours chargés en retard, car ils sont marqués comme « paresseux ».
Google PageSpeed ​​​​Insights ou Lighthouse, lors de l'analyse de la page, renvoient souvent des messages tels que :

Essentiellement, l’image principale n’est pas considérée comme « prioritaire » par le navigateur, ce qui dégrade la perception visuelle du chargement, même si le serveur et le réseau sont très rapides.

Comprendre le above-the-fold et le rôle de l'image LCP

Le terme au dessus du pli (en italien au-dessus du pli) vient du monde du papier imprimé : dans les journaux, tout ce qui se trouvait dans la moitié supérieure de la première page — celle visible même lorsque le journal était plié — était considéré comme le contenu le plus important.
Dans la conception Web et le développement front-end, le concept est resté le même : la partie au-dessus du pli est la partie de la page visible par l'utilisateur sans avoir besoin de faire défiler, c'est-à-dire celui qui apparaît immédiatement à l'ouverture du site.

Cette partie a un rôle fondamental, car elle représente la premier impact visuel avec l'utilisateur.
C'est ici que se forme votre opinion initiale sur la vitesse, la fiabilité et la qualité du site.
Si la zone au-dessus du pli se charge lentement, l’utilisateur perçoit le site comme « lourd » ou « lent », même si le reste de la page fonctionne parfaitement.

Pour cette raison, tous les éléments au-dessus du pli doivent se charger dans les plus brefs délais: images héros, logos, textes principaux, appels à l'action et arrière-plans du premier bloc.
Ce n’est pas seulement une question d’esthétique, mais de expérience utilisateur et conversionPlus un utilisateur voit rapidement le contenu, plus il est susceptible de rester sur le site et d’interagir.

Google mesure cette perception même à travers l’une de ses mesures clés Vitaux Web de baseAppelé LCP (La plus grande peinture à contenu).
Cette métrique évalue combien de temps prend l'élément visuellement le plus grand — qui est généralement une image de héros, une bannière ou un grand bloc de texte — pour apparaître entièrement sur l'écran.

Un LCP bon c'est ce qui arrive dans les secondes 2,5 à partir du moment où la page commence à se charger.
Au-dessus de ce seuil, l'expérience est perçue comme lente, et PageSpeed ​​​​obtient des scores et Vitaux Web de base ils en souffrent.
Le problème est que si l'image principale est chargée avec loading="lazy" (c'est-à-dire en mode « paresseux ») ou sans priorité réseau adéquate, le navigateur ne le téléchargera qu'après avoir terminé l'analyse de l'intégralité du document HTML.
En d'autres termes, le fichier image arrive trop tard pour que le navigateur puisse déjà l'afficher, ce qui provoque un retard visible dans l'apparition du contenu principal.

Cela signifie que même sur des serveurs rapides, des CDN optimisés et des sites bien configurés, l'expérience utilisateur peut être lente simplement à cause d'un attribut HTML incorrect ou d'un manque de priorité de chargement appropriée.
C'est pourquoi aujourd'hui des outils comme le fetchpriority="high" et les balises de préchargement sont devenues cruciales : elles servent à communiquer explicitement au navigateur quali Les ressources méritent une priorité absolue, c'est-à-dire celles qui apparaissent au-dessus du pli et qui définissent la première impression du site.

L'importance du préchargement

Pour éviter ces retards, vous pouvez demander à votre navigateur de précharger ressources critiques via l'élément HTML <link rel="preload">.
Un préchargement force le navigateur à télécharger la ressource (image, police, vidéo, CSS ou JS) vient d'être découvert dans le document, même si ce n'est pas encore nécessaire pour le rendu.

Exemple classique d’image de héros :

Cette approche garantit que l’image est déjà disponible dans le cache lorsque le navigateur la rencontre dans le balisage. <img>.
Cependant, ce n’est pas toujours la solution la plus pratique dans WordPress, car :

• l'ajout de précharges dynamiques nécessite du code personnalisé ;
• si un CDN ou un plugin réécrit les URL, vous risquez de précharger un fichier différent ;
• Et surtout, si le générateur de pages modifie l’ordre du DOM, le préchargement peut perdre son efficacité.

L'attribut fetchpriority : le raccourci moderne

En 2022, les principaux navigateurs (Chrome, Edge, Safari) ont introduit un nouvel attribut natif :

fetchpriority="élevé"

Contrairement au préchargement, qui force le téléchargement à commencer plus tôt, fetchpriority cela ne change pas l'heure à laquelle la ressource est demandée, Mais influence la priorité de connexion pendant le chargement.

Il s’agit d’une directive « plus légère » et plus sûre à gérer :
le navigateur décide toujours quand télécharger l'image, mais s'il la trouve fetchpriority="high" sur une image « au-dessus du pli », il la mettra à la fin avant les autres.

exemple:

L'utilisation combinée de loading="eager" (télécharger maintenant) et fetchpriority="high" (haute priorité réseau) est aujourd'hui le moyen le plus efficace pour garantir un LCP rapide, même sans préchargement manuel.

Elementor et le problème du contrôle du balisage

En théorie, il suffirait de définir les attributs corrects sur le <img> qui apparaissent dans section héros ou curseur au-dessus du pli.
Mais Elementor, comme de nombreux constructeurs visuels, n'expose pas directement ces attributs dans les champs du widget.

Chaque image insérée dans une section ou une colonne Elementor est en fait enfermée dans plusieurs couches de <div>, wrapper, superposition, chargeur paresseux ou animations.
En conséquence:

• le navigateur ne trouve pas l'image dans le document initial (car elle est masquée ou chargée via JS),
• fetchpriority="high" ne peut pas être ajouté manuellement,
• e loading="lazy" Il reste actif même là où il ne devrait pas.

Ce comportement a été signalé par de nombreux utilisateurs, mais jusqu'à présent, Elementor n'a pas introduit d'option native permettant d'exclure facilement une image du chargement différé ou de lui attribuer une priorité élevée.

Le contexte réel : les images LCP dans Elementor

Prenons un exemple concret.
Imaginez avoir un bloc « Héros » dans Elementor, avec une grande image d’arrière-plan ou une image de colonne comme élément visuel principal.
Le balisage résultant pourrait ressembler à ceci :

<div class="elementor-element elementor-element-123 heroimage">
    <img decoding="async" loading="lazy" src="https://example.com/wp-content/uploads/hero.jpg" alt="Hero section">
</div>

Google PageSpeed ​​​​vous dira que :

• chargement lent (loading="lazy") n'est pas approprié pour l'image LCP,
• et que vous devez postuler fetchpriority="high".

Mais Elementor ne vous permet pas de modifier ces attributs depuis l’interface, et WordPress le marque toujours comme « paresseux » par défaut.
D’où la nécessité d’intervenir en aval, c'est-à-dire, après que la page a été générée, pour corriger le balisage.

Au-dessus du pli et priorité visuelle

Toutes les images de la page ne méritent pas la même priorité.
Le seul critère sensé est le position visuelle: les images au-dessus du pli doivent être téléchargées immédiatement, les autres non.

Le problème est qu'Elementor ne fait pas la distinction entre les deux cas. Toutes les images sont traitées de manière égale, et même une image de héros se retrouve avec loading="lazy".
Cela signifie que l'utilisateur peut voir la barre de navigation et du texte, mais pas l'image principale pendant une seconde ou deux, même avec des connexions rapides.

Techniquement, le navigateur télécharge d’abord les ressources secondaires (icônes, images d’arrière-plan, médias cachés dans les onglets), puis seulement la plus grande image de la page.
L'effet visuel est un « flash » blanc ou une mise en page qui se termine en retard, pénalisant l'expérience utilisateur et Vitaux Web de base.

La solution idéale : un correctif côté tampon de sortie

Une solution élégante est intercepter la sortie HTML généré par Elementor et le corriger avant qu'il ne soit envoyé au navigateur.

Cette approche présente plusieurs avantages :

• ne nécessite aucune modification des widgets ou des modèles ;
• ne modifie pas le fonctionnement d'Elementor ;
• Ceci s'applique uniquement au frontend (pas à l'éditeur).

En pratique, nous pouvons utiliser Mise en mémoire tampon de sortie PHP (ob_start()) pour capturer le HTML généré par la page, recherchez les images qui se trouvent à l'intérieur d'une section avec une classe spécifique (par exemple .heroimage), et appliquez automatiquement les attributs corrects.

Notre solution pour Elementor

Pour résoudre définitivement le problème de chargement paresseux et de priorité de récupération sur les images principales, nous partageons ci-dessous un correctif open source qui peut être inséré dans le fichier functions.php du thème ou, mieux encore, dans un petit plugin mu sur mesure.

add_action('template_redirect', function () {
    if (is_admin() || wp_doing_ajax()) return;

    // Escludi le richieste AJAX di Elementor
    if (isset($_REQUEST['action']) && strpos($_REQUEST['action'], 'elementor') !== false) {
        return;
    }

    ob_start('elementor_add_fetchpriority_to_target_images');
});

function elementor_add_fetchpriority_to_target_images($html) {
    // Trova tutti i div con classe heroimage e le loro img
    $pattern = '/<div[^>]*class="[^"]*heroimage[^"]*"[^>]*>.*?<img([^>]*)>/is';

    $html = preg_replace_callback($pattern, function ($matches) {
        $img_tag = $matches[0];

        // Aggiungi fetchpriority="high" se non presente
        if (strpos($img_tag, 'fetchpriority=') === false) {
            $img_tag = preg_replace('/<img/', '<img fetchpriority="high"', $img_tag);
        }

        // Rimuovi loading="lazy"
        $img_tag = preg_replace('/\s*loading=(["\'])lazy\1/', '', $img_tag);

        return $img_tag;
    }, $html);

    return $html;
}

Comment ça marche ?

1. Crochet template_redirect
   Le code ne prend effet que sur le frontend de votre site, après que WordPress a chargé le modèle mais avant d'envoyer le HTML au navigateur.
2. Mise en mémoire tampon de sortie (ob_start)
   Capturez la sortie de la page complète générée par Elementor.
3. Regex sur les classes « heroimage »
   Rechercher tout <div> qui contiennent la classe heroimage et identifier les éléments pertinents <img> à l'intérieur d'eux.
4. Correction du balisage
   • Supprime tout loading="lazy".
   • Ajouts fetchpriority="high" s'il n'est pas présent.
     De cette façon, l'image principale est traitée en priorité, même si Elementor ou WordPress continue de forcer le chargement paresseux.
5. Renvoyer une sortie correcte
   Le HTML modifié est renvoyé au navigateur, garantissant que les images principales sont téléchargées immédiatement.

Pourquoi c'est une approche intelligente

Ce correctif n'interférera pas avec le fonctionnement normal d'Elementor, ni avec les plugins d'optimisation tels que NitroPack, WP Rocket ou LiteSpeed ​​​​Cache.
Acheter uniquement dans la phase de sortie et uniquement pour les éléments qui ont explicitement une classe .heroimage.
De cette façon, vous pouvez décider, directement depuis le constructeur, quelles sections doivent contenir des images prioritaires.

Il suffit d'ajouter la classe heroimage à la section principale ou au conteneur du héros, et le script fera tout lui-même.

Intégration avec les plugins de mise en cache

Étant donné que le correctif affecte la sortie HTML finale, il fonctionne parfaitement même en présence de systèmes de mise en cache côté serveur ou de plugins d'optimisation.
Une fois le tampon modifié pour la première fois, la version optimisée est mise en cache, de sorte que le coût de calcul est nul sur les requêtes suivantes.

Il est recommandé de vider votre cache après l'activation pour garantir que les pages sont régénérées avec les nouveaux attributs.

Résultat sur PageSpeed ​​​​Insights

Après avoir appliqué ce correctif, la différence dans les rapports de Google PageSpeed ​​Insights o Lighthouse c'est immédiat :

• L'entrée « Doit appliquer fetchpriority=high » disparaît.
• L’image du héros est marquée comme « détectable dans le document source ».
• La métrique LCP s'améliore nettement, souvent avec un gain de 80 à 100 ms sur le temps de rendu total perçu.

Extensions possibles

Ceux qui souhaitent un contrôle plus précis peuvent étendre le script de plusieurs manières :

• Appliquez le correctif uniquement à certains modèles ou types de publication.
• Ajoutez également loading="eager" o decoding="async" en plus de fetchpriority="high".
• Gérer plusieurs classes CSS (par exemple .hero, .banner, .featured).

Voici un exemple de variante qui inclut loading="eager":

<?php
if (strpos($img_tag, 'loading=') === false) {
    $img_tag = preg_replace('/<img/', '<img loading="eager"', $img_tag);
}
?>

Conclusions

Le chargement efficace des images est l’un des aspects les plus importants à garantir hautes performances et scores Vitaux Web de base ottimali.
Dans WordPress, et en particulier avec Elementor, le comportement par défaut peut cependant entraver la réalisation de ces objectifs, en raison du lazy loading appliqué sans discernement.

En intervenant directement sur la sortie HTML et en corrigeant les images principales avec fetchpriority="high", vous pouvez restaurer le comportement idéal du navigateur :
Téléchargez d'abord les ressources les plus importantes, rendant l'expérience utilisateur fluide et visuellement immédiate.

Le correctif proposé est simple, efficace et entièrement compatible avec n’importe quel environnement d’hébergement.
Ajoutez simplement une classe CSS (heroimage) aux sections au-dessus du pli et laissez le script s'occuper du reste.

Une petite intervention technique, mais avec un impact important sur les temps de chargement perçus et le score LCP.