zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden Ladezeit optimieren - Was sind die wichtigsten Faktoren?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.09.2011, 00:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.08.2011
Beiträge: 29
Test5000 befindet sich auf einem aufstrebenden Ast
Standard Ladezeit optimieren - Was sind die wichtigsten Faktoren?

Hallo zusammen,
mich würde interessieren, wovon die Ladezeit meiner Seite (HTML+CSS) am meisten abhängt, bzw. welche Faktoren man am meisten beachten muss.
Ich habe schon paar Sachen gelesen, dass die Bilder klein sein sollen usw. aber mir ist das nicht detailliert genug. Kennt ihr einen guten Artikel oder könnt ihr aus eigener Erfahrung sagen, was die mit Abstand wichtigsten Faktoren sind?
Ich frage mich auch z.B. ob es sich lohnt, z.B. 100 Wörter mit einem <p> - Paragraphen in eine Zeile zu schreiben statt in 5 Zeilen.
Hat so etwas überhaupt Einfluss auf die Ladezeit?
Könnt ihr mir weiterhelfen bzw. habt ihr sonst irgendwelche Tipps?

Viele Grüße, Test5000
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.09.2011, 10:33
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Bilder und eine hohe Anzahl an Anfragen verlängern die Ladezeit am meisten. Das heißt im Klartext: ausgelagerte Dateien so gut es geht zusammenfassen und bildet auf die entsprechenden Größen skalieren.

Ob du nun einen Absatz in eine Zeile oder in 10 packst ist relevant sobald du ca. 15.000 oder mehr Zeilen in der Datei hast. Text wird nicht sonderlich groß als Datei. Das hat kaum Einfluss. Selbst bei ISDN sind Textdateien in der Regel sofort da.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.09.2011, 11:36
Frontente
neuer user
 
Registriert seit: 05.09.2008
Ort: Leipzig
Beiträge: 33
haggy befindet sich auf einem aufstrebenden Ast
Standard

Das ist ein interessanter Punkt, den man vielleicht auch mal als FAQ aufarbeiten könnte

Hier mal die - aus meiner Sicht - wichtigsten Faktoren (Praktikan hat ja bereits einige genannt):
  • Korrekte Dimensionen im img-Tag angeben - nicht per HTML skalieren
  • Bildgröße mimieren (smush.it)
  • Verwendung von CSS Sprites reduzieren Requests
  • wenn möglich: Content Delivery Network benutzen
  • JS- und CSS-Dateien zusammenfassen
  • CSS in den Kopf (Verzicht auf inline CSS!)
  • JavaScript ans Ende des Dokuments
  • CSS und JS minify'en
  • einen korrekten Document Type verwenden
  • Seiten validieren
  • keine CSS Expressions verwenden
Auf die Eigenschaften / Möglichkeiten beim Webserver gehe ich jetzt mal nicht ein. Aber so sollte das erstmal als Anhalt dienen.

Grundsätzlich ist wohl auch daran zu denken, dass man möglichst wenig DOM-Elemente verwenden sollte (keine extreme Verschachtelung von div-Containern z.B). Bei JavaScript gibts auch einige Sache zu berücksichtigen (jQuery z.B.: effektive Selektoren -> $('div.classX') statt $('.classX'); optimierung von Schleifen; Cachen von Variablen etc.).

Aber das würde wohl hier wohl den Rahmen sprengen
__________________
Gruß haggy
Mit Zitat antworten
  #4 (permalink)  
Alt 15.09.2011, 00:52
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Hi, ich höre immer wieder
Zitat:
Verzicht auf inline CSS!
Welchen Vorteil bringt mir die Auslagerung der CSS-Daten?
Im Gegenteil stelle ich meine CSS-Daten mittels PHP korrekt zusammen so brauch der Browser weniger Daten abarbeiten und ich spare einen oder mehrere Requests.
MfG gabischatz
Mit Zitat antworten
  #5 (permalink)  
Alt 15.09.2011, 01:05
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Auch CSS-Dateien werden gecacht. Zudem ist es übersichtlicher. Wenn du mit IDs und Klassen arbeitest kannst du auch davon ausgehen, wiederkommende Elemente immer gleich bleiben.

Man kann im Übrigen auch CSS-Dateien von php generieren lassen.
Es hat aber nicht unbedingt etwas mit schnellerer Ladezeit zu tun, eher mit der Übersicht. Ob jetzt eine Textdatei mehr oder weniger geladen wird ist nur bedingt relevant.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #6 (permalink)  
Alt 15.09.2011, 16:43
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
  #7 (permalink)  
Alt 15.09.2011, 17:16
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Zitat:
Zitat von haggy Beitrag anzeigen
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.
Daher du hier Reflow oder Redraw Effekte ansprichst, die nicht viel mehr als "ein Zucken der Seite" meinen sollte man Folgenden Punkt zwar beachten, aber die Größenangaben der Bilder trotzdem machen. Denn auch diese ersparen dem Benutzer "ein Zucken der Seite", vor allem wenn der schon den Text ließt während die Bilder noch laden.
Zitat:
Zitat von haggy Beitrag anzeigen
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.
Der Rest ist aber soweit nicht sonderlich zu bemängeln.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #8 (permalink)  
Alt 15.09.2011, 17:48
Frontente
neuer user
 
Registriert seit: 05.09.2008
Ort: Leipzig
Beiträge: 33
haggy befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Praktikant Beitrag anzeigen
[...] aber die Größenangaben der Bilder trotzdem machen. Denn auch diese ersparen dem Benutzer "ein Zucken der Seite", vor allem wenn der schon den Text ließt während die Bilder noch laden.
Oh ja, gute Anmerkung. Das hatte ich vergessen zu erwähnen. Danke für den Hinweis
__________________
Gruß haggy
Mit Zitat antworten
  #9 (permalink)  
Alt 15.09.2011, 19:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.08.2011
Beiträge: 29
Test5000 befindet sich auf einem aufstrebenden Ast
Standard

Okay vielen Dank für eure Antworten, da habe ich ja schon mal einige Anhaltspunkte...
Da muss ich mich wohl etwas mehr mit CSS beschäftigen :P
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.09.2011, 21:19
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Mit den in modernen Browsern vorhandenen Entwicklertools kann die Übertragungsgeschwindigkeit der einzelnen Komponenten einer Seite gemessen werden. Mit diesen Tools kann man sehr genau feststellen, wie sich was auswirkt und sieht wo die Engpässe sitzen.

Edit: Gut ist es, solche Tests gerade auch mit langsamen Netz-Verbindungen durchzuführen.

Geändert von EvT (15.09.2011 um 21:23 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
ladezeit optimieren

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Meine Queries optimieren insanic! Serveradministration und serverseitige Scripte 30 18.03.2006 16:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:29 Uhr.