Javascript später parsen

Parsen Sie Javascript später, um die Blockierung der Seitendarstellung zu reduzieren.

Weil Javascript Inhalt und DOM der Seite verändern kann warten die Browser, sobald sie auf einen Script-Tag stoßen, bis das Javascript geladen, geparsed und gerendert ist, bevor sie mit dem eigentlichen Rendering der Seite fortfahren. Durch das Mischen von Javascript- und CSS-Tags kann das Laden noch einmal zusätzlich verlangsamt werden, Page Speed listet das unter ‘Reihenfolge der Formate und Skripts optimieren’. Eine Grafik, wie diese Verzögerung eben durch das Stoppen des eigentlichen Rendervorgangs aussehen kann, findet sich bei Google.

Heute geht es also darum, die Reihenfolge von CSS und Javascript im Hinblick auf Ladezeiten zu optimieren. Dabei gilt die Faustregel, CSS gleich zu Beginn und Javascript ganz am Ende zu laden. Allerdings muss man beachten, dass es Fälle gibt, bei denen man von dieser Regel abweichen muss, weil man Javascript-Funktionen schon vorher benötigt. Hat man beispielsweise einen SSL-Proxy und muss Cross-Domain-Tracking mittels Google Analytics implementieren, benötigt man das Analytics-Javascript vorher und kann es eben nicht ganz ans Ende verfrachten.
Auch die eigentliche Reihenfolge der Scripte ist wichtig, erfordern manche Funktionen bestimmte Bibliotheken, z.B. jQuery, muss dieses natürlich vorher geladen werden. Und vertauscht man die Reihenfolge bei CSS-Dateien könnte es aufgrund der Kaskade zu unerwarteten Darstellungsfehlern kommen.

Im Sourcecode von xtcModified finden sich Hinweise, dass man dieses Thema auch schon mal angegangen ist, aufgrund von Fehlern bei jQuery wurde das aber wieder rückgängig gemacht. Aktuell konnten ich bei Tests im Demoshop keine derartigen Probleme feststellen. In xtcModified findet sich außerdem noch sehr viel Javascript-Code, der nicht über eine externe Datei geladen wird. Hier aufzuräumen und den Code, der zum Teil noch aus dem originalen xt:Commerce stammt, gegen moderne, auf jQuery basierende Funktionen zu tauschen, würde eine eigene Serie gut füllen.

Daher beschränke ich mich hier mal auf das naheliegendste: In includes/header.php alles von Zeile 75 bis Zeile 278 in die Zwischenablage kopieren und dann löschen, ebenso Zeile 279 löschen. In includes/application_bottom.php die Zeilen 42 bis 46 markieren:

//BOF - DokuMan - 2010-02-25 - Enhance page loading time by putting CSS on TOP of page and JavaScript on BOTTOM of page
//BOF - web28 - 2010-07-14 -  change to TOP of page again because jquery view problems
//require('templates/'.CURRENT_TEMPLATE.'/javascript/general.js.php');
//EOF - web28 - 2010-07-14 -  change to TOP of page again because jquery view problems
//EOF - DokuMan - 2010-02-25 - Enhance page loading time by putting CSS on TOP of page and JavaScript on BOTTOM of page

und durch

?>

ersetzen. Anschließend den Inhalt der Zwischenablage einfügen.

Betrachtet man die reinen Zahlen könnte man meinen, diese Änderung bringt uns primär ein gutes Gefühl.

YSlow mit Javascript am Seitenende

Page Speed mit Javascript am Seitenende

Der eigentliche Erfolg ist hier aber eher offensichtlich, wenn man sich das Rendering ansieht. Mit Javascript im oberen Bereich der Seite wird der Browser sehr früh blockiert und beginnt erst nach ca 2,5 Sekunden mit dem Rendern. Hingegen beginnt dieser Prozess nach der Änderung gut eine Sekunde früher.

Weitere Artikel der Serie

1. Höher, schneller, weiter
2. Verfallsdatum überschritten
3. Druck machen – xtcModified on steroids

Komprimierung aktivieren

Die Komprimierung der folgenden Ressourcen mit gzip könnte ihre Übertragungsgröße um 90.0 KiB verringern (Reduzierung um 70%).

