Blog :: deam.org » combined js http://blog.deam.org hier schreibt Klaus M. Brantl Wed, 25 Jan 2012 16:18:54 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Technik hinter Hausverbrauch.de: Ladezeit http://blog.deam.org/2010/07/21/technik-hinter-hausverbrauch-de-ladezeit/ http://blog.deam.org/2010/07/21/technik-hinter-hausverbrauch-de-ladezeit/#comments Wed, 21 Jul 2010 06:53:45 +0000 Klaus M. Brantl http://blog.deam.org/?p=398 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:

  1. Ladezeit: Alles kombinieren und komprimieren.
  2. Verteilung: Statische Bestandteile nicht via www.hausverbrauch.de, sondern via Amazon-S3
  3. ein Markup: Die mobile Version unterscheidet sich im HTML-Markup nicht von der Desktop-Version
  4. 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.

]]> http://blog.deam.org/2010/07/21/technik-hinter-hausverbrauch-de-ladezeit/feed/ 0