Divi-Geschwindigkeitsoptimierung: der ultimative Leitfaden

Divi ist nicht irgendein Seitenersteller. Divi hebt den Designprozess auf eine ganz neue Ebene mit einem kompletten Webdesign-System, mit dem Sie jeden Teil Ihrer Website visuell gestalten können. Aber das bedeutet nicht, dass Divi langsam sein muss. Weit davon entfernt.

Die integrierten Geschwindigkeits- und Leistungsoptimierungsfunktionen von Divi können Ihre Website bei den Google PageSpeed-Scores ganz oben auf die Liste setzen. Mit Funktionen wie Dynamic Module Framework, Dynamic CSS, Dynamic JavaScript Libraries und mehr ist Divi jetzt sowohl ein robuster Seitenersteller als auch ein schlankes Theme. Aber so schnell Divi auch ist, es gibt andere zugrunde liegende Faktoren, die optimiert werden müssen. Und wenn Sie nicht darauf reagieren, leidet die Geschwindigkeit Ihrer Divi-Site unnötig.

In diesem Beitrag werden wir untersuchen, was bereits getan wurde, um Divi zu beschleunigen und was wir tun können, um es noch schneller zu machen. Hier sind einige wichtige Themen, die wir behandeln werden:

• WordPress-Leistung vs. Divi-Leistung
• Die integrierten Funktionen zur Geschwindigkeits- und Leistungsoptimierung von Divi
• Dynamisches Modul-Framework
• Dynamische JavaScript-Bibliotheken
• jQuery und jQuery Migrate zurückstellen
• Dynamisches CSS
• Kritisches CSS
• Kritische Schwellenhöhe
• Dynamisches Inline-Stylesheet laden
• Verbessern Sie das Laden von Google Fonts
• WordPress-Emojis deaktivieren
• CSS für Gutenberg-Block aufschieben
• Dynamische Symbole
• Native Srcset-Unterstützung für responsive Bilder
• 14 Dinge, die Sie tun können, um die Geschwindigkeit und Leistung Ihrer Divi-Website zu optimieren
• #1 Aktualisieren Sie Ihr Hosting
• #2 TTFB-Optimierung
• #3 Optimieren Sie die Datenbank Ihrer Site
• #4 Optimieren Sie Ihr DNS
• #5 Verwenden Sie ein Content Delivery Network (CDN)
• #6 Caching hinzufügen
• #7 Minimierung und Aggregation hinzufügen
• #8 Aktivieren Sie die Gzip-Komprimierung
• #9 Bildoptimierung
• #10 Videooptimierung
• #11 Erstellen Sie Ihre Divi-Seite für Geschwindigkeit
• #12 Verwenden Sie Plugins vorsichtig und sparsam
• #13 Geschwindigkeitstests durchführen
• #14 Betrachten Sie unseren Divi High-Speed ​​Page Blueprint
• Verwenden von Divi und anderen Leistungs-Plugins von Drittanbietern
• Andere Tipps

WordPress-Leistung vs. Divi-Leistung

Divi ist oft nicht der wichtigste Faktor für die Leistung Ihrer Website. Es ist nur ein Puzzleteil. Sie müssen auch die zugrunde liegenden Optimierungsanforderungen für eine WordPress-Site im Allgemeinen berücksichtigen. Divi (das Divi Theme und/oder der Divi Builder) sitzt auf WordPress (dem CMS), das auf einem Stapel von Serversoftware sitzt, die auf einer Hosting-Infrastruktur sitzt. All diese Dinge müssen richtig eingestellt werden. Dazu gehören zunächst Dinge wie gutes Hosting, Caching und ein CDN. Ohne diese zugrunde liegenden Optimierungen ist eine Divi-Site langsamer, unabhängig davon, wie gut wir Divi optimieren. Wenn Ihre Divi-Website also sehr langsam ist, müssen Sie auch diese anderen Teile des Puzzles berücksichtigen.

Da die zugrunde liegenden Optimierungsanforderungen für eine WordPress-Website vorhanden sind, müssen wir uns der Leistungsoptimierung von Divi widmen. Dies geschieht, indem die Leistung des Divi-Themes und/oder des Divi-Builders verbessert wird, um sicherzustellen, dass es in den Bereichen, auf denen es auf WordPress aufbaut, und in den Bereichen, in denen es innerhalb von WordPress funktioniert, optimal funktioniert. Sobald alle diese Teile optimiert sind, können wir erfolgreich eine Divi-Website mit optimaler Geschwindigkeit und Leistung erstellen.

Im Rest des folgenden Artikels werden wir zunächst die eingebaute Leistungsoptimierung von Divi (die bereits für Sie erledigten Dinge) ansprechen. Dann werden wir uns damit befassen, wie Sie Ihre Divi-Site weiter optimieren können, indem wir auf einige zugrunde liegende Optimierungsbedürfnisse eingehen (zusätzliche Dinge, die Sie tun können).

Die integrierten Funktionen zur Geschwindigkeits- und Leistungsoptimierung von Divi

Schauen wir uns zunächst einige der integrierten Geschwindigkeits- und Leistungsoptimierungen an, die Divi bereits hat. Diese Optimierungsfunktionen beschleunigen Divi aus jedem Blickwinkel und machen es zum vielleicht schnellsten Page Builder auf dem Markt. Aber das ist nicht alles. Divi ist mit einem dynamischen Framework aufgebaut, das Bloat eliminiert und eine Grundlage bietet, auf der Divi mit mehr Modulen und mehr Funktionen wachsen kann, ohne jemals Bloat zu Ihrer Website hinzuzufügen. Dadurch erhalten Sie das Beste aus beiden Welten: die Leistungsfähigkeit eines umfangreichen Page Builders mit der Wendigkeit eines leichtgewichtigen Themes.

Die Leistungsoptimierungsfunktionen können verwaltet werden, indem Sie zu Divi > Themenoptionen navigieren. Wählen Sie auf der Registerkarte Allgemein die Unterregisterkarte Leistung aus.

Werfen wir nun einen genaueren Blick auf die Funktionen, die es so einfach machen, eine superschnelle Divi-Website zu erstellen.

Dynamisches Modul-Framework

Die Dynamic Module Framework-Funktion erhöht die Website-Geschwindigkeit auf leistungsstarke Weise, indem PHP-Funktionen bei Bedarf ausgewählt und ausgeführt werden. Divi verarbeitet die erforderliche Logik, um nur die auf jeder Seite verwendeten Module und Funktionen im laufenden Betrieb zu rendern – alles andere wird aus der Gleichung herausgeschnitten. Mit anderen Worten, alles, was als "aufgebläht" angesehen werden könnte, wird aus dem Backend gelöscht.

Module auf Anfrage

Wenn Sie beispielsweise 3 Module auf einer Seite haben, verarbeitet Divi nur die Funktionen, die für diese 3 Module benötigt werden, anstatt alle Funktionen für alle Module zu verarbeiten, unabhängig davon, welches Modul verwendet wird. Diese 3 Funktionen rendern den Shortcode/HTML für dieses Modul auf der Seite, ohne dass Verarbeitungszeit verschwendet wird.

Funktionen auf Abruf

So wie Divi Module bei Bedarf dynamisch verarbeitet und lädt, tut Divi dasselbe für alle auf einer Seite verwendeten Funktionen. Anstatt Funktionen für alle möglichen Funktionen zu verarbeiten, die auf Divi Element verwendet werden könnten (Scroll-Effekte, Animationen, Sticky-Option, Rahmenoptionen usw.), verarbeitet Divi nur die Feature-Funktionen, die tatsächlich auf einem Element verwendet werden. Diese Funktion gilt nicht nur für Module, sondern für jedes Divi-Element, einschließlich Abschnitt, Zeilen und Spalten.

Dynamische Javascript-Bibliotheken

Um die Website-Geschwindigkeit zu steigern, haben wir das JavaScript von Divi so optimiert, dass es prägnanter und modularisiert ist. Auf diese Weise kann Divi JavaScript bei Bedarf dynamisch laden. Divi lädt und verarbeitet JavaScript-Funktionen (wie Sticky Options) sowie externe JavaScript-Bibliotheken (wie Magnific Popup) nur, wenn sie von Modulen oder Funktionen auf einer Seite benötigt werden.

Die kleinere Basis-JavaScript-Dateigröße in Kombination mit den dynamischen JavaScript-Bibliotheken wird die Website-Geschwindigkeit definitiv erhöhen, einfach weil weniger Code für jeden Seitenladevorgang zu verarbeiten ist. Nicht verwendete Skripte werden entfernt. Und da diese Anti-Bloat-Logik pro Seite erfolgt, müssen Sie sich keine Sorgen machen, dass dieses Sticky-JavaScript auf einer Seite geladen wird, auf der es nicht vorhanden ist, wenn Sie eine Sticky-Zeile auf einer Seite haben. Das ist die Schönheit von Divis dynamischem JavaScript.

Beispiel: Dynamische JavaScript-Bibliothek für ein Bildmodul mit Lightbox

Angenommen, Sie haben eine Seite mit einem Bildmodul mit aktivierter Lightbox. Divi zeigt dynamisch auf die Magnific Popup JS-Bibliothek für diese Seite und führt sie aus, um diese Lightbox-Popup-Funktionalität anzuwenden. Wenn Lightbox für das Bild deaktiviert ist, wird die JS-Bibliothek nicht geladen oder auf der Seite ausgeführt.

jQuery und jQuery Migrate zurückstellen

