Einzelnen Beitrag anzeigen
  #6 (permalink)  
Alt 15.09.2011, 16:43
haggy haggy ist offline
Frontente
neuer user
 
Registriert seit: 05.09.2008
Ort: Leipzig
Beiträge: 33
haggy befindet sich auf einem aufstrebenden Ast
Standard Ausführlichere Fassung

So, ich habe mich nochmal rangesetzt und die wichtigsten Faktoren für die Ladezeiten etwas näher erläutert. Worauf ich an dieser Stelle nicht eingehen möchte (aber auch gern nachreichen kann) ist die Performance von CSS und JavaScript. Ich bitte das zu entschuldigen, aber es würde sicherlich den Rahmen des Posts sprengen

Bilder – Dimensionen
Skalierungen durch HTML sind nicht gut. Sie verlangsamen den Seitenaufbau erheblich. Bilder sollten entsprechend ihrer Dimensionen bereits im Vorfeld durch ein Programm (z.B. GIMP, PS) skaliert werden.

Ein schönes selbst geschossenes Bild mit der HighEnd-Kamera von der Freundin welches ihr der Welt zeigen wollt, hat z.B. die Abmaße 4960 x 3508 px (entspricht A3 bei 300 dpi). Nun soll es aber nur auf 600 x 415 px ausgegeben werden, dann wäre ein:
<img src=“freundin.jpg“ width=“600“ height=“415“ alt=“Meine hübsche Freundin“ />
ziemlich ungünstig. Also: vorher mit einem Programm herunterskalieren, das Bild wird von der Dateigröße kleiner und es lädt somit schneller. Generell sollten die Dimensionen eines Bildes natürlich im img-Tag angegeben werden, um den Bereich im Voraus zu "reservieren". Dadurch wird ein "Zucken" der Seite verhindert. (Danke an Praktikant für die Anmerkung)

Vorteile: die Bilder sehen besser aus und werden natürlich auch schneller geladen.


Bilder – Dateigröße
Bilddateien, welche mit Programmen wie GIMP oder PS erstellt werden, haben grundsätzlich erstmal einen so genannten Overhead. Es sind also Informationen in der Datei enthalten, die für das Bild unwichtig sind.

Diese Informationen können relativ über Online Services wie Smush.It entfernt werden. Die Einsparung sind erheblich. Beispiel mit einem einfachen 640 x 400 px Bild von dummyimage.com: http://dummyimage.com/600x400/000/fff.jpgsmush.it reduziert es von 12,4 KB auf 9,6 KB, Ersparnis: 22%!

Vorteile: kleinere Bilder werden schneller geladen


(CSS) Sprites
Man stelle sich vor, es soll eine Seite erstellt werden, die einen Menüaufbau ähnlich den Yahoo!-Seiten auf Yahoo! Deutschland hat (Yahoo! Deutschland). Lauter kleine lustige Symbole untereinandern (15 und mehr). Würde jedes Bild einzeln geladen, hätte man an der Stelle schon allein 15 Requests nur für das Menü - nicht gut!

