Comment améliorer efficacement la vitesse du site web d'Elementor ?

L'éditeur Elementor est un éditeur de site web Wordpress. Après l'activation du backend du site web, l'ouverture de l'éditeur Elementor peut sembler plus lente, décalée, voire impossible. Comme le montre l'image ci-dessous :

Voici 9 façons de résoudre les problèmes de vitesse avec l'éditeur Elementor.

1. activer la fonction Elementor

Connectez-vous à votre tableau de bord Wordspress et allez sur Elementor → Paramètres, puis activez les options Lazy Load Background Images, Inline Font Icons :

Icônes de police en ligne
Chargez les icônes de police (telles que Font Awesome et les eicons) en ligne sous forme de SVG au lieu de charger l'ensemble de la bibliothèque. Cela réduit les requêtes CSS et les problèmes de CSS bloquant le rendu.

Chargement retardé des images d'arrière-plan
Utilisez le plugin d'optimisation avec la classe d'aide "lazy-bg" pour retarder le chargement des images d'arrière-plan. Le chargement des images d'arrière-plan est ainsi plus facile et plus efficace.

Optimisation de la sortie DOM
Réduisez la taille du DOM et améliorez les performances en supprimant les div wrappers inutiles tels que elementor-inner, elementor-row et elementor-column-wrap.

Amélioration du chargement des ressources
Réduisez la charge JavaScript sur votre site en chargeant les fenêtres lumineuses, les bibliothèques plein écran, les bibliothèques de dialogue et les bibliothèques de liens partagés uniquement lorsque cela est nécessaire.

Amélioration du chargement des CSS
Ne chargez que les CSS et les animations des widgets qui sont utilisés et chargez-les en même temps, réduisant ainsi la quantité de CSS et de ressources bloquant le rendu sur votre site.

Désactiver le partage des données
Le partage des données avec les développeurs de plugins nécessite des ressources de serveur. Il est donc recommandé de désactiver cette fonction dans tous les plugins.

2,Modifier la méthode d'impression CSS en "fichier externe".

Bien qu'il y ait des avantages et des inconvénients à cette approche, l'utilisation de fichiers CSS externes est généralement préférable parce que chaque fichier CSS externe peut être mis en cache et qu'il n'augmente pas la taille du code HTML. Il est recommandé de tester les résultats sur votre propre site, mais je recommande généralement l'utilisation de fichiers externes.

3,Désactiver les polices Google par défaut

Dans les étapes suivantes, nous ne préchargerons que les polices dont vous avez besoin et nous utiliserons le format woff2 localement.

existentAvancéDésactiver Google Fonts Font Awesome en

existentGénéralDésactiver Font Awesome dans

Lorsque vous modifiez les paramètres de police/CSS, régénérez les données dans les paramètres des outils CSS et CSS Elementor, puis testez les résultats dans un graphique en cascade (par exemple, GTmetrix ou Chrome Developer Tools).

4,Réglez le chargement des polices Google sur "Swap".

Régler le chargement de Google Fonts sur "échange"garantit que le texte reste visible pendant le chargement des polices web. Cependant, Font Awesome recommande d'utiliser font-display : blockcar il permet de ne pas bloquer le chargement des icônes. Il est également possible de modifier le paramètre police-affichage Attributs.

Pour ajouter font-display : swapSi vous ne pouvez pas trouver l'emplacement, veuillez trouver le fichier CSS pour la police, ou utilisez le localisateur de chaîne pour rechercher l'emplacement de la police. Si vous ne pouvez pas trouver l'emplacement, définissez simplement la propriété font-display : swap Il suffit de l'ajouter au code CSS de la police.

Désactiver la bibliothèque de blocs de Gutenberg

Comme Elementor est utilisé, Gutenberg peut être désactivé et il ajoutera des fichiers CSS supplémentaires au site (/wp-includes/css/dist/block-library/style.min.css). Il est possible deUtilisation d'Asset CleanUp plug-in (composant logiciel)Annuler la queue CSS de la bibliothèque de blocs de Gutenberg: :

Désactiver l'éditeur Gutenberg
Gutenberg peut être désactivé à l'aide du plugin Disable Gutenberg ou du gestionnaire de scripts dans Perfmatters. Si Gutenberg n'est utilisé que dans certaines parties de votre site web, ces deux options vous permettent de contrôler l'endroit où il est chargé, optimisant ainsi les performances du site web.