Wenn möglich, werden jQuery und jQuery Migrate in den Hauptteil verschoben, um eine Render-Blockierungsanfrage zu entfernen und die Ladezeiten zu beschleunigen. Wie die Abbildung unten zeigt, wird das Parsen des HTML-Codes angehalten, wenn das jQuery-Skript früh (im Header) geladen wird, bis das Skript ausgeführt wird. Dies verlangsamt das Rendering Ihrer Seite

Nur wenn ein Drittanbieter-Plugin jQuery als Abhängigkeit registriert, wird es zurück in den Kopf verschoben, um Konflikte zu vermeiden. Diese Option kann deaktiviert werden, wenn sie Probleme verursacht.

Dynamisches CSS

Dynamisches CSS wendet dieselbe Anti-Bloat-Logik (die im dynamischen Modul-Framework verwendet wird) auf das Stylesheet von Divi an. Wie Sie sich vorstellen können, wäre das Haupt-Stylesheet von Divi angesichts all der Funktionen, die es hat, ziemlich groß. Das Laden eines großen Stylesheets auf jeder Seite verursacht jedoch unnötiges Aufblähen und langsamere Seitenladezeiten.

Mit dynamischem CSS wird das CSS von Divi in ​​Hunderte von kleinen Komponenten zerlegt. Auf jeder Seite werden diese CSS-Komponenten zu einem einzigartigen Stylesheet kombiniert, das nur die Teile enthält, die zum Stylen dieser bestimmten Seite basierend auf den von Ihnen verwendeten Modulen, Modulfunktionen und Design-Layout-Optionen erforderlich sind.

Dies behebt das CSS-Bloat-Problem, da es jetzt nicht mehr existiert. Es gibt keinen Bloat, da kein anderes CSS geladen wird. Ohne Dynamic CSS würde das Stylesheet von Divi etwa 900kb groß sein und es würde unabhängig vom Inhalt auf allen Seiten geladen. Wenn Sie jetzt nur 80 KB CSS für die Seite benötigen, eliminiert Dynamic CSS die 800 + KB, die Sie nicht zum Laden der Seite benötigen. Das bedeutet, dass Ihre Seite noch schneller geladen wird.

Kritisches CSS

Das Critical CSS-System von Divi steigert die Website-Geschwindigkeit, indem es das CSS identifiziert, das zum Stylen von Inhalten über dem Falten benötigt wird, und alles andere zurückstellt. Da beim ersten Laden der Seite nur die kritischen Stile benötigt werden und Render-Blocking-Assets eine so wichtige Rolle für die Seitengeschwindigkeit spielen, bietet Divis Fähigkeit, kritische und unkritische Stile automatisch zu trennen, einen großen Vorteil gegenüber anderen WordPress-Themes und -Buildern . Nachdem Divi sein CSS verarbeitet hat, ist im Website-Header kaum noch etwas übrig, was bedeutet, dass Inhalte sofort angezeigt werden, und deshalb gibt Google Divi-Websites direkt nach dem Auspacken so hohe Punktzahlen.

Besteht Ihr „above the fold“-Content beispielsweise aus Titel, Absatz, Button und Bild, wird nur das für diese Elemente relevante CSS geladen, sobald Ihre Besucher die Seite laden. Der Rest des CSS wird natürlich auch geladen, aber nicht bei der ersten Interaktion. Das nennt man unkritisches CSS.

Eine ausführlichere Erklärung zur Funktionsweise und Verwendung dieser Funktion finden Sie in unseren Artikeln darüber, wie die kritische CSS-Funktion von Divi die Website-Geschwindigkeit steigert und wie Sie die schnellste Divi-Seite erstellen.

Kritische Schwellenhöhe

Mit Critical CSS verwandt ist die Option Critical Threshold Height.

Wenn Critical CSS aktiviert ist, bestimmt Divi einen „Above-the-Fold-Schwellenwert“ und verschiebt alle Stile für Elemente unterhalb des Folds. Dieser Schwellenwert ist jedoch nur eine Schätzung und kann auf verschiedenen Geräten variieren. Eine Erhöhung der Schwellenhöhe führt zu weniger Stilen, was zu etwas langsameren Ladezeiten führt, aber weniger Wahrscheinlichkeit für kumulative Layoutverschiebungen (CLS). Wenn Sie CLS-Probleme haben, können Sie die Schwellenhöhe erhöhen.

Dynamisches Inline-Stylesheet laden

Die Option Dynamisches Inline-Stylesheet laden ist die letzte CSS-Optimierung, die alle CSS-Anforderungen entfernt, die das Rendern blockieren.

Aufgrund von Dynamic CSS ist das Divi-Basis-Stylesheet jetzt klein genug, um inline auf der aktuellen Seite geladen werden zu können! Durch das Inline-Laden dieses CSS wird eine Render-Blockierungsanfrage entfernt und die Google PageSpeed-Scores verbessert. Wenn die Optionen „Kritisches CSS“, „Dynamisches CSS“ und „Dynamisches Inline-Stylesheet laden“ aktiviert sind, werden alle CSS-Anforderungen entfernt , die das Rendern blockieren .

Verbessern Sie das Laden von Google Fonts

Die Option Laden von Google Fonts verbessern ermöglicht das Caching von Google Fonts und lädt sie inline in die Kopfzeile. Dies reduziert Render-Blocking-Anfragen und beschleunigt die Ladezeiten.

Wir haben auch die Option Google Fonts-Unterstützung für ältere Browser einschränken hinzugefügt.

Dadurch werden im Wesentlichen ältere Schriftartendateien entfernt, um die Nutzlast zu verringern. Durch Aktivieren dieser Option wird die Größe von Google Fonts verringert und die Ladezeiten verbessert, jedoch wird die Unterstützung von Google Fonts in einigen sehr alten Browsern eingeschränkt. Sie können dies deaktivieren, um die Unterstützung älterer Browser mit geringen Leistungseinbußen zu erhöhen.

WordPress-Emojis deaktivieren

WordPress wird mit einem nativen Emoji-System geliefert, das jedoch aufgrund der nativen Emoji-Unterstützung in modernen Browsern wirklich nicht mehr benötigt wird. Tatsächlich sehen native Emojis viel besser aus als die WordPress-Version. Divi bietet Ihnen die Möglichkeit, native WordPress-Emojis zu deaktivieren, wodurch nicht benötigte Ressourcen entfernt werden. Und weniger Ressourcen zum Rendern führen zu schnelleren Seitenladevorgängen.

CSS für Gutenberg-Block aufschieben

Wenn Sie den Divi Builder auf einer Seite verwenden, entscheiden Sie sich auch dafür, den standardmäßigen WordPress-Blockeditor (Gutenberg) nicht zu verwenden. Und da Sie keine Blöcke verwenden werden, um Ihre Seite zu gestalten, brauchen Sie das Gutenberg-CSS-Rendering nicht, das das Laden Ihrer Divi-Seite blockiert. Wenn die Option Gutenberg-Block-CSS verschieben aktiviert ist, lädt Divi jetzt (standardmäßig) das Gutenberg-Block-CSS auf Seiten, auf denen Sie stattdessen den Divi Builder verwenden. Es wird immer noch geladen, nur für alle Fälle (in der Fußzeile), aber es wird nicht mehr Render-Blocking sein.

Dynamische Symbole

Divi wird jetzt mit Symbolschriftuntergruppen geliefert, die bei Bedarf basierend auf den von Ihnen verwendeten Modulen und Funktionen geladen werden. Dadurch wird die Schriftgröße des Basissymbols von Divi von 90 KB auf 6 KB reduziert. Der vollständige Symbolsatz wird nur bei Bedarf geladen. Diese Option ist standardmäßig deaktiviert, wenn Sie ein untergeordnetes Thema oder ein benutzerdefiniertes Divi-Modul verwenden. Wenn Ihr untergeordnetes Thema oder das Divi-Modul eines Drittanbieters den vollständigen Divi-Symbolsatz verwendet, sollte diese Option deaktiviert bleiben.

Es gibt drei Untergruppen von Symbolschriftarten, die basierend auf den Anforderungen einer Seite verwendet werden.

• Basis – Diese Untermenge enthält alle Symbole, die standardmäßig im Divi-Design und seinen Modulen verwendet werden.
• Sozial – Diese Untermenge enthält alle Basissymbole sowie alle sozialen Symbole, die geladen werden, wenn ein Social Media Follow-Modul verwendet wird.
• Alle – Dies ist der gesamte Symbolsatz, der verwendet wird, wenn Sie die Symbolauswahl in einem Divi-Modul verwenden, um ein benutzerdefiniertes Symbol auszuwählen.

Hier ist ein Beispiel für die Untermenge der Schriftarten für soziale Symbole, die aufgrund eines auf der Seite vorhandenen Social-Media-Follow-Moduls dynamisch geladen wird.

Wenn Sie auf allen Seiten Zugriff auf die gesamte Symbolschriftart benötigen (z. B. wenn Sie unsere Symbolschriftart in Ihrem Child-Theme verwenden), können Sie diese Option deaktivieren und die gesamte Symbolschriftartenbibliothek auf allen Seiten laden.

Native Srcset-Unterstützung für responsive Bilder

Divi bietet native SRCSET-Unterstützung für alle Divi-Bilder, was bedeutet, dass Divi Ihre Bilder automatisch anspricht und das Bild in perfekter Größe auf jedem Gerät bereitstellt. Da kleinere Bilder auf kleineren Geräten bereitgestellt werden, kann dies die Ladegeschwindigkeit erheblich verbessern und erfordert keine zusätzliche Arbeit Ihrerseits.