70% der zu übertragenden, komprimmierungsfähigen Daten könnte man sich also sparen, wenn man diese vor der Auslieferung zippt. Das Entpacken findet dann beim Empfänger durch den Browser transparent statt. Jeder moderne Browser kann damit umgehen. Will man es auf die Goldwaage legen könnte man argumentieren, dass der Browser durch den erforderlichen Entpackvorgang länger braucht, um die Seite zu rendern. Aber das Nadelöhr ist nach wie vor ganz klar die Bandbreite der Leitung zum Empfänger, während die Prozessoren in moderner (Desktop-)Hardware gerade mal müde lächeln, wenn sie komprimierte Daten vorgesetzt bekommen.
Für die meisten eher unbedeutend ist in Zeiten von Traffic-Flatrates auch für Server die Einsparung beim Datenvolumen. Aber spätestens beim Thema CDN, wo nach wir vor nach Traffic abgerechnet wird, wird es plötzlich wieder interessant.

Komprimierung? Bringt der Shop doch schon mit!

php bietet von Haus aus die Möglichkeit, Daten komprimiert auszuliefern und in xtcModified ist die Option im Admin unter ‘Erweiterte Konfiguration’ – ‘Gzip Kompression’ auch schnell gefunden und aktiviert. Nur: Das gelbe Ausrufezeichen in Page Speed verschwindet nicht, die Note von YSlow für die Komprimierung wird nur marginal besser.

Der Grund ist einfach: Die shopeigene Komprimierung wird wie gesagt vom php-Parser zur Verfügung gestellt. Nur Dateien, die diesen vor Auslieferung passieren, werden komprimiert. Und genau das gilt nicht für CSS und Javascript. Aber gerade hier findet sich ein enormes Einsparpotential.

mod_deflate kümmert sich um alles

Auch hier kommt uns wieder ein Apache-Modul zu Hilfe: mod_defalte (seit Apache 2, davor hieß es mod_gzip und wer noch einen Apache 1 im Einsatz hat sollte seinen Serveradmin mal fragen, ob er nicht lieber mit etwas Geld verdienen möchte, womit er sich auch auskennt). Und auch hier lohnt ein Blick in die .htaccess des HTML5Boilerplate. Zuvor schalten wir aber die shopeigene Komprimierung wieder aus, sie wird nicht benötigt.

<IfModule mod_deflate.c>
 
# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
</IfModule>
 
# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
<IfModule filter_module>
  FilterDeclare   COMPRESS
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/plain
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/x-component
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/javascript
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/json
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xhtml+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/rss+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/atom+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/vnd.ms-fontobject
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/svg+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/x-font-ttf
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $font/opentype
  FilterChain     COMPRESS
  FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no
</IfModule>
 
<IfModule !mod_filter.c>
  # Legacy versions of Apache
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
  AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>

Zunächst kümmert man sich um Clients, die aufgrund von Proxies oder anderer Einflüsse kaputte Header schicken und standardmäßig nicht mit komprimierten Inhalten versorgt werden würden. Gemäß einem Blogpost im Yahoo! Developer Network sind das ca. 15% der Besucher, also eine nicht zu unterschätzende Anzahl.

Anschließend werden mit Hilfe von mod_filter, das wesentlich flexibler ist als das früher benutzte AddOutputFilterByType, Inhalte in Abhängigkeit ihres MIME-Type (den wir ja schon im zweiten Teil gerade gezogen haben) komprimiert. Bei Bildern beispielsweise wäre das nur verschwendete Rechenleistung. Der letzte Block ist für Server, die ohne mod_filter laufen, indem die ‘alte’ mod_deflate-Syntax zum Einsatz kommt.

Wer jetzt neu lädt wird sich wundern, dass sich nach wie vor nichts tut, unsere Javascript- und CSS-Daten noch immer bemängelt werden. Nachdem wir aber bereits im vorherigen Teil die Expire-Zeiten hoch gesetzt haben fragt der Browser gar nicht mehr beim Server nach, sondern holt die Datei aus seinem Cache und die ist natürlich unkomprimiert.
Um realistische Ergebnisse aus Page Speed zu bekommen müssen wir also den Browsercache umgehen, entweder indem wir ihn leeren oder indem wir mit gedrückter Hochstelltaste auf das ‘Neu laden’-Icon klicken – zumindest in Firefox und Chrome führt das zum gewünschten Ergebnis. Das ist aber auch nur deshalb praktikabel, weil sich unser Shop noch im Testbetrieb befindet. Wie man das Problem im Livebetrieb umgeht haben wir ja schon behandelt.

