Ladezeit verbessern .. aber wieso ist die Wartezeit so lange?

Hallo Andi

Anzahl der Dateien veringern.
Javascipt , CSS zusammenfassen wenn möglich.
Oder alternativ Einsatz von dataurl wenn die gewählte Browserunterstützung es ermöglicht.

Bilder minimieren und/oder halt eben in einer CSS Sprite zusammenfassen. Alternative auch hier dataurl abhängig von der Browserunterstützung.

whitespaces reduzieren

Gruß
Jörg

Hallo Jörg,

joerg schrieb:
Bilder minimieren und/oder halt eben in einer CSS Sprite zusammenfassen. Alternative auch hier dataurl abhängig von der Browserunterstützung.

hierzu mal ein interessanter Test zu Data-URL:

cup.wpcoder.de/data-url-performance/

Hallo Hannelore

Was dieser Test meiner Ansicht nach nicht berücksichtigt ist die Dateigrösse der Bilder die man in eine dataurl umwandelt.

Sorry ab einer bestimmten Dateigrösse macht das keinen Sinn eine dataurl einzusetzen.

Da trifft auf die Fälle zu wenn der Datentransfer massiv zulegt gegenüber der normalen Datei.

Solange das aber ungefähr gleich ist was die Datenmenge betrifft dann ist der Einsatz absolut legitim.

Momentan setze ich dataurl in der Regel dazu ein kleinere Bilder so einzufügen.
Was natürlich keinen Sinn macht das Bild dann mehrfach so einzubauen das ist auch kontraproduktiv.

Und dann halt für die Korrekturen des CSS Seitenspezifisch.

Gruß
Jörg

Hallo Hannelore,

hansen schrieb:
hierzu mal ein interessanter Test zu Data-URL:

cup.wpcoder.de/data-url-performance/

Man kann jede Technologie zu Tode testen.
Am schlimmsten aber sind jene Tests, wie der von dir Verlinkte, die die Technologie nicht verstehen (wollen).

Data-URL waren nie für die Übertragung großer Bilder gedacht, sondern immer nur für kleine Grafiken, die an verschiedenen Stellen einer Webseite benötigt werden.

Zitat aus der RfC 2397, Absatz 2. Description:
[quote]The "data:" URL scheme is only useful for short values.[/Quote]

Servus,
Klaus

klaus_b@.NET über alles was an .NET und C# Spass macht.

Hallo Jörg,

joerg schrieb:
Sorry ab einer bestimmten Dateigrösse macht das keinen Sinn eine dataurl einzusetzen.

die Seite von Andi, um die ging es ja, enthält 10 Grafiken, da wäre er mit CSS-Sprites besser dran. Daher habe ich auch diesen Teil als Zitat gewählt:

Bilder minimieren und/oder halt eben in einer CSS Sprite zusammenfassen. Alternative auch hier dataurl abhängig von der Browserunterstützung.

Beim Rest stimme ich Dir voll zu.

@Klaus
Wegen der Menge an Grafiken von Andis Seite ist der Link meiner Meinung nach als Beispiel nicht schlecht.

Gruß
hansen

Hallo Hannelore

Ohne mir jetzt mal die 10 Bilder anzuschauen. Als Ergänzung.

CSS Sprites sind geeignet für Hintergrundbilder. Nur welches Bild ich nun zu Designzwecken einsetze oder zu Zwecken der Struktur /Semantik das muss man dann von Fall zu Fall unterscheiden.

Wir sind schon schlimm das ganze Wissen zwar im Hinterkof dazu aber die ganzen Einzelheiten gehen dann dabei unter.

So ich hoffe das reicht jetzt um die Sache rund zu machen oder fehlt noch was?

Gruß
Jörg

Wenn du Wordpress als CMS für deinen Seite nutzt, dann kann ich dir das Plugin Total Cache empfehlen. Damit kannst du deine Performance um einiges steigern. Du kannst unter anderem festlegen, welche Skripte wann ausgeführt werden sollen und wie stark du Datein wie z.B. die CSS komprimieren möchtest...

Vielen Dank,

ich versuche gerade die Bilder mit CSS-Sprites einzubinden.
Hier stoße ich auch ein Problem.
Auf der Seite (Wordpress) wird eine Plugin Slideshow mit 4 Bildern verwendet. Diese werden beim Start der Seite geladen und sind damit 4 Requests.
Kann man diese denn auch mit CSS-Sprites einbinden. Oder gibt es sogar Wordpress Plugins die dies bereits integriert haben?

CU

Andi

Hallo Andi

Das geht sogar schon alleine mit CSS.

[css]
@keyframes time{
0%{background-position:0 0;}
100%{background-position:-2530px 0;}
}
#time{animation:time 60s infinite steps(23);
background:url("bild.jpg") no-repeat 0 0;
width:110px;height:78px;}
[/css]

Problem ist dann nur das ältere Browser wenn man diese unterstützen möchte einen Fallback mit Javascript benötigen.

Im einfachsten Fall sieht der Fallback so aus das ältere Brower nur das erste Bild sehen und es eben keine Slide Show gibt.

Gruß
Jörg

Danke Jörg ..

ich habe die Slideshow mal in CSS umgesetzt .. wieso für sowas ein Plugin nutzen

Macht es denn Sinn auch Bilder in der Größe (275 x 185 px ) durch Sprites zu laden .. oder ist es her nur kleine Icons sinnvoll?

CU

Andi