14 Dinge, die Sie tun können, um die Geschwindigkeit und Leistung Ihrer Divi-Website zu optimieren

Die Geschwindigkeitsoptimierung spielt weiterhin eine entscheidende Rolle für die Benutzererfahrung Ihrer Website sowie für die Suchmaschinenoptimierung (SEO). Damit Ihre Divi-Site für Besucher und Google gut funktioniert, sollten Sie die Bereiche außerhalb von Divi ansprechen, die Ihre Site weiter auf Geschwindigkeit optimieren.

Hier sind 14 Dinge, die Sie tun können, um die Geschwindigkeit und Leistung Ihrer Divi-Website zu optimieren…

#1 Aktualisieren Sie Ihr Hosting

Wenn Sie es mit der Geschwindigkeit (und Leistung) Ihrer Website wirklich ernst meinen, beginnt es mit der Auswahl eines guten Hosting-Providers. Tatsächlich können Sie alles richtig machen, um Ihre Website auf Geschwindigkeit zu optimieren und dennoch aufgrund Ihres Hosts eine langsame Website zu haben. Und die wirklich guten Hosting-Anbieter werden viele dieser Geschwindigkeitsoptimierungen für Sie vornehmen, damit Sie sich keine Sorgen machen müssen. Wenn Sie also eine langsame Divi-Site haben, sollten Sie zunächst ein Upgrade Ihres Hostings in Betracht ziehen.

Verwenden Sie Divi-optimiertes Hosting

Wenn Sie eine schnelle Divi-Website wünschen, ist es sinnvoll, einen Hosting-Provider zu wählen, der nicht nur für WordPress, sondern auch für Divi optimiert ist. Wenn Sie also nach einem großartigen WordPress-Hosting suchen, das einwandfrei mit Divi funktioniert und mit einer automatischen Divi-Installation ausgestattet ist, dann ist Divi Hosting eine großartige neue Lösung für Sie. Wir haben uns mit einigen unserer bevorzugten WordPress-Hosts (Pressable, Flywheel und SiteGround) zusammengetan, um Divi-Kunden eine einfache Möglichkeit zu bieten, Divi-Websites schnell zu erstellen, unterstützt durch eine moderne Hosting-Infrastruktur, die alle Anforderungen von Divi erfüllt und von führenden WordPress-Profis unterstützt wird .

Warum Divi-Hosting wählen?

Letztendlich muss jeder Divi-Benutzer eine Wahl bezüglich des Hostings treffen. Die falsche Wahl kann zu viel Kummer führen. Wir möchten Ihnen diese Wahl leicht machen. Hier sind nur ein paar Dinge, die Divi Hosting einzigartig machen:

• Wenn Sie Ihre Website erstellen, wird Divi automatisch installiert.
• Ihre neue Website wird automatisch mit Ihrem Elegant Themes-Konto verbunden und mit Ihrem Lizenzschlüssel eingerichtet, damit Sie Updates und Support erhalten.
• Ihre Hosting-Umgebung wird so konfiguriert, dass sie alle von Divi empfohlenen PHP-Einstellungen sofort erfüllt. Es sind keine Anpassungen erforderlich.
• Ihre Website wird von einer schnellen und modernen Hosting-Infrastruktur betrieben, was schnelle Ladezeiten und moderne Tools wie automatisches Caching und CDNs bedeutet.
• Sie werden von einem Unternehmen gehostet, das WordPress in- und auswendig kennt.
• Sie werden von einem unserer Partner gehostet, was bedeutet, dass sie sich dafür einsetzen, ein großartiges Divi-Erlebnis auf ihren Systemen zu gewährleisten.

Es gibt viele Hosting-Optionen da draußen, und sie sind nicht alle gleich. Wir helfen unseren Kunden jeden Tag, mit Hosting-bezogenen Kompatibilitätsproblemen umzugehen, die unglaublich frustrierend sein können. Jeder braucht Hosting, um Divi zu verwenden, und Ihre Hosting-Erfahrung muss kein Problem sein. Erfahren Sie mehr darüber, wie Divi-Hosting die beste Hosting-Lösung für Divi ist.

Die richtige Hosting-Lösung für Ihre Divi-Site finden

Haben Sie n eed zu verwenden Divi - Hosting eine schnelle Divi Website? Absolut nicht. Es gibt andere großartige Hosting-Lösungen und Divi funktioniert immer hervorragend in großartigen Hosting-Umgebungen. Da Hosting jedoch eine so entscheidende Rolle bei der Geschwindigkeits- und Leistungsoptimierung spielt, sollten Sie sich die nötige Zeit nehmen, um die richtige Hosting-Lösung für Ihre Divi-Site zu finden.

Es gibt viele großartige und weniger großartige Hosting-Unternehmen. Und jeder bietet normalerweise mehrere Hosting-Lösungen und -Dienste an. Das richtige zu finden kann also überwältigend sein. Nachfolgend finden Sie einige hilfreiche Informationen zu den gängigsten Hosting-Arten, die Sie bei der Suche nach der richtigen Hosting-Lösung für Ihre Divi-Site berücksichtigen sollten.

Herkömmliches (Shared) Hosting (nicht empfohlen)

Dies ist bei weitem die beliebteste Art des Hostings für WordPress-Benutzer, zum großen Teil, weil es am günstigsten ist. Aber leider ist es die schlechteste Option für die Geschwindigkeitsoptimierung. Beim traditionellen Shared Hosting teilen Sie alle verfügbaren Ressourcen eines Servers mit anderen. Da Sie teilen, sind die Kosten für diese Art von Hosting gering. Der Nachteil ist jedoch, dass Sie nicht kontrollieren können, wie viel Datenverkehr diese anderen Websites auf Ihrem gemeinsam genutzten Server erhalten. So können Sie Zeiten extrem langsamer Ladezeiten und sogar Zeiten, in denen Ihre Website vollständig ausfällt, leicht zum Opfer fallen. Sie haben also eine gute Vorstellung davon, wie viel Traffic Ihr Shared Hosting verarbeiten kann.

Dediziertes Hosting

Beim dedizierten Hosting haben Sie Ihren eigenen dedizierten Server nur für Sie. Sie müssen keine Ressourcen mit anderen teilen. Dies bedeutet, dass Sie vorhersehbarere und konsistentere schnelle Ladezeiten für Ihre Website haben. Dies wird in der Regel als Top-Tier-Option für große Unternehmen zu hohen Prämienkosten angeboten.

VPS-Hosting

Virtual Private Server (VPS) Hosting ist im Grunde ein Mittelweg zwischen Shared und Dedicated Hosting. Ihr Serverraum ist „privat“, was bedeutet, dass er vollständig von allen anderen getrennt ist (wie eine geschlossene Community für Ihre Site-Dateien). So sind Ihre Site-Dateien nicht für andere auf dem Server zugänglich. Im Gegensatz zu Shared Hosting verfügt ein VPS über eine dedizierte Anzahl von Systemressourcen (oder Leistung), um sicherzustellen, dass Ihre Site immer das bekommt, was sie braucht, um konstant schnelle Ladezeiten zu liefern. Sie müssen sich also keine Sorgen über die Verkehrsspitzen anderer Websites machen, die Ihre Website-Geschwindigkeit beeinträchtigen.

Wenn Sie jedoch keinen verwalteten VPS haben, ist diese Art von Hosting hauptsächlich für Heimwerker geeignet, die technisch versiert genug sind, um die Dinge selbst zu erledigen. Für weitere Informationen finden Sie hier einen Leistungsvergleich zwischen VPS-Hosting und Shared Hosting.

Cloud-Hosting

Beim Cloud-Hosting haben Sie Zugriff auf ein Netzwerk von Servern (in der Cloud) anstelle eines einzelnen physischen Servers. Auf diese Weise können Sie alle benötigten Ressourcen nach Bedarf aus diesem Netzwerk von Servern abrufen. Im Wesentlichen haben Sie eine virtuelle Partition des Serverspeicherplatzes, die von der Leistung und den Ressourcen des gesamten Netzwerks unterstützt wird. Sie müssen sich also keine Sorgen über die Traffic-Spitzen machen, wie Sie es beim Shared Hosting tun würden. Cloud-Hosting ist äußerst flexibel und auf Ihre Bedürfnisse skalierbar.

Ein Hauptunterschied zwischen Cloud-Hosting und VPS-Hosting besteht darin, dass VPS-Hosting über eine dedizierte (oder begrenzte) Anzahl von Ressourcen verfügt, die möglicherweise erschöpft sind oder nicht. Cloud Hosting hingegen ist in der Lage, Ihre Ressourcen verfügbar zu halten, ohne dass sie erschöpft werden, da es immer von den anderen Servern in der Cloud abgerufen werden kann. Theoretisch bietet Cloud-Hosting konsistentere und zuverlässigere hohe Geschwindigkeiten. Wenn Sie es also mit Geschwindigkeit ernst meinen, ist Cloud-Hosting eine großartige Option (vielleicht sogar die beste).

Verwaltetes WordPress-Hosting