YSlow jetzt mit der Gesamtnote A

Auch bei Page Speed die 75%-Marke überschritten

Natürlich gibt es auch die neue .htaccess mit dem aktuellen Status zum Dowload.

Weitere Artikel der Serie

1. Höher, schneller, weiter
2. Verfallsdatum überschritten

Browser-Caching nutzen

Ganz oben auf der Liste von Page Speed steht das fehlende Browser Caching.

Die Aktualität der folgenden Cache-fähigen Ressourcen ist nur von kurzer Dauer. Legen Sie fest, dass folgende Ressourcen künftig mindestens einmal pro Woche ablaufen:

Und darunter kommt so ziemlich jedes Bild, das Stylesheet und die Javascript-Dateien, die alle kein Ablaufdatum haben. Dieses würde festlegen, wie lange der Browser oder auch ein Proxyserver die Datei als aktuell betrachtet. Mit der aktuellen Konfiguration fordert er jede Datei bei jedem Aufruf erneut an, denn kein Ablaufdatum bedeutet, dass die Datei aus Browsersicht sofort veraltet ist.

Ein solches Verhalten ist sinnvoll und wünschenswert bei Inhalten, die bei jeder Anforderung die aktuellen Gegebenheiten reflektieren müssen, so führt beispielsweise das hinzufügen eines Artikels zum Warenkorb zu einer Änderung und das HTML für den Warenkorb darf dann eben nicht aus dem Cache geholt werden. Bilder, Stylesheets und Scripts ändern sich aber in der Regel nicht mit jedem Klick. Es ist also völlig unnötig, diese Dateien jedes Mal erneut anzufordern bzw. auch nur beim Server anzufragen, ob sich was geändert hat.

mod_expires for the rescue

Zwar gibt es in der .htaccess-Datei, die mit xtcModified mitkommt, einen Eintrag, um bestimmte Formate mit einem Ablaufdatum von einem Monat zu versehen (der aber standardmäßig nicht aktiv ist), ich bevorzuge hier aber die feiner aufgranulierte Lösung aus dem HTML5Boilerplate:

<IfModule mod_expires.c>
  ExpiresActive on
 
# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"
 
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"
 
# Your document html 
  ExpiresByType text/html                 "access plus 0 seconds"
 
# Data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"
 
# Feed
  ExpiresByType application/rss+xml       "access plus 1 hour"
  ExpiresByType application/atom+xml      "access plus 1 hour"
 
# Favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week" 
 
# Media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"
 
# HTC files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"
 
# Webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
 
# CSS and JavaScript
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"
 
  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
 
</IfModule>

Das ganze in If-Bedingungen zu verpacken verhindert effektiv Internal Server Errors (500), wenn das Modul nicht installiert ist. Klar, dass das ganze dann auch nichts bringt, aber ein Shop, der Inhalte ohne die Optimierung ausliefert ist immer noch besser als ein Shop, der nur eine Fehlermeldung zurückgibt.
Wenn aber mod_expires aktiv ist geschieht folgendes: Der generelle Wert für das Ablaufdatum wird auf einen Monat gesetzt und das ganze dann für Inhalte, die nicht gecached werden sollen, wieder zurückgesetzt. Anschließend werden die Werte für einzelnen Formate basierend auf dem MIME-Type gesetzt. Man könnte alles weglassen, was dem generellen Wert entspricht, aber ich lasse das hier mal mit aufgeführt, vielleicht will man den ein oder anderen Ablaufzeitraum doch anpassen, bei X-Skating sind es beispielsweise 10 Jahre für Bilder. Auf die dabei auftretenden Probleme gehe ich später noch ein.
Cache-Control “public” sorgt dann noch dafür, dass diese Inhalte auch von Proxies gecached werden können, auch wenn man sich vorher per HTTP authentifizieren musste (was für xtcModified aber nicht zutrifft).

Da mod_expires auf Grundlage der MIME-Types arbeitet empfiehlt es sich, noch einen anderen Bereich aus der Datei von HTML5Boilerplate zu übernehmen, nämlich den Teil, wo die MIME-Types vereinheitlicht werden, gerade Javascript kommt je nach Serverkonfiguration mit den obskursten MIME-Types daher:

# JavaScript
#   Normalize to standard type (it's sniffed in IE anyways)
#   tools.ietf.org/html/rfc4329#section-7.2
AddType application/javascript         js
 
