Speed advisor: was Sie für eine schnellere Website einschalten sollten

Der Geschwindigkeits-Berater liest Ihre Startseite (und den zuletzt importierten Lighthouse-Bericht) und listet, was in Baza Helper einzuschalten ist und was nur das Theme beheben kann. Er ist eine Karte oben in der Performance-Diagnose unter Baza Helper > Cache und Optimierung.

Starten

1. Öffnen Sie Baza Helper > Cache und Optimierung und suchen Sie die Karte Geschwindigkeits-Berater.
2. Klicken Sie auf Diese Website analysieren. Das Plugin ruft Ihre Startseite von derselben Website ab und nutzt auch den letzten Lighthouse-Bericht, falls Sie einen importiert haben.
3. Lesen Sie die Empfehlungen. Jeder Punkt hat eine kurze Begründung. Eine Empfehlung, die schon aktiv ist, wird nicht erneut angeboten.
4. Haken Sie an, was Sie möchten, und klicken Sie auf Ausgewähltes einschalten. Die Schalter werden gemeinsam eingeschaltet, der Seitencache geleert und ein Aufwärmen gestartet.
5. Öffnen Sie die Website und testen Sie sie, besonders Formulare, Menüs und Slider.

Ein Rat, den das Plugin anwenden kann, hat einen Schalter, und die Schaltfläche wendet die gewählten auf einmal an. Ein Rat, den das Plugin nicht anwenden kann, ist einfacher Text mit dem Etikett Selbst erledigen und ohne Schalter.

Ist alles Empfohlene schon an, sagt die Karte „Nichts einzuschalten: Die empfohlenen Schalter sind bereits an“. Antwortet die Startseite nicht mit HTTP 200, sagt der Advisor das und gibt keine Empfehlungen.

Was er empfehlen kann

• Seiten-Cache mit statischer Auslieferung: Die Seite wird für jeden Besucher neu gebaut, das ist die Zeit bis zum ersten Byte. Eine gespeicherte Kopie antwortet sofort.
• Längere Cache-Lebensdauer (6 Stunden): Eine Kopie, die fünf Minuten lebt, ist oft weg, wenn ein Besucher oder ein Speed-Test kommt. Der Cache wird bei Inhaltsänderungen ohnehin geleert.
• Lokale Stylesheets in einer Datei zusammenfassen, wenn mehr als sechs Stylesheets die Seite blockieren: Eine Datei ist eine Anfrage statt vieler.
• Schriften: Text sofort anzeigen (font-display swap) und die Hauptschriften früh laden (automatisches Preload).
• Skripte von Elementor und seinen Add-ons verzögern.
• Alle Skripte verzögern, einschließlich jQuery und Theme: Das Plugin verzögert sie in sicherer Reihenfolge und hält jQuery zuerst, wenn die Seite Inline-Code ausführt, der es braucht.
• Das größte Bild schützen und vorladen: Das größte Bild des ersten Bildschirms wird gefunden und zuerst geladen und nie per Lazy Loading verzögert.
• Bilder unterhalb des ersten Bildschirms verzögert laden, wenn die Seite mehr als acht Bilder hat.
• Stile weglassen, die die Startseite nicht nutzt: Zeigt der Lighthouse-Bericht ein Stylesheet, das auf der Startseite zu mehr als 90 Prozent ungenutzt ist, bietet der Advisor an, es nur auf der Startseite wegzulassen (er fügt den Handle mit @front zu den Regeln unter „Skripte und Styles“ hinzu). Zusammengeführte Kopien, geschützte Handles und jQuery werden nie angeboten. Prüfen Sie danach die Seite.
• Die eigenen Skripte des Themes von der Verzögerung ausnehmen: wird gezeigt, wenn das Verzögern aller Skripte an ist und der erste Bildschirm später als eine Sekunde nach dem Eintreffen der Seite gezeichnet wird.
• Die zusammengeführten Stylesheets nach dem ersten Bildschirm laden: dafür wird Critical CSS gebraucht.
• Selbst erledigen: Erzeugen Sie Kopien großer Bilder in Telefongröße (Tab Bilder, „Erzeugen“ mit „Alle neu erzeugen“), erzeugen Sie Critical CSS mit „Automatisch generieren“ im Critical-CSS-Bereich und erzeugen Sie es erneut, wenn es größer als 30 KB ist (es wird für eine Bildschirmgröße gemacht, das Telefon). Prüfen Sie danach die Seite.

Für den Theme-Entwickler

Manche Probleme lässt kein Plugin-Schalter beheben. Eine zweite Liste, Für den Theme-Entwickler, sammelt sie aus der Seite und dem Bericht: Skripte im Head ohne defer und das Plugin oder Theme, das sie ausgibt, erzwungenes Reflow, Textfarben mit zu wenig Kontrast, ARIA-Attribute, die am Element nicht erlaubt sind, Bilder größer als angezeigt, Styles, die die Seite nicht nutzt, und zu viel Arbeit im Hauptthread. Klicken Sie auf Liste kopieren, um sie an die Person zu schicken, die Ihr Theme baut.

Muss jQuery zuerst bleiben, weil die Seite Inline-Code ausgibt, der es selbst aufruft, sagt das der Advisor und nennt die Skripte. Packen Sie diesen Code in einen DOMContentLoaded-Handler oder geben Sie ihn mit wp_add_inline_script aus.

Gut zu wissen

• Der Advisor ändert nur die eigenen Schalter des Plugins unter Cache und Optimierung. Er bearbeitet nie Ihr Theme oder andere Plugins.
• Er liest nur die Startseite. Starten Sie ihn erneut, nachdem Sie das Theme geändert oder ein Plugin hinzugefügt haben.
• Importieren Sie in der Diagnose-Karte einen frischen Lighthouse-Bericht, um Fakten zu ungenutztem CSS, Kontrast und großen Bildern zu erhalten.