Technik hinter Hausverbrauch.de: Ladezeit by Klaus M. Brantl
Das wir das ganze mit PHP und MySQL umgesetzt haben, sollte einigermassen klar sein. Natürlich kommt auch hier wieder das deam.org-framework zum Einsatz.
Interessanter ist es einige andere Aspekte der Umsetzung zu beleuchten. Nur zur Erinnerung: wir sind noch nicht fertig und es gibt noch eine grosse Menge an Bestandteilen, die optimierungsbedürftig sind.
Ich werden über die nächsten Wochen in loser Folge über einige der “Frontend-Aspekte” schreiben. Vor allem auch über das “Warum” einzelner Entscheidungen.
Die Schwerpunkte bisher waren:
- Ladezeit: Alles kombinieren und komprimieren.
- Verteilung: Statische Bestandteile nicht via www.hausverbrauch.de, sondern via Amazon-S3
- ein Markup: Die mobile Version unterscheidet sich im HTML-Markup nicht von der Desktop-Version
- kein IE6: naja – eigentlich mehr nach dem Motto “CSS3 anstatt Workarounds“
Ladezeit
Die Startseite von https://www.hausverbrauch.de/ löst aktuell 6 Requests aus und hat knapp 120kb an Datenmenge zu transferieren.
Das ist zugegebenermassen noch immer zu viel. Das reine HTML in gepackter Form schlägt mit nur 2,4kb zu Buche und das Logo erreicht fast 16kb.
Der Löwenanteil ist das “combo.min.gz.js” mit fast 92kb.
Dieses Javascript-Bundle ist noch wenig optimiert. Es enthält diese Einzelpakete:
- jquery-1.4.2.min.js
- jquery.cookie-1.0.min.js
- jquery-ui-1.8.custom.min.js
- jquery.bgiframe-2.1.1.min.js
- jquery.passStrengthener-0.9.1.min.js
- jquery.tooltip-1.3.min.js
- jquery.scrollTo-1.4.0.min.js
- jquery.flot.min.js
- jquery.flot.selection.min.js
- functions.min.js
Den verhältnismässig größten Anteil übernimmt jQuery-UI. Wir verwenden nicht alle UI-Funktionen, dennoch ist das ganze Paket enthalten. Das wollen wir im Laufe der Beta-Phase noch korrigieren. Aktuell gehe ich davon aus, das wir für “combo.min.gz.js” im gepackten Zustand etwa 50kb erreichen können.
Ausserdem enthält “combo.min.gz.js” auch Scripte die in der mobilen Version nicht zum Tragen kommen. Hier werden wir noch überlegen inwieweit eine getrennte Auslieferung hier vielleicht noch Vorteile bringen kann.
Randbemerkung:
Es wird landläufig empfohlen Javascript-Files nicht im <head>, sondern am Ende des <body> zu platzieren, da ein JS-Download im <head> “blocking” ist. Das ist allerdings nicht ganz unproblematisch und bedeutet auch, das bestimmte Funktionen noch nicht nutzbar sind. Man muss hier im Grunde dann sehr stark mit DOM-Operationen arbeiten und das ist zumindest bei IE7 und IE8 nicht wirklich spassig (jedenfalls nicht, wenn man einen betagten WIndows-Rechner im Einsatz hat).
Zum Kombinieren und Komprimieren verwende ich ein einfaches Shell-Script. Hier ein beispielhafter Codeauszug:
#!/bin/bash
echo '** kombiniere alle js-files'
cat htdocs/static/libraries/jquery-1.4.2.min.js > htdocs/static/libraries/combo.min.js
cat htdocs/static/libraries/jquery.cookie-1.0.min.js >> htdocs/static/libraries/combo.min.js
cat htdocs/static/libraries/jquery-ui-1.8.custom.min.js >> htdocs/static/libraries/combo.min.js
cat htdocs/static/libraries/functions.min.js >> htdocs/static/libraries/combo.min.js
echo 'gzip-Version'
gzip -9 < htdocs/static/libraries/combo.min.js > htdocs/static/libraries/combo.min.gz.js
Die Dateiendung hat seinen Sinn:
Entweder hat man einen Apache mit mod_headers und kann dann eine solche Konfiguration einsetzen:
<FilesMatch "(.gz.js|.gz.css)$">
Header add "Content-Encoding" "gzip"
</FilesMatch>
Oder man verwendet Amazon-S3 und setzt den “Content-Encoding”-Header beim Upload der Datei auf “gzip”.
Achja: Das Minify machen wir derzeit mit dem yuicompressor-2.4.2.jar. Das hat mehr oder weniger historische Gründe. Ich werde mir bei Gelegenheit noch Alternativen ansehen.
Tags: combined css, combined js, css3, GZIP, php5, S3
This entry was posted on Wednesday, July 21st, 2010 at 08:53 and is filed under Hausverbrauch.de, Projekte. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.