🚀 Wie man eine Elementor-Website beschleunigt: 3 Tipps für PageSpeed Insights im Jahr 2026
Elementor baut Seiten aus Widgets, Stilen und Skripten auf, und jede Anfrage an eine externe Ressource fügt Millisekunden zur Ladezeit hinzu. Google Fonts, Font Awesome, Eicons: drei Schriftanfragen, die das Plugin standardmäßig erzeugt, selbst wenn Sie sie nicht bewusst nutzen.
Das Ergebnis: schlechtere Bewertungen in PageSpeed Insights, ein aufgeblähter Waterfall in GTMetrix und Besucher, die die Seite verlassen, bevor sie vollständig gerendert ist. Dabei stellt Elementor selbst Werkzeuge bereit, um jede dieser Anfragen zu deaktivieren; Sie müssen nur wissen, an welchen Stellschrauben Sie drehen müssen.
Nachfolgend finden Sie drei gezielte Optimierungen, die zusammen bis zu einer Sekunde Ladezeit einsparen können, ohne Caching-Plugins oder ein CDN. Jede enthält sofort einsetzbaren Code für die functions.php.
💡 Kurzübersicht:
- Deaktivieren Sie Google Fonts in Elementor über eine eingebaute Einstellung oder einen Hook in Ihrem Theme und hosten Sie Schriften lokal
- Ersetzen Sie Elementors Font Awesome durch eine lokale Critical-Version, sodass der Browser nur die tatsächlich verwendeten Icons lädt
- Tauschen Sie Eicons (Elementors eigene Icons) per CSS gegen Font Awesome aus: eine Datei statt zwei Schriftpakete
1. Google Fonts in Elementor deaktivieren
Standardmäßig lädt Elementor Google Fonts für jede in Ihrem Design verwendete Schriftart, selbst wenn Sie diese Schriften bereits lokal hosten. Im Request-Waterfall erscheint dies als separater HTTP-Aufruf an fonts.googleapis.com, der die Textdarstellung blockiert, bis er vollständig geladen ist.
Der einfachste Ansatz ist die eingebaute Einstellung von Elementor. Gehen Sie zu Elementor → Settings → Performance und aktivieren Sie Google Fonts deaktivieren. Danach stellt das Plugin keine Anfragen mehr an Googles CDN, und Sie können Schriften lokal über ein Child-Theme oder ein Plugin wie OMGF (Optimize My Google Fonts) einbinden.
Falls die Einstellung aus irgendeinem Grund nicht verfügbar ist oder Sie programmatische Kontrolle benötigen, fügen Sie diesen Code in die functions.php Ihres Child-Themes ein:
1 add_action( 'wp_enqueue_scripts', function() { 2 wp_dequeue_style( 'google-fonts-1' ); 3 wp_dequeue_style( 'google-fonts-2' ); 4 }, 99 );
Der Hook mit Priorität 99 feuert, nachdem Elementor seine Stile in die Warteschlange gestellt hat, und entfernt sie, bevor sie im <head> ausgegeben werden. Binden Sie die Schriften nach der Deaktivierung lokal ein: Laden Sie die benötigten Schriftschnitte als WOFF2 herunter, legen Sie sie in Ihrem Theme-Ordner ab und fügen Sie @font-face-Regeln in Ihren Styles hinzu.
2. Elementors Font Awesome durch eine lokale Version ersetzen
Elementor lädt das vollständige Font-Awesome-Paket (hunderte Icons), während eine typische Website tatsächlich nur 5-7 davon verwendet. Die übrigen Bytes verbrennen lediglich Ihr Ladebudget.
Die Lösung ist ein lokaler Critical Font. Caching-Plugins (Swift Performance, LiteSpeed Cache) und spezialisierte Tools (OMGF) können die Seite scannen, eine Liste der tatsächlich verwendeten Icons erfassen und eine abgespeckte webfont.css erstellen, die nur die benötigten Glyphen enthält. Die Datei kommt in /wp-content/fonts/ auf Ihrem Server: null externe Anfragen.
Um Elementor daran zu hindern, seine Version zu laden, und stattdessen Ihre lokale zu verwenden, fügen Sie dies in die functions.php ein:
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 }
Die erste Zeile stellt Ihre lokale Version mit hoher Priorität in die Warteschlange. Die zweite entfernt die Elementor-Version mit dem Handle font-awesome, direkt nachdem das Plugin sie registriert hat. Die Funktion replace_elementor_fa gibt den Dateipfad an; ersetzen Sie ihn durch den von Ihrem Caching-Plugin generierten.
Prüfen Sie nach der Einrichtung den Waterfall in GTMetrix: Die Anfrage an Elementors font-awesome.min.css sollte verschwinden und die lokale webfont.css von Ihrer Domain laden.
3. Elementor-Icons (Eicons) durch Font Awesome ersetzen
Elementor verwendet seine eigene Eicons-Schriftart für Icons in Widgets: Slider-Pfeile, Hamburger-Menü-Icon, Schließen-Button. Das gesamte Paket wird geladen, sobald irgendein Icon verwendet wird, und verursacht eine weitere Anfrage und Rendering-Verzögerung.
Da Sie bereits lokales Font Awesome haben (Schritt 2), ist es sinnvoll, Eicons darauf umzustellen: eine Schriftdatei statt zwei. Diese Technik ersetzt die CSS-Klassen .eicon und .eicon-menu-bar durch Glyphen aus Font Awesome.
Entfernen Sie zunächst Eicons aus der Warteschlange. Dieser Code kommt in die 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 }
Die Funktion überspringt den Admin-Bereich, damit der Elementor-Editor weiterhin einwandfrei funktioniert, und entfernt das elementor-icons-Handle nur im Frontend.
Fügen Sie nun die CSS-Ersetzung hinzu, entweder über Appearance → Customize → Additional CSS oder im Stylesheet Ihres Child-Themes:
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 }
Der erste Block weist den Basis-Eicons-Klassen die Font-Awesome-Schriftart zu. Der zweite und dritte setzen spezifische Glyphen: \f0c9 für das Hamburger-Icon (fa-bars) und \f00d für den Schließen-Button (fa-times). Andere Icons werden auf dieselbe Weise ersetzt: Öffnen Sie die Devtools, finden Sie die Klasse des Widgets und fügen Sie content mit dem Glyphen-Code aus dem Font Awesome Cheatsheet hinzu.
Prüfen Sie nach der Implementierung die Browser-Konsole auf Schriftlade-Fehler und lassen Sie die Seite durch PageSpeed Insights laufen. Die Anfrage an eicons.woff2 sollte aus dem Bericht verschwinden.
⁉️🤔 Häufig gestellte Fragen
Funktioniert diese Methode mit aktuellen Elementor-Versionen?
Ja, alle drei Tipps sind für die aktuelle Elementor-Linie relevant. Die Hooks
elementor/frontend/after_enqueue_stylesundwp_enqueue_scriptssind Teil der öffentlichen API des Plugins und gewährleisten Abwärtskompatibilität. Die offizielle Elementor-Dokumentation zum Deaktivieren von Google Fonts beschreibt den eingebauten Schalter unter Elementor → Einstellungen → Leistung. Nutzen Sie für Tipp #1 zuerst diesen und behalten Sie den Code als Fallback für nicht standardkonforme Themes.
Was tun, wenn Icons im Editor nach dem Ersetzen von Eicons verschwinden?
Der Eicons-Deaktivierungscode umgeht den Admin-Bereich. Die Prüfungen
is_admin()undcurrent_user_can( 'manage_options' )stellen sicher, dass die Schriftart im Elementor-Editor erhalten bleibt. Falls Icons dennoch verschwinden, stellen Sie sicher, dass Sie den Code in diefunctions.phpIhres aktiven Themes eingefügt haben und nicht über ein Snippet-Plugin, das möglicherweise auch auf Admin-Seiten läuft.
Benötige ich ein Caching-Plugin für diese Optimierungen?
Für die Tipps #1 und #3 ist kein Caching-Plugin erforderlich; der Code in der
functions.phpgenügt. Für Tipp #2 (Critical Font) benötigen Sie ein Tool, das ein abgespecktes Font Awesome erstellt: Swift Performance, LiteSpeed Cache, OMGF Pro oder manuelles Zusammenstellen mit demfonttools-Dienstprogramm. Ohne diesen Schritt verlagern Sie lediglich die vollständige Font-Awesome-Ladung von Elementors CDN auf Ihren Server, mit nahezu keiner Einsparung.
Wie viel realen PageSpeed-Score-Gewinn bringen diese drei Tipps?
Jeder Fall ist anders, aber hier eine Orientierung: Das Deaktivieren von Google Fonts spart 200-400 ms Ladezeit, lokales Font Awesome weitere 150-300 ms, und das Ersetzen von Eicons entfernt eine HTTP-Anfrage und spart 50-150 ms. Insgesamt bis zu einer Sekunde voller Ladezeit, was auf typischem 10-20-€/Monat-Hosting den mobilen PageSpeed-Insights-Score um 5-15 Punkte erhöht.
Kann ich Font Awesome und Eicons komplett weglassen?
Das können Sie, wenn Sie bereit sind, alle Icons in Elementor als SVG neu aufzubauen. Das bedeutet, Icons in Widgets manuell durch hochgeladene SVG-Dateien zu ersetzen oder ein Plugin wie Iconic zu verwenden. Der Aufwand ist hoch (dutzende Widgets auf einer Website), aber das Ergebnis ist das leichtestmögliche Frontend. Für die meisten Projekte ist ein lokaler Critical Font (Schritt 2) ein angemessener Kompromiss.
Was bewirken diese Änderungen auf einer echten Website?
Die drei beschriebenen Techniken erfordern keine Premium-Plugins, kein CDN und keinen Hosting-Wechsel. Es geht rein um die Arbeit mit Schriftanfragen, dem am meisten unterschätzten Geschwindigkeits-Kostenfaktor auf Elementor-Websites.
Falls Sie noch keine grundlegende WordPress-Optimierung vorgenommen haben, beginnen Sie mit dem vollständigen Leitfaden zur Website-Geschwindigkeit, der Caching, CSS/JS-Komprimierung und Bildoptimierung behandelt. Wenn Sie zu den Schriften kommen, kehren Sie zu diesen drei Schritten zurück und setzen Sie sie nacheinander um, wobei Sie nach jedem Schritt PageSpeed Insights prüfen.
Testen Sie auf einer Kopie Ihrer Website, erstellen Sie ein Backup, bevor Sie die functions.php bearbeiten, und holen Sie das Maximum an Geschwindigkeit aus Elementor heraus.
Ein professionelles Team von Autoren und Redakteuren, das auf die Erstellung hochwertiger Inhalte spezialisiert ist.