Pagespeed-Optimierung mit der Greyd.Suite

Für schnelle WordPress Websites brauchst du keine Entwickler! Erfahre hier, wie einfach du deine Website optimieren kannst.

Visualisierung einer Website, eines Formulars und eines Pagespeed Testes mit grünem Ergebnis

Portrait von Sandra Kurze

Sandra Kurze /

14.08.2020


So baust du schnelle Websites ohne technisches Know-how

Die Ladezeit deiner Website ist einer der wichtigsten Ranking-Faktoren bei Google und somit ausschlaggebend dafür, ob Nutzer deine Seite unter den ersten Suchergebnissen finden oder nicht. Doch leider ist es oft gar nicht so einfach, eine schnelle Seite zu erstellen. Neben zahlreichen „externen“ Einflussfaktoren wie etwa deinem Hosting, kommt es vor allem darauf an, wie und mit welchen Tools deine Website aufgebaut ist. Pagebuilder und Themes etwa sind nützliche Tools, um schnell und ohne Programmierung schöne Websites aufzubauen. In Sachen Pagespeed jedoch bringen sie oft Nachteile. Insbesondere auf mobilen Screens müssen hier leider oft große Abstriche gemacht werden. Erfahre mehr dazu in unserem Artikel „Pagespeed & WordPress“.

Die gute Nachricht: Mit der GREYD.SUITE gibt es jetzt endlich eine Lösung, die dir alle Vorteile eines Pagebuilders bietet, dabei aber deutlich schnellere Websites ermöglicht.

Wie schnell sind GREYD.SUITE Websites?

Um den Pagespeed der GREYD.SUITE realistisch bewerten zu können, haben wir ein und dieselbe Website unter identischen Bedingungen (gleicher Server, gleiche Inhalte, gleiche WordPress Version, etc.) einmal mit der GREYD.SUITE und einmal mit einem der führenden WordPress Pagebuilder erstellt. Der Google Pagespeed Test zeigt: Die GREYD Website ist bereits ohne jegliche Optimierungen sowohl mobil als auch auf dem Desktop schneller.

Insbesondere auf mobilen Screens hat die GREYD.SUITE einen klaren Vorsprung von über 10 Punkten.

Pagebuilder Website mobil:

Pagespeed Elementor mobil

GREYD.SUITE Website mobil:

Pagebuilder Website Desktop:

Pagespped Pagebuilder Website Desktop

GREYD.SUITE Website Desktop:

Greyd Website Desktop

Noch schnellere Ladezeiten mit 2 Klicks

Die GREYD.SUITE bietet dir aber noch mehr in Sachen Pagespeed: Mit wenigen Klicks und ganz ohne technisches Know-how kannst du die Ladegeschwindigkeit deiner Website noch weiter optimieren. Dafür sind in der GREYD.SUITE spezielle Pagespeed-Features nativ integriert. Zudem verfügt die GREYD.SUITE über eine optimierte Integration des beliebten Pagespeed-Plugins Autoptimize.

  • Nativer Lazy Load für Bilder & Animationen

    Die GREYD.SUITE bietet dir in den Settings die Möglichkeit, Bilder und Animationen optimiert zu laden. Das bedeutet, dass Bilder & Animationen initial in geringerer Auflösung und dann dynamisch nachgeladen werden, was den Pagespeed enorm verbessern kann. Diese Funktion haben wir in der GREYD.SUITE standardmäßig bereits aktiviert.
  • Pagespeed-Optimierung für Lottie Animationen

    Für die Lottie Library, eine vor allem bei Designern beliebte Datenbank mit Animationen, bietet die GREYD.SUITE ebenfalls eine ganz einfache umsetzbare Optimierung. So kannst du auch hier mit einem Klick einen Lazy Load aktivieren. Anstelle der Animation wird beim initialen Laden deiner Seite dann erst einmal ein statisches Platzhalterbild geladen. Die Animation startet mit einigen Sekunden, wodurch der Pagespeed-Wert „Zeit bis Interaktivität“ verbessert wird. Auf diese Weise können selbst komplexe Animationen eingebunden werden, ohne zu Lasten des Pagespeeds zu gehen.
  • Optimierte Autoptimize Integration

    Das Plugin Autoptimize zählt zu den beliebtesten Plugins in Sachen Pagespeed Verbesserung. Durch die Zusammenfassung und Optimierung von JavaScript Dateien, CSS und anderen Skripten wird hier die Ladezeit teilweise massiv verbessert. Allerdings erfordert das individuelle Einstellen der zahlreichen Optionen einiges an technischem Know-how. Deshalb bietet dir die GREYD.SUITE eine optimierte Integration. Statt alle Einstellungen selbst vornehmen zu müssen, kannst du hierbei ganz einfach die von GREYD empfohlenen Einstellungen aktivieren. Individuelle Anpassungen sind natürlich trotzdem möglich. Zusätzlich vereinfacht dir die GREYD.SUITE die Arbeit mit dem Plugin: So musst du etwa den Cache nicht ständig manuell löschen, sondern kannst auch das ganz bequem automatisieren.

Im folgenden Tutorial-Video zeigen wir dir, wie du mit nur 2 Klicks die oben aufgeführten Optimierungen für deine Seite nutzt.

Weitere Tutorial-Videos findest du übrigens im GREYD.Helpcenter.

Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren

Video laden

Pagespeed Test mit GREYD Optimierung

