Thread: Mini Icons - Verbesserungsvorschlag [Vorsicht: Vorschlag technischer Natur]

Dies habe ich als Verbesserungsvorschlag direkt an die E-Mail von Animexx geschickt. Ich möchte es jetzt nicht noch mal ummodeln damit es mehr in einen Forumsbeitrag passt...

Hallo,

ich bin hobbymäßiger (und auch angehend beruflicher, da Ausbildung als Fachinformatiker) Webseitenprogrammierer.

Als "Mitstreiter" im gleichen Fach fallen mir logischerweise gerne ein mal Dinge auf, die vielleicht auf Animexx
die ein oder andere Verbesserung bringen würde.

Was mir dabei ziemlich in die Augen stach sind die Mini-Icons vor den Benutzernamen.

Um es kurz zu fassen: Sie sind verdammt ineffektiv. Was ich damit sagen will, ist dass für jedes Mini-Icon ein
eigener HTTP-Request an den Animexx-Server gestartet wird um selbiges herunterzuladen. Jedes mal erneut 15 Zeilen
HTTP Request, die verarbeitet und beantwortet werden müsssen!

Mein Tipp dazu: Sprites. Sprites sind in der Webentwicklung große Bilder, die ganz viele kleine Bilder beinhalten!
Sogar Google benutzt sie: http://www.google.de/images/srpr/nav_logo13.png .

Mit gewissen CSS Tricks kann man dann die einzelnen Positionen im großen Bild "abfragen".

Dazu müsste man allerdings die Tabelle mit den Icons so verändern, dass sie nicht nur den Dateinamen, sondern auch
die Position des Sprites in Pixeln beinhaltet.

Schaut dazu mal auf diese Seite: http://spriteme.org/. Sie beinhaltet einen Bookmarklet den man in eine Symbolleiste
des Browsers hineinziehen kann.

Dazu muss man zuerst DIVs erstellen (mit inline-block und als width und height die Größe der Bildchen) die anstelle
der <img> gesetzt werden. In den Divs setzt man ein Background-Image auf das zur Zeitige Bildchen. Das kann man z. B.
in einer sonst leeren HTML machen. Dann aktiviert man Spriteme. Er erkennt alle Background-Images und fügt diese zu
einem Sprite zusammen, gibt dazu noch die zugehörigen CSS Edits die gebraucht werden zurück.

Es ist etwas Arbeit, aber ein mal getan spart sie viele, VIELE HTTP Requests und macht die Site einen Tick schneller.

In die Sprites könnte man jetzt natürlich auch Die GB und ENS Sitter rein tun... Das Banner-Bild, Karosymbole...
Vielleicht ein Forensprite in dem alle Forenthemen-Bildchen sind?

Die Möglichkeiten sind endlos. Und bei der schieren Anzahl Minibilder die ihr auf der Site habt, bringt das garantiert
ein paar Prozentchen ohne Hardware aufzurüsten ;)

Grüße

Um den Laien das ganze mit den Requests verständlicher zu machen: Die Anforderung eines jeden Objektes auf einer Internetseite erfordert einen HTTP Request und eine HTTP Response.

Ein HTTP Request ist cirka so lang:

GET /pics/tofu-smileys/smiley-18.gif HTTP/1.1
User-Agent: Opera/9.80 (Windows NT 6.1; U; de) Presto/2.5.24 Version/10.54
Host: datamexx.onlinewelten.com
Accept: text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1
Accept-Language: de-DE,de;q=0.9,en;q=0.8
Accept-Charset: iso-8859-1, utf-8, utf-16, *;q=0.1
Accept-Encoding: deflate, gzip, x-gzip, identity, *;q=0
Referer: http://animexx.onlinewelten.com/mitglieder/einstellungen-smiley.php
Cookie:
Cookie2:
Cache-Control: no-cache
Connection: Keep-Alive, TE
TE: deflate, gzip, chunked, identity, trailers

So lang ist der Request an ein Mini-Icon vor dem Benutzernamen. Dieser Request muss komplett separat vom Server gehandhabt werden. Die Cookies hab ich herausgeschnitten. Und was antwortet er bei diesem kleinen request?

HTTP/1.1 200 OK
Content-Type: image/gif
ETag: "2143481188"
Accept-Ranges: bytes
Last-Modified: Thu, 30 Nov 2006 18:39:59 GMT
Expires: Tue, 29 Jun 2010 15:50:00 GMT
Cache-Control: max-age=604800
Content-Length: 70
Date: Tue, 22 Jun 2010 15:50:00 GMT
Server: lighttpd/1.5.0

GIF89a . .......99E......!.......,.... . .....")....DmYf.N!.~.`...R..;

Die letzte Zeile enthält die Daten des kleinen Minibildes vor einem Benutzernamen in ASCII Interpretiert (heißt in "Textform" vorhanden.). Das heißt man kann zwar nichts rauslesen, man sieht aber akkurat wie viele Daten das Bild im Vergleich zu Request UND Response hat.

Dieser riesige Aufwand für 70 Zeichen (Bytes) Daten?

