Elementor 3.0: Wie wir die Leistung verbessert haben

Wir suchen immer nach neuen Wegen, um die Geschwindigkeit und Leistung von Elementor-Websites zu verbessern. In der neuesten Version von Elementor – Elementor 3.0 – haben wir uns stark auf die Verbesserung der Leistung Ihrer Seiten konzentriert.

Viele Faktoren beeinflussen die Ladegeschwindigkeit einer Website. Faktoren wie Hosting-Provider, Theme, Anzahl der Plugins, Caching, HTML-Code und andere.

Obwohl wir externe Faktoren nicht kontrollieren können, können (und werden) wir darauf hinarbeiten, dass unser Produkt so gut wie möglich optimiert wird. Bestimmte Änderungen erfordern jedoch den richtigen Zeitpunkt, um umgesetzt zu werden.

Einige Verbesserungen – wie CSS-Rendering – haben ein geringes Potenzial, Probleme zu verursachen, während andere Änderungen – wie das Entfernen von DOM-Elementen – ein hohes Potenzial haben, einige Websites zu beschädigen und Probleme zu verursachen.

Die Einführung von Breaking Changes wird traditionell nur in Major Releases vorgenommen. Daher haben wir diese Gelegenheit genutzt, um diese Änderungen und Verbesserungen einzuführen und durch die Reduzierung von DOM-Elementen und die Verbesserung des CSS-Renderings kommen wir einer besseren Leistung einen Schritt näher.

Elementor bietet zwei Möglichkeiten zum Rendern von Website-CSS:

1. Drucken Sie es in einem <style> -Tag im DOM.

2. Schreiben in eine CSS-Datei, die mit der Seite geladen wird

Das in Dateien geschriebene CSS ist beispielsweise vollständig statisch. Sie wird einmal in eine Datei gedruckt, und diese Datei wird nur aktualisiert, wenn eine Änderung am Inhalt der Seite vorgenommen wird. Aber was ist mit dynamischen Inhalten?

Einige dynamische Inhalte enthalten ihr eigenes CSS, z. B. Farben und Bilder (wenn sie als Hintergrundbildwerte verwendet werden). Dynamische Inhalte wie benutzerdefinierte Felder werden vom Inhalt der Seite getrennt und können außerhalb der Bearbeitung des Beitrags oder der Seite im Elementor Editor geändert werden.

Was passiert also, wenn dynamische Werte CSS enthalten, das jedes Mal gedruckt werden muss, wenn eine Seite geladen wird?

Bis Elementor 3.0 durchsuchte das Dynamic Tags-Modul von Elementor jedes Mal, wenn eine Seite geladen wurde, die gesamte Seite nach Elementen, die dynamischen Inhalt enthalten.

Wenn dynamischer Inhalt gefunden wurde, holte das Modul die dynamischen Werte dieses Elements, schrieb das relevante CSS in ein <style> -Tag und fügte es in das DOM ein.

Dies ist, wie in diesem Beitrag beschrieben, ein teurer Prozess, der wertvolle Ladezeit kostet.

In Elementor 3.0 haben wir die Art und Weise geändert, wie wir den Rendering-Prozess von dynamischem CSS verwalten. Wenn eine Seite zum ersten Mal geladen wird und das statische CSS der Seite gerendert wird, erstellen wir einen Cache, der eine Liste der Elemente der Seite enthält, die dynamische CSS-Werte haben.

Dann holen wir bei jedem Besuch dieser Seite die Liste der dynamischen Elemente aus dem Cache und rendern sie sofort. Anstatt jedes Mal, wenn die Seite geladen wird, über alle Elemente der Seite iterieren zu müssen, erhalten wir diese Elemente aus der bereits verfügbaren Liste dynamischer Elemente. Das spart viel Laufzeit und macht das Laden der Seite spürbar schneller.

Hier sind einige Ergebnisse von Tests, die wir mit Blackfire durchgeführt haben, um den Unterschied vor und nach unserer Optimierung zu untersuchen: