Was OLObuild von allein tut
Einige Optimierungen sind immer aktiv und haben keine Schalter.
- Nur das Nötige. Stylesheets und Skripte von OLObuild werden nur auf Seiten geladen, die mit OLObuild erstellt wurden, und die Skripte einer Tile, zum Beispiel die der Karte, nur, wenn die Tile auf der Seite ist.
- Schriften von deinem Server. Die von der Website verwendeten Google Fonts werden einmal heruntergeladen und von der Website selbst ausgeliefert, ohne bei jedem Besuch Aufrufe an Google. Schlägt der Download fehl, verwendet die Seite die Systemschriften.
- Inhalt auf Abruf. Ab der vierten Tile wird der Inhalt eingebunden, kurz bevor er auf den Bildschirm kommt. Die ersten 3 Tiles, Formulare, Karten und Menüs sind immer sofort bereit.
- Bilder bei Bedarf. Bilder werden geladen, kurz bevor sie sichtbar werden.
- Leichte Videos. Die Tile Video zeigt mit aktivem Lazy Load (Facade), wie standardmäßig eingestellt, das Titelbild und lädt den YouTube- oder Vimeo-Player erst beim Klick.
- Animationen ohne Ballast. Eingangsanimationen starten, wenn das Element auf den Bildschirm kommt. Wer sein Betriebssystem gebeten hat, Bewegung zu reduzieren, sieht die Elemente sofort, ohne Animation.
Die Einstellungen Performance & Cache
Du findest sie unter System › Konfiguration › Performance & Dienste › Performance & Cache sowie im Tab Performance des Dashboards.
- Defer JavaScript — Die Skripte von OLObuild werden geladen, ohne die Seite aufzuhalten, und starten, wenn sie bereit ist. (Standard: Ein)
- CSS-Cache in statischen Dateien — Legt den Stil jeder Vorlage in einer Datei ab, die der Browser aufbewahrt, statt ihn neu in die Seite zu schreiben. (Standard: Ein)
- CSS minimieren — Entfernt Leerzeichen und Kommentare aus den Stylesheets von OLObuild. (Standard: Ein)
- Eigene Schriften vorladen — Startet sofort den Download der Schriften für Text und Überschriften in der verwendeten Stärke: Der Text erscheint gleich in seiner Schrift, ohne kurz danach sein Aussehen zu ändern. (Standard: Ein)
- fetchpriority hero image — Das erste Bild des ersten Abschnitts wird sofort und mit hoher Priorität geladen. Die anderen werden weiterhin verzögert geladen. (Standard: Ein)
- Lazy Load für selbst gehostete Videos — Auf der Website hochgeladene Videos, die automatisch und ohne Ton abgespielt werden, starten, sobald sie auf den Bildschirm kommen. (Standard: Ein)
- Full-page cache — Speichert fertige Seiten und liefert sie an Besucher aus, ohne sie neu aufzubauen. Lies Kapitel 3, bevor du sie aktivierst. (Standard: Aus)
- UIkit subset — Reduziert das UIkit-Stylesheet auf die Teile, die die Seiten tatsächlich verwenden. Lernt durch den Besuch der Seiten und korrigiert sich selbst. (Standard: Aus)
- CSS pro Tile — Lädt den Stil einiger Tile-Familien nur dort, wo er gebraucht wird, etwa bei Karten, Galerien und Menüs. (Standard: Aus)
- Browser-Cache für Medien (.htaccess) — Weist den Browser an, Bilder, Schriften, CSS und JS lange aufzubewahren. Funktioniert auf Apache- und LiteSpeed-Servern. (Standard: Aus)
- Automatisches DNS-Prefetch & Preconnect — Bereitet auf Seiten, die YouTube und Vimeo enthalten, die Verbindung dazu schon im Voraus vor. Die unter Eigene Domains eingetragenen Domains werden immer ausgegeben. (Standard: Ein)
- Head bereinigen — Entfernt WordPress-Skripte und -Stile, die viele Websites nicht verwenden: jQuery Migrate, Emojis, Block-Stile und Stile des klassischen Themes. (Standard: Aus)
- Critical CSS — Schreibt den Stil der ersten Abschnitte (2, unter Above-the-fold-Abschnitte) direkt in die Seite und lädt den Rest gleich danach. Er wird nach den Tagen der Cache-Dauer und beim Speichern der Vorlage neu erstellt. Critical CSS neu generieren baut ihn sofort neu auf. (Standard: Aus)
Achtung. Block CSS entfernen entfernt auch die globalen Stile von WordPress. Prüfe bei einem Block-Theme nach dem Aktivieren, ob die Website noch ihre Farben und Schriften hat.
Oben im Tab zählt Cache-Status die Seiten im Ganzseiten-Cache, die Stildateien und die Seiten mit Critical CSS und zeigt, wann der Cache zuletzt geleert wurde. Alles leeren löscht sie alle gemeinsam, zusammen mit dem UIkit-Subset und den temporären Daten von OLObuild.
Der Ganzseiten-Cache
Der Ganzseiten-Cache speichert jede fertige Seite und liefert sie an Besucher aus, ohne sie neu aufzubauen. Auf einer Website mit vielen Besuchen ist das die wichtigste Einstellung.
- Er gilt nicht für angemeldete Nutzer, für Warenkorb und Checkout von WooCommerce, für Sitemaps und für Adressen mit anderen Parametern als denen zur Nachverfolgung.
- Er hält getrennte Versionen für Computer und Smartphone sowie für jede Sprache vor.
- Jede Seite bleibt 8 Stunden im Cache.
- Er leert sich von selbst, wenn du im Builder oder in WordPress speicherst, Menüs, Theme, aktiven Header oder Footer, globale Farben und Schriften, Zuweisungsregeln oder Performance-Einstellungen änderst sowie bei jedem Update von OLObuild.
Achtung. Aktiviere ihn nicht, wenn die Website bereits ein Cache-Plugin wie LiteSpeed Cache oder WP Rocket verwendet. In diesem Fall installiert OLObuild ihn nicht, und neben dem Schalter steht im Tab, warum.
Externe Caches und Bereinigung
OLObuild steuert externe Caches nicht. Wenn die Website LiteSpeed Cache, WP Rocket, den Cache des Hostings oder Cloudflare verwendet, leere ihn selbst, nachdem du Farben, Schriften, Header oder Footer geändert hast: Sonst sehen Besucher womöglich noch die vorherige Version.
System › Werkzeuge › OLObuild-Cache › Dateien und Daten löschen löscht die erzeugten Stildateien, den Ganzseiten-Cache und die temporären Daten von OLObuild, die beim nächsten Besuch neu erstellt werden. Das hilft, wenn eine Seite einen alten Stil zeigt. Es bewirkt dasselbe wie Alles leeren im Tab Performance.
Eine schnelle Seite in der Praxis
- Bilder in der richtigen Größe. Lade Bilder hoch, die höchstens so breit sind wie der Platz, den sie einnehmen, 2000 Pixel für ein Foto in voller Breite, im Format WebP oder als komprimiertes JPEG.
- Das erste Bild sofort. Mit aktivem fetchpriority hero image, wie standardmäßig eingestellt, wird das erste Bild des ersten Abschnitts von selbst mit hoher Priorität geladen. Steht das Hauptfoto weiter unten, öffne in seiner Tile Bild Erweitert › SEO & Barrierefreiheit und wähle Eager bei Bildladeverhalten und High bei Fetch Priority.
- Wenige Schriften. 2 Familien genügen, mit insgesamt 3 oder 4 Stärken. Jede zusätzliche Stärke ist eine weitere Datei zum Herunterladen.
- Videos mit Titelbild. Verwende die Tile Video mit aktivem Lazy Load (Facade), statt den YouTube-Code in eine HTML-Tile einzufügen.
- Effekte dort, wo sie nötig sind. Animierte Hintergründe, Parallax und Hintergrundvideos wiegen mehr als ein Foto. Setze sie dort ein, wo sie etwas erzählen.
Messen
Miss die Seite mit Googles PageSpeed Insights oder mit Lighthouse in den Entwicklertools von Chrome. Mache den Test in einem Inkognito-Fenster: Angemeldet siehst du die Seite ohne Ganzseiten-Cache, langsamer als die der Besucher.
Wiederhole die Messung 2- oder 3-mal und achte vor allem auf das Laden des größten Elements (LCP) und die Stabilität des Layouts (CLS). Die Punktzahl schwankt von Test zu Test und von Smartphone zu Smartphone.