Rate Your Experience

Welche Funktionen hat der Site Speed Accelerator?

Geändert am: Fri, 29 Oct, 2021

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


CSS


  1. Critical CSS: Rendert Critical CSS in das Head-Tag und lädt die Stylesheets "lazy". Dies verhindert, dass die Seite "springt", wenn CSS langsam geladen wird. Mit anderen Worten: Critical CSS hilft Ihrer Seite, besser zu laden, indem nicht alle Stile 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 (Erweitert)" klicken, wodurch Sie bestimmte URLs eingeben können, die von der Critical CSS-Funktion entweder verarbeitet oder übersprungen werden sollen:

  2. image


    image


  3. Unbenutzte CSS entfernen: Entfernt alle CSS, die von der aktuellen Seite nicht verwendet werden, und liefert eine verkleinerte Version der nicht verwendeten CSS, was zu kleineren Seitengrößen und schnellerem Laden führt.

  4. Unbenutztes CSS seitenweise entfernen: Entfernt alle CSS-Klassen, die nicht auf jeder einzelnen URL verwendet werden, und serviert eine minimierte Version des CSS, das auf dieser URL verwendet wird. (Die Funktion "Unverwendetes CSS entfernen" muss aktiviert sein, um auch diese Funktion zu verwenden).
    WARNUNG: Dies sollte zwar den Speed Score Ihrer Webseite erhöhen, kann aber dazu führen, dass Ihre Webseite für echte Nutzer langsamer ist, wenn die meisten Seiten den gleichen Satz an CSS verwenden. Dies geschieht, weil der Nutzer für jede Seite, die er besucht, eine neue Datei herunterladen muss.



  5. image


  6. Fonts optimieren: Schriften, die im Inline-Stylesheet deklariert sind, werden optimiert, um Flashes beim Laden der Schriften zu verhindern, und mehrere Font-API-Aufrufe werden in eine Anfrage verpackt.

  7. Fonts vorladen: Laden Sie Fonts, die in externen CSS-Dateien gefunden werden, vor, damit sie schneller zur Anzeige bereit sind, ohne das Rendering der Seite zu blockieren. Sie sollten diese Einstellung in Betracht ziehen, wenn Pagespeed Insights vorschlägt, "Preload Key Requests" mit Schriftdateien als vorzuladende Ressourcen zu verwenden.

Bilder


1. Lazy Loading von Bildern: Hilft Ihrer Seite, schneller zu laden, indem Bilder nur dann geladen werden, wenn der Nutzer sie tatsächlich sieht. 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 dem ersten Bildschirm angezeigt werden, nicht die Bilder weiter unten auf der Seite. (Diese Funktion muss aktiviert sein, wenn Sie die Funktionen "Next-Gen Formate" und "Bilder skalieren" verwenden)

2. Next-Gen Formate: In unterstützten Browsern werden mit dieser Funktion Bilder im WebP-Format angezeigt - ein neues Bildformat, das für eine geringere Dateigröße ausgelegt ist

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

4. Hintergrundbilder vorladen: Hinzufügen von Preload-Tags für Hintergrundbilder, 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 Hintergründe definiert sind, beschleunigen.


image



Effiziente statische Cache-Richtlinie


TDiese Funktion weist den Browser an, Ihre statischen Assets zu cachen, was die Geschwindigkeit Ihrer Seite erhöhen kann, da der Nutzer diese Assets nicht mehr als einmal herunterladen muss. Mit dieser Funktion wird der Caching-Header für Ihre Assets auf eine angemessene Zeitspanne gesetzt. Die verfügbaren statischen Assets, die gecached werden können, sind:

  1. Bilder

  2. Stylesheets

  3. Skripte

  4. Fonts


image


Sie können auch bestimmte statische Cache-URL-Regeln wie folgt festlegen:


image


"Pre-connect"


  1. Pre-Connect Ursprünge: 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 Vorverbindung zu diesen Domains herstellen soll, um das Laden dieser Assets zu beschleunigen.


image


HTML reduzieren


1. Javascript reduzieren: Entfernt unnötige Leerzeichen, Kommentare und Zeichen aus JavaScript-Dateien, um die Größe der JavaScript-Payloads zu minimieren und die Zeit zum Senden der Datei an den Nutzer zu reduzieren.


2. CSS reduzieren: Entfernt unnötige Leerzeichen, Kommentare und Zeichen aus den CSS-Dateien, um die Größe der CSS-Payloads zu minimieren und die Zeit zum Senden der Datei an den Nutzer zu reduzieren.


3. HTML reduzieren: Entfernt unnötige Leerzeichen, Attributkommentare und Zeichen aus dem HTML, um die Seitengröße zu minimieren und die Zeit zum Senden der Seite an den Nutzer zu reduzieren.


Beachten Sie, dass Sie die Möglichkeit haben, bestimmtes HTML von der Reduzierung auszuschließen.


a. IE-Bedingte Kommentare beibehalten: IE-Bedingte Kommentare im HTML beibehalten.


b. Standard-Attributwerte beibehalten: Standardattribute für Tag beibehalten.


c. End-Tags beibehalten: Behält End-Tags bei.


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


e. Leerzeichen beibehalten: Leerzeichen zwischen Inline-Tags beibehalten, aber dennoch mehrere Leerzeichen zu einem einzigen Leerzeichen zusammenfassen.


image



Skript-Ausführung


  1. Script Delay: Verzögert das Laden und Ausführen von Javascript, bis der primäre Inhalt geladen ist.
image



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 'no defer'-Parametern in Ihrem Code tun. Hier finden Sie einige Informationen, wie Sie diese implementieren können:

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


Sie müssen dann auf diesen Button klicken:


image


Und dann das Kontrollkästchen:


image


Alternativ können Sie "URL-Regeln" festlegen, um auszuschließen, dass "Script Delay" auf bestimmte Skripte, Seiten oder Verzeichnisse auf Ihrer Webseite angewendet wird:


image


image


image


Sie sind sich nicht sicher, welche Skripte ausgeschlossen werden müssen? Sie können die Funktion "Verzögerte Skripte suchen" verwenden, um die richtige Kombination von auszuschließenden Skripten zu ermitteln.


image


Beginnen Sie damit, alle Skripte auf "nein" zu schalten, und ermitteln Sie dann nach dem Ausschlussverfahren, 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!


image



2. Ad Delay: Verzögert das Laden und Ausführen von Anzeigen, bis der primäre Inhalt geladen ist.


3. CPU-intensive Tasks reduzieren: Verlangsamt Javascript-Aufgaben, die zu viel CPU beanspruchen, damit der Prozessor des Browsers freie Zeit zum Rendern der Seite hat. Kann das Timing von SetInterval- und SetTimeout-Aufrufen beeinflussen.


Inhalt


  1. Lazy Load Iframes: Mit dieser Funktion können Sie Iframes, die außerhalb der anfänglichen Bildschirmansicht erscheinen, verzögert laden. Dies hilft Ihrer Seite, schneller zu laden, indem Iframes nur dann geladen werden, wenn der Nutzer sie tatsächlich sieht.
image


Sie können auch Regeln für "Lazy Load Iframe URL" 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 den Accelerator laden und eine Version generieren.



Lädt ...