5,Utiliser transform + translate dans les animations

L'animation n'est pas vraiment recommandée, mais il est possible d'utiliser transformer pour éviter les changements de présentation (CLS).

Ces effets peuvent être obtenus à l'aide du plugin Happy Addons, où les transformations CSS permettent de modifier la largeur et la hauteur de l'animation, et les traductions CSS déplacent les éléments sans modifier la mise en page. Cela améliore la stabilité de la page tout en maintenant l'effet d'animation.

6,Désactiver les plug-ins inutilisés

Veillez à contrôler le nombre de plugins utilisés sur votre site WordPress. Un trop grand nombre de plugins se traduit par un backend très lent et difficile à utiliser.

Les recommandations suivantes ont été formulées :

1. Limiter le nombre de plug-insLes plug-ins : Essayez de limiter le nombre de plug-ins à 15 ou moins.
2. Éviter les plugins à double fonctionUtiliser un seul plugin pour la même fonctionnalité, par exemple pour le plugin SEO, choisir d'installer SEO Yoast, Rank Math ou All in One SEO.
3. Éviter les fonctions en doubleLes plugins : Évitez d'installer des plugins avec des fonctionnalités en double si vous disposez déjà d'un plugin aux fonctionnalités complètes.
4. Désactiver les plug-ins inutilisésLes plug-ins : Désactivez toujours les plug-ins que vous ne pouvez pas utiliser.

Si certains plugins ne sont nécessaires que pour certaines pages ou certains articles, vous pouvez utiliser Perfmatters ou Asset CleanUp pour les désinstaller et réduire les CSS et JavaScript.

Voici les étapes à suivre pour utiliser Perfmatters :

1. Activer le gestionnaire de scriptsPour activer le gestionnaire de script, allez dans Paramètres → Perfmatters → Modules complémentaires → Gestionnaire de script.
2. Activer le mode testPour cela, activez le mode test dans les paramètres du Gestionnaire de script afin de pouvoir tester le Gestionnaire de script sans interrompre le site. Lorsque vous publiez des modifications, n'oubliez pas deDésactiver le mode test.