Managed WordPress Hosting bezieht sich normalerweise auf Shared Hosting, das von WordPress-Experten verwaltet wird. Es kostet normalerweise etwas mehr als herkömmliches Shared Hosting, aber wenn Sie eine schnellere Divi-Site wünschen, kann sich Managed WordPress Hosting lohnen. Es ist nicht so „privat“ wie ein VPS oder so leistungsstark wie eine dedizierte Hosting-Umgebung. Aber es hilft, die Geschwindigkeit Ihrer gemeinsamen Umgebung zu maximieren, indem WordPress-Experten die Arbeit erledigen. Sie machen dies gut, weil sie ihre Dienste anpassen und ihre Server ausschließlich für WordPress-Sites konfigurieren. Und viele von ihnen verfügen über viele coole und praktische integrierte Funktionen wie Ein-Klick-Staging-Umgebungen, Site-Caching, Ein-Klick-CDN-Bereitstellung, automatische Backups, SSLs und mehr. Sie sind perfekt für diejenigen von uns, die sich nicht auf eine Reihe von Plugins für grundlegende Geschwindigkeitsoptimierung, Sicherheit und Verwaltung verlassen (oder diese verwalten) möchten.

Tatsächlich ist Divi Hosting Managed WordPress Hosting, das für Divi optimiert ist. Dies nimmt Ihnen alle Kopfschmerzen bei der Optimierung Ihrer Hosting-Umgebung für Ihre Divi-Site.

#2 Optimieren Sie die Zeit bis zum ersten Byte (TTFB)

Was ist TTFB?

Die Zeit bis zum ersten Byte (TTFB) ist die Zeit, die der Benutzer benötigt, um das erste Byte der Website-Daten von Ihrem Host/Server zu erhalten. Wenn ein Benutzer also eine HTTP-Anfrage stellt (Ihre Webseite lädt), wird die TTFB im Wesentlichen diese Wartezeit sein, bevor Daten vom Browser empfangen werden. Dies ist wichtig, denn je länger die TTFB, desto länger dauert das Laden der Seite.

Stellen Sie es sich vor wie Fast Food. Das Restaurant kann optimiert werden, um Ihr Essen schnell zu liefern. Tatsächlich wartet möglicherweise bereits ein Hamburger auf Sie. Aber Sie müssen immer noch in der Schlange warten, um zu bestellen. Diese Wartezeit kann man sich als die Zeit für den ersten Bissen vorstellen (siehe was ich dort gemacht habe).

Die TTFB sollte ca. 200ms betragen (laut Google). Aber für Sites, die auf schlechtem Hosting sind und nicht optimiert wurden, kann die TTFB leicht 2 Sekunden oder mehr betragen.

Was verursacht eine langsame TTFB?

Die TTFB-Verzögerung auf Ihrer Divi-Site wird normalerweise durch Folgendes verursacht:

• Die Menge an dynamischem Inhalt , die empfangen werden muss. Dies kann mit Caching, Datenbankoptimierung und einem CDN reduziert werden.
• Die Menge an Datenverkehr, die Ihr Server zu diesem Zeitpunkt erlebt. Herkömmliche (oder gemeinsam genutzte) Hosting-Anbieter machen es schwierig, diese TTFB zu beenden, da Sie Ressourcen mit anderen auf demselben Server teilen. Spitzen in ihrem Datenverkehr verringern die Verarbeitungsgeschwindigkeit Ihres Servers.
• Ihre Webserver-Konfiguration . Ein guter WordPress-Hosting-Anbieter kann bei der TTFB Ihrer Website helfen, indem er eine solide Backend-Infrastruktur bereitstellt und Ihre Webserver-Konfiguration optimiert (Dinge, die so ziemlich außerhalb Ihrer Kontrolle liegen).

So beschleunigen Sie den TTFB Ihrer Divi-Site

TTFB ist eine der Web Vitals (zusammen mit FCP, LCP und CLS), die Google verwendet, um das Ranking Ihrer Website zu bestimmen. Daher ist es wichtig, es zu optimieren. Die gute Nachricht ist, dass TTFB optimiert werden kann. Hier sind ein paar wichtige Tipps, die Sie verwenden können, um TTFB zu reduzieren.

• Aktualisieren Sie Ihr Hosting . Der effektivste Weg, um Ihre TTFB zu steigern, besteht darin, einfach Ihr Hosting zu aktualisieren. Etwas mehr für Managed Hosting für WordPress oder Divi Hosting zu bezahlen, wird von Anfang an den größten Einfluss auf TTFB haben.
• Verwenden Sie ein CDN . Auf diese Weise können Besucher die Daten Ihrer Website von einem Server laden, der ihnen am nächsten ist, sodass Sie die Latenz und die TTFB reduzieren können.
• Entfernen Sie unnötige Plugins oder Themes . Plugins und Themes (insbesondere veraltete) können den Server und die Ladezeiten Ihrer Site (einschließlich TTFB) beeinträchtigen. Daher ist es am besten, nur wesentliche Qualitäts-Plugins (oder Themes) zu verwenden und die anderen zu entfernen.
• Caching implementieren . Divi verfügt über integriertes Caching für die Bereitstellung von Divi JS und CSS. Das Caching Ihrer Website als Ganzes wird jedoch zusätzlich zur Verwendung eines CDN die TTFB reduzieren.

Verwenden Sie Cloudflare, um TTFB zu steigern

Eine Möglichkeit, die TTFB Ihrer Website schnell zu steigern, besteht darin, Cloudflare zu verwenden. Das Caching und das CDN, das in ihrem kostenlosen Plan verfügbar ist, werden TTFB definitiv steigern. Sie können auch die automatische Plattformoptimierung von Cloudflare nutzen, die getestet wurde, um eine Reduzierung der TTFB um 72 % zu zeigen.

Um mehr zu erfahren, lesen Sie unseren vollständigen Artikel über TTFB und wie Sie Ihre Website dafür optimieren können.

#3 Optimieren Sie die Datenbank Ihrer Site

Warum die WordPress-Site saubere Datenbanken benötigt

Im Gegensatz zu statischen HTML-Sites ist WordPress ein dynamisches CMS, das PHP verwendet, um in einer MySQL-Datenbank gespeicherte Daten abzurufen, um diese Daten auf einer Webseite anzuzeigen. Dies macht die Verwaltung Ihrer Site einfach, aber der Nachteil ist, dass das Laden der Seiten länger dauert, da die Daten in der Datenbank gefunden werden müssen, bevor die Seite geladen wird. Im Allgemeinen sind statische HTML-Websites aus diesem Grund schneller als WordPress-Websites.

Eine Möglichkeit, eine Divi-Site so schnell wie möglich zu halten, besteht darin, sicherzustellen, dass Sie eine saubere Datenbank haben. WordPress-Site-Dateien sind in Ihrer Datenbank nach Tabellen organisiert und jedes Mal, wenn Sie Ihrer Site neue Daten (wie Themen und Plugins) hinzufügen, erstellen Sie neue Tabellen und weitere Daten. Erwartungsgemäß ist es umso schwieriger, die Daten zu finden, je unübersichtlicher Ihre Datenbank ist. Dies führt zu einer langsameren Website.

Wenn Sie also nach jahrelangem Ausprobieren anderer Themen und unzähliger Plugins das Divi-Theme zu Ihrer Website hinzugefügt haben, haben Sie wahrscheinlich einige Daten gespeichert, die Sie nicht mehr benötigen. Selbst wenn Sie ein Plugin deinstallieren, bedeutet dies nicht, dass alle Daten in der Datenbank verschwunden sind. Plugins lassen gerne einige Daten drin, falls Sie das Plugin neu installieren. Nicht cool, ich weiß. Diese übrig gebliebenen Daten können zu unnötigem Durcheinander führen und Ihre Website verlangsamen.

So wie jeder Mensch eine Organisation braucht, um effizienter zu arbeiten, benötigt jede WordPress-Site (Divi oder nicht) eine saubere Datenbank, um Seiten schneller zu laden. Wenn Sie Ihre Website also schon eine Weile haben, kann die Bereinigung die Dinge erheblich beschleunigen.

So optimieren Sie die Datenbank Ihrer Divi-Site

Ich würde vorschlagen, dafür ein Plugin zu verwenden. WP Optimize scheint eine glaubwürdige Option zu sein. Aber es gibt noch andere WordPress-Datenbank-Plugins, die Sie in Betracht ziehen sollten.

Wenn Sie wissen, was Sie tun, können Sie dies jederzeit manuell in MySQL tun.

Neben der Bereinigung Ihrer WordPress-Datenbank möchten Sie WordPress möglicherweise noch einfacher machen, indem Sie die darin gespeicherten Daten reduzieren. Zum Beispiel hält WordPress gelöschte Elemente automatisch 30 Tage lang im Papierkorb. Sie können diesen Zeitraum auf 7 reduzieren.

#4 Optimieren Sie Ihr DNS

Wie sich DNS auf die Website-Geschwindigkeit auswirkt

Das allererste, was passieren muss, wenn ein Benutzer die URL zu einer Ihrer Webseiten besucht, ist eine DNS-Suche. Sobald die URL eingegeben (oder angeklickt) wird, sendet der ISP des Besuchers eine DNS-Anfrage an die Nameserver, um die mit Ihrer Domain verbundene IP-Adresse zu finden (jede Domain/Website hat eine bestimmte IP-Adresse). Im Wesentlichen ist eine DNS-Suche wie das Nachschlagen Ihres Domänennamens in einem Telefonbuch, um die IP-Adresse für diese Domäne zu finden.

Wenn ein Benutzer jedoch eine Seite Ihrer Website besucht, kann die Seite über mehrere Domänen verfügen, auf die zugegriffen werden muss, um die Seite aufzurufen. Sie könnten also 3 oder 4 Domain-Lookups beim Laden einer einzigen Seite durchführen (vielleicht mehr).