Also umdenken: Sprites erstellen, Grafiken zusammenfassen. Der Technik dahinter ist relativ einfach: eine Gesamtgrafik mit allen Teilgrafiken erstellen; CSS-Klasse für die Sprite-Datei anlegen:
.mainSprite {background: #fff url(pictures/main-sprite.png) no-repeat 0 0}

Von dieser Klasse aus anderen Klasse “ableiten”. Beispielsweise eine 50 x 50 px Grafik
.articleIcon {width: 50px; height: 50px; background-position: 0 -50px}

Und in der HTML verwenden:
<span class=”mainSprite articleIcon”></span>

Interessante Artikel dazu findet man auf The Mystery Of CSS Sprites: Techniques, Tools And Tutorials - Smashing Magazine

Vorteile: weniger Requests = schnellerer Seitenaufbau; Flackern bei hover-Effekten fällt weg


CSS- und JS-Dateien vereinen und minify’en
Wie schon oben beschrieben, hängen die Requests stark mit der Ladezeit einer Seite zusammen. Das gilt selbstverstänlich auch für CSS- und JavaScript-Dateien.

Aus screen.css, layout.css, design.css, format.css etc. kann man doch auch eine Datei erstellen und auf den Server laden. Gleichermaßen sollte bei JavaScript-Dateien verfahren werden.

Ist eine CSS- oder / und JavaScript-Datei fertig, sollten diese noch minimiert werden. Es gibt hier für verschiedene Online Tools, die diese Aufgabe erledigen. Dabei werden z.B. überflüssige Leerzeichen entfernt,
aus: (CSS) margin: 0px

wird: margin: 0 etc.

Resultat ist eine Datei, die weniger Speicherplatz belegt aber noch genau so arbeitet wie vorher.

Empfehlenswert sind hier: Minify Javascript Online / Online JavaScript Packer oder Minify CSS - Compress CSS Code

Vorteile: weniger und kleinere Dateien ergeben wieder einen schnelleren Seitenaufbau


CSS an den Anfang, JS ans Ende
Wird das CSS am Anfang eines Dokuments geladen, bleiben dem Besucher unerwünschte Redraw oder Reflow-Effekte erspart.
JS am Ende eines Dokuments hat den Vorteil, dass die durch JS beinflussten DOM-Elemente nicht während des Ladens der Seite gerendert werden, was sehr unangenehm für den Benutzer werden kann (könnte das parallel Ausliefern von Files stören).

Vorteile: die Seite selbst wird schneller (samt Styles) ausgeliefert


Inline CSS vermeiden
Inline CSS ist weniger optimal, da es nicht sonderlich dem Verständis dient, erschwert die Fehlersuche und erhöht die Dateigröße der HTML-Dateien drastisch. Weiterhin kann nicht von den Vorteilen des Cachings (wie bei CSS- und JS-Dateien) profitiert werden.

Wird also eine andere (interne) Seite aufgerufen, so kann bei externen CSS- und JS-Dateien die gecachte Version genutzt werden und erhöht damit die Ladezeiten.

Vorteile: schnelleres Laden durch Caching (Minimierung der Requests)


Document Type wählen
Ok … hier ist ein Punkt der nicht direkt mit den Ladezeiten einer Seite zu tun hat. Aber empfehlens ist es trotzdem!

Vorteile: ein korrekter Doctype erhöht die Crossbrowser-Kompatibilität


Validierung der Seiten
Auch noch ein Punkt, der nicht mit den Ladezeiten zusammenhängt.

Trotzdem ist es empfehlenswert sich an die Richtlinien des W3C zu halten. Nicht umsonst wurden diese irgendwann mal aufgestellt.

Es kommt vor, dass ein Benutzer eine Internetseite auf Qualität prüft - um eventuell Rückschluss auf die Qualität des Herausgebers zu ziehen. Eine valide Website ist also stets auch ein Indikator für die Qualität des Webdesigners - und gute Reputation kann wohl jeder gebrauchen


Verzicht auf CSS-Expressions
Erster Fakt der gegen die Verwendung spricht: sie gehören nicht zum Standard! Und es gehört einfach nicht zum guten Ton CSS mit Programmlogik zu verknüpfen (wir erinnern uns: CSS soll Inhalt (und Logik) von Gestaltung trennen).

Darüberhinaus sind CSS Expressions um einiges langsam beim rendern von Inhalten als reines CSS.

Vorteile: schnellerer Seitenaufbau bei Verzicht auf Expressions


Fragen, Kritik und Anmerkungen sind selbstverständlich willkommen und bei Fehler bitte ich um harte aber gerechte Strafe

Verwendete Literatur: The Smashing Book, 1. Auflage (2009)
__________________
Gruß haggy

Geändert von haggy (15.09.2011 um 17:51 Uhr)
Mit Zitat antworten