Lösung zur Request Minderung!

Hallo Werner.

Zum Verständnis. Die HTML Seite wird vom Server an den Browser geliefert. Nun "liest" der Browser die HTML Seite. Dabei findet er Anweisungen wie z.B
<style src> <br /><img src=""> <br />Der Browser weiß, das er diese Element von Deinem Server holen muss und fragt an.(Request). <br />Der Server liefert die angefragten Sachen an den Browser(Response). <br /> <br />Folglich werden alle Dinge wie Bilder, Css usw. vom Server separat abgerufen. <br /> <br />Im Firebug für Mozilla kannst Du unter &quot;Netzwerk&quot; schauen. Da wird im einzelnen gezeigt, was abgefragt und geliefert wurde. <br /> <br />Vergessen sollte man nicht, dass die in den Css Dateien verankerten Bilder auch abgerufen werden und als 1Request pro Bild gelten. <br /> <br /> <br /></p></style>

Der Traffik-Scanner von Flo listet Dir alle Request auf:

floern.com/tools/trafficscanner

Meist kannst du viele Request vermeiden, wenn du Beispielsweise Hover-Effekte bei Bilder/Buttons als CSS Sprite machst. Also aus 2 Bildern 1 Bild, welches dann nur in der Position verändert wird.
overflow:hidden; nicht vergessen.

Da kann man schon viele requests sparen, wenn man auf Bild-Hover setzt.

Aber auch mehrere CSS Dateien und JavaScript Dateien zusammenlegen bringt schon weniger requests.

@Werner: gute Besserung! Hab es gerade gesehen.. echt traurig
Gern helfe ich dir bei weiteren Details zur Requestminderung!

@Marcus
Was hat overflow: hidden mit CSS-Sprites zu tun? Die Eigenschaft hilft nur dabei, Inhalt nicht über die definierte Breite wachsen zu lassen. Um Hintergrundbilder nicht weiter als gewollt anzuzeigen, sollte die Breite bzw. die Höhe des Elementes begrenzt werden.

@Werner
Für einige Bilder helfen dir auch vielleicht Inline-Images etwas. In der CSS definiert, werden sie sogar gecached. Der IE macht da allerdings Probleme, für ihn müssten mittels Conditional Comments (oder CSS-Hacks) die Background-Images wieder normal gesetzt werden. Das bringt für die Seitenreport-Analyse nichts, dem (nicht IE) Benutzer spart es allerdings Requests. Die Suche nach Inline-Images CSS bringt dich vermutlich weiter.

Hallo Oskar,
So genial ich die Idee mit den Css inline-images finde. Ein großes Aber ist dabei. Die Menge der übertragenen Daten steigt ganz locker mal um 30%. Dann ist der ganze Gewinn dahin, wie Du auch sagst," der IE zickt". Dann noch ein extraBüro für den IE aufmachen?

Ich weiß nicht, ich glaube das inl-img noch nicht wirklich Webtauglich sind.

Hallo @all,

also ich hab jetzt mal eben geschaut. Ich könnte auf meiner Startseite noch vier Request einsparen.

- Hintergrundbild
- Der Hover effect oben 2 Bildchen
- das kleine Pixelbild in der Mitte

eine image Sprite Datei gibt es bereits, nur irgendwie bekomme ich das nicht hin.

Meine CSS Anweisungen dafür sind jetzt so!
für das SpriteBild:
.images {
background-image:url("/images/index_sprite.jpg");
display:inline;
float:left;
margin:0px 2px;
}

- Hintergrundbild
.body {
background-image: url(design/images/bg_body.gif);
background-repeat: repeat-x;
background-attachment: fixed;
font-family: Verdana,Arial,sans-serif;
font-size: 10px;
margin: 0px;
text-align: center;
}

- das kleine Pixelbild in der Mitte
.main {
background-image: url(design/images/pixel.gif);
background-repeat:repeat;
background-color:#ffffff;
border-width: 2px;
border-style: solid;
border-color: #aaaaaa;
margin:0px auto;
text-align: left;
width: 900px;
}

