Leap optimiert die Geschwindigkeit Ihrer Webseite mit einem einzigen Tool. Ezoic's Leap übernimmt die Arbeit mehrerer Plugins und umfasst die folgenden 18 Funktionen (weitere werden laufend hinzugefügt!):

CSS

Critical CSS: Bindet Critical CSS in den Head-Tag ein und lädt die Stylesheets mit Verzögerung. Dies verhindert, dass die Webseite "springt", wenn CSS langsam geladen wird. Mit anderen Worten: Critical CSS hilft Ihrer Webseite, besser zu laden, indem nicht alle Styles auf einmal geladen werden, und verbessert die Geschwindigkeit, indem die wichtigen CSS inline platziert werden. Innerhalb der Critical CSS-Funktion können Sie auch auf den Link "Bestimmte Dateien blockieren oder hervorheben (in den Erweiterten Einstellungen)" klicken. Damit können Sie bestimmte URLs eingeben, die von der Critical CSS-Funktion entweder verarbeitet oder übersprungen werden sollen:

Ungenutzte CSS entfernen: Entfernt alle CSS, die von der aktuellen Seite nicht verwendet werden, und liefert eine verkleinerte Version der nicht verwendeten CSS, was zu einer kleineren Seitengröße und einem schnelleren Laden führt.


Nicht verwendete CSS nach Seite entfernen: Entfernt alle CSS-Klassen, die nicht auf jeder einzelnen URL verwendet werden, und liefert eine verkleinerte Version der CSS, die auf dieser URL verwendet wird. (Die Funktion Unbenutztes CSS entfernen muss aktiviert sein, um diese Funktion ebenfalls nutzen zu können).

WARNUNG: Dies sollte zwar die Geschwindigkeit Ihrer Webseite erhöhen, kann aber dazu führen, dass Ihre Webseite für die tatsächlichen Nutzer langsamer ist, wenn die meisten Seiten die gleichen CSS-Klassen verwenden. Dies geschieht, weil der Nutzer für jede Seite, die er besucht, eine neue Datei herunterladen muss.

Schriftarten optimieren: Im Inline-Stylesheet deklarierte Schriften werden optimiert, um Blitze beim Laden von Schriften zu vermeiden, und mehrere Schrift-API-Aufrufe werden in eine Anfrage verpackt.


Schriftarten preloaden: Laden Sie in externen CSS-Dateien gefundene Schriftarten vor, damit sie schneller angezeigt werden können, ohne das Rendering der Seite zu blockieren. Sie sollten diese Einstellung in Erwägung ziehen, wenn Pagespeed Insights vorschlägt, 'Preload Key Requests' mit Schriftdateien als vorzuladende Ressourcen zu verwenden.


 Bilder

1. Lazy Loading von Bildern: hilft Ihrer Webseite, schneller zu laden, indem Bilder nur dann geladen werden, wenn der Nutzer sie auch tatsächlich sehen wird. Die Bilder weiter unten auf der Seite werden geladen, wenn der Nutzer nach unten scrollt. Die einzigen Bilder, die sofort geladen werden, sind die, die auf der ersten Seite angezeigt werden, nicht die Bilder weiter unten auf der Seite. (Diese Funktion muss aktiviert sein, wenn Sie die Funktionen Next-Gen Formats und Resize Images verwenden)

2. Next-Gen-Formate: In unterstützten Browsern stellt diese Funktion Bilder im WebP-Format bereit - einem neuen Bildformat, das für eine geringere Dateigröße entwickelt wurde.

3. Größe der Bilder ändern: Passt die Größe der Bilder auf Ihrer Seite automatisch an die Bildschirmgröße des Nutzers an, um die Übertragungszeiten zu minimieren und gleichzeitig die Bildqualität zu erhalten.

4. Hintergrundbilder preloaden: Fügen Sie Preload-Tags für Hintergrundbilder hinzu, die in Inline-Stylesheets definiert sind. Hintergrundbilder werden erst geladen, wenn alle Stylesheets verarbeitet wurden. Diese Funktion sollte also das Laden von großen Bildern, die als Hintergrundbilder definiert sind, beschleunigen.

Effiziente statische Cache-Policy

Diese Funktion weist den Browser an, Ihre statischen Assets zu cachen, was die Geschwindigkeit Ihrer Webseite erhöhen kann, da der Nutzer diese Assets nicht mehr als einmal herunterladen muss. Diese Funktion setzt den Caching-Header Ihrer Assets auf eine angemessene Zeitspanne. Die verfügbaren statischen Assets, die gecacht werden können, sind:

Bilder

Stylesheets

Skripte

Schriftarten

Pre-connect 

Pre-Connect Origins: Analysiert Ihre Seite, um andere Domains zu identifizieren, von denen Sie Assets anfordern. Es fügt dann Tags hinzu, um dem Browser mitzuteilen, dass er eine Vorabverbindung zu diesen Domains herstellen soll, um das Laden dieser Assets zu beschleunigen.

HTML verkleinern

1. Javascript verkleinern: Entfernt unnötige Leerzeichen, Kommentare und Zeichen aus JavaScript-Dateien, um die Größe von Javascript-Nutzdaten zu minimieren und die Zeit für die Übertragung der Datei an den Nutzer zu verkürzen.

2. CSS verkleinern: Entfernen Sie unnötige Leerzeichen, Kommentare und Zeichen aus den CSS-Dateien, um die Größe der CSS-Payloads zu minimieren und die Zeit für das Senden der Datei an den Nutzer zu verkürzen.

3. HTML verkleinern: Entfernen Sie unnötige Leerzeichen, Attribute, Kommentare und Zeichen aus dem HTML-Code, um die Seitengröße zu minimieren und die Zeit für die Übermittlung der Seite an den Nutzer zu verkürzen.



Beachten Sie, dass Sie die Möglichkeit haben, bestimmten HTML-Code von der Verkleinerung auszuschließen.

a. IE-Bedingte Kommentare beibehalten: Behalten Sie die bedingten IE-Kommentare in der HTML-Datei bei.

b. Standard-Attributwerte beibehalten: Behalten Sie die Standardattribute für den Tag bei.

c. End-Tags beibehalten: End-Tags beibehalten.

d. Behalten Sie Anführungszeichen bei: Behalten Sie Anführungszeichen um Tag-Attribute wie type='text/javascript' bei.

e. Whitespace beibehalten: Behalten Sie Leerzeichen zwischen Inline-Tags bei, fassen Sie jedoch mehrere Leerzeichen zu einem einzigen Leerzeichen zusammen.

Skript-Ausführung

Skript-Verzögerung: Verzögert das Laden und die Ausführung von Javascript, bis der primäre Inhalt geladen ist.

Sie können auch URL-Regeln für die Skriptverzögerung wie folgt festlegen. Wenn Sie bestimmte URLs von der Skriptverzögerung ausschließen möchten, können Sie dies mit dem Parameter 'no defer' in Ihrem Code tun. Hier finden Sie Informationen darüber, wie Sie diese implementieren:

https://developers.google.com/speed/pagespeed/service/DeferJavaScript

Alternativ können Sie 'URL-Regeln' festlegen, um die Anwendung von 'Skript-Verzögerung' auf bestimmte Skripte, Seiten oder Verzeichnisse auf Ihrer Webseite auszuschließen:

Sie sind sich nicht sicher, welche Skripte ausgeschlossen werden sollen? Sie können die Funktion "Verzögerte Skripte suchen" verwenden, um die richtige Kombination von Skripten zu ermitteln, die Sie ausschließen möchten.

Beginnen Sie damit, alle Skripte auf 'nein' zu setzen, und ermitteln Sie dann anhand des Ausschlussverfahrens, welche Skripte sicher verzögert werden können ('ja'), ohne die Funktionalität zu beeinträchtigen. Beachten Sie, dass oft mehr als ein Skript ausgeschlossen werden muss ('nein'), bevor Sie die richtige Kombination gefunden haben!

2.. Reduzieren Sie CPU-intensive Aufgaben: Verlangsamt Javascript-Aufgaben, die zu viel CPU verbrauchen, so dass der Prozessor des Browsers freie Zeit hat, die Seite zu rendern. Kann das Timing von SetInterval- und SetTimeout-Aufrufen beeinflussen.

Inhalt

Lazy Load Iframes: Mit dieser Funktion können Sie Iframes, die außerhalb der anfänglichen Bildschirmansicht erscheinen, verzögert laden. Dadurch wird Ihre Webseite schneller geladen, da Iframes nur dann geladen werden, wenn der Nutzer sie tatsächlich sieht.

Sie können auch Regeln für lazy load iframe URLs festlegen.

Mit diesen Funktionen können Ihre Nutzer deutlich schneller mit Ihren Seiten interagieren, während weniger wichtige Elemente im Hintergrund geladen werden. Zur Implementierung sollten Sie Leap laden und eine Version erstellen.