Was das Seitengewicht ausmacht
Das Seitengewicht ist die Datenmenge, die ein Browser für eine Seite überträgt: HTML, CSS, JavaScript, Bilder und Schriften. Je weniger es ist, desto schneller steht die Seite, vor allem im Mobilfunk.
So funktioniert es
Jede Datei, die eine Seite braucht, muss erst über die Leitung. Im Mobilfunk mit schwankendem Empfang ist das der größte Unterschied zwischen einer schnellen und einer zähen Seite, und es kostet deine Besucher Datenvolumen.
bytereport zählt die übertragenen Bytes, also nach der Kompression: das HTML der Startseite, alle Dateien, die es nennt, und die Schriften aus den Stylesheets. Was ein Skript erst später nachlädt, ist nicht dabei. Gut sind bis etwa 1600 KB, über 4 MB gilt als schlecht. In den Details steht jede Datei mit ihrer Größe, die größte zuerst.
Zwei verwandte Werte gehören dazu:
- Zahl der Anfragen. Jede Datei und jedes eingebettete iframe ist eine eigene Anfrage. Gut sind bis 50, über 100 gilt als schlecht.
- Umfang des HTML. Gezählt werden die Elemente, aus denen der Browser seinen Seitenbaum (das DOM) baut. Je mehr es sind, desto länger brauchen Layout und jede Änderung durch Skripte. Gut sind bis etwa 800, über 1400 gilt als schlecht.
Worauf es ankommt
- Der größte Posten zuerst. Meist sind es die Bilder, danach das JavaScript. Eine einzige Datei kann den Ausschlag geben.
- Schriften auf die genutzten Schnitte beschränken. Jeder Schnitt ist eine eigene Datei, siehe Webfonts.
- Weniger Dateien. Fasse CSS und JavaScript zu wenigen Dateien zusammen, lade Bilder unterhalb des ersten Bildschirms verzögert und entferne Einbindungen, die niemand braucht.
- Schlankes HTML. Seitenbaukästen verschachteln oft viele Hüll-Elemente. Lange Listen lassen sich auf Seiten verteilen, große Menüs erst bei Bedarf laden.
So richtest du es ein
Was eine Seite lädt, entscheiden Theme, Plugins und Inhalte. Nimm dir die Liste in den Details vor und frag bei jeder großen Datei, ob die Seite sie braucht. Plugins, die auf jeder Seite Skripte und Stylesheets einbinden, deaktivierst du im CMS oder lässt sie nur dort laden, wo sie gebraucht werden. Tiefere Eingriffe in Theme und HTML macht deine Agentur oder wer die Seite entwickelt hat.