Du bist hier: Seitenreport    Forum    Web-Entwicklung    Webdesign    Lösung zur Request Minderung!

Lösung zur Request Minderung!

Verfasst am: 06. 08. 2010 [13:13]
babylon26903
Dabei seit: 28.01.2010
Themenersteller

26 Beiträge
Beitrag hilfreich?

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]
romacron
Dabei seit: 01.11.2009

1143 Beiträge
Beitrag hilfreich?

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.


Profil
 
Verfasst am: 06. 08. 2010 [13:47]
hansen
Dabei seit: 18.05.2009

1422 Beiträge
Beitrag hilfreich?

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]
Speedy86
Dabei seit: 24.06.2009

95 Beiträge
Beitrag hilfreich?

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]
UFOMelkor
Dabei seit: 20.10.2009

348 Beiträge
Beitrag hilfreich?

@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]
romacron
Dabei seit: 01.11.2009

1143 Beiträge
Beitrag hilfreich?

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.
Profil
 
Verfasst am: 07. 08. 2010 [10:42]
babylon26903
Dabei seit: 28.01.2010
Themenersteller

26 Beiträge
Beitrag hilfreich?

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]
UFOMelkor
Dabei seit: 20.10.2009

348 Beiträge
Beitrag hilfreich?

@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]
romacron
Dabei seit: 01.11.2009

1143 Beiträge
Beitrag hilfreich?

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.
Profil
 
Verfasst am: 07. 08. 2010 [18:37]
UFOMelkor
Dabei seit: 20.10.2009

348 Beiträge
Beitrag hilfreich?

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:


13 Mitglieder waren innerhalb der letzten 15 Minuten online (126 heute gesamt):
anickel, clint13, compac1981, Csallner, fotopalm, HundeschuleFlöchen, klarsteb, olenk, oms, romacron, stmsounds, wawisolution, ymotux

Administratoren und Moderatoren:
[keine]

Seitenreport hat 18120 registrierte Mitglieder, 3002 Themen und 29106 Beiträge.
Der aktuelle Mitgliederzuwachs liegt bei durchschnittlich 12 bestätigten Neuregistrierungen pro Tag.
Pro Tag werden im Seitenreport Forum durchschnittlich 1 neues Thema und 8 Beiträge erstellt.
Die Durchschnittszahlen berechnen sich aus den letzten 7 Tagen.

Schnellzugriff

Hier werben
Partnerprogramm
Premium Pakete
Verlinkung freischalten
Allgemeine Geschäftsbedingungen
Kontakt aufnehmen
Impressum

Mehrfach empfohlen

Seitenreport ist einer der bekanntesten SEO und Website Analyse Dienste im deutschsprachigen Raum und wurde u.a. schon empfohlen:
von Mr. Wong im Wong Letter
vom Leserservice der Deutschen Post
vom Technik Blog SiN
und vielen anderen

Partnerprogramm

12% Lifetime Provision auf alle Buchungen von Dir geworbener Mitglieder sowie 0,50 € für jede Registrierung. Eines der besten deutschen Partnerprogramme laut den appCharts von 100partnerprogramme.de. Nimm jetzt teil am Seitenreport Partnerprogramm und verdiene gutes Geld dabei!

* = Partnerlinks