Lösung zur Request Minderung!

Verfasst am: 06. 08. 2010 [13:13]
Beitrag hilfreich?
babylon26903
Themenersteller
Dabei seit: 28.01.2010
Beiträge: 26
 Hallo @all,

hab da mal eine Frage zu den Request!
Wie kann ich erkennen was die Anzahl der Request auslöst um die zu mindern?

Danke im voraus für hilfreiche Tips!

Gruß
Werner
In eigener Sache!!
Ich beim == ZDF == und ein weiteres mal auf == RTL ==
Profil
WWW
ICQ
YIM
 
Verfasst am: 06. 08. 2010 [13:46]
Beitrag hilfreich?
Gelöschter Benutzer 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="">
<img src="">
Der Browser weiß, das er diese Element von Deinem Server holen muss und fragt an.(Request).
Der Server liefert die angefragten Sachen an den Browser(Response).

Folglich werden alle Dinge wie Bilder, Css usw. vom Server separat abgerufen.

Im Firebug für Mozilla kannst Du unter "Netzwerk" schauen. Da wird im einzelnen gezeigt, was abgefragt und geliefert wurde.

Vergessen sollte man nicht, dass die in den Css Dateien verankerten Bilder auch abgerufen werden und als 1Request pro Bild gelten.


 
Verfasst am: 06. 08. 2010 [13:47]
Beitrag hilfreich?
hansen
Dabei seit: 18.05.2009
Beiträge: 1312
 Der Traffik-Scanner von Flo listet Dir alle Request auf:

http://floern.com/tools/trafficscanner

hansen
Nepal Rundreisen
Profil
WWW
 
Verfasst am: 06. 08. 2010 [17:02]
Beitrag hilfreich?
Speedy86
Dabei seit: 24.06.2009
Beiträge: 95
 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 icon_frown.gif
Gern helfe ich dir bei weiteren Details zur Requestminderung!

[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 06.08.2010 um 17:05.]
http://webmaster-glossar.de
Profil
WWW
ICQ
AIM
YIM
Skype
 
Verfasst am: 06. 08. 2010 [23:40]
Beitrag hilfreich?
UFOMelkor
Dabei seit: 20.10.2009
Beiträge: 336
 @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.
Naturkosmetik in Bochum

Steppenhahn Ultramarathon-Community
Profil
WWW
 
Verfasst am: 07. 08. 2010 [06:48]
Beitrag hilfreich?
Gelöschter Benutzer 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.
 
Verfasst am: 07. 08. 2010 [10:42]
Beitrag hilfreich?
babylon26903
Themenersteller
Dabei seit: 28.01.2010
Beiträge: 26
 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! icon_smile.gif
#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! icon_smile.gif
In eigener Sache!!
Ich beim == ZDF == und ein weiteres mal auf == RTL ==
Profil
WWW
ICQ
YIM
 
Verfasst am: 07. 08. 2010 [15:20]
Beitrag hilfreich?
UFOMelkor
Dabei seit: 20.10.2009
Beiträge: 336
 @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 icon_smile.gif
Naturkosmetik in Bochum

Steppenhahn Ultramarathon-Community
Profil
WWW
 
Verfasst am: 07. 08. 2010 [17:22]
Beitrag hilfreich?
Gelöschter Benutzer 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.
 
Verfasst am: 07. 08. 2010 [18:37]
Beitrag hilfreich?
UFOMelkor
Dabei seit: 20.10.2009
Beiträge: 336
 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.
Naturkosmetik in Bochum

Steppenhahn Ultramarathon-Community
Profil
WWW
 




Du bist nicht eingeloggt. Bitte beachte, dass Du eingeloggt sein musst, um Themen zu erstellen oder auf Beiträge zu antworten.

RSS Feed abonnieren

Werde in Echtzeit über neue Foren-Beiträge informiert:

RSS Feed abonnieren »


15 Mitglieder Mitglieder waren innerhalb der letzten 15 Minuten (311 heute gesamt) online:
blacksquadron, Borschti, cetrik, Chance, eship_at, fortworg, leminhtrang, mannchristian, Marccs, metalfriedi, metaphysic, philosapiens, Rosenkranz, winelady

Administratoren und Moderatoren:
seitenreport

Seitenreport hat 16338 registrierte Mitglieder, 2862 Themen und 28000 Beiträge.
Seitenreport hat einen Mitgliederzuwachs von durchschnittlich 24 bestätigten Neuregistrierungen pro Tag.
Pro Tag werden im Seitenreport Forum durchschnittlich 3 neue Themen und 17 Beiträge erstellt.
Die Durchschnittszahlen berechnen sich aus den letzten 7 Tagen.

SEO und Website-Analyse

Seitenreport ist eine der bekanntesten Website-Analyse-Dienste im WEB. Über 9.200 registrierte Mitglieder (keine Freemailer-Accounts), 1/4 Millionen Seitenaufrufe pro Monat, über 100 Premium-Kunden und namhafte Referenzen sprechen für sich. Seitenreport gibt es seit 2007. Wie Du davon profitierst? Hier kannst Du sicher sein, dass es um Qualität und Beständigkeit geht!

Seitenreport auf Facebook!

238 unserer Mitglieder sind bereits Seitenreport Fan auf Facebook. Dein Vorteil: Schnellere Kenntnis von neuen Features, News in Echtzeit, Tipps und Tricks für SEO und Web. Du kannst unsere Beiträge auch kommentieren und dadurch Deine Besucherzahlen und das Interesse an Deinem Account erhöhen. Folge Seitenreport auf Facebook!

Seitenreport Partnerprogramm

Eines der wenigen Partnerprogramm im Bereich SEO und WEB. Erhalte 12% Lifetime Provision auf alle Buchungen von Dir geworbener neuer Mitglieder! Jedes von Dir geworbene Mitglied wird dauerhaft mit Deinem Partnerkonto verknüpft und bei jeder kostenpflichtigen Buchung mit 12% provisioniert. Lifetime - so lange es Seitenreport gibt!
Seitenreport Partnerprogramm

* = Partnerlinks