Votre site Elementor est lent ? Voici quelques solutions

Votre site Elementor est lent ? Voici quelques solutions
site elementor lent

Elementor est un constructeur de pages étonnant, mais malheureusement, si vous voulez atteindre des performances de pointe, vous devriez rapidement sentir les limites en matière de performances avec ce constructeur de pages !

En effet, Elementor (comme tous les autres page builder) ajoute du bloat (CSS, JavaScript, éléments DOM) à vos pages web, ce qui affecte plusieurs éléments dans GTmetrix, WebPageTest et Page Speed Insights.

Il existe heureusement quelques alternatives de choix, plus légères, comme Gutenberg ou Oxygen Builder. 

Désinstaller Elementor peut être une solution de dernier recours mais il y a heureusement plusieurs pratiques que vous pouvez mettre en place pour optimiser votre site web afin d’augmenter les performances lorsque vous utilisez Elementor.

Paramètres du plugin Elementor

Il existe quelques outils et paramètres fournis par Elementor pour améliorer vos performances.

réglages avancés elementor

Elementor a fait de gros efforts ces derniers temps pour proposer des outils visant à atténuer le bloat !

Optimiser la sortie DOM

Cela permet d’éviter une taille excessive du DOM dans les outils de mesure.

Activez cette option sous Elementor – Paramètres – Expériences – Sortie DOM optimisée.

Cela supprime les wrappers div inutiles (elementor-inner, elementor-row et elementor-column-wrap) dans votre code. Vérifiez que votre site Web Elementor ne présente pas d’erreurs visibles après avoir activé cette fonction.

Amélioration du chargement des ressources

L’amélioration du chargement des éléments est une fonctionnalité expérimentale qui nécessite Elementor Pro v3.0.9 et plus. 

Elle ne charge que certains éléments là où ils sont réellement chargés (fichiers JS dans les gestionnaires de widgets d’Elementor Core, et Swiper dans Elementor + Elementor Pro).

Elementor prévoit d’ajouter d’autres fonctionnalités expérimentales pour améliorer la vitesse, alors consultez le changelog un conseil avant de mettre à jour le plug-in ! Ces fonctionnalités sont en Beta (Alpha pour certaines) donc attention à bien vérifier que rien ne casse sur votre site.

Activez cette fonctionnalité dans Elementor → Paramètres → Expériences → Amélioration du chargement des actifs.

Allez-y doucement avec les plugins Elementor !

Ne vous emballez pas un conseil à utiliser trop de plugins Elementor tiers.

De nombreux concepteurs s’appuient sur plusieurs addons Elementor pour construire leur site, avant de se rendre compte qu’ils le ralentissent.

Méthodes avancées pour améliorer la vitesse de chargement avec Elementor

Réduire le TTFB avec un hébergement de qualité

Évidemment, cette méthode vous donnera le plus gros coup de pouce en termes de performances, et de loin !

Notre site Web a pour but de vous aider à trouver la meilleure société d’hébergement et le meilleur serveur d’hébergement Web pour vos besoins. Utilisez un hébergement mutualisé de qualité ou passez directement à un VPS ou encore mieux à un hébergement Cloud pour des performances accrues et de bonnes vitesses TTFB !

Activer Redis + Memcached

Redis et memcached sont supportés par la plupart des hébergeurs en nuage… sauf Hostinger.

o2Switch (mis en avant ici) et PlanetHoster (à découvrir ici) supportent les deux et ces options peuvent être activés directement dans votre compte (réglages PHP). Infomaniak et Siteground supportent memcached que vous pouvez activer dans vos paramètres de serveur cloud pour Infomaniak et dans SG Optimizer pour Siteground.

Beaucoup de webmasters ne profitent pas de la mise en cache du côté du serveur, de Redis, et des services de vitesse offerts par leur hébergeur !

Si vous utilisez un serveur LiteSpeed, vous devriez utiliser le cache objet Redis ou Memcached (activable dans vos réglages PHP) et paramétrer LSCache en conséquent.

Supprimer le code CSS et JavaScript inutilisés d'Elementor

La suppression de code JavaScript et CSS inutilisés peut améliorer plusieurs éléments dans PageSpeed Insights. C’est une des raisons pour lesquelles les sites Web utilisant des constructeurs de page frontend WordPress lourds souffrent de problèmes de performances.

Vous pouvez heureusement désactiver de nombreuses fonctionnalités inutiles via des plugins comme Perfmatters (payant) ou Asset CleanUp (gratuit). Perfmatters est payant, Asset CleanUp est gratuit mais dispose également d’une version pro qui vous permet de décharger les CSS personnalisés, ce qui n’est pas le cas de Perfmatters.

Désactivez les scripts inutilisés – accédez à votre gestionnaire de scripts dans Perfmatters ou Asset Cleanup pour voir les CSS et JavaScript chargés par Elementor. Essayez de désactiver les scripts que vous n’utilisez pas.

