en utilisant Elementor Lorsque nous utilisons des constructeurs de pages visuels tels qu'Elementor, nous construisons rapidement des pages en glissant et déposant des composants. Cette approche est pratique, mais pour chaque élément utilisé, Elementor génère généralement plusieurs éléments imbriqués <div> Conteneurs. Au fur et à mesure que le nombre de composants de la page augmente et que la structure HTML devient plus complexe, la fonctionAugmentation du niveau DOMCela affecte à son tour les performances de chargement et l'expérience de l'utilisateur de la page web.

Afin de résoudre ce problème.Elementor a officiellement introduit une fonctionnalité expérimentale dans la version 3.6 (mars 2022) : Optimised DOM Output.. L'objectif de cette fonctionnalité est de rationaliser la structure du code HTML généré par la page, en supprimant les balises imbriquées inutiles et en optimisant la hiérarchie globale du DOM. Elle est aussi parfois appelée "Un balisage optimisé(Optimisation des structures de balisage)".

Lorsque cette fonctionnalité est activée, Elementor produit le code de la page de manière plus légère, ce qui permet un chargement plus rapide, des scores d'accessibilité plus élevés et de meilleures performances en matière de référencement.

1.2 Plus le niveau du DOM est profond, plus le chargement est lent.

Plus il y a de n?uds DOM et plus la structure est complexe, plus l'analyse de la page par le navigateur nécessitera de calculs, ce qui se traduira par.. :

• Augmentation du temps de chargement des pages
• Le blocage du rendu devient plus
• Retard dans la première interaction avec l'utilisateur
• Les scores de performance de Google sont en baisse (ce qui affecte particulièrement Core Web Vitals)

L'optimisation de la structure du DOM est donc une étape importante pour améliorer la vitesse de chargement des pages Elementor.

Deuxièmement, la lenteur du chargement des pages d'Elementor est une cause fréquente

Outre les problèmes courants tels que la configuration de l'hébergement, la compression incorrecte des images, la mise en cache non optimisée, etc.Elementor La lenteur du chargement des pages est souvent liée à la complexité de la structure DOM. Voici quelques-unes des manifestations spécifiques :

2.1 Divs imbriquées dans le code source de la page

Pour chaque élément utilisé (par exemple, une zone de texte, un bouton, une image), Elementor génère plusieurs conteneurs div pour l'envelopper. Empilée, une simple page peut générer des centaines ou des milliers de n?uds DOM.

2.2 Ne pas utiliser le conteneur Flexbox

De nombreux utilisateurs ont encore recours à l'ancienne construction Section + Colonne, ce qui entra?ne une imbrication supplémentaire de la mise en page. En passant à la nouvelle version du conteneur Flexbox, la structure supplémentaire peut être réduite de manière significative.

2.3 La sortie optimisée du DOM n'est pas activée

Il s'agit d'une amélioration des performances qui a été ajoutée à Elementor au cours des dernières années. De nombreux utilisateurs ne sont pas conscients de son existence, ce qui entra?ne l'utilisation d'anciennes structures redondantes et un chargement des pages naturellement plus lent.

Activation de la fonction de balisage optimisé d'Elementor

3.1 Introduction aux fonctions

Elementor a introduit cette fonctionnalité, initialement nommée "Sortie DOM optimisée", parfois appelée "Markup optimisé" (en anglais)Les deux noms font référence à la même fonctionnalité qu'Elementor utilise pour rationaliser la structure du HTML. Les deux noms font référence à la même fonctionnalité qu'Elementor utilise pour rationaliser la structure du HTML et réduire les balises redondantes.

• Supprimer les conteneurs imbriqués inutiles
• Rationalisation de la structure des composants
• Réduire le nombre de n?uds DOM sur une page
• Améliorer la vitesse de chargement et l'accessibilité

Lorsqu'il est activé, Elementor génère automatiquement des pages avec une structure plus propre et plus standard, ce qui réduit considérablement la complexité HTML de la page.

3.2 Modalités d'application

Suivez les étapes ci-dessous pour activer la fonction :

• Connectez-vous au backend de WordPress
• Dans le menu de gauche, cliquez sur Elementor → Paramètres
• Sur la page Paramètres, cliquez sur la barre de navigation supérieure de l'écran d'accueil. "Caractéristiques

• localiser Un balisage optimisé
• Modifier la fonction de "Défaut" à "Actif"
• Sélectionnez "Activer" et enregistrez les modifications

IV. Comparaison des résultats réels après optimisation

4.1 Amélioration des scores de performance

• Réduction significative du nombre de n?uds DOM
• Réduction du temps de traitement du plus grand tableau de contenu (LCP)
• Baisse du temps de blocage total (TBT)
• Les scores de référencement et d'accessibilité ont également été améliorés

4.2 Une structure de page plus claire et des feuilles de style plus faciles à entretenir

Pour ceux qui utilisent des feuilles de style CSS personnalisées, la structure optimisée facilite le positionnement des éléments et réduit les classes inutiles.

V. Questions fréquemment posées et recommandations

5.1 Que dois-je faire si le style de la page est perturbé après l'activation ?

Si vous utilisez une ancienne version du modèle ou un plugin Elementor tiers, il se peut que certains styles ne soient pas compatibles avec la nouvelle structure. C'est possible dans ce cas :

• Fermeture temporaire des marqueurs d'optimisation pour dépannage
• Vérification des feuilles de style CSS qui s'appuient trop fortement sur des structures imbriquées
• En attendant que les développeurs de plugins mettent à jour le support de compatibilité

5.2 Faut-il réenregistrer toutes les pages ?

Oui. Pour que les pages adoptent la nouvelle structure, il est recommandé de rouvrir chaque page dans Elementor et de cliquer sur le bouton "Mettre à jour".

5.3 Tous les thèmes sont-ils compatibles ?

Des thèmes communs tels que Hello Theme, Astra,KadenceIl est également compatible avec Blocksy et d'autres thèmes. Toutefois, si vous utilisez un thème plus ancien, il est recommandé de l'activer dans un environnement de test avant de le mettre en ligne.

N'ignorez pas la valeur de l'optimisation des DOM

Optimisation du DOML'éditeur visuel d'Elementor est la clé de l'amélioration des performances, il nous aide à réduire les structures de code redondantes dans la page et à rendre la page plus légère et plus rapide, alors n'ignorez pas la valeur de l'optimisation du DOM. Si vous pensez que Elementor Les pages se chargent lentement, essayez d'activer cette fonction. Les sites web n'ont pas besoin d'être compliqués, mais ils doivent être rapides. Activez les balises d'optimisation dès maintenant et augmentez votre vitesse de chargement !

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.