Jop.
Und wenn man die Einstellungen und dort auf das Menü mit den Icons geht wird das für jedes Icon wiederholt. Dabei könnte man EINE Anforderung machen und der Server könnte EINE Antwort schicken. Dabei wird das nicht zwangshaft mit jedem Icon um ca. 70 Bytes höher, sondern weniger, weil die Komprimierung das ganze wieder runterboxt.

Jede einzelne Anforderung muss durch eine komplette HTTP Pipeline geschickt werden. Diese fällt beim lighttpd zwar sehr klein aus, ist aber trotzdem ein ziemlicher riesen Overhead.

Jede Anforderung, die in der HTTP Pipeline hängt blockiert andere Anforderungen da es eine maximal-Anzahl GLEICHZEITIGER Anforderungen gibt!

Ich hoffe ich habe das Verständlich darlegen können und jemand stimmt mir zu. Die Seite wird zu den bestimmten Stunden immer sehr langsam und ich hoffe dadurch kann etwas Reaktionszeit zurückgewonnen werden. Auch wenn es nur auf dem Datenserver ist, und nicht auf dem Webserver selbst.

	Von:	abgemeldet	22.06.2010 18:21 Direktlink zum Posting
	Betreff:	Mini Icons - Verbesserungsvorschlag [Vor... [Antworten]

Schön und gut, aber was möchtest du uns im Forum jetzt damit sagen? Du hast das ganze an den Helpdesk geschickt und da werden sich die Entsprechenden Leute das angucken ob sie das so oder weiterhin anders machen.

Ich bezweifle das wir hier jetzt groß mit dir darüber diskutieren können, zumal es sogar schon einen Thread für Vorschläge gibt ;)

Was man dir aber auch dort raten würde und du schon getan hast: Ab damit an den Helpdesk. Danach heißt es abwarten und Tee trinken.

"Wenn du schon gehen musst,
dann mit einem Lächeln."

	Von:	FierceDeity_	22.06.2010 20:41 Direktlink zum Posting
	Betreff:	Mini Icons - Verbesserungsvorschlag [Vor... [Antworten]

Ich hab das mal hier her, falls irgendwelche anderen technisch veranlagten Ergänzungen und vielleicht Einwände haben. Man könnte die Idee so erweitern!

Und den... Vorschläge Thread hab ich leider... übersehen, sry xD

	Von:	LintuSotaRauha	22.06.2010 21:07 Direktlink zum Posting
	Betreff:	Mini Icons - Verbesserungsvorschlag [Vor... [Antworten]

Hm. Die Technik ist mir nicht so ganz klar.
Ich weiß, dass das gerne auch in Game-Design benutzt wird. Aber warum ein großes Bild, welches mehrmals geladen wird und sei es nur teilweise, einen geringeren Datenfluss verursachen soll, als kleine Bilder, ist mir rätselhaft.

My name is BIRD and I haven´t gotta clue!
LSR - your drugs!

	Von:	FierceDeity_	22.06.2010 22:55 Direktlink zum Posting
	Betreff:	Mini Icons - Verbesserungsvorschlag [Vor... [Antworten]

@ LintuSotaRauha
Das Bild wird nur ein mal geladen. Der PC hat dann alle Minibildchen in einer Anforderung schon.

	Von:	cato	22.06.2010 22:11 Direktlink zum Posting
	Betreff:	Mini Icons - Verbesserungsvorschlag [Vor... [Antworten]

Hallo!

Ich nehm den Vorschlag schon mal so auf.
Ich erwarte mir halt aber jetzt auch nicht so den riesigen Performancegewinn: auf der einen Seite müssen ja dann schließlich dafür alle ~1000 Icons gesammelt geladen werden, wo man im Laufe der Sitzung vielleicht nur mit 100 in Berührung kommt. Das ist wegen besagtem Pro-Request-Overhead sicher immer noch etwas effizienter als die Einzel-Requests, aber wohl eher nicht die Welt. Und letztlich wird ja durch den Browser-Cache jedes Bild auch nur einmal pro Sitzung geladen.
Außerdem ist's halt auch ein gewisser Aufwand, das überhaupt erst mal so zu automatisieren, dass man da trotzdem noch ohne Probleme neue Icons hinzufügen kann....

Bin hier nur System-Administrator. Am besten einfach ignorieren.

	Von:	FierceDeity_	22.06.2010 23:05 Direktlink zum Posting
	Betreff:	Mini Icons - Verbesserungsvorschlag [Vor... [Antworten]

Hi,

Hmm, stimmt allerdings... Man kommt mit SO vielen Icons nun auch nicht wirklich in Berührung.

Das automatisieren dürfte gar nicht so schwer werden wenn man ein Bild hat wo alle Icons drauf sind und man auf Zeilen- und Spaltenlogik weitere Icons einfach draufmalt.

Aber es ermöglicht euch, auf der Site selber mehr Icons zu verwenden ohne dadurch den Overhead überhaupt zu erhöhen.

Ich bin mir aber mit dem Overhead nicht ganz sicher. Wie viel Overhead Lighty wirklich verursacht durch einzelne HTTP Requests.

Aber hey: Das Internet und eure Bandbreitenrechnung (wohl 0,1 % davon bei der Datenmenge...) freut sich auch.

Naja, mindestens wird sich die Ladezeit der Symbolauswahl in den Einstellungen rapide verbessern.

Zurück