Affichez le gestionnaire de scripts et désinstallez les plugins inutilisés (tous les emplacements sauf les pages, les messages, l'URL actuelle, les expressions régulières, etc.)

7,Utilisation d'images WebP

Pour optimiser vos images, il y a trois choses à garder à l'esprit :

1. Contrôle de la taille de l'imageLa taille de l'image doit être inférieure à 200 Ko.
2. Ajout d'attributs Alt: Ajoutez des attributs Alt aux images pour optimiser le référencement.
3. Utilisation du format WebPLe format WebP est le meilleur, car il permet de réduire la taille des fichiers tout en conservant une qualité élevée.

Il est recommandé de traiter localement les images au format WebP avant de les télécharger sur un site WordPress. Il existe plusieurs logiciels WordPress Plugin Optimiseur d'imagesCe problème peut être résolu et l'image est automatiquement réduite à une taille suffisamment petite pour ne pas affecter les performances du site ou perdre trop de qualité ou de résolution.

8,Utiliser un thème léger

Le choix d'un thème léger est l'un des moyens efficaces d'améliorer la vitesse de votre site web. Voici quelques-uns des avantages du choix d'un thème léger et l'importance d'éviter l'utilisation d'un trop grand nombre de sous-thèmes :

1. Structure de code simpleLes thèmes légers utilisent généralement un code propre qui évite les redondances excessives et les fonctionnalités inutiles. La page se charge ainsi plus rapidement et la consommation de ressources inutiles est réduite.
2. Des performances optimiséesLe thème Lightweight met l'accent sur l'optimisation des performances, y compris la compression CSS et JavaScript, le chargement différé et la minimisation des requêtes HTTP. Cela permet de réduire la charge du serveur et d'augmenter la vitesse de chargement des pages.
3. Éviter un trop grand nombre de sous-thèmesLes thèmes enfants : Un trop grand nombre de thèmes enfants peut accroître la complexité de la page et entraîner une dégradation des performances. L'utilisation d'un trop grand nombre de sous-thèmes peut également introduire du code et des styles inutiles, ce qui augmente le temps de chargement de la page. Il convient donc d'éviter d'utiliser trop de sous-thèmes en même temps sur un site web.
4. Entretien facileLes thèmes légers sont généralement plus faciles à entretenir, car leur structure de code est plus simple et plus claire. Cela permet de réduire les problèmes qui peuvent survenir lors des mises à jour et des personnalisations du thème et d'améliorer la stabilité du site.
5. conception réactiveLes thèmes légers : De nombreux thèmes légers mettent l'accent sur la conception réactive afin que le site Web offre une excellente expérience utilisateur sur différents appareils. Cela permet d'attirer plus de visiteurs et d'améliorer le référencement de votre site web.

Lorsque vous choisissez un thème léger, vous devez sélectionner le bon thème léger en fonction des besoins et des objectifs de performance de votre site web afin de vous assurer qu'il est performant à tous les égards.

9,Accroître la vitesse avec les CDN

Les CDN accélèrent le chargement des pages web en stockant le contenu statique d'un site web, tel que les images et les vidéos, sur des serveurs situés dans le monde entier. L'avantage est que, quel que soit l'endroit où se trouve un visiteur, il pourra obtenir son contenu à partir du serveur le plus proche de lui, ce qui réduit les temps d'attente et accélère le chargement des sites web. Voici les étapes à suivre pour configurer le CDN de Cloudflare :

Créez un compte Cloudflare :

1. Visiter Cloudflare: Visitez le site officiel de Cloudflare Cloudflare et créez un compte gratuit.
2. Ajouter votre site webPour cela, suivez les instructions pour ajouter votre site web et finaliser la configuration du domaine.

Modifier les paramètres de résolution des noms de domaine :

1. Se connecter au bureau d'enregistrement du domainePour ce faire, vous devez vous connecter à votre bureau d'enregistrement de nom de domaine et trouver les paramètres de résolution de nom de domaine.
2. Modifier les serveurs de nomsChangez les serveurs de noms de votre domaine pour ceux fournis par Cloudflare afin que votre trafic soit acheminé et optimisé via Cloudflare.

Sélectionnez CDN Settings :

1. Connectez-vous à votre compte CloudflareSélectionnez votre site web.
2. Activer "Auto Minify" (minimisation automatique)Dans l'onglet Vitesse, activez l'option Minification automatique pour réduire la taille des fichiers CSS, JavaScript et HTML afin d'améliorer la vitesse de chargement.
3. Activer le "Rocket Loader" (chargeur de fusée)Dans l'onglet Vitesse, activez le Rocket Loader pour retarder le chargement de JavaScript et optimiser le chargement des pages.

Activer HTTPS :

1. Sélectionner le mode SSLDans l'onglet Crypto, sélectionnez "Full (strict)" comme mode SSL pour vous assurer que votre site transmet des données cryptées via HTTPS.

Configurer le cache :

1. Activer "Tout mettre en cache"Dans l'onglet "Mise en cache", activez l'option "Tout mettre en cache" pour mettre en cache la totalité de la page afin d'améliorer la vitesse de chargement.
2. Réglage du délai d'expiration du cacheLes membres de l'équipe de travail doivent s'assurer que le nouveau contenu est mis à jour en temps voulu.

Configurer les pare-feu et la sécurité :

1. Activation du pare-feu d'application Web (WAF)Dans l'onglet Pare-feu, activez le WAF pour protéger votre site contre les attaques malveillantes.
2. Configuration de paramètres de sécurité supplémentairesLes services d'assistance à la clientèle sont également disponibles : par exemple, la gestion des bots et l'établissement de listes noires d'adresses IP.

Suivi et analyse :

1. Activation de l'outil d'analyse CloudflareDans l'onglet Analytique, surveillez les performances et le trafic du site.

Essais et optimisation :

1. Tester la vitesse de chargement du site webLes performances de votre site sont nettement améliorées grâce au CDN de Cloudflare.
2. Optimisation basée sur les résultats des testsLa compression des images, la fusion des fichiers CSS et JavaScript, etc.

Résumé :

Lorsque vous ouvrez l'éditeur Elementor, vous rencontrez des problèmes de lenteur et vous devez améliorer la vitesse et les performances de votre site web. Parmi les mesures clés, citons l'utilisation de l'accélération CDN Cloudflare, le choix d'un thème léger, l'optimisation des images au format WebP, la désactivation des plugins inutilisés et le paramétrage approprié d'Elementor et des CSS. La surveillance et l'optimisation régulières de votre site web pour s'assurer qu'il est toujours en parfait état sont essentielles au maintien d'un site web performant.

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.