Performance-Optimierung am Beispiel: betamode.de
Published 2012-03-22, 20:07
Ich habe mich ein wenig mit Performance Optimierung von Webseiten beschäftigt. In den nächsten Tagen und Wochen werde ich einige Beiträge dazu veröffentlichen. Den Anfang macht diese Beschreibung des Optimierungsvorgangs von betamode.de:
Beispielseiten für Optimierung
- http://betamode.de
- http://betamode.de/2011/07/31/server-data-monitoring-graphing/
Ausgangssituation
- http://www.webpagetest.org/result/120318_NC_3MJ57/
- http://www.webpagetest.org/result/120318_GB_3MJ59/
Erste Beobachtungen und Auswertung
- urchin.js – uralter Google Analytics Code?
- Mehrere kleine GIFs, sollten sich einfach spriten lassen
- First Byte Time ist sehr hoch
- Kein Caching der statischen Ressourcen
- Kein CDN
Optimierung
Anwendbare Regeln aus High Performance Website Sites:
Rule 1 – Make Fewer HTTP Requests
Folgende Bilder können zusammengefasst werden:
- http://betamode.de/wp-content/themes/betamode/images/suche.gif
- http://betamode.de/wp-content/themes/betamode/images/clock.gif
- http://betamode.de/wp-content/themes/betamode/images/comments.gif
- http://betamode.de/wp-content/themes/betamode/images/xml.gif
Schritte:
- Bilder von <img> auf background-images umbauen
- Bilder als Sprite zusammenfassen: http://betamode.de/wp-content/themes/betamode/images/sprite.gif
- Sprite als background-image einbauen
- Da sich bg.gif nicht mitspriten lässt wird es als data-base64 direkt ins CSS eingebunden
Ergebnis
- http://www.webpagetest.org/result/120318_NM_3MJST/
- http://www.webpagetest.org/result/120318_C2_3MJSV/
Rule 3 – Add an Expires Header
Mit W3 Total Cache lässt sich sich das wunderbar erschlagen.
Ergebnis
- http://www.webpagetest.org/result/120318_0K_3MJY7/
- http://www.webpagetest.org/result/120318_4C_3MJZ0/
Rule 6 – Put Scripts at the Bottom
Das Analytics-Script ist zwar schon ganz unten, aber noch das alte synchrone. Also mal das neue besorgen und einbauen.
Ergebnis
- http://www.webpagetest.org/result/120318_B3_3MJZY/
- http://www.webpagetest.org/result/120318_TS_3MJZZ/
Rule 10 – Minify JavaScript (+ HTML + CSS)
Javascript gibt es keines, aber für Minify von HTML und CSS kann einfach W3 Total Cache konfiguriert werden, fertig.
Ergebnis
- http://www.webpagetest.org/result/120318_C4_3MK1C/
- http://www.webpagetest.org/result/120318_6G_3MK1D/
Dann zum Abschluss noch ein bisschen serverseitiges Caching um DB-Anfragen und so weiter zu minimieren mit W3 Total Cache.
End-Ergebnis
- http://www.webpagetest.org/result/120318_57_3MK1Z/
- http://www.webpagetest.org/result/120318_XM_3MK22/
Tadaa, schnell.
IE7 em + float Bug
Published 2008-03-04, 00:47
Immer wieder schön was einem bei der täglichen Arbeit so über den Weg läuft. Stark vereinfacht:
<div style="float:left"><img src=...></div>
<div id="text">Erste Zeile Text. <em>Zweite Zeile Text</em></div>
Das führte im konkreten Fall im IE7 dazu, daß ab der zweiten Zeile der Hintergrund des text-Div vor das floatende Div links gelegt wurde. Natürlich war der verursachende Code lange nicht so einfach, und so habe ich dann doch locker 30 Minuten gesucht und probiert bis ich auf die Idee kam, dass das em der Auslöser sein könnte.
Glücklicherweise hatte schon 2006 jemand dieses Problem:
The other (are you ready for this?) is to remove the <em> element.
I am perplexed. Does anyone have a clue as to what is going on?
Und ein weiterer Leidensgenosse konnte eine passende Lösung liefern:
Yeah. It’s an em bug 🙂 IE6 has em bugs, too. Try this:
em {zoom: 100%; overflow: hidden;}
http://archivist.incutio.com/viewlist/css-discuss/81647
Resizing und Fading Slideshow
Published 2007-08-01, 22:01
Sehr flash-artige Fotoslideshow nur mit HTML, Javascript und CSS realisiert:
This photo slideshow is a demonstration of Flash-like behavior implemented solely in Javascript, HTML, and CSS.
http://www.couloir.org/js_slideshow/
(via GFX-World) PS: Ja, Betamode lebt.
Der Unterscheid zwischen ‚disabled‘ und ‚readonly‘ bei Formularen
Published 2007-03-06, 15:46
Da ich selbst gerade dummerweise den Fehler gemacht habe und readonly mit disabled verwechselt habe:
READONLY and DISABLED both remove the functionality of the input field, but to different degrees. READONLY locks the field: the user cannot change the value. DISABLED does the same thing but takes it further: the user cannot use the field in any way, not to highlight the text for copying, not to select the checkbox, not to submit the form. In fact, a disabled field is not even sent if the form is submitted.
http://www.htmlcodetutorial.com/forms/_INPUT_DISABLED.html
Formular in iFrame (aus Mutterframe heraus) absenden
Published 2006-11-22, 19:21
<a href="#" onclick="parent.frames['framename'].document.formularname.submit();
return false">Klick</a>
Automatischer Reload bei falscher Charset-Angabe in Firefox
Published 2006-11-22, 16:49
Merken: Wenn Firefox nach Anklicken einer ihm bisher unbekannten URL direkt 2 Aufrufe an diese sendet, könnte es daran liegen, dass im
im Meta-Content-Type ein falscher charset (z.B. ISO-8559-1 statt ISO-8859-1) angegeben ist.Leselineal mit Javascript
Published 2006-11-14, 21:22
Interessanter Artikel bei Dr. Web, auch wenn mir die praktische Umsetzung noch nicht ganz gefällt. Aber die Idee ist klasse.
Fremdes iFrame scrollen
Published 2006-08-01, 23:12
Das muss jetzt niemand verstehen, ich möchte den Gedanken einfach festhalten:
Will man ein iFrame, auf dessen Inhalt man keinen Einfluss hat, zu einem bestimmten Koordinatenpunkt scrollen, kann man das fremde iFrame in ein eigenes iFrame einbetten und dieses scrollen.
Quelle: http://douweosinga.com/projects/googlerandomimage