Im Allgemeinen werden die meisten kostenlosen DNS-Anbieter wie Godaddy und Namecheap im Allgemeinen langsamer sein, als Ihnen wahrscheinlich lieb ist.

Verwenden von Cloudflare für die DNS-Optimierung (und mehr, wenn Sie möchten)

Die beste kostenlose Option, die Ihre DNS-Suchgeschwindigkeit erhöht, ist wahrscheinlich Cloudflare. Sie haben die schnellste DNS-Leistung, die auf DNSPerf.com aufgezeichnet wurde. Dies wird deutlich schneller sein als GoDaddy und Namecheap. Und Sie können Cloudflare sogar so optimieren, dass es für DNS ohne ihre anderen Dienste (wie CDN oder WAF) verwendet wird, wenn Sie möchten.

Vielleicht möchten Sie beispielsweise Cloudflare für DNS und Sicherheit (DDOS-Erkennung) und KeyCDN (oder MaxCDN) für Ihr CDN verwenden. Das scheint eine tolle Kombination zu sein.

Cloudflare einrichten

Cloudflare ist wirklich einfach einzurichten. Sie müssen sich nicht vorher um einen Hosting-Wechsel oder ähnliches kümmern. Alles, was Sie tun müssen, ist die 5-minütige Einrichtung zu durchlaufen, die mit der Eingabe Ihrer Domain beginnt.

Sie werden Ihre aktuellen DNS-Einträge automatisch abrufen.

Das Wichtigste, was Sie tun müssen, um die Einrichtung abzuschließen, ist, die Standard-Nameserver Ihres aktuellen DNS-Anbieters (wie GoDaddy) in die Nameserver von Cloudflare zu ändern.

Dann können Sie Ihr DNS einfach über das Dashboard verwalten.

Und ganz einfach haben Sie eine Steigerung der DNS-Lookup-Geschwindigkeit, mehr Sicherheit und ein CDN für Ihre Website (plus mehr).

Apropos CDNs, Sie müssen auf jeden Fall eines davon verwenden.

#5 Verwenden Sie ein Content Delivery Network (CDN)

StackPath CDN-PoPs

Ein Content Delivery Network (CDN) hebt die Website-Geschwindigkeit auf eine andere Ebene. Wie der Name schon sagt, ist ein CDN ein Netzwerk zur Bereitstellung von Inhalten. Das Netzwerk besteht aus Servern auf der ganzen Welt, die zwischengespeicherte statische Dateien (Bilder, Videos, Skripte usw.) Ihres Website-Inhalts speichern. Wenn eine Person dann eine Anfrage für diesen Inhalt sendet (durch den Besuch Ihrer Website), wird der Server (oder PoP), der der Person am nächsten ist, den Inhalt liefern. Ohne ein CDN sind Ihre Website-Dateien von einem Serverstandort aus zugänglich (wo auch immer Ihr Host diese Dateien speichert). Je weiter Sie von diesem Server entfernt sind, desto langsamer werden die Website-Inhalte an Ihren Browser geliefert.

Denken Sie darüber nach, wenn Sie eine Pizza zu Ihnen nach Hause liefern lassen möchten, wählen Sie nicht die Pizzeria aus, die 50 km entfernt ist. Sie wählen das 8 km entfernte, weil Sie es so schnell wie möglich geliefert haben möchten (wenn Sie ein normaler Mensch sind, der Pizza genauso liebt wie ich). Ein CDN funktioniert ähnlich. Da Sie möchten, dass die Website so schnell wie möglich in Ihrem Browser angezeigt wird, stellt ein CDN Ihre Site-Dateien bereit, die von dem Server bereitgestellt werden, der Ihrem Standort am nächsten ist. Wenn also Ihre Site-Dateien auf einem Server in San Francisco gespeichert sind und jemand in London Ihre Site aufruft, kann es 1 oder 2 Sekunden dauern, bis diese Daten von einem Tausende von Meilen entfernten Server empfangen werden. Aber mit einem CDN können Sie die gleichen Daten in der Hälfte der Zeit von einem Server in London liefern. Das ist ein großer Unterschied!

Selbst wenn Sie zu Hause nicht das volle Ausmaß der Ergebnisse sehen, beschleunigen Sie die Bereitstellung Ihrer Website an Orten auf der ganzen Welt.

Es gibt viele Möglichkeiten, ein CDN für Ihre Website zu erhalten. Viele Hosting-Unternehmen bieten eine Option für die Bereitstellung eines CDN mit ihrem Dienst. Und es gibt Netzwerkplattformen wie Cloudflare und StackPath (früher MaxCDN), die neben anderen Leistungs- und Sicherheitsfunktionen auch CDN-Funktionen bieten.

Hier sind einige glaubwürdige CDN-Plattformen, die Sie in Betracht ziehen sollten:

• Cloudflare CDN: Neben der DNS-Optimierung (oben erwähnt) bietet Cloudflare ein schnelles und sicheres globales CDN, das statische Inhalte zwischenspeichert und schnell an die Benutzer ausliefert. Dies ist in ihrem kostenlosen Plan enthalten, der für die meisten Websites großartig ist.
• KeyCDN (Sie können sogar das WordPress-Plugin CDN Enabler verwenden, um KeyCDN zu integrieren; Dieses Setup würde auch gut mit Cache Enabler funktionieren)
• StackPath (früher MaxCDN)
• Amazon Cloudfront
• Sucuri

Es gibt einige Caching-Plugins wie WP Total Cache oder CDN Enabler, die eine Option zur automatischen Integration mehrerer CDN-Anbieter enthalten, was ziemlich praktisch ist.

Hier sind einige Plugins mit CDN-Unterstützung:

• WP Schnellster Cache
• WP-Rakete
• Autooptimieren
• W3 Gesamtcache
• WP-Super-Cache
• CDN-Enabler

#6 Caching hinzufügen

Es gibt vier Haupttypen von Caching, die implementiert werden können, um Ihre Site zu beschleunigen.

• Seiten- Caching – Dieser Prozess speichert zwischengespeicherte statische HTML-Versionen Ihrer Seite für eine schnelle Bereitstellung.
• Browser-Caching – Dies gibt Ihnen mehr Kontrolle darüber, welche Inhalte vom Browser zwischengespeichert werden können und wie lange. Nur einige Plugins können dies tun, daher ist es möglicherweise am besten, dies manuell zu tun, um mehr Kontrolle zu haben. Dies wird dazu beitragen, die Metrix "Leverage Browser Caching" bei der Durchführung von Geschwindigkeitstests zu berücksichtigen.
• CDN-Caching – Stellt zwischengespeicherte Website-Seiten/-Dateien von einem CDN bereit, das Ihren Benutzern am nächsten ist.
• Objekt-Caching – Objekt-Caching speichert wiederholte Abfrageergebnisse, die PHP initiiert, um Daten aus der Datenbank abzurufen und dem Benutzer bereitzustellen. Dies unterscheidet sich vom Bytecode-Caching, bei dem eine zwischengespeicherte Version des kompilierten PHP-Codes gespeichert wird, der zum Anzeigen Ihrer Website verwendet wird.

Divi führt Caching durch, wenn die JS- und CSS-Dateien von Divi hinter den Kulissen bereitgestellt werden. Dies ist jedoch in erster Linie für die Divi-Designdateien für eine bessere Divi Builder-Funktionalität gedacht.

Es besteht weiterhin die Notwendigkeit, Caching für Ihre Website als Ganzes zu verwenden. Die meisten Websites haben mehrere Plugins, die mit ihren eigenen CSS-Dateien geliefert werden, die möglicherweise kombiniert, minimiert und zwischengespeichert werden müssen. Sie können also definitiv eine Drittanbieterlösung nutzen, um zwischengespeicherte statische HTML-Versionen aller Ihrer Seiten bereitzustellen.

Das CDN von Cloudflare ist eine großartige Möglichkeit, Ihrer Divi-Site Caching hinzuzufügen. Es speichert eine Kopie des Inhalts der Website (statische Ressourcen) geografisch näher bei den Besuchern, um das Laden der Seite und die Latenz zu reduzieren. Cloudflares APO für WordPress scheint eine noch gezieltere Lösung zum Caching von Webseiten und Schriftarten von Drittanbietern für eine WordPress/Divi-Site mit ihrem WordPress-Plugin zu sein.

Beliebte Caching-Plugins sind:

• WP-Rakete
• Cache Enabler (lesen Sie unseren Testbericht)
• W3 Total Cache (lesen Sie unseren Test)
• W3 Super Cache (lesen Sie unseren Test)
• Comet Cache (lesen Sie unseren Test)
• WP Schnellster Cache

Tipp: Wenn Sie Seiten-Caching auf Ihrer Website mithilfe eines Plugins aktiviert haben, sollten Sie sicherstellen, dass der Cache immer gelöscht (oder geleert) wird, wenn Sie Änderungen an Ihrer Website vornehmen, um sicherzustellen, dass Sie und Ihre Besucher die neueste Version Ihrer Website erhalten Seite? ˅.

#7 Website-Minifizierung und -Aggregation hinzufügen

Durch die Minimierung werden Ihre Site-Dateien kleiner. Durch das Verkleinern Ihrer Site-Dateien (CSS, JavaScript, HTML) werden all diese unnötigen Zeichen (wie Leerzeichen und Seitenumbrüche) entfernt, sodass die Dateigröße kleiner wird. Dadurch verkürzt sich die Zeit, die der Browser benötigt, um den Inhalt einer Seite zu laden.