- Der Hover effect oben 2 Bildchen der noch kein Hover ist!
#foxmenu ul li a{
display:block;
float:left;
color:#fff;
text-decoration:none;
padding:5px 20px 0 20px;
height:19px;
background:transparent url(design/images/foxmenu_bg-OFF.gif) no-repeat top left;
}
#foxmenu ul li a:hover{
color:#fff;
background:transparent url(design/images/foxmenu_bg-OVER.gif) no-repeat top right;
}

Was muss ich nu wo ändern damit das klappt?

Danke
Werner

@Marcus: Danke! Das war vor über einem Jahr. Ist aber im Februar erst rausgekommen bzw. gesendet worden. Nu gehts gaqnz langsam wieder! Meine Webseite ist quasie im Moment das einzige was ich noch so einigermassen auf die Reihe bekomme! Bin halt immer wieder auf einen Rolli angewiesen und das macht das leben nicht gerade einfacher! Danke für deine Hilfe!

@Oskar: Vonn Inline Images höhre ich zum ersten mal! Oder ich habs vergessen. Kommt bei mir auch mal vor seid dem Käse Mist!

@roman
Die Menge der übertragenen Daten steigt um 30%, das ist richtig. Dennoch verringert sich die Response-Zeit um 50% im Vergleich zu normal eingebundenen Bildern, denn HTTP-Requests sind sehr teuer. Die doppelte Wartung stimmt, aber das ist halt immer das Problem bei Optimierungen. Ab dem IE8 ist das Thema aber kein Problem, von daher ist das ganze recht zukunftssicher

Hallo Oscar,

verstehe gerade nicht was Du mit "Response Zeit für normale Bilder" meinst. Kannst Du mir das ein wenig genauer beschreiben?

Bilder "normal" zu übertragen, ist echt die Hölle. Darum denke ich, sind Sprites die perfekte Lösung.
Die Einzelbilder aneinander kleben ist an sich recht einfach.
Wenn man dann noch beachtet, das man x-repeat , y-repeat Sprites von einander trennt, sollte auch die Umsetzung in Css klappen.

Ganz vergessen sollte man auch nicht, dass normale Bilder mit alt="" und src="" bei den Sumas immer Eindruck schinden. Da hat man Kinder-Ãœberraschung in der light-version.

Mit Response-Time meine ich die Zeit, die zum Laden des Dokumentes benötigt wird. Die ist bei eingebundenen Bildern wesentlich schneller als bei Bildern, die einen zusätzlichen Request benötigen.
Lässt man den IE<8 außen vor, dürften sich Inline-Images und CSS-Sprites weder vom Aufwand noch vom Nutzen her irgendetwas tun. Beide tragen Signifikant zu Verbesserung der Ladezeit bei.

Man sollte allerdings beachten, dass man CSS-Sprites nicht immers verwenden kann. Wenn man ein Bild für ein Element einbindet, das auf der gesamten Breite wiederholt werden soll und dessen Höhe man nicht kennt, kann man (zumindest theoretisch) keine CSS-Sprites nutzen. Da würde das Inline-Image dann als einzige Methode zur Request-Optimierung helfen.

Und es gibt noch einen Vorteil: Hat man ein Bild, das man aus semantischen Gründen mit einem img-Tag einbinden möchte, dann hilft ebenfalls kein CSS-Sprite. Inline-Images können auch hier helfen, werden dann allerdings nicht gecached.

Mein Fazit zu den beiden Methoden: Beide haben ihre Vor- und Nachteile und sollten sich sinnvoll ergänzen, je nach Situation mag eine andere Methode sinnvoll sein. Das herkömmliche Bild können Sie in vielen Fällen (besonders bei Suma-relevanten Bildern) allerdings immer noch nicht ersetzen.

Hallo Oskar,

Deine Abhandlung ist mal wieder TipTop. Gleichzeitig auch ein Aspekt für weitere Diskussionen im "Seitenreport-Progress"

Vielen Dank