Öffnen Sie das Netzwerkpanel, laden Sie neu und schauen Sie auf die FORM, bevor Sie irgendetwas lesen. Vier Formen decken fast jede langsame Seite ab, und jede zeigt woandershin.

1. Ein langer Balken oben, dann alles andere

Das Dokument selbst hat die meiste Zeit gebraucht. Das ist Serverzeit, und an Bildern oder Skripten wird sich daran nichts ändern. Messen Sie die TTFB.

2. Eine Treppe

Jede Anfrage beginnt, wenn die vorige endet. Etwas wird erst entdeckt, nachdem etwas anderes geladen ist - ein Stylesheet, das ein weiteres importiert, oder ein Skript, das ein Skript einfügt. Jede Stufe ist ein voller Hin- und Rückweg.

<link rel="preload" href="/fonts/body.woff2" as="font" crossorigin>

3. Eine Wand, dann ein langer Schweif

Alles startet gleichzeitig, und ein paar dauern weit länger. Diese paar sind meist Fremdinhalte: ein Analyseskript, ein Chat-Widget, eine Schrift von einer anderen Domain. Ihr Server ist in Ordnung und die Seite trotzdem nicht.

Ein fremdes Skript im Head ohne async oder defer blockiert das Rendern nach der Antwortzeit von DEREN Server. Deren Ausfall ist Ihre weiße Seite.

4. Eine große Lücke vor dem ersten Bild

Die Bytes waren da, und gezeichnet wurde nichts. Renderblockierendes CSS oder eine Schrift, die auf den Tausch wartet. Schauen Sie auf die Größe des ersten Stylesheets und auf font-display.

@font-face { font-display: swap; }

Die drei Spalten, die sich zu lesen lohnen

  • Warten (TTFB) - der Server denkt.
  • Content Download - die Bytes bewegen sich. Groß heißt hier: die Datei ist zu groß.
  • Queueing / Stalled - Warten auf eine Verbindung. Groß hier unter HTTP/1.1 ist der Grund, warum es HTTP/2 gibt.
Testen Sie auf einer gedrosselten Verbindung, nicht auf Ihrer eigenen. Auf einer schnellen Leitung am Schreibtisch sieht fast alles gut aus, und Ihre Besucher sitzen am Telefon.