Bei der Aggregation werden die Site-Dateien kombiniert, um die Gesamtzahl der Anfragen auf der Seite zu reduzieren und die Ladezeiten für Ihre Besucher zu beschleunigen.

Wie bereits erwähnt, minimiert und kombiniert Divi Javascript und CSS standardmäßig dynamisch. Sie müssen sich also technisch nicht darum kümmern, ein Drittanbieter-Plugin zu verwenden, um Divis Javascript und CSS weiter zu verkleinern und zu kombinieren. Divi verkleinert die HTML-Ausgabe jedoch nicht. Sie können also von einem Drittanbieter-Plugin profitieren, um den gesamten HTML-Code einer Seite zu minimieren (und zwischenzuspeichern).

Außerdem hängt fast jede Divi-Site von Dateien außerhalb des Divi-Themes ab (wie Plugins oder andere Dateien, die dem Child-Theme hinzugefügt wurden), die von der Minimierung und Kombination der CSS- und JS-Dateien profitieren.

Eine der besten Möglichkeiten, das HTML, JS und CSS Ihrer gesamten Website zu verkleinern, ist die Verwendung von Cloudflare. Cloudflare verwendet Auto Minify, um die Dateigröße des gesamten Quellcodes auf Ihrer Website zu reduzieren. Außerdem ist es standardmäßig in der kostenlosen Version enthalten.

Einige glaubwürdige Plugins, die Ihre Site-Dateien minimieren, sind:

• Autooptimieren
• W3 Total Cache (lesen Sie unseren Test)
• W3 Super Cache (lesen Sie unseren Test)
• WP-Rakete (kostenpflichtig)

Diese Plugins sollten mit Divi funktionieren. Aber es gibt keine Möglichkeit, alle Nuancen einer Website abzuschätzen, um zu sagen, dass sie für alle am besten funktioniert. Manchmal verkleinern Plugins von Drittanbietern JavaScript-Dateien automatisch so, dass Fehler/Probleme auftreten können. Testen Sie Ihre Website daher gründlich. Im Allgemeinen ist es immer sicher, CSS-Dateien zu verkleinern. Aber seien Sie vorsichtig mit diesen JavaScript-Dateien.

Und wenn es einen Konflikt gibt, müssen Sie möglicherweise die integrierten Optionen von Divi deaktivieren und das Drittanbieter-Plugin die Dinge verarbeiten lassen.

Und wenn Sie sich dafür nicht auf einen Drittanbieter verlassen möchten, können Sie dies jederzeit manuell tun. Weitere Informationen dazu finden Sie in diesem vollständigen Beitrag zur Minimierung von CSS, HTML und JavaScript Ihrer Website.

#8 GZIP-Komprimierung aktivieren

Wie die Gzip-Komprimierung hilft, Ihre Divi-Site zu beschleunigen

Wenn Sie die Gzip-Komprimierung auf Ihrer Divi-Site aktivieren, können Sie die Geschwindigkeit erheblich steigern (in einigen Fällen bis zu 70%). Wenn Sie mit dem Erstellen komprimierter (oder gezippter) Dateien auf Ihrem Computer vertraut sind, haben Sie bereits grundlegende Kenntnisse über die Funktionsweise der Gzip-Komprimierung. Wir erstellen Zip-Dateien (oder Ordner), um den Inhalt der Datei (oder des Ordners) zu verkleinern. Wieso den? So können wir die Datei viel schneller hochladen und herunterladen! Die Gzip-Komprimierung bewirkt dasselbe für Ihre Website. Es weist den Server an, alle Dateien, die er kann, in kleinere Versionen zu komprimieren, damit sie dem Client viel schneller bereitgestellt werden können. Dies kann die Ladegeschwindigkeit der Seite wirklich erhöhen.

Dies ist einer der Bereiche, in denen Sie die Geschwindigkeit von Divi selbst bei einer Neuinstallation verbessern können. Da Divi sowieso bereits die Kern-Theme-Dateien verkleinert, werden diese Dateien durch die Gzip- oder Brotli-Komprimierung viel kleiner als die Verkleinerung es jemals könnte.

Die Gzip-Komprimierung ist der am weitesten verbreitete Komprimierungsalgorithmus, aber es sieht so aus, als ob die Brotli-Komprimierung der Algorithmus der nächsten Generation ist, der versucht, die Dateigrößen für eine schnellere Datenübertragung noch kleiner zu machen. Es wird von Hosting-Unternehmen wie SiteGround und auch von Cloudflare verwendet.

So aktivieren Sie die Gzip-Komprimierung auf Ihrer Divi-Site

Einige Hosting-Anbieter aktivieren die gzip-Komprimierung automatisch, da dies für die Site-Performance ein Kinderspiel ist. Fühlen Sie sich frei zu überprüfen, ob die Gzip-Komprimierung auf Ihrer Site aktiviert ist

Wie bereits erwähnt, bietet Cloudflare Brotli-Komprimierung für alle Domains in ihrem kostenlosen Plan.

Viele der WordPress-Leistungs-Plugins (wie W3 Total Cache und WP Super Cache) enthalten als Option die Gzip-Komprimierung. Es scheint jedoch unnötig zu sein, für diese eine Optimierung ein Leistungs-Plugin hinzuzufügen.

Eine übliche Möglichkeit, die Gzip-Komprimierung (auf Apache-Servern) zu aktivieren, besteht darin, dies manuell mit mod_deflate zu tun. Und alles, was Sie tun müssen, ist über FTP auf Ihre Website (das Root) zuzugreifen (stellen Sie sicher, dass versteckte Dateien angezeigt werden). Kopieren Sie dann einen Codeblock und fügen Sie ihn am Ende Ihrer .htaccess-Datei ein.

#9 Bildoptimierung

Die Bildoptimierung ist einer der größten Übeltäter für langsame Seitenladegeschwindigkeiten. Dies liegt wahrscheinlich daran, wie leicht es zu ignorieren ist. Denn wie viel Schaden kann ein Hintergrundbild einer Webseite anrichten? Nun, Sie werden vielleicht überrascht sein. Nur wenige große Bilder, die nicht für das Web optimiert wurden, können katastrophale Auswirkungen auf die Seitenladegeschwindigkeit haben. Und seien wir ehrlich, Ihre Website wird wahrscheinlich viele Bilder haben.

Es wird wirklich nicht genug betont, wie wichtig die Bildoptimierung ist. Jede Website sollte dies tun. Allein durch die Bildkomprimierung kann Ihre Site spürbar schneller werden und die kleineren Bildgrößen sparen Speicherplatz und Bandbreite (Win-Win!). Aber es gibt noch andere wichtige Bildoptimierungen, über die Sie auch nachdenken sollten.

Kurz gesagt, Sie sollten Folgendes tun, wenn Sie Ihr Bild für das Web optimieren:

Verwenden Sie den richtigen Dateityp

Wenn es um Bilder im Web geht, sollten Sie sich wirklich an die folgenden Bilddateitypen halten:

• JPG – Dies sollte Ihr bevorzugter Dateityp für die meisten Bilder/Fotos sein, die Sie auf Ihrer Website verwenden, da Sie großartig aussehende Bilder mit einer kleineren Dateigröße als PNGs oder GIFs erhalten können. Vermeiden Sie die Verwendung des PNG-Formats für Hintergrundbilder oder Fotos, es sei denn, Sie benötigen einen transparenten Hintergrund.
• PNG – Verwenden Sie PNGs für Bilder, die einen transparenten Hintergrund benötigen. JPG unterstützt keine Transparenz.
• SVG – Dies ist ein Vektorformat, das mithilfe von HTML-Code extrem scharfe Details liefert. SVGs eignen sich hervorragend für Logos, Symbole und andere Vektoranimationen.

Ändern Sie die Größe und beschneiden Sie Ihre Bilder

Sie möchten nie, dass Ihr Bild größer ist, als es sein muss. Wenn Sie beispielsweise ein Logo in den Designoptionen von Divi hinzufügen, benötigen Sie in den meisten Fällen nur eine Breite von 100px. Laden Sie also kein Logo mit einer Breite von 5000 Pixeln hoch und zwingen Sie Divi, die Größe dieses Bildes für Sie zu ändern. Das Ergebnis kann im Frontend ähnlich aussehen, aber diese große Größe verkürzt die Ladezeit Ihrer Seite.

Beim Hochladen von Bildern auf Ihre Seite mit Divi ist es hilfreich zu wissen, wie groß diese Bilder innerhalb der Spaltenstruktur von Divi sein müssen. Dieser ultimative Leitfaden kann Ihnen dabei helfen, in die richtige Richtung zu weisen. (Es wurden jedoch seit diesem Beitrag neue Spaltenstrukturen hinzugefügt, daher werden wir versuchen, diese bald zu aktualisieren).

Dateigröße komprimieren

Sie sollten die Größe Ihrer Bilddatei so weit reduzieren, dass Sie einen Qualitätsverlust bemerken. Dies geschieht durch Bildkomprimierung. Die meisten Bildbearbeitungsprogramme, Plugins und Websites wie tinypng.com komprimieren Bilder mit verlustfreier Komprimierung (die die Bilddatei verkleinert, ohne dass die Bildqualität verloren geht) und intelligenter verlustbehafteter Komprimierung (die die Größe der Bilddatei durch Reduzierung von Metadaten und Bildqualität verringert) für den Benutzer nicht wirklich wahrnehmbar).

Profitieren Sie von Bildoptimierungstools