# Audio
AddType audio/ogg                      oga ogg
AddType audio/mp4                      m4a
 
# Video
AddType video/ogg                      ogv
AddType video/mp4                      mp4 m4v
AddType video/webm                     webm
 
# SVG
#   Required for svg webfonts on iPad
#   twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml              svg svgz
AddEncoding gzip                       svgz
 
# Webfonts
AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf         ttf ttc
AddType font/opentype                  otf
AddType application/x-font-woff        woff
 
# Assorted types
AddType image/x-icon                        ico
AddType image/webp                          webp
AddType text/cache-manifest                 appcache manifest
AddType text/x-component                    htc
AddType application/x-chrome-extension      crx
AddType application/x-opera-extension       oex
AddType application/x-xpinstall             xpi
AddType application/octet-stream            safariextz
AddType application/x-web-app-manifest+json webapp
AddType text/x-vcard                        vcf

Die einzige Änderung, die wir noch an den Expires vornehmen ist das Favicon, das wird ebenfalls auf einen Monat gesetzt. Die .htaccess, wie sie bis zu diesem Zeitpunkt aussieht, kann hier heruntergeladen werden.

Erneut durch YSlow und Page Speed überprüft ergibt sich schon ein wesentlich besseres Bild. YSlow pendelt sich jetzt bei 89 Punkten ein, noch deutlicher ist die Steigerung bei Page Speed, 60 von 100 möglichen Punkten stehen jetzt bereits zu Buche.

YSlow klettert von 80 auf 89 Punkte...

...Page Speed sogar von 36 auf 60

Auch schön zu sehen ist die extreme Reduktion an HTTP-Requests durch diese Maßnahme. So zeigt das Wasserfalldiagramm bei webpagetest.org ohne mod_expire auch bei der Anfragewiederholung noch alle Bilder etc. Der Server antwortet zwar mit 304 Not Modified, aber die Anfrage geht trotzdem raus und muss beantwortet werden. Sind Expire-Header gesetzt gehört das der Vergangenheit an.

Inhalte aktualisieren bei langen Expires

(Sehr) lange Expire-Zeiten bringen ein Problem mit sich: Da der Browser davon ausgeht, dass die CSS-Datei, die er gestern geladen hat, noch ein Jahr gültig ist, wird er erst gar nicht auf die Idee kommen, diese neu anzufordern. Daher kommt man um eine Versionierung nicht herum. HTML5Boilerplate empfiehlt das über Query-Paramter zu machen, statt stylesheet.css ruft man also beispielsweise stylesheet.css?20120112 auf. Damit man das nicht jedes Mal händisch aktualisieren muss sollte man die Zeilen 15 und 16 in templates/xtc5/css/general.css.php wie folgt ändern:

<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/stylesheet.css?<?php echo filemtime('templates/'.CURRENT_TEMPLATE.'/stylesheet.css') ?>" type="text/css" />
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/thickbox.css?<?php echo filemtime('templates/'.CURRENT_TEMPLATE.'/css/thickbox.css') ?>" type="text/css" media="screen" />

Damit wird immer das Datum der letzten Modifikation als Unix-Zeitstempel angehangen. Das gleiche sollte man auch für das Javascript machen, aber da wir uns dem eh im Rahmen dieser Serie noch gesondert annehmen müssen verschieben wir das auf einen späteren Zeitpunkt.

Als letztes Problemkind bleiben die Bilder. Die Lösung dafür ist etwas aufwendiger und wird behandelt werden wenn wir auf das Thema Content Delivery Networks (CDN) zu sprechen kommen.

Weitere Artikel der Serie

• Teil 1: Höher, schneller, weiter

Zeit, in einer Artikelserie mal zu zeigen, wie man aus einem der derzeit beliebtesten Open-Source-Systeme, nämlich aus xtcModified, das Maximum rauskitzeln kann.

Ausgangssituation

Shopsystem

Es beginnt mit einem xtcModified, wie er aus der Schachtel fällt. Zum Zeitpunkt dieser Artikelserie trägt er den schönen und leicht zu merkenden Namen 1.05 SP1b. In diesen wurden die Demoartikel importiert, allerdings mit individuellen Artikelnummern, damit es mehr als vier unterschiedliche Produkte sind. Außerdem wurden noch SEO-URLs aktiviert und vier Artikel auf die Startseite gestellt.