Die oben aufgeführten Pagespeed Tests haben wir nun nochmals mit den in der GREYD.SUITE angebotenen Optimierungsmöglichkeiten durchgeführt. Zur Erinnerung: Um diese Optimierungen für deine Seite zu nutzen, ist keinerlei technisches Know-how oder individuelle Entwicklung nötig.

Pagebuilder Website mobil:

Screenshot Pagebuilder Website mobil

Pagebuilder Website Desktop:

Pagebuilder Website Desktop:

GREYD.SUITE Website Desktop:

GREYD.SUITE Website Desktop

GREYD.SUITE Website mobil:

GREYD.SUITE Website mobil

Mobil hat sich damit der Pagespeed der GREYD.SUITE auf knapp 30 Punkte Vorsprung verbessert und auch auf Desktop konnte der Pagespeed Wert noch einmal gesteigert werden.

Führt man das Ganze nun nochmals auf einer etwas komplexeren Seite durch, wird der Unterschied noch deutlicher:

Pagebuilder Website mobil:

Pagebuilder Website mobil

GREYD.SUITE Website mobil:

GREYD.SUITE Website mobil

Pagebuilder Website Desktop:

Pagebuilder Website Desktop

GREYD.SUITE Website Desktop:

GREYD.SUITE Website Desktop

Mobil beträgt der Vorsprung der GREYD.SUITE hier ganze 49 Punkte. Auf Desktop-Bildschirmen ebenfalls fast 20 Punkte.

Was genau macht die GREYD.SUITE so schnell?

Die Möglichkeit, Design-Einstellungen global für die gesamte Website vorzunehmen, ist nicht nur in Sachen Handhabung und Zeitersparnis ein großer Vorteil – auch der Pagespeed profitiert davon. Durch die zentralen Einstellungen wird nicht für jedes Element eigener Code generiert, sondern lediglich auf die globalen Settings referenziert.

Zusätzlich sind bei Verwendung der GREYD.SUITE deutlich weniger externe Plugins nötig, da die All-in-one Online-Suite für Unternehmen relevante Funktionen bereits nativ integriert hat. So entstehen keine Code-Wüsten, wie es bei vielen WordPress Seiten der Fall ist.

Ein eigener Processor komprimiert zudem den Code und kümmert sich um die Einbindung nach aktuellsten Best Practices, wodurch eine saubere CSS-Datei erzeugt wird. Zusätzlich findet der Großteil der Verarbeitung Server-seitig statt. Dadurch bleibt die Anzahl der Client-seitigen Skripte auf ein Minimum reduziert.

Update: Was ändert sich mit WordPress 5.5?

Mit WordPress 5.5 gibt es einige Neuerungen in Sachen Pagespeed. Erstmals gibt es ein WordPress-natives Lazy Load Feature zur Verbesserung der Ladezeiten. Wir haben uns sämtliche Test-Seiten angesehen und überprüft, inwiefern diese Neuerung Einfluss auf die Ladezeiten hat. Prozentual am meisten profitieren natürlich die mit dem Pagebuilder erstellten Websites, da hier zuvor keinerlei Pagespeed Optimierung stattgefunden hat. Aber auch die GREYD.SUITE Websites werden mit dem WordPress Update noch schneller und schneiden damit weiterhin deutlich besser ab als die Pagebuilder Websites. Insgesamt lässt sich festhalten, dass der WordPress Lazy Load und der GREYD.SUITE Lazy Load optimal zusammenarbeiten und zusammen für einen noch größeren Pagespeed Boost sorgen.

Du willst unsere Pagespeed Tests selbst nachvollziehen?


Portrait von Sandra Kurze

Von Sandra Kurze

Texten ist eine absolute Leidenschaft von Sandra – am liebsten natürlich zu Themen, die sie auch inhaltlich fesseln. Mit Websites und Online Marketing beschäftigt sie sich seit mehreren Jahren – sowohl aus Dienstleister- als auch aus der Kunden-Perspektive. Perfekte Voraussetzungen also für den Greyd Blog!

Recent in Greyd.Suite

Menschen auf einer technischen Konferenz im Hintergrund, Hotelbuchungsformular im Frontend

So erstellst du dynamische Event-Buchungsformulare

Mehr erfahren

Ein Geschäftsmann, der seine Finanzen berechnet, mit einem Stapel Münzen im Vordergrund, der von links nach rechts immer höher wird, was Wachstum symbolisiert. In der Hand der Person wächst ein kleiner Baum aus dem Münzstapel, der für finanzielles Wachstum und Nachhaltigkeit steht.

Skalierbarkeit mit der Greyd.Suite

Mehr erfahren

Ein verängstigter Mann, der an seinen Nägeln kaut, steht vor einer heruntergekommenen Tür ohne Griff und veranschaulicht die Frustration, auf ein Popup-Fenster ohne Schließen-Button zu stoßen.

Wann braucht dein Pop-up einen Schließen Button?

Mehr erfahren

Screenshot der Greyd.Suite Preise Übersicht

So findest du das richtige Greyd.Suite Paket

Mehr erfahren

A group of three people, two men and one woman, are smiling and looking at a computer screen together. The man on the left is of African descent, the man in the middle has gray hair, and the woman has blonde hair styled in a braid. The lower part of the image features a partially visible computer screen displaying an online shop with various products.

Wie man Argumente gegen die Barrierefreiheit entkräftet

Mehr erfahren