🚀 Comment accélérer un site Elementor : 3 astuces pour PageSpeed Insights en 2026
Elementor construit les pages à partir de widgets, de styles et de scripts, et chaque requête vers une ressource externe ajoute des millisecondes au temps de chargement. Google Fonts, Font Awesome, Eicons: trois appels de polices que le plugin génère par défaut, même si vous ne les utilisez pas consciemment.
Résultat: des scores plus bas dans PageSpeed Insights, un diagramme en cascade gonflé dans GTMetrix, et des visiteurs qui quittent la page avant qu’elle ne s’affiche complètement. Pourtant, Elementor fournit lui-même les outils pour désactiver chacune de ces requêtes; encore faut-il savoir sur quels leviers agir.
Voici trois optimisations ciblées qui, combinées, peuvent réduire le temps de chargement d’une seconde entière, sans plugin de cache ni CDN. Chacune est accompagnée d’un code prêt à l’emploi pour functions.php.
💡 Aperçu rapide:
- Désactiver Google Fonts dans Elementor via un réglage intégré ou un hook dans votre thème, et héberger les polices en local
- Remplacer le Font Awesome d’Elementor par une version locale en Critical Font pour que le navigateur ne charge que les icônes réellement utilisées
- Substituer Eicons (les icônes propres à Elementor) par Font Awesome via CSS: un seul fichier au lieu de deux paquets de polices
1. Désactiver Google Fonts dans Elementor
Par défaut, Elementor charge les Google Fonts pour chaque police utilisée dans votre design, même si vous hébergez déjà ces polices en local. Dans la cascade de requêtes, cela apparaît comme un appel HTTP distinct vers fonts.googleapis.com qui bloque le rendu du texte jusqu’à son chargement complet.
L’approche la plus simple consiste à utiliser le réglage intégré d’Elementor. Rendez-vous dans Elementor → Settings → Performance et activez Désactiver Google Fonts. Une fois ce réglage activé, le plugin cessera de générer des requêtes vers le CDN de Google, et vous pourrez charger les polices en local via un thème enfant ou un plugin comme OMGF (Optimize My Google Fonts).
Si le réglage n’est pas disponible pour une raison quelconque ou si vous avez besoin d’un contrôle programmatique, ajoutez ce code dans le functions.php de votre thème enfant:
1 add_action( 'wp_enqueue_scripts', function() { 2 wp_dequeue_style( 'google-fonts-1' ); 3 wp_dequeue_style( 'google-fonts-2' ); 4 }, 99 );
Le hook avec la priorité 99 s’exécute après qu’Elementor a mis en file d’attente ses styles et les supprime avant qu’ils ne soient émis dans le <head>. Après la désactivation, chargez les polices en local: téléchargez les graisses nécessaires en WOFF2, placez-les dans le dossier de votre thème et ajoutez les règles @font-face dans vos styles.
2. Remplacer le Font Awesome d’Elementor par une version locale
Elementor charge le paquet Font Awesome complet (des centaines d’icônes) alors qu’un site typique n’en utilise en réalité que 5 à 7. Les octets restants ne font que consommer votre budget de chargement.
La solution est une Critical Font locale. Les plugins de cache (Swift Performance, LiteSpeed Cache) et les outils spécialisés (OMGF) peuvent analyser la page, collecter la liste des icônes réellement utilisées et générer un webfont.css allégé ne contenant que les glyphes nécessaires. Le fichier est placé dans /wp-content/fonts/ sur votre serveur: zéro requête externe.
Pour empêcher Elementor de charger sa version et utiliser la vôtre à la place, ajoutez ceci dans functions.php:
1 add_action( 'wp_enqueue_scripts', 'replace_elementor_fa', 3 ); 2 add_action( 'elementor/frontend/after_enqueue_styles', function() { 3 wp_dequeue_style( 'font-awesome' ); 4 } ); 5 6 function replace_elementor_fa() { 7 wp_enqueue_style( 8 'font-awesome-local', 9 get_stylesheet_directory_uri() . '/fonts/fontawesome/webfont.css', 10 array(), 11 '1.0.0' 12 ); 13 }
La première ligne met en file d’attente votre version locale avec une priorité élevée. La seconde supprime la version Elementor avec le handle font-awesome juste après que le plugin l’a enregistrée. La fonction replace_elementor_fa spécifie le chemin du fichier; remplacez-le par celui généré par votre plugin de cache.
Après la mise en place, vérifiez la cascade dans GTMetrix: la requête vers font-awesome.min.css d’Elementor doit disparaître, et le webfont.css local doit se charger depuis votre domaine.
3. Remplacer les icônes Elementor (Eicons) par Font Awesome
Elementor utilise sa propre police Eicons pour les icônes dans les widgets: flèches du slider, icône du menu hamburger, bouton de fermeture. Le paquet complet se charge dès qu’une icône est utilisée, ce qui ajoute une requête et un délai de rendu supplémentaires.
Puisque vous disposez déjà de Font Awesome en local (étape 2), il est logique de basculer Eicons vers cette police: un seul fichier de police au lieu de deux. Cette technique remplace les classes CSS .eicon et .eicon-menu-bar par des glyphes de Font Awesome.
D’abord, retirez Eicons de la file d’attente. Ce code se place dans functions.php:
1 add_action( 'elementor/frontend/after_enqueue_styles', 'js_dequeue_eicons' ); 2 3 function js_dequeue_eicons() { 4 if ( is_admin() || current_user_can( 'manage_options' ) ) { 5 return; 6 } 7 wp_dequeue_style( 'elementor-icons' ); 8 }
La fonction contourne la zone d’administration pour que l’éditeur Elementor continue de fonctionner sans problème, et ne supprime le handle elementor-icons que sur le frontend.
Ajoutez maintenant le remplacement CSS, soit via Appearance → Customize → Additional CSS, soit dans la feuille de style de votre thème enfant:
1 .eicon, 2 .eicon-menu-bar { 3 display: inline-block; 4 font: normal normal normal 14px/1 FontAwesome; 5 font-size: inherit; 6 text-rendering: auto; 7 -webkit-font-smoothing: antialiased; 8 -moz-osx-font-smoothing: grayscale; 9 } 10 11 .elementor-menu-toggle i:before { 12 content: "\f0c9"; 13 font-family: FontAwesome; 14 } 15 16 .elementor-menu-toggle.elementor-active i:before { 17 content: "\f00d"; 18 font-family: FontAwesome; 19 }
Le premier bloc réassigne les classes de base Eicons à la police FontAwesome. Le deuxième et le troisième définissent des glyphes spécifiques: \f0c9 pour l’icône hamburger (fa-bars) et \f00d pour le bouton de fermeture (fa-times). Les autres icônes se remplacent de la même manière: ouvrez les devtools, trouvez la classe du widget et ajoutez content avec le code du glyphe issu de l’antisèche Font Awesome.
Après la mise en œuvre, vérifiez la console du navigateur pour détecter d’éventuelles erreurs de chargement de police et testez la page avec PageSpeed Insights. La requête vers eicons.woff2 doit disparaître du rapport.
⁉️🤔 Foire aux questions
Cette méthode fonctionne-t-elle avec les versions actuelles d’Elementor?
Oui, les trois conseils sont pertinents pour la gamme Elementor actuelle. Les hooks
elementor/frontend/after_enqueue_stylesetwp_enqueue_scriptsfont partie de l’API publique du plugin et conservent la rétrocompatibilité. La documentation officielle Elementor sur la désactivation de Google Fonts décrit le bouton intégré dans Elementor → Réglages → Performance. Pour le conseil n°1, utilisez-le d’abord et gardez le code comme solution de repli pour les thèmes non standards.
Que faire si les icônes disparaissent dans l’éditeur après avoir remplacé Eicons?
Le code de désactivation d’Eicons contourne la zone d’administration. Les vérifications
is_admin()etcurrent_user_can( 'manage_options' )garantissent que la police reste en place dans l’éditeur Elementor. Si les icônes disparaissent malgré tout, assurez-vous d’avoir ajouté le code dans lefunctions.phpde votre thème actif, et non via un plugin de snippets qui pourrait également s’exécuter sur les pages d’administration.
Ai-je besoin d’installer un plugin de cache pour ces optimisations?
Pour les conseils n°1 et n°3, un plugin de cache n’est pas nécessaire; le code dans
functions.phpsuffit. Pour le conseil n°2 (Critical Font), vous avez besoin d’un outil qui génère un Font Awesome allégé: Swift Performance, LiteSpeed Cache, OMGF Pro, ou un assemblage manuel avec l’utilitairefonttools. Sans cette étape, vous ne faites que déplacer le chargement complet de Font Awesome du CDN d’Elementor vers votre serveur, sans gain significatif.
Quel gain réel de score PageSpeed ces trois conseils apportent-ils?
Chaque cas est différent, mais voici un ordre d’idée: désactiver Google Fonts réduit le temps de chargement de 200 à 400 ms, le Font Awesome local fait gagner 150 à 300 ms supplémentaires, et le remplacement d’Eicons supprime une requête HTTP et fait économiser 50 à 150 ms. Au total, jusqu’à une seconde de temps de chargement complet, ce qui, sur un hébergement typique à 10-20 $/mois, augmente le score mobile PageSpeed Insights de 5 à 15 points.
Puis-je supprimer complètement Font Awesome et Eicons?
Vous le pouvez, si vous êtes prêt à reconstruire toutes les icônes d’Elementor en SVG. Cela implique de remplacer manuellement les icônes dans les widgets par des fichiers SVG téléchargés ou d’utiliser un plugin comme Iconic. L’effort est conséquent (des dizaines de widgets sur un site), mais le résultat est le frontend le plus léger possible. Pour la plupart des projets, une Critical Font locale (étape 2) constitue un compromis satisfaisant.
Qu’apportent ces changements sur un site réel?
Les trois techniques décrites ne nécessitent ni plugins premium, ni CDN, ni changement d’hébergement. Il s’agit purement d’un travail sur les requêtes de polices, le poste de dépense de vitesse le plus sous-estimé sur les sites Elementor.
Si vous n’avez pas encore effectué l’optimisation de base de WordPress, commencez par le guide complet de vitesse de site, qui couvre la mise en cache, la compression CSS/JS et l’optimisation des images. Lorsque vous en arriverez aux polices, revenez à ces trois étapes et mettez-les en œuvre une par une, en vérifiant PageSpeed Insights après chacune.
Testez sur une copie de votre site, faites une sauvegarde avant de modifier functions.php, et tirez le maximum de vitesse d’Elementor.
Une équipe professionnelle de rédacteurs et d'éditeurs spécialisés dans la création de contenu de qualité.