Essayez de désactiver d’autres scripts/plugins (exemples ci-dessous) :

  • Désactiver le formulaire de contact partout sauf sur la page de contact.
  • Désactiver le plugin de partage social partout sauf dans les articles
  • Désactiver le plugin de tableau partout sauf pour le contenu avec des tableaux
  • Désactiver le plugin rich snippet partout sauf pour le contenu avec rich snippets.
  • Désactiver les polices partout sauf dans certaines zones (si vous utilisez plusieurs polices)
  • Désactivez les scripts/styles WooCommerce, sauf sur les pages non liées au commerce électronique.

Utiliser un thème bien codé et rapide, les services d’un développeur si votre thème est mal codé ou un plugin comme Rapidload peut vous aider à supprimer du code CSS superflu sur le site.

php 8 maintenant disponibles chez hostinger
PHP 8 est maintenant disponible chez de nombreux hébergeurs web

Mise à niveau vers PHP 8.0

Certains des hébergeurs que nous recommandons sur notre site Web gèrent déjà PHP 8 et permettent à leurs utilisateurs de passer à cette dernière version.

La mise à niveau des versions PHP est l’une des façons les plus simples d’accélérer votre site Elementor. De nombreux benchmarks démontrent comment les versions PHP supérieures peuvent fonctionner souvent 2 à 3 fois plus vite. Elementor recommande également des versions PHP plus élevées et d’augmenter la limite de mémoire à 256 Mo.

Attention de bien veiller à sauvegarder votre site Web avant de vous lancer dans une mise à jour de la version PHP du site pour éviter tout conflit !

Augmentez la limite de mémoire à 256MB ou plus

Vérifiez votre limite de mémoire dans Elementor – System Info.

Elementor, WordPress et WooCommerce recommandent une limite de mémoire de 256 Mo. Cela améliorera la façon dont WordPress gère votre contenu.

Configurez un plugin de cache ou d'optimisation solide

WP Rocket, LiteSpeed et W3 Total Cache sont les références en matière de plugins de cache.

Nous utilisons généralement WP Rocket sur la plupart de nos sites web, ou LSCache sur nos serveurs LiteSpeed. Nous utilisons aussi parfois Nitropack sur les sites qui sont un peu lourds et utilisent des constructeurs de page… comme celui que vous êtes en train de lire 😉

onglet cache wp rocket
WP Rocket est le plugin de cache #1 du marché !

Optimiser les images

Il existe plusieurs façons d’optimiser les images :

Dimensionner correctement les images, compresser les images, utiliser des images WebP ou next-gen, utiliser le lazy loading sur les images, les iframes, les vidéos, retirer les données EXIF des images, spécifier les dimensions des images, servir les images à partir d’un CDN, désactiver le hotlinking et utiliser des images adaptatives sont parmi les options qui s’offrent à vous !

Optimiser le code des scripts tiers et les polices Google

Les polices Google Fonts, AdSense, Analytics, Tag Manager, les vidéos intégrées, et même les Gravatars ou les plugins de partage social génèrent des requêtes supplémentaires.

Vous pouvez généralement retarder le chargement du code tiers en utilisant la fonction de retardement de l’exécution JavaScript de WP Rocket ou un plugin comme Flying Scripts. Installer le code tiers dans votre pied de page ou le retarder peut généralement aider à gagner en performance,

Les polices Google doivent être installées localement dans l’idéal ou vous pouvez utiliser un plugin comme OMGF pour le faire.

Utilisez un CDN

L’utilisation d’un CDN peut améliorer la façon dont vous diffusez votre contenu et peut également améliorer votre TTFB.

Rien ne marche ? Supprimez Elementor

Si la vitesse est super importante pour votre projet (elle devrait l’être), envisagez de jeter un oeil à notre guide complet pour accélérer votre site WordPress !

Si rien ne marche pour vous, vous devriez songer à supprimer et remplacer Elementor.

Elementor est idéal pour déployer rapidement des sites pour des clients. Mais s’il s’agit de votre propre site et que vous souhaitez vraiment l’améliorer dans ce domaine, envisagez une alternative plus légère. Les Core Web Vitals deviennent un facteur de classement important et il est peu probable que vous réussissiez les tests PageSpeed Insights ou de votre Search Console avec Elementor.

Les blocs Gutenberg ou les constructeurs de thèmes légers comme Oxygen constituent une bonne alternative. Certains thèmes (comme les thèmes WP que nous couvrons dans notre article sur les thèmes WordPress les plus rapides) sont livrés avec des blocs de construction comme GeneratePress ou Kadence !

Guides WordPress
Sommaire
opportunites-digitales.com
Logo
Compare items
  • VPN (0)
Compare