Performance-Optimierung am Beispiel: betamode.de

Veröffentlicht am 22.3.2012, 20:07 Uhr

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.

Anwendungen und Tools zum Monitoring und Graphing von Serverdaten (Load, Memory, Traffic)

Veröffentlicht am 31.7.2011, 18:19 Uhr

SAAS:

Self-hosted:

Ergänzungen willkommen.

MySQL: temporäre Tabellen

Veröffentlicht am 23.6.2009, 23:57 Uhr

Große Queries, die sowieso per ‚Using temporary‘ anzeigen, dass im Hintergrund eine temporäre Tabelle erstellt wird, lassen sich oft wunderbar zwei- oder dreiteilen indem man erst eine temporäre Tabelle erstellt und dort nun dann die Abfragen ausführt. Besonders effektiv ist das, wenn Teil 1 des Queries die Anzahl der zu betrachtenden Zeilen stark einschränkt, Teil 2 dann jedoch nochmal heftig sortieren muss.

MySQL: Delete a subset in a table quickly

Veröffentlicht am 21.6.2009, 14:04 Uhr

Heute mal wieder über einen netten MySQL-Hack gestolpert:

The trick is, that INNER JOIN will ’shrink‘ the LargeTable down to the size of the TemporarySmallTable and the delete will operate on that smaller set only, since USING will reference to the joined table.

http://blog.mkoebele.de/2008/07/mysql-delete-subset-in-table-quickly.html
http://dev.mysql.com/doc/refman/5.0/en/delete.html#c9536

Mehr davon bitte…

File-Encoding erkennen

Veröffentlicht am 7.9.2008, 20:00 Uhr

Mein Held für heute: Mindprod mit seinem Encoding Recogniser. Applet kurz laden lassen, Datei auswählen und einfach Encodings durchprobieren. Funktioniert wunderbar.

MySQL: The table ‚foo‘ is full

Veröffentlicht am 31.3.2008, 14:14 Uhr

Ich muss zugeben, ich war erstmal ziemlich platt. Aber, es gibt ja zum Glück Erklärungen und (mutmaßliche) Lösungen:

http://dev.mysql.com/doc/refman/5.0/en/full-table.html
http://dev.mysql.com/doc/refman/5.1/de/full-table.html
http://jeremy.zawodny.com/blog/archives/000796.html

Das von Jeremy Zawodny vorgeschlagene

alter table foo max_rows = 200000000000 avg_row_length = 50;

funktioniert auch wunderbar. Nun passen nochmal ein paar Gigabyte rein.

IE7 em + float Bug

Veröffentlicht am 4.3.2008, 00:47 Uhr

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

Web Inspector für Safari 3.0.4 auf Windows

Veröffentlicht am 24.11.2007, 15:20 Uhr

1) Download the nightly build from http://nightly.webkit.org/.

2) Extract the contents from the zip file.

3) If you are running Vista then you will have to add the following to the end of the Preferences.plist file (under C:\Users\<UserName>\AppData\Roaming\Apple Computer\Safari\), just before </dict></plist>:

<key>WebKitUserStyleSheetLocationPreferenceKey</key> <true/>

4) Execute the run-nightly-webkit.cmd file. This will launch Safari from the command prompt.

Quelle: http://weblogs.asp.net/davidbarkol/archive/2007/06/22/web-inspector-for-safari-on-windows.aspx

Zusätzlich die WebKitPreferences.plist im Safari-Einstellungsordner öffnen und folgendes hinzufügen:

<key>WebKitDeveloperExtras</key>
<true/>

Quelle: http://weblogs.asp.net/davidbarkol/archive/2007/06/22/web-inspector-for-safari-on-windows.aspx#5250931

MySQL: INSERT … ON DUPLICATE KEY UPDATE

Veröffentlicht am 23.8.2007, 13:38 Uhr

Ich kann gar nicht oft genug darauf hinweisen:

INSERT INTO table (a,b,c) VALUES (1,2,3)
ON DUPLICATE KEY UPDATE c=c+1;

Sinn der Sache:
Wenn ein INSERT einen doppelten Wert für ein UNIQUE- oder PRIMARY KEY-Feld erzeugen würde wird das UPDATE ausgeführt.

http://dev.mysql.com/doc/refman/4.1/en/insert-on-duplicate.html
http://www.mysqlperformanceblog.com/2006/05/29/insert-on-duplicate-key-update-and-summary-counters/

Vielleicht wird man dann irgendwann diese umständlichen if(mysql_insert_id() == 0) oder mysql_affected_rows-Konstruktionen los.

Firefox-Plugin: Ungenutzte CSS-Selektoren aufspüren

Veröffentlicht am 2.8.2007, 18:34 Uhr

Dust-Me SelectorsWie auf Zuruf veröffentlich Manuela auf Pixelgraphix den Hinweis auf das kleine Helfer-Plugin „Dust-Me Selectors“ von Sitepoint.com.

Per Javascript eingebundene CSS-Dateien werden leider ignoriert, trotzdem ein wunderbares Tool zum Ausdünnen veralteter CSS-Dateien.

18 queries. 0,240 seconds.