Ladezeit¶

Voraussetzung

Modul PageSpeed muss unter Theme → Module aktiv sein.

Diese Seite ist noch im Aufbau

Angaben und Abbildungen sind gegen das Theme geprüft. Die ausführliche Beschreibung folgt.

Wozu¶

Das Modul bündelt alles, was die Ladezeit betrifft. Es ersetzt die früheren Einzelmodule Preloader, Cache und Critical CSS.

Es ersetzt die früheren Einzelmodule Preloader, Cache und Critical CSS.

Einstellungen¶

Unter Theme → Einstellungen → PageSpeed, in sieben Abschnitten:

Abschnitt	Wofür
Dynamic Content	Inhalte erst nach dem Seitenaufbau nachladen und sanft einblenden
Bilder	Logo und Beitragsbild vorladen, HTML nach der Preload-Klasse scannen
Schriftarten	Schriften vorladen und `font-display` setzen
Assets	Skripte verzögert laden, Stylesheets ohne Render-Blockade
Block assets	die Stylesheets der Core-Blöcke nur laden, wenn der Block vorkommt
Ressourcenhinweise	Vorverbinden und DNS-Prefetch für externe Adressen
Browser-Caching	Cache-Richtlinien in die `.htaccess` schreiben

Der Abschnitt Assets im Reiter PageSpeed

Der Abschnitt Assets öffnet mit dem Schalter Asset-Laden steuern weitere Bereiche: erkannte Assets mit zusätzlichen URLs zum Scannen, das Laden nach der ersten Interaktion samt Ausnahmen und Höchstwartezeit, und die Stylesheets, die ohne Render-Blockade laden sollen.

Bilder vorladen¶

Der Abschnitt Bilder im Reiter PageSpeed

Logo und Beitragsbild lassen sich hier gezielt vorladen. Zusätzlich kann das Theme das HTML nach der CSS-Klasse preload durchsuchen: So markierte Bilder werden vorgeladen und bekommen fetchpriority="high", loading="eager" und decoding="async".

Vorladen sparsam einsetzen

Jedes vorgeladene Bild nimmt Bandbreite von den übrigen. Sinnvoll ist es für das eine Bild, das im ersten Bildschirmausschnitt sichtbar ist — meist Logo und Beitragsbild. Die Höchstzahl steuert der Filter twtheme_preload_max_images.

Vorladen und Priorisieren sind zwei Dinge

Darauf weist die Oberfläche selbst hin. Vorladen holt die Datei früher, Priorisieren stellt sie in der Warteschlange nach vorn.

Browser-Caching¶

Der Abschnitt Browser-Caching

Für Apache schreibt das Theme auf Wunsch Cache-Richtlinien in die .htaccess. Auf nginx ist das Feld ohne Wirkung — dort gehören die Direktiven in die Server-Konfiguration.

Verwenden¶

Im Template lässt sich gezielt vorladen:

echo twtheme_preload_image($image_id);
twtheme_preload_fonts();

Entwicklertipps¶

Filter	Zweck
`twtheme_asset_management_enabled`	Asset-Steuerung an- oder abschalten
`twtheme_asset_delay_*`	Regeln für verzögerte Skripte
`twtheme_async_css_matches`	welche Stylesheets asynchron laden
`twtheme_preload_max_images`	Höchstzahl vorgeladener Bilder
`twtheme_pagespeed_font_display_choice`	Wert für `font-display`
`twtheme_gf_lazy_scripts_enabled`	verzögerte Gravity-Forms-Skripte

Für das Nachladen ganzer Bereiche siehe Dynamic Content.