Datum: 0000-00-00

Redesign und Umzug auf and7s.de

Endlich habe ich es geschafft auf die TLD and7s.de umzuziehen. Die Vorteile für euch: eine zürzere URL, schnellerer seitenaufbau, keine Werbung.
Ich habe nicht nur das Design neu gestaltet, auch die Architektur Front- wie Backendweise neu implementiert. Als wichtigste prämisse habe ich mich auf performance konzentriert. Ich wollte die Zeit, bis ihr die Inhalte sehen könnt absolut minimal halten.

Meine Website lässt sich in die einzelnen bestandteile des HTML markups, style Informationen, skripts und Bildern zusammensetzen. Dafür ruft der Browser erst die html seite ab, in der dann beschrieben wird welche zusätzlichen Dateien geladen werden muss. Anschlißened werden alle abhängigkeiten heruntergeladen. Um eine Website also schnell ausliefern zu können muss die Serverseitige implemeniterung die seite möglichst schnell rendern (berechnen) und es sollten möglichs wenig zuätzlcihe Datien, die möglichs klein sein sollten geladen werden. Css und javascript zu precompilen, also einmal zusammen in eine Datei komprimiert vorauszuberechnen ist bereits gängiger standard, deshalb werde ich darauf nicht weiter eingehen.

Der meiste Inhalt den ich hoste sind Bildergalerien. Diese bestehen aus vielen einzelnen Bildern. Am Beispiel des letzen Italienurlaubs 107 Bilder. Bei einer fast schon mittelalterlichen Auflösung von 720x540 nehemn all diese bilder allerdings schon 22MB ein. Deshalb werden kleine vorschaubilder (thumbnails) generiert, die jeweils rund 50KB groß sind. nur durch das anklicken der seite würded ihr also 5MB Daten herunterladen. Auf Desktop vielleicht kein Problem, für modile nutzer kann solch ein volumen bereits 1% des monatlichen volumens ausmachen. Will man mehrer Galerien anschauen oder zusätzlich noch die höher aufgelösten Bilder ansehen stellt das eine echte verschwendung dar. Zusätzlich dauert das herunterladen solcher Datenmengen eine weile. browserabhängig werden meist nur 6 Dateien gleichzeitig heruntergeladen, das bedeutet, auch wenn genügend bandbreite zur verfügugn stehen würde, das 7te Bild erst geladen wird, wenn eins der ersten 6 geladen würde. Das erzeugt unmengen overhead.

Overhead bezeichnet die Daten die über den eigentlichen Daten als Protokoll anfallen. HTTP setzt auf TCP auf, was bekannt dafür ist verlässlich aber langsam zu sein. 3 Roundtriptimes (handshake) sind nötig befor ein einzelnes Byte Nutzdaten gesendet werden kann. Anschließend wird für tcp üblich ein slow start vollzogen, was bedeutet, dass nicht sofort 100% der Bandbreite genutz, da nicht bekannt wird, sondern sich erst langsam aufbaut, bis das maximum erreicht wird. Für kleine Dateien (wie thumbnails) ist das Problem dabei, dass nie wirklich die startphase erreicht, sondern zuvor bereits die Datei übertragen wurde. Folglich ist dieser Ansatz eine immense Verschwendung. Am konkreten Beispiel Italienurlaub benötigt die Seite 11.5s um 120 Dateien in 5.4MB downzuloaden.


Für die Optimierung habe ich die gleiche Idee wie für Spritesheets verwendet. Sprites sind meist icons, also kleine Grafiken. Da für eine Website hunderte solcher Sprites verwendet werden packt man alle sprites in eine Grafik, schickt sie an den Benutzer, der zerschneidet dise wieder in sine einzelnen Bestandteile. Ich habe also ale Thumbnails in eine Grafik zusammengefügt und leifere dise dem Benutzer. Daraus ergiebt sich folgendes: Nur noch eine (anstelle 107) muss zum Client gesendet werden. Die Datei ist auch zusätzlich kleiner als die Summe alller thumbs, da besser komprimiert werden kann und auch hier nicht immer ein einzelner JPG header benötigt wird. Konkrete Zahlen: 750KB sit die erstellte Grafik groß. Zu den ursprünglichen 5MB ist das eine ersparnis von 85%. Nur noch knapp 1/6 werden gesendet.

Als Konsequenz daraus konnte für die "Bilder", die ja nur noch ein großes ist, keine klassische Lightbox mehr verwendet werden. Lightboxen sind die Bildervorschauten, die meist auf einem halbtransparenten dunklen hintergrund nachgeladen werden. Bildergalerien über der normalen website. Davon gibt es viele vorgefertigte plugins. Allerdings konnte keines meinen Ansprüchen gerecht werden, das vorschaubild heranzuzoomen und dann durch das größere ersetzen. Deshabl hab ich über lange zeit an meinem ersten "jquery plugin" gebastelt. Das resultat ist eine recht schicke 3d transition. vermutlich geschmacksache, aber ich find es schon einmal cool. Klar könnte man es an vielen stellen noch verbessern, aber einzigartigkeit punktet auch irgendwo. Teilweise kann es bei den animationen v.a. auf schwachen und nicht hardwarebeschleunigten geräten zu ruckeln kommen, aber das sollte keine barriere sein, die website nicht zu besuchen.

And7s.de is endlich da!
schreibt mir eure meinung zur Benutzerfreundlichkeit, performance, dem design oder auch zu der implementierung.