Warum die Seite eine Sekunde lang leer bleibt

Der Browser hält die Seite zurück

Ein Browser zeichnet eine Seite erst, wenn er jedes Stylesheet hat, das im Kopf der Seite aufgeführt ist. Würde er zuerst zeichnen und später gestalten, sähen Besucher ungestalteten Text an seinen Platz springen, und das sieht schlimmer aus. Also wartet er, und jedes dieser Stylesheets ist eine Datei, die das Smartphone des Besuchers herunterladen muss, bevor irgendetwas erscheint.

Skripte im Kopf verursachen dieselbe Verzögerung, sofern sie nicht als verzögert markiert sind. Wenn der Browser auf eines stößt, hört er auf, die Seite zu lesen, lädt das Skript herunter, führt es aus und macht erst dann weiter. Ein Tag-Manager, ein Chat-Widget oder ein Analyse-Snippet im Kopf fügt eine Pause ein, bevor das erste Wort erscheint.

Schriften sind die dritte Ursache und am leichtesten zu übersehen. Die Seite kann gezeichnet sein und trotzdem keinen Text zeigen, weil der Text in einer Webschrift gesetzt ist, die noch nicht angekommen ist. Die meisten Browser verbergen diesen Text bis zu drei Sekunden lang, statt ihn in einer Ersatzschrift anzuzeigen.

Was Ihnen das kostenlose Audit zeigt

Das kostenlose Audit führt dieselbe Browsermessung aus, die Google verwendet. Zwei Werte zählen hier. First Contentful Paint ist der Moment, in dem der erste Text oder das erste Bild erscheint. Largest Contentful Paint ist der Moment, in dem der Hauptinhalt der Seite erscheint. Liegt der erste Wert über etwa 1,8 Sekunden, hat Ihr Besucher auf eine weiße Seite geschaut.

Unter den Werten steht eine Liste der Dateien, auf die der Browser gewartet hat, mit der Zeit, die jede gekostet hat. Auf den meisten Websites von Organisationen ist die Liste kurz: das Stylesheet des Themes, zwei oder drei Stylesheets von Plugins, eine Schrift von einem Schriftendienst und ein Skript, das ans Ende der Seite gehört hätte.

Korrektur eins: Text in einer Ersatzschrift zeigen

Eine Webschrift kann dem Browser sagen, was er tun soll, während sie lädt. Die Einstellung heißt font-display. Der Wert swap bedeutet: den Text sofort in einer Ersatzschrift zeigen und umschalten, wenn die richtige Schrift ankommt. Besucher sehen beim ersten Zeichnen Wörter statt einer leeren Spalte.

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4.woff2") format("woff2");
  font-display: swap;
}

Kommt Ihre Schrift von einem Schriftendienst, ist dieselbe Einstellung meist ein Parameter in dem Link, den der Dienst Ihnen gegeben hat. Kommt sie aus Ihrem Theme, ist es eine Zeile in der Schriftdeklaration des Themes. Wenn Sie die Schriftdatei auf Ihrer eigenen Website hosten, spart das Smartphone außerdem eine eigene Verbindung zu einem anderen Server, und das ist oft der langsamste Teil.

Korrektur zwei: Skripte ans Ende oder verzögert

Ein Skript, das nicht verändert, wie die Seite aussieht, gehört ans Ende der Seite oder in den Kopf mit dem Attribut defer. Defer sagt dem Browser, das Skript im Hintergrund herunterzuladen und auszuführen, nachdem die Seite gezeichnet ist. Analyse, Chat, Tag-Manager, Einbettungen sozialer Netzwerke und Videoplayer gehören alle dazu. Fast nichts auf der Website einer Organisation muss vor dem ersten Zeichnen laufen.

Unter WordPress kommen die meisten dieser Skripte aus Plugins, und die meisten Plugins bieten keine Einstellung dafür, wo ihr Skript landet. Ein Caching- oder Performance-Plugin kann sie alle auf einmal verzögern. Testen Sie die Website, nachdem Sie das eingeschaltet haben, denn ein Skript, von dem ein anderes Skript abhängt, kann Fehler auslösen, wenn es in der falschen Reihenfolge läuft.

Korrektur drei: weniger Stylesheets auf Seiten, die sie nicht nutzen

Ein Kontaktformular-Plugin lädt sein Stylesheet auf jeder Seite, nicht nur auf der Kontaktseite. Slider, Veranstaltungskalender und Galerie-Plugins machen es genauso. Eine Website mit zwölf Plugins kann zwölf Stylesheets anfordern, bevor sie eine Seite zeichnet, die keines davon nutzt. Jede Datei ist klein, aber zusammen summieren sie sich zur Wartezeit.

Die saubere Lösung ist, die Dateien jedes Plugins nur auf den Seiten zu laden, die sie nutzen. Manche Plugins haben diese Einstellung. Für die übrigen kann ein Performance-Plugin das Seite für Seite erledigen, oder das Theme lädt sie nur dort, wo sie gebraucht werden, was für die Person, die die Website betreut, ein paar Zeilen Code sind. Vor all dem lohnt es sich oft, die Plugins zu entfernen, an deren Installation sich niemand erinnert.

Was Sie lassen sollten

Jagen Sie nicht dem Wert hinterher. Eine Seite, die sich auf einem Smartphone in unter einer Sekunde zeichnet, ist fertig, auch wenn das Messwerkzeug noch Vorschläge auflistet.

Und kopieren Sie nicht alle Ihre Stile in die Seite selbst, um Anfragen zu sparen. Ein Stylesheet, das in jede Seite eingebaut ist, kann auf Dutzende Kilobyte anwachsen und wird bei jedem Besuch erneut gesendet, während eine verlinkte Datei nach dem ersten Besuch im Cache liegt. Genau diesen Fehler haben wir auf LFW.com gemacht und ihn diese Woche behoben.