Wenn Sie können, würde ich vorschlagen, dass Sie Ihre Bilder für das Internet optimieren, bevor Sie sie auf Ihre Divi-Site hochladen. Dies kann über Bildbearbeitungsprogramme wie Photoshop erfolgen, die eine Option "Für Web speichern" enthalten. Darüber hinaus können Sie eine kostenlose Drittanbieter-Site wie TinyPNG.com oder Compressor.io verwenden, um das Bild zu komprimieren, bevor Sie es auf Ihre Site hochladen.

Es gibt einige großartige Plugins, die die Bildkomprimierung für Sie durchführen. Einige Plugins (wie Imagify) komprimieren Bilder, die bereits auf deiner Website verwendet werden, und komprimieren Bilder automatisch, wenn du sie in deine WordPress-Medienbibliothek hochlädst. Denken Sie daran, dass die Verwendung eines Plugins dafür Ihre Website beim Komprimieren dieser Bilder belasten kann. Daher empfiehlt es sich, die Bildoptimierung nach Möglichkeit vorher durchzuführen.

Hier sind einige großartige Tools und Plugins zur Bildoptimierung, die Sie verwenden können:

• Webseiten:
  • Kompressor.io
  • Tinypng.com
• Plugins:
  • Stellen Sie sich vor
  • Smush-Bildkomprimierung und -optimierung
  • WP-Rakete

Weitere Informationen finden Sie im Vergleich zu 6 hochwertigen Plugins zur Bildoptimierung.

Divis integrierte SRCSET-Unterstützung

Responsive Images mit nativer SRCSET-Unterstützung sind auch in Divi integriert. Dies verbessert die Optimierung der in Divi verwendeten Bilder noch weiter, indem die skalierten Bilder bereitgestellt werden, die die richtige Größe für verschiedene responsive Displays (wie Tablet und Telefon) haben.

#10 Videooptimierung

Die Videooptimierung ist etwas schwieriger als die Bildoptimierung, aber definitiv nicht weniger wichtig. Videodateien können groß sein und daher die Seitenladegeschwindigkeit extrem belasten. Und wenn Sie viele Videos auf Ihrem Server hosten (z. B. in der WordPress-Mediengalerie), werden Sie auf das zusätzliche Problem des Speicherplatzes stoßen. Aus diesem Grund wird oft empfohlen, Dienste von Drittanbietern (wie YouTube oder Vimeo) zu verwenden, um Ihre Videos für Sie zu hosten. Oder Sie können erwägen, Ihre Videomedieninhalte auf eine Speicherplattform wie Amazon S3 auszulagern. Auf diese Weise können Sie innerhalb des Videomoduls von Divi auf diese Videos verlinken, ohne dass sie Ihren Server verlangsamen müssen.

Wenn Sie Ihre Videos selbst hosten möchten, müssen Sie auf jeden Fall die Videogröße reduzieren, um schneller geladen zu werden. Sie können Videodateien einfach mit einem kostenlosen Tool wie Handbrake (das einfach zu bedienen ist) reduzieren.

Weitere Informationen zur Verwendung von Videos in Divi (wie das Hinzufügen einer von einem Drittanbieter gehosteten Video-URL zu einem Videomodul) finden Sie in dieser ultimativen Anleitung.

#11 Erstellen Sie Ihre Divi-Seite für Geschwindigkeit

Wenn es nicht darum geht, wird die Geschwindigkeit einer Website dadurch bestimmt, wie schnell sie den Inhalt einer Seite lädt. Daher ist es sinnvoll, jede Seite Ihrer Divi-Website unter Berücksichtigung der Leistungsoptimierung zu erstellen. Wichtig ist, das Hauptziel für jede von Ihnen erstellte Seite zu identifizieren. Danach können Sie eine gesunde Balance zwischen Geschwindigkeit und Design finden, um eine Seite zu erstellen, die im Frontend fantastisch aussieht, während Sie im Backend schlank bleiben. Ein praktisches Beispiel für die Geschwindigkeitsoptimierung von Divi-Seiteninhalten finden Sie in unserem Artikel zum Erstellen der schnellsten Divi-Seite.

Hier sind ein paar wichtige Tipps, die Sie beim Erstellen Ihrer Seite beachten sollten:

• Optimieren Sie den oben stehenden Inhalt so , dass er mit dem integrierten Critical CSS von Divi funktioniert.
• Verwenden Sie Divi-Voreinstellungen, um die integrierte Funktion für intelligente Stile von Divi zu nutzen . Auf diese Weise können Elemente CSS-Code-Snippets basierend auf Klassen teilen und vermeiden, dass für jede ein eigener CSS-Block geladen werden muss.
• Begrenzen Sie nach Möglichkeit die Modultypen, die Sie zum Erstellen der Seite verwenden . Aufgrund des dynamischen Frameworks von Divi verarbeitet oder lädt Divi die Module (und ihr einzigartiges CSS), die Sie nicht verwenden, nicht. Wenn Sie beispielsweise zwei Textmodule (anstelle eines Textmoduls und eines Klappenmoduls) für die gleichen Ergebnisse verwenden können, verwenden Sie am besten nicht unnötig das Bearbeiten und Laden des Klappenmoduls auf der Seite.
• Seien Sie klug, wenn Sie Animationen für Ihre Seite verwenden . Aufgrund der dynamischen Funktionen von Divi verarbeitet oder lädt Divi das für Funktionen wie Bewegungseffekte erforderliche JS oder CSS nicht, wenn Sie sie nicht verwenden. Wenn Sie beispielsweise auf Ihrer Seite die normalen Animationseinstellungen verwenden, möchten Sie möglicherweise vermeiden, nur für ein Element Bewegungseffekte zu verwenden. Halten Sie stattdessen den Animationsstil konsistent und genießen Sie schnellere Seitenladezeiten.

#12 Verwenden Sie Plugins vorsichtig und sparsam

Qualitäts-Plugins verwenden

Qualität ist der Schlüsselfaktor, wenn es um Plugins geht. Tatsächlich können Sie 10 hochwertige Plugins haben, die Ihre Website nicht so stark verlangsamen wie ein schlechtes. Stellen Sie im Allgemeinen sicher, dass Sie Plugins auswählen, die sich im Laufe der Zeit bewährt haben und gute Bewertungen haben. Und testen Sie immer mit Vorher-Nachher-Geschwindigkeitstests, wie sich ein Plugin auf die Leistung Ihrer Website auswirkt, um sicherzugehen.

Entfernen Sie ungenutzte oder veraltete Plugins

Neben der Verwendung hochwertiger Plugins ist es auch wichtig, dass Sie alle ungenutzten und/oder veralteten Plugins von Ihrer Website entfernen. Sie können die Leistung Ihrer Website beeinträchtigen und ein ernstes Sicherheitsrisiko darstellen. Außerdem fügt jedes Plugin (auch die qualitativ hochwertigen) zusätzliche Ressourcen hinzu, die die Zeit für jeden Seitenladevorgang erhöhen. Wenn Sie eine schnelle Divi-Site wünschen, sollten Sie so wenig Plugins wie möglich verwenden.

Achten Sie auf Render-Blocking-Fehler

Divi hat keine Rendering-blockierenden Assets, was bedeutet, dass Ihre Rendering-blockierenden Stile und Skripte von Plugins stammen. Wenn es einige große Render-Blocking-Skripte gibt, die Ihre Geschwindigkeit beeinträchtigen, sollten Sie sich von diesen Plugins entfernen.

#13 Geschwindigkeitstests durchführen

Sie würden diesen Artikel wahrscheinlich nicht lesen, wenn Sie nicht mindestens einen Geschwindigkeitstest auf Ihrer Website durchgeführt haben. Und zu Recht ist es wichtig zu wissen, wie schnell Ihre Seiten für Besucher geladen werden. Die Durchführung eines Geschwindigkeitstests ist eines der einfachsten Dinge, die Sie tun können. Es gibt unzählige Websites, die dies kostenlos für Sie tun. Und die von ihnen bereitgestellten Metriken werden von unschätzbarem Wert sein, um Möglichkeiten zu ermitteln, wie Sie Ihre Website weiter optimieren können, um eine bessere Leistung zu erzielen.

Hier sind ein paar tolle Startpunkte:

• GTMetrics
• Google-Seiten-Insights
• Chrome-Entwicklungstools
• Leuchtturm (verfügbar für Chrome-Entwicklertools)

Die Ergebnisse dieser Tests treiben viele von uns dazu an, unsere Divi-Site für schnellere Ladezeiten zu optimieren. Sie bieten eine hilfreiche Aufschlüsselung der Leistung Ihrer Webseite in einer Vielzahl von Bereichen. Dann können Sie ihre Empfehlungen als Checkliste verwenden, um Ihre Website zu optimieren.

Der beste Weg, diese Online-Geschwindigkeitstest-Tools für Ihre Divi WordPress-Site zu verwenden, besteht darin, zuerst einen Test auf einer Seite durchzuführen, bevor Sie Optimierungen vornehmen. Dann können Sie dies als Grundlage verwenden, um zukünftige Tests zu vergleichen, während Sie Änderungen vornehmen. Nach jeder Optimierung, die Sie vornehmen, können Sie sehen, ob sich Ihre Punktzahl verbessert.

Sie werden beispielsweise feststellen, dass die Verwendung eines Caching-Plugins besser funktioniert als ein anderes. Haben Sie keine Angst, mehrere Plugins zu testen, um die beste Leistung zu erzielen.

Hier ist ein hilfreicher WordPress-Optimierungsleitfaden von GTMetrix, der hilfreich sein wird.

