Bringen Sie Ordnung in den HEAD
Martin MichálekAktualisiert 23.7.20252 Minuten LesenWebExpo und Performance sind Ihre Leidenschaft. Und wir schätzen Harry Roberts, denn seine Vorträge und Artikel sind immer tiefgründig.
Harry hat auf der diesjährigen WebExpo darüber referiert, wie allein die Reihenfolge der Elemente im <head> die Geschwindigkeit einer Website beeinflussen kann.
Testen Sie die richtige Reihenfolge der Elemente im <head>
In seinem Vortrag präsentierte er ein Beispiel, bei dem solch eine Kleinigkeit seine Kunden potenziell Millionen von Dollar kosten könnte. Erwarten Sie jedoch nicht, dass Ihre Website davon betroffen ist – Harrys Beispiel ist eher eine Nadel im Heuhaufen. Ein Gewinn in der Optimierungslotterie.
Nichtsdestotrotz – wenn Sie denken, dass Sie die großen Geschwindigkeitsprobleme bereits gelöst haben, oder einfach nur überprüfen möchten, ob alles korrekt ist, nutzen Sie sein Tool CT.CSS.
Es handelt sich um ein kleines Stück CSS, das Sie auf mögliche Fehler in der Reihenfolge der Elemente im <head> hinweist:
- Fügen Sie das CSS direkt zur Seite hinzu.
- Verwenden Sie ein Bookmarklet.
- Speichern Sie es in den Snippets der Chrome DevTools.
Die Wahl liegt bei Ihnen. Sind Sie ungeduldig? Werfen Sie einen Blick auf das Demo.
Wir haben es bei einigen Websites ausprobiert. Beispiele:
Auf dem Bild sehen Sie eine sehr besuchte tschechische Website. Erkennen Sie sie? :-)
Sollten Sie eine rot umrandete Warnung sehen, nehmen Sie diese ernst. Es könnte sein, dass gerade Ihre Website von einer Korrektur erheblich profitieren könnte.
Vielleicht stellen Sie aber auch fest, dass hier nicht der Hund begraben liegt, was die Geschwindigkeit Ihrer Website betrifft.
Was ist die richtige Reihenfolge der Elemente im <head>?
Werfen wir einen Blick darauf, wie es laut Harry idealerweise aussehen sollte:
<meta charset | http-equiv | viewport>
<title>
<!-- Preconnect (https://web.dev/articles/preconnect-and-dns-prefetch) -->
<link rel="preconnect">
<!-- Asynchrones JS (Analytics etc.) -->
<script src="" async></script>
<!-- CSS mit @import -->
<link rel="stylesheet" href="…">
<!-- Synchrones JS: -->
<script src="…"></script>
<!-- Synchrones CSS: -->
<link rel="stylesheet" href="…">
<!-- Preload (https://web.dev/articles/preload-critical-assets): -->
<link rel="preload">
<!-- Asynchrones JS mit niedriger Priorität: -->
<script src="" defer></script>
<!-- Prefetch und Prerender: -->
<link rel="prefetch">
<link rel="prerender">
<!-- Und so weiter: SEO, Meta-Tags, Icons, Open Graph… -->
Interessieren Sie sich für mehr? Schauen Sie sich die Folien zu Harrys Vortrag an.