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

Ausgangssituation

Erste Beobachtungen und Auswertung

Optimierung

Anwendbare Regeln aus High Performance Website Sites:

Rule 1 – Make Fewer HTTP Requests

Folgende Bilder können zusammengefasst werden:

Schritte:

Ergebnis

Rule 3 – Add an Expires Header

Mit W3 Total Cache lässt sich sich das wunderbar erschlagen.

Ergebnis

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

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

Dann zum Abschluss noch ein bisschen serverseitiges Caching um DB-Anfragen und so weiter zu minimieren mit W3 Total Cache.

End-Ergebnis

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

Leselineal

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

18 queries. 0,266 seconds.