Während Sie die Geschwindigkeitsoptimierungen auf Ihrer Website implementieren, sollten Sie Verbesserungen in den folgenden Bereichen feststellen:

• Zeit bis zum ersten Byte (TTFB)
• Erste Contentful Paint (FCP)
• Time to Interactive (TTI) – misst, wann die Seite für die Benutzerinteraktion bereit ist.
• Geschwindigkeitsindex (SI) – misst, wie schnell Ihre Seite visuell vollständig ist
• Total Blocking Time (TBT) – Ähnlich wie bei Googles Web Vital First Input Delay (FID), das ist die Zeitspanne zwischen der ersten Interaktion eines Benutzers mit Ihrer Website und der Reaktion seines Browsers auf diese Aktion
• Largest Contentful Paint – misst, wie lange es dauert, bis das größte Inhaltselement (wie ein Bild) für Benutzer sichtbar wird.
• Kumulative Layoutverschiebung – misst die unerwartete Verschiebung (oder Verschiebung) des Layouts, wenn ein Benutzer eine Seite lädt.

Weitere Informationen finden Sie in unserem Beitrag zur Verbesserung Ihres Google Page Speed ​​Scores.

Das Ziel ist Geschwindigkeit, nicht Perfektion

Es kann leicht sein, sich beim Testen Ihrer Website und deren Optimierung bis zur Perfektion zu verzetteln. Aber keine Website wird perfekt sein. Möglicherweise stellen Sie sogar fest, dass die Verbesserung bestimmter Leistungsbewertungen für Geschwindigkeitstests die Ladezeit Ihrer Seite tatsächlich verlangsamen kann. Denn auch diese Geschwindigkeitstests sind nicht perfekt. Wie dieser Artikel sind sie lediglich ein Leitfaden, um die Leistung und Geschwindigkeit Ihrer Website zu verbessern.

#14 Betrachten Sie unseren Divi High-Speed ​​Page Blueprint

In dieser von uns erstellten Testwebsite war es einfach, eine Divi-Website zu erstellen, die 100 auf Google PageSpeed ​​Desktop, 99 auf Google PageSpeed ​​Mobile und 100 % auf GTmetrix erreichte. Dieser Website-Blueprint ermöglicht es Entwicklern, die integrierte Geschwindigkeitsoptimierung von Divi auf einer echten Website aus erster Hand zu erleben. Es kann auch als gutes Beispiel dafür dienen, wie Sie den Inhalt Ihrer Divi-Seite auf Geschwindigkeit optimieren können.

Diese Testseite wurde wie folgt optimiert:

• Auf SiteGround gehostet
• Verwendete CloudFlare für Caching, CDN, Brotli-Kompression
• Es wurden keine zusätzlichen Plugins verwendet.
• Gebrauchte integrierte Leistungsmerkmale von Divi
• Optimierter Seiteninhalt
  • Verwendete Smart Styles (Divi Presets), um das dynamische CSS zu reduzieren, das für jede Seite generiert wird.
  • Optimiert über dem Falz, um sicherzustellen, dass das kritische CSS schlank war.
  • Verwendet eine websichere Schriftart (Arial), um zu vermeiden, dass eine Schriftart von einem Drittanbieterserver heruntergeladen werden muss.
  • Verwendete komprimierte Bilder
  • Keine Animations- oder Bewegungseffekte verwendet
  • Die Verwendung von Symbolen wurde eingeschränkt, um eine kleinere Untergruppe der Symbolschriftarten zu laden, die die benötigten sozialen Symbole enthält.

Das Ergebnis:

• Die CSS-Größe wurde um 94% reduziert.
• Alle Render-Blocking-Assets wurden vollständig eliminiert und die JavaScript-Größe von Divi wurde halbiert.
• Es gibt keine unnötigen Ressourcenanforderungen.
• Oberhalb der Falte wird der Inhalt sofort angezeigt.
• Erzielte 100 % auf Google PageSpeed ​​Desktop, 99 % auf Google PageSpeed ​​Mobile
• 100 % auf GTmetrix erzielt.

Was können wir für die Testseite lernen?

Letztendlich gibt Ihnen Divi die Möglichkeit, zu entscheiden, wie Sie es verwenden möchten und wie schnell Ihre Website sein soll. Die Test-Site zeigt, dass Sie nahezu perfekte Ergebnisse für die Seitengeschwindigkeit erzielen können. Aber nur weil wir nicht alle leistungsstarken Designtools verwendet haben, die Divi so großartig machen, bedeutet das nicht, dass Sie Angst haben müssen, sie zu verwenden. Wenn Sie ein Modul oder Feature auf einer Seite nicht verwenden, verarbeitet und/oder lädt Divi das Element oder sein CSS nicht unnötig. Wenn Sie sich jedoch entscheiden, ein Modul oder eine Funktion einzubinden, wird Divi darauf achten, nur die benötigten Elemente und das benötigte CSS zu verarbeiten und/oder zu laden und nicht mehr. Dies gibt Ihnen ein leichtgewichtiges Framework, auf das Sie aufbauen können, ohne sich um das Aufblähen des Webs sorgen zu müssen, wenn Sie sich entscheiden, die Leistungsfähigkeit von Divi zum Aufbau Ihrer Website zu nutzen.

Andere Tipps

Wir haben so ziemlich alle wichtigen Faktoren behandelt, die zu schnelleren Divi/WordPress-Websites beitragen. Aber es gibt noch viel mehr Dinge zu beachten, die Ihre Geschwindigkeit noch weiter verbessern können.

• Ein korrektes Divi-Child-Theme-Setup haben
• Ändern Sie Ihre WordPress-Anmelde-URL, um zu verhindern, dass diese Bots Ihren Server überlasten. Dies wäre eine gute Gelegenheit, eine benutzerdefinierte Anmeldeseite mit Divi zu erstellen.
• Vermeidung unnötiger Anrufe bei externen Diensten. Einige Plugins und Einbettungen erfordern, dass Sie Dateien verwenden, die auf ihren Servern gehostet werden. Diese zusätzlichen Aufrufe verlangsamen das Laden der Seite.
• Integrieren Sie Lazy Loading für Bilder und Videos für eine bessere Seitenladegeschwindigkeit.

Verwenden von Divi und anderen Leistungs-Plugins von Drittanbietern

Die integrierten Leistungsoptimierungen von Divi beschleunigen jede Divi-Site, da sie das Aufblähen beseitigen, das mit keinem Leistungs-Plugin beseitigt werden kann. Sie können jedoch zusätzlich zu den integrierten Optimierungen von Divi zusätzliche Leistungs-Plugins von Drittanbietern verwenden, um die Geschwindigkeit Ihrer Website zu erhöhen. Leistungsverbesserungen von Divi gelten nur für Divi und nicht für Plugins von Drittanbietern, sodass Sie von Ihren Leistungs-Plugins in anderen Bereichen außerhalb von Divi profitieren können. Sie können beispielsweise immer noch davon profitieren, Ihre Website zwischenzuspeichern und ein CDN zu verwenden.

Umgang mit widersprüchlichen Leistungs-Plugins

Da Divi bereits optimiert ist, kann die Verwendung eines Leistungs-Plugins eines Drittanbieters zu Konflikten führen. Daher ist es wichtig, dass Sie Ihr Divi-Theme auf dem neuesten Stand halten und alle Plugins von Drittanbietern vorher gründlich testen. Wir versuchen unser Bestes, um die integrierten Optimierungen von Divi mit anderen beliebten Optimierungs-Plugins zu testen. Aber es gibt keine Möglichkeit, alle Nuancen einer Website abzuschätzen, um zu sagen, dass sie für alle am besten funktioniert oder dass keine Konflikte auftreten.

Zum Beispiel könnten Plugins von Drittanbietern JavaScript-Dateien automatisch so verkleinern oder verschieben, dass Fehler/Probleme auftreten können. Testen Sie Ihre Website daher gründlich.

Und wenn es einen Konflikt gibt, müssen Sie möglicherweise die integrierten Optionen von Divi deaktivieren und das Drittanbieter-Plugin die Dinge verarbeiten lassen. Zögern Sie nicht, unser Support-Team zu kontaktieren, um Hilfe bei allen Problemen zu erhalten, auf die Sie stoßen können. Wir helfen gerne bei der Sortierung.

Abschließende Gedanken

Divi ist schneller als je zuvor. Mit integrierten Leistungs-Upgrades haben Ihre standardmäßigen Divi-Installationen schnellere Seitenladezeiten im Frontend, einen schnelleren WordPress-Administrator im Backend und einen schnelleren Divi Builder zum Bearbeiten und Gestalten Ihrer Site. Dies ist ein guter Anfang, aber es gibt noch viel mehr zu tun, um sicherzustellen, dass Ihre Divi-Site so schnell wie möglich läuft. Die in diesem Artikel enthaltenen Geschwindigkeits- und Leistungsoptimierungen werden die Geschwindigkeit Ihrer Website definitiv erhöhen. Zum größten Teil würden diese Optimierungen für jede WordPress-Site / jedes WordPress-Theme gelten, nicht nur für Divi. Und es ist überraschend, wie viele einfache Dinge Sie kostenlos tun können!

Ich bin mir sicher, dass es Unmengen an Vorschlägen und Ressourcen gibt, die nicht erwähnt wurden, also teile uns diese gerne in den Kommentaren mit.

Ich freue mich darauf, von dir zu hören.

Danke schön!

Ausgewähltes Bild über Sammby / shutterstock.com