Ladezeitoptimierung bei CSS Cascading Style Sheets

Schon mit dem ersten 4 empfangenen TCP/IP Paket soll der Browser in der Lage sein die wichtigsten Inhalte der Webseite anzuzeigen. Optimierungsschritt CSS.

Nachdem das Laden des Javascript aus dem <HEAD> Bereich verbannt worden ist, sieht die Kommunikation Browser Server so aus:

Browser fordert vom Server HTML Seite an
Browser empfängt erstes TCP/IP Paket von der HTML Seite
Browser findet <link HREF=../pic/layout.css rel=stylesheet type=text/css>
Browser fordert vom Server layout.css
Browser empfängt layout.css
Rendern der Webseite startet

Dies kann nochmals optimiert werden. Der Browser soll bereits mit der Darstellung der Webseite beginnen können mit dem Empfang der ersten TCP/IP Pakete vom Server. Das heißt die Darstellung der Webseite sollte möglich sein, ohne eine einzige Datei nachladen zu müssen. Damit ist es nötig das CSS in die Webseite selbst zu holen.

Deswegen wurde unser CSS von 4 kB auf unter 2kB optimiert.

Browser fordert vom Server HTML Seite an
Browser empfängt die ersten 4 TCP/IP Paket von der HTML Seite
Rendern der Webseite startet

Ladezeitoptimierung Grundlagen
	Was kann bei der Ladezeit überhaupt optimiert werden? Grundlagen für die Ladezeitoptimierung von Webseiten. Wie wird überhaupt die Ladezeit definiert?

Dummy Javascript für schnelle Ladezeit
	Im HEAD Bereich wird kein Javascript geladen. Das Laden des Javascripts ist erst am Ende der Seite. Um diese Zeit zu überbrücken sind im HEAD kurze Dummy Funktionen.

Hintergrund Graphik später laden
	In 99% der Fälle ist wohl die Hintergrundgraphik nicht das wichtigste was möglichst schnell den Besucher gezeigt werden muss. Die Ladezeit anderer Elemente ist wichtiger.

Ladezeitoptimierung: Inhalt zuerst
	Jetzt haben wir alle Maßnahmen kennen gelernt, damit die Anzeige der Webseite bereits mit dem ersten 4 TCP/IP Paket vom Server beginnen kann. Doch womit soll der Browser anfangen?

Ladezeittest
	Cache löschen, und dann weit weit weg vom nächsten Mobilfunkmasten die Webseite aufrufen. Mit einem Video wird der Ladevorgang dokumentiert.