Webdesign/Performance-Optimierung

Schlanke Webseiten laden schnell!

Eine Webseite hat nicht nur möglichst gut auszusehen, sie sollte auch möglichst wenig Bytes haben. Dass die Bandbreiten für die Datenübertragung beim Durchschnittsanwender allmählich besser werden, bedeutet nicht, hier und jetzt zu klotzen, ohne Rücksicht auf den Netzverkehr zu nehmen.

Dieses Tutorial zeigt, wie du Webseiten schlank und schnell gestaltet, indem du dich auf das Wesentliche konzentrierst und Unwesentliches weglässt.

Datenmengen

Scott Jehl legte in seinem Artikel „Planning for Performance“^[1] das Augenmerk auf die sich immer weiter steigernde Datenmengen, die heutige Webseiten ausliefern. Während die durchschnittliche Webseite 1,7 MB groß ist, haben manche responsive Seiten wie disney.com, die für jeden Browser die passenden Frameworks, Grafiken und Skripte ausliefern, über 5 MB, teilweise sogar über 100 MB!

Gerade angesichts der Tatsache, dass Benutzer mobiler Geräte nicht nur über WLAN, sondern auch über 3G surfen, sollten Webseiten nicht nur responsiv, sondern auch schlank sein. Das Surfen im Mobilnetz bewirkt eine zeitliche Verzögerung von 2 Sekunden beim Seitenaufbau, da der Datenstrom vom Server zusätzlich noch den Funksender des Mobilfunknetzes passieren muss.

Auch wenn LTE und 4G diese Antwortzeiten verringert haben, ist mobiles Surfen an sich langsamer als Surfen mit WLAN oder in Kabelnetzen. Deshalb sollten Sie versuchen, die Anzahl der http-Requests so gering wie möglich zu halten. Normalerweise blocken externe CSS-Dateien und JS-Skripte im Unterschied zu Grafiken das Rendering einer Seite. Durch das Nachladen von Stylesheets mit Hilfe von Skripten und nachträglichem Einfügen mittels document.write wird der schon gerenderte Seiteninhalt wieder verändert.

Empfehlung: Vermeide ein Laden der Seite, bevor die Stylesheets geladen sind. Dieses FOUC (Flash of unstyled Content) ist extrem ärgerlich und verzögert den Seitenaufbau.

Okay, so, without losing any media or functionality, without any noticeable reduction in quality and a significant *increase* in accessibility, I've got my client’s homepage from 5.2MB down to 130KB. Just webp conversion, stripping out the extraneous JavaScript and CSS and a simpler DOM. Lot of cowboys out there.

Large Heydon Collider

https://bildung.social/@heydon@front-end.social/112095132286608450