Hosting

Installiert ist der Shop auf einem 1&1 Virtual Server L, denn nur so hat man die maximale Kontrolle. Das sollte man im Hinterkopf behalten, wenn man die im Rahmen dieser Serie vorgestellten Tipps auf einem Shared Hosting umsetzen will, manche Sachen gehen dort einfach nicht.

Domain

Ach ja, Domains kauft man nicht, Domains hat man. Es stimmt, dass man die bei eigentlich jedem Hosting hinterherworfen bekommt. Trotzdem sollte man darauf achten, dass man eine größtmögliche Flexibilität bei der Konfiguration hat.
10 Subdomains, wie es 1&1 beispielsweise früher für einen Server angeboten hat, sind eine absolut sinnlose künstliche Limitation. Domaindiscount24 hat sich in den vergangenen Jahren als zuverlässiger Partner erwiesen was das Domainhosting angeht. Wer keinen eigenen Server hat sollte aber vorher mit seinem Hoster klären, ob dieser Fremddomains einrichten kann. Bei den meisten geht das kostenlos, bei manchen muss man eine geringe monatliche Gebühr einplanen.

Tools

Yahoos YSlow und Googles Page Speed sind sicherlich die beiden bekanntesten Browser-Plugins, die sich dem Thema Websitegeschwindigkeit widmen. Diese beiden werden uns im Rahmen der Serie begleiten, hin und wieder aber vom ein oder anderen Online-Tool ergänzt werden. Die Kritierien, die beide überprüfen, ähneln sich, die Ergebnisse könnten aber unterschiedlicher nicht sein.

Ausgangssituation YSlow

Während YSlow 80 Punkte vergibt und damit auf die amerikanische Schulnote ‘B’ kommt kann sich Page Speed bei unserem Testshop unter www.ladeze.it lediglich für 36 von 100 Punkten erwärmen, was zu einem roten Gesamtwert führt.

Ausgangssituation PageSpeed

Damit konfrontiert geht es jetzt an die Optimierung, denn auch beim ‘B’ von YSlow ist deutlich Optimierungspotential zu sehen, gibt es doch für den ein oder anderen Punkt eine glatte Sechs.

Wer sich die Wartezeit bis zum zweiten Teil etwas verkürzen will sollte in den Podacst von OnlineRader reinhören. Der bietet einen guten Überblick zum Thema.

Have been to my first conference ever [1] and it was great! Basically, that says it all. You can stop reading now.

I’m in the web business for 15 years now. This means I own spam that might be older than you. But I’ve never been to a conference before. Going part-time self-employed this year I decided it was time to change this and along with this decision came beyond tellerrand. I not only grabbed the very last very early bird ticket but also a seat in one of the workshops, although I wasn’t sure if it’s a good idea to attend a completely english-spoken workshop and conference. Looking back I can say it was a very good decision.

So my beyond tellerrand adventure started with Seb Lee-Delisle’s workshop on Creative JS and HTML5. Not long ago Javascript had been demonized mostly because of security issues in Internet Explorer. Turns out it was an ugly duckling. It is fascinating to see where it is today and what can be done solely with Javascript in the browser. CreativeJS.com is a good starting point to check out.
Speaking of ducks I didn’t expect to get roasted duck served for lunch. But it was a dish that matched the time-honored location and a great workshop perfectly. Seb is not only a great teacher but also has a lot of other fascinating projects running. I love his large projections as much as I love Kronach leuchtet. Would be really great to see him perform there one day.

So being in town already I decided to go for the smashing meetup in the evening. Finally putting faces to twitter names (e.g. Sandra and Eric). Meeting new fascinating people like Maik or Christian, who are definitely worth a follow. Having great talks with people from all over the world.

Starting the next day at 10am is brilliant. Honestly. And the Capitol is an awesome location! I will only cover some personal highlights, if you are interested in a more in-depth view check here for day one and here for day two or wait for the videos that should pop up on Vimeo shortly.

Chris Heilmann presented lots of interesting stuff from Mozilla, including Tilt, a plugin that gives you a 3D visualization of any webpage, and BrowserID, which finally might become the sign in mechanism OpenID never became.
Seb Lee-Delisle is extremly entertaining when he is on stage and he has incredible live coding skills. What I took from Aaron Gustafson’s talk was that I have to dig deeper into progressive enhancement. Or just stop stacking books on this subject on my desk and start reading.

Also prices for drinks and pretzels had been very reasonable throughout the conference, the free (as in free beer) beer at the party was highly appreciated. Had another evening with interesting talks.

Loved the talks by Jake Archibald and Jon Tan on day two. Jake is really entertaining, or to quote Sandra on this:

If the internet got shut down for good, @jaffathecake could easily make a fortune in stand up comedy. #btconf

Jon on web fonts covered a topic that I started experimenting with on Frænkisch a while ago, used it on a business project for the first time this year and will push it even further on a project that’s in the pipeline already.

But when I have to name my favorite talk I will definitely vote for Simon Collison. Speaking of web development as a craft, he addressed so much how I think and feel about the industry we’re in. You should check out his slides.

So this was my first conference but for sure not my last one. It’s great to meet so many people who not only love what they do but are passionate about it. This includes the speakers, the people attending and this of course includes Marc Thiele and his team.

beyond tellerrand 2011

[1] Honestly, it wasn’t my first conference. But I decided to start over. Maybe I write about the reasons one day. Maybe not.

In diesem Jahr gehen wir noch einen Schritt weiter. Unser Anbieter für SSL-Zertifikate, die PSW Group, hat uns in Zusammenarbeit mit Comodo ein Paket geschnürt, mit dem wir die Überprüfung auf Schwachstellen nicht nur auf alle unsere Shops ausweiten, sondern darüber hinaus auch noch alle Shops mit sogenannten Extended-Validation-Zertifikaten versehen können, die neben der schon vorhandenen Verschlüsselung auch klar und deutlich zum Ausdruck bringen, wer hinter der Website steckt und damit noch mehr Sicherheit für unsere Kunden bieten.
Damit übernehmen wir beim Thema sicheres Einkaufen nicht nur im Erzgebirge und im Schwarzwald die Vorreiterrolle, sondern jetzt auch im Bereich Nordic Cross Skating und lassen damit teilweise weit größere und umsatzstärkere Konkurrenzunternehmen hinter uns.

Los ging es um kurz vor drei. Fünf von fünf Servern nicht erreichbar. Ein kurzer Check über die serielle Konsole ergab aber, dass es nicht an den Servern lag. Der Twitter-Account @1und1 brauchte dann geschlagene 20 Minuten, um das auch zu bemerken. Die, man sollte annehmen eigentlich genau für einen solchen Fall gedachte, Statusseite status.1und1.de hingegen verkündet auch heute morgen noch, dass alle Systeme funktionieren würden und dies seit dem 4. August so sei.

Ziemlich genau zwei Stunden später waren dann alle Server wieder erreichbar bis kurz vor 20 Uhr. Und hier kommt der Teil, der mich an dieser Geschichte wirklich aufregt. Fehler können immer mal auftreten, da kann man sich noch so gut absichern. Und ich gestehe jedem eine angemessene Zeit zu, dass er diese beheben kann. Wenn man aber um kurz nach fünf mit großen Halali auf Twitter verkündet, dass jetzt wieder alles gut sei, dann sollte man alles daran setzen, dass nicht genau der gleiche Fehler kurz darauf wieder auftritt:

Die Ursache ist bekannt. In anderen Worten:

Scheiße, genau das gleiche wie vorhin. Warum haben wir das nicht einfach vernünftig gefixt?

Und obwohl 1&1 weiß, woran es liegt, brauchen sie erneut über zwei Stunden, um das Problem aus der Welt zu schaffen!
Krisenmanagement und vor allem auch Krisenkommunikation sieht anders aus. Die angesprochene Statusseite hat sich auch beim zweiten Ausfall nicht aktualisiert und der Twitter-Account war eigentlich immer so viel zu spät dran, dass man sich auch den hätte sparen können.

Erstmals kommt bei einem Webauftritt das HTML 5 Boilerplate zum Einsatz, das einfach schon von vornherein viele Stolpersteine aus dem Weg räumt. Damit einher geht dann aber auch der Wechsel vom antiquierten ISO-8859-1 hin zu UTF-8 und HTML5. Obwohl nicht zwingend notwendig, aber natürlich absolut sinnvoll, kommt jetzt auch php5 zum Einsatz.

Von 1999 bis 2011 das Online-Gesicht der vhs

Dank HTML5 konnte das schon vorhandene, semantische Markup weiter optimiert werden, CSS3 sorgt, sofern es der Browser unterstützt, mit Schatten und abgerundeten Ecken für ein bisschen Pep in der Optik. Und weil das ganze eben nicht aus dem Baukasten kommt sieht es auch nicht aus wie Baukasten.

Mit frischer Optik ins neue Jahrzehnt

Der Besucher findet auf der neuen Homepage vor allem mehr Information. War die alte Seite eher eine digitale Version des Programmheftes zeigt der neue Auftritt, was die vhs Kreis Kronach neben dem klassischen Unterrichtsprogramm sonst noch tut – von internationalen Projekten bis hin zu Firmenkooperationen. Damit das auch alles aktuell bleibt werkelt im Hintergrund als CMS WordPress. Da man als vhs auch im Bloggingbereich, bei Youtube und bei Facebook stärker vertreten sein will erlaubt es der Einsatz von WordPress für den Internetauftritt, ohne doppelten Schulungsaufwand gleich zwei Kanäle zu bedienen.

Und nicht nur in Sachen Web 2.0 wird in Zukunft noch das ein oder andere zu sehen sein, eine für den mobilen Einsatz optimierte Version der Homepage ist bereits in Arbeit und über den Winter wird auch in Sachen Barrierefreiheit noch das ein oder andere verwirklicht werden.

Zwei Apps erleichtern dem Webworker dabei die tägliche Arbeit.

Smaller

Sicher, es gibt diverse Online-Lösungen, die ein unkomprimiertes Javascript oder CSS durch den YUI Compressor jagen und man kann sich diesen natürlich auch selbst installieren, aber eine grafische Oberfläche, die auch Dateien per Stapelverarbeitung abarbeiten kann, wäre schon schön. Genau das leistet die Shareware Smaller, die darüber hinaus auch noch HTML komprimiert. Mit $20 nicht ganz billig, aber ich möchte im täglichen Arbeitsablauf nicht mehr darauf verzichten müssen. Neben der reinen Komprimierung kann das Programm darüber hinaus auch noch mehrere Dateien zu einer kombinieren.

ImageOptim

Eine verlustfreie Komprimierung von Bildern hat sich dagegen ImageOptim auf die Fahnen geschrieben. Auch hier ist eine Stapelverarbeitung möglich, das Tool unterstützt alle gängigen Web-Grafikformate (inkl. animierterter GIFs, sofern das heutzutage noch jemand braucht) und wählt selbständig die beste Kompressionsmethode. Selbst aus Bilder, die in Photoshop mit „Für Web speichern” gespeichert wurden kitzelt es noch ein paar Prozent raus. Punkten kann das Tool auch beim Preis, es ist nämlich Freeware.

Kleinere Dateien wirken sich nicht nur bei der Ladezeit positiv aus sondern mitunter auch im Geldbeutel, beispielweise wenn man seine Bild- und CSS-Dateien über ein CDN ausliefern lässt.

Denn bei natur kostet die 15cm-Variante 3,40 Euro mehr, bei Goldrand aber schon 3,70 Euro und bei lasiert gar 6,10 Euro. Das lässt sich weder durch einen Fixpreis noch durch einen prozentualen Aufschlag abdecken und wenn man dann noch bedenkt, dass man das auch noch für die Ausführung (natur, Goldrand, lasiert) machen muss bricht das ganze System in sich zusammen.

Zum Glück gibt es eine Lösung, die eigentlich so naheliegend ist, dass man sich fragt, warum Magento das nicht einfach von Haus aus kann: Simple Configurable Products. Die Erweiterung sorgt dafür, dass einfach der direkt beim Produkt hinterlegte Preis benutzt wird. Und nicht irgendwelche komischen Berechnungen durchgeführt werden, die am Ende doch nicht zum gewünschten Ergebnis führen.

Einen kleinen Bug hat die Erweiterung aber: Zeigt man die gewählte Option im Warenkorb an, dann wird immer das Admin-Label für das Attribut verwendet, welches nicht mehrsprachig ist. Aber dafür gibt es Abhilfe. Die Datei, um die es geht, ist Checkout/Block/Cart/Item/Renderer.php. Dort findet sich in Zeile 81:

'label' => $attribute->getFrontendLabel(),

Das muss lediglich durch

'label' => $attribute->getStoreLabel(),

ersetzt werden und schon sind die Label auch in der jeweiligen Store-Sprache.