Der deutsche E-Commerce versagt schon bei den Basics

Ich bestelle derzeit sehr viel nicht bei Amazon weil ich mich über die etwas aufgeregt habe, die Kundenorientierung dort ist auch nicht mehr das was sie mal war. Außerdem ist es immer gut über den Tellerrand zu schauen.

Und gerade die Tage erzählt Trusted Shops was man machen sollte um mit dem eigenen Shop gegen Amazon zu bestehen. Das ist alles so weit richtig was im Artikel steht (die Bezeichnung „Fachgeschäft“ benutzen wir übrigens schon seit Jahren für unsere Online-Shops), aber bei vielen Händlern fängt das Problem viel früher an: Bei den Basics.

Dehner

Die Gartencenter-Kette, 2016 mit einem Jahresumsatz von knapp 700 Millionen Euro, schafft es nicht, einen richtigen Trackinglink zu versenden:

https://tracking.dpd.de/parcelstatus?query=00340434177295186556&locale=de_DE

Das geübte Auge sieht auf den ersten Blick, dass es sich bei der Trackingnummer um eine von DHL handelt. Ich kann bei solchen Fehlern nur mit dem Kopf schütteln, denn den richtigen Carrier zu einer Trackingnummer anhand von regulären Ausdrücken zu erkennen ist ein gelöstes Problem. Die Deliveries App von Juneclod macht es vor. Für den deutschen Markt ist das auch sehr übersichtlich (ok, FedEx fehlt, aber niemand™ versendet in Deutschland mit FedEx):

if (
    preg_match("/^1Z\s?[0-9A-Z]{3}\s?[0-9A-Z]{3}\s?[0-9A-Z]{2}\s?[0-9A-Z]{4}\s?[0-9A-Z]{3}\s?[0-9A-Z]$/i", $sTrackId)) {
        $sCarrier = "UPS";
} elseif(
    preg_match("/^0\d{13}$/", $sTrackId)) {
        $sCarrier = "DPD";
} elseif(
    preg_match("/^\d{14}$/", $sTrackId)) {
        $sCarrier = "HLG";
} elseif(
    preg_match("/^\d{11}$/", $sTrackId)) {
        $sCarrier = "GLS";
} elseif(
    preg_match("/[A-Z]{3}\d{2}\.?\d{2}\.?(\d{3}\s?){3}/", $sTrackId) ||
    preg_match("/[A-Z]{3}\d{2}\.?\d{2}\.?\d{3}/", $sTrackId) ||
    preg_match("/(\d{12}|\d{16}|\d{20})/", $sTrackId)) {
	    $sCarrier = "DHL";
} elseif (
    preg_match("/RR\s?\d{4}\s?\d{5}\s?\d(?=DE)/", $sTrackId) ||
    preg_match("/NN\s?\d{2}\s?\d{3}\s?\d{3}\s?\d(?=DE(\s)?\d{3})/", $sTrackId) ||
    preg_match("/RA\d{9}(?=DE)/", $sTrackId) || preg_match("/LX\d{9}(?=DE)/", $sTrackId) ||
    preg_match("/LX\s?\d{4}\s?\d{4}\s?\d(?=DE)/", $sTrackId) ||
    preg_match("/LX\s?\d{4}\s?\d{4}\s?\d(?=DE)/", $sTrackId) ||
    preg_match("/XX\s?\d{2}\s?\d{3}\s?\d{3}\s?\d(?=DE)/", $sTrackId) ||
    preg_match("/RG\s?\d{2}\s?\d{3}\s?\d{3}\s?\d(?=DE)/", $sTrackId)) {
        $sCarrier = "DPAG";
} else {
        $sCarrier = "NONE";
}

Shopify

Das mit den Trackingnummern ist aber auch für Unternehmen, die sich auf E-Commerce spezialisiert haben und 200 Millionen US-Dollar umsetzen, scheinbar ein großes Problem. Die SaaS-Lösung von Shopify bietet neuerdings die Möglichkeit, sich über den Bestellfortschritt per Facebook Messenger benachrichtigen zu lassen. Das sieht auch richtig nett gemacht aus. Nur das mit den Trackingnummern, das läuft nicht so. Klickt man auf den Link ‘Sendung verfolgen’ landet man bei DHL USA. Der selbe Fehler tritt auch auf der Shopify-Bestellübersicht auf.

Sortimo

Spezialist für Fahrzeugeinrichtungen, Umsatz in 2014 knapp unter 125 Millionen, Bosch als Miteigentümer, die ihre Profiwerkzeuge standardmäßig in der Sortimo L-Boxx ausliefern. Aber eine Mail mit Versandinformationen senden bevor die Ware ausgeliefert wurde? Nicht möglich. „Ihre Ware hat unser Logistik Zentrum soeben verlassen und wird in den nächsten Tagen bei Ihnen eintreffen.“ ist in einer Mail von 17:06 relativ witzlos wenn die Ware schon am selben Tag um 9:46 zugestellt wurde.

Sortimo Service-Station

Neben Sortimo selbst wurschteln auch einige der Service-Stationen, von denen es knapp 30 in Deutschland gibt, online mit rum, u.a. bei eBay. Von den fünf bestellten Anti-Rutschmatten kamen drei hier so dermaßen deformiert an, dass sie nicht benutzbar sind (und sich auch nicht in ihren Ursprungszustand zurückversetzen lassen). Die Mail bzgl. Umtausch wurde dann eine Woche lang einfach nicht bearbeitet. Erst auf erneute Nachfrage (und unter Hinzunahme einer generischen service@-E-Mail-Adresse, die ich mir erst raussuchen musste) kam eine Reaktion.

Fazit

Von Shops, die außer manchmal besseren Preisen ein Totalausfall sind und Bewertungsportalen, auf denen der Shopanbieter lügen kann, bis sich die Balken biegen, ohne dass man die Möglichkeit hat, das korrigiert zu bekommen, will ich hier gar nicht reden, das würde genug Material für einen eigenen Artikel geben. Ich will es bei diesen vier Beispiele belassen, wo die einfachsten Basics nicht funktionieren. Denn die Dinge fallen auch dem unbedarften Kunden auf, es ist sofort offensichtlich, dass da was nicht rund läuft auf Seiten des Anbieters und ob man dem dann ein zweites Mal das Vertrauen schenkt? Dass sich der Kunde diese Frage stellt, dazu sollte man es erst gar nicht kommen lassen.

Tackling this above-the-fold CSS issue

Performance Optimization is somewhat like housekeeping. If you don’t take care of it regularly, the shit piles up. My history of our web performance goes back almost five years now and what started as a blazin’ 94 once was now a 76 while mobile, which was never really good, dropped from the mid-seventies to the high-fifties. Even though I optimize all images and write as less code as possible.

I came across these horrifying numbers because one of our main competitors relaunched recently and while pointing at him and laughing at his numbers (52 Desktop, 51 Mobile) I had to admit that ours aren’t really great either.

Running the Erzgebirge-Palace through PageSpeed Insights spoiled two obvious issues: The long-avoided above-the-fold render-blocking stuff and the trust seal. But that will be a different story, we will focus on the render-blocking css for now.

The core layout for Erzgebirge-Palace is ten years old now and also it has clean markup which made reponsive retrofitting quite easy there is no build process or anything near to it. So the CSS is a little bit messy. Identifying the above-the-fold styles manually was not an option, but hey, Smashing Magazine tackled this issue already two years ago. I came across this article after I unsucessfully tried to run a simple gulp task with the critical plugin by Addy Osmani.

While gulp just spit errors into my console the grunt task by Ben Zörb worked right away and returned a pretty good result. I had to add some more code as there happen things on the page the plugin cannot be aware of as different headers during the holiday season and different headers for different languages. But in the end it was less work than I expected and the result gives me now 92 on Desktop and 91 on Mobile (also resolved the trust seal, though).

All numbers given are from Google PageSpeed Insights. While this tool is ok to do a quick check on your site’s performace you should rely on other tools when actually optimizing your website, my tool of choice here is Webpagetest.

Alexa und FRITZ!Box – und es bewegt sich doch…

Basierend auf diesem Blogpost habe ich mir eine Lösung für die AVM-DECT-Steckdosen FRITZ!Dect 200 gebastelt. Das ganze war als reine Fingerübung gedacht, da es aber immer wieder Nachfragen gibt, hier Details zur Umsetzung.

Das ganze läuft auf einem Uberspace als Webserver. Nehmen wir mal an, der Uberspace-Name ist jarvis und läuft auf dem Server stark. Dieser Webspace ist dann über https://jarvis.stark.uberspace.de/ erreichbar. Wichtig: jarvis immer durch den Namen eures Uberspaces ersetzen (vergebt ihr beim Anlegen) und stark immer durch den Namen des Servers, auf dem euer Uberspace liegt (bekommt ihr nach dem Anlegen automatisch zugewiesen und ist auf dem Reiter ‘Datenblatt’ ersichtlich).

Wir verbinden uns per ssh und wechseln in das DocumentRoot, klonen dort das git-Repo und benennen den Ordner in was brauchbares um:

cd /var/www/virtual/jarvis/
git clone https://github.com/gaiterjones/amazon-alexa-php-hello-world-example
mv amazon-alexa-php-hello-world-example/ alexa

Als nächstes müssen wir mittels Symlink dafür sorgen, dass der Webserver ein anderes Verzeichnis als DocumentRoot benutzt:

ln -s alexa/PAJ/www/Amazon/ jarvis.stark.uberspace.de

Abschließend brauchen wir noch die Datei, die mit der AVM-AHA-Interface spricht. Ich hab da schon mal was vorbereitet. Diese kommt in das folgende Verzeichnis:

/var/www/virtual/jarvis/alexa/PAJ/Application/Amazon/Alexa/Intent

Damit das funktioniert muss in Zeile 25 der Host geändert werden unter dem die FRITZ!Box aus dem Internet erreichbar ist. Außerdem ist den Zeilem 239 und 240 Benutzername und Passwort. Es ist zwingend notwendig, dass für die Anmeldung an der FRITZ!Box sowohl Benutzername als auch Passwort benötigt werden. Wenn das noch nicht der Fall ist muss man das entsprechend umstellen.
Auf jeden Fall sollte ein eigener User für die Kommunikation mit Alexa angelegt werden!

Jetzt loggen wir uns auf developer.amazon.com mit unserem Amazon-Developer-Account ein. Wer noch keinen hat registriert sich schnell einen, es muss sich dabei um den gleichen Account handeln der auch für Alexa hinterlegt ist, sonst steht der Skill anschließend nicht zur Verfügung.

Der Skill basiert auf dem Custom Interaction Model, deshalb ist auch ein Codewort erforderlich. Wenn man direkt die Smart Home Skill API verwendet benötigt man das nicht, damit habe ich mich aber nicht beschäftigt, da man dafür zwingend alles als AWS Lambda ARN hosten muss. Damit kann sich gerne AVM auseinandersetzen.

Unser Skill hat den Invocation Name ‘fritzbox’, das Intent Schema sieht so aus:

{
  "intents": [
    {
      "intent": "FritzBox",
      "slots": [
        {
          "name": "trigger",
          "type": "TRIGGER"
        },
        {
          "name": "state",
          "type": "STATE"
        },
        {
          "name": "action",
          "type": "ACTION"
        },
        {
          "name": "device",
          "type": "DEVICE"
        }
      ]   
    }
  ]
}

Die Slots so:

Und die Sample Utterances so:

FritzBox schalte {trigger} {state}
FritzBox liste meine {device} auf
FritzBox ich brauche die Liste der {device}
FritzBox ich brauche die {device} Liste
FritzBox wie ist die {action} von {trigger}
FritzBox nach dem {action} von {trigger}
FritzBox nach den {action} zu {trigger}

Wichtig ist beim SSL-Zertifikat die Option ‘My development endpoint is a sub-domain of a domain that has a wildcard certificate from a certificate authority’ zu wählen, sonst läuft es nicht.

Im Testbereich können wir jetzt beliebige Test durchführen, z.B. ‘sag fritzbox schalte Bad ein’. Die Antwort sollte in etwa so aussehen:

{
  "version": "1.0",
  "response": {
    "outputSpeech": {
      "type": "PlainText",
      "text": "Bad wurde eingeschaltet"
    },
    "card": {
      "text": "Bad wurde eingeschaltet",
      "title": "FRITZ!Box",
      "image": {
        "smallImageUrl": "https://jarvis.stark.uberspace.de/alexaCardImage.php?size=small&image=default",
        "largeImageUrl": "https://jarvis.stark.uberspace.de/alexaCardImage.php?size=large&image=default"
      },
      "type": "Standard"
    },
    "shouldEndSession": true
  },
  "sessionAttributes": {}
}

Und damit sollten sich die Steckdosen entsprechend schalten und abfragen lassen. Prinzipiell müsste das auch mit Thermostaten funktionieren, ich hab aber keine und kann das daher nicht testen oder implementieren.

Ein CDN für den modified-Shop – xtcModified on steroids

Steter Tropfen höhlt den Stein. Augrund immer wiederkehrender Nachfragen folgt hier Teil fünf meiner kleinen Serie zur Geschwindigkeitsoptimierung von xtcModified. Es geht um die Anbindung eines CDN für statische Inhalte und daher direkt hier die Warnung: Das ist nichts für Anfänger!

Seit dem letzten Artikel sind fast drei Jahre vergangen, die Software hat sich dem xtc im Namen entledigt und der alte Testserver existiert nicht mehr.
Ich habe daher eine neue Installation aufsetzen müssen. Dieses Mal bei Uberspace. Wenn man auf der Suche nach Shared Hosting mit möglichst großer Konfigurationsfreiheit ist, dann ist das das Beste, was man für Geld bekommen kann. Ich hab natürlich die Standardinstallation erstmal grundlegend optimiert, um so Dinge wie Javascript im Footer aber einen Bogen gemacht, weil es den Aufwand für den Testbetrieb nicht rechtfertigt.

Damit auch ein paar Produkte im Shop sind wurde dieser Dump eingespielt. Anders als vorgeschlagen wurde aber nicht das Image-Processing gestartet. Wer das Image-Processing für eine gute Idee hält braucht gar nicht erst weiterlesen. Die Bilder wurden mittels Photoshop auf die passende Größe gebracht und dann mit einem mehrstufigen Prozess aus ImageOptim und JPEGmini optimiert (ähnliche Software gibt es sicher auch für Windows). Nur so hat man wirklich kleine Dateien. Und die sind aus zwei Gründen sinnvoll: Zum einen sind weniger Bytes schneller durch die Leitung geschickt, zum anderen rechnen CDNs meist nach Datenvolumen ab und hier ist jedes Byte dann bares Geld.
Der Demodump ist leider etwas kaputt, was Kategorie 1 angeht, das soll uns aber für ein Testsystem egal sein.

CDN – was ist das überhaupt?

Ein CDN, oder in Langform Content Delivery Network, ist ein aus mehreren Rechnern bestehendes Netz, das Inhalte optimiert ausliefert – entweder möglichst schnell (Performanceoptimierung) oder mit möglichst wenig Bandbreite (Kostenoptimierung) oder beides zusammen. Im konkreten Fall soll es eher um die Performanceoptimierung gehen, denn aus finanzieller Sicht wird das ganze für den Shopbetreiber auf den ersten Blick teurer als wenn er die Inhalte von seinem eigenen Server ausliefern lässt.
Das CDN macht die Auslieferung aus zwei Gründen schneller:

  • Zum einen sind die Server darauf spezialisiert, schnell statische Inhalt auszuliefern.
  • Zum anderen befinden sich die Server auf der ganzen Welt verteilt, ein Besucher aus Japan wird daher von der „Edge Location“ beliefert, die ihm physikalisch am nähsten ist. Weder die Anfrage noch die Antwort müssen um den halben Erdball, wie das bei einem in Deutschland stehenden Server der Fall wäre.

Und brauch ich das?

Wie bei so vielem ist auch hier die richtige Anwort: Kommt drauf an.
Wer einen Server hat, der in Spitzenzeiten in die Knie geht, weil der Apache nicht mehr hinterherkommt mit dem Ausliefern von Shopseiten und statischen Inhalten kann hier schnell für Abhilfe sorgen, ohne direkt den Server wechseln zu müssen.
Wer viele Kunden aus dem Ausland hat, diesen aber trotzdem Inhalte schnell ausliefern will, ist mit einem CDN ebenfalls gut bedient.
Außerdem kann man, wenn man es geschickt angeht, Browserlimitierungen umgehen was den gleichzeitigen Download von Dateien angeht. Das geht aber prinizipiell auch ohne CDN.

Und was kostet das?

Da es hier um Amazons Cloudfront gehen wird gibt darüber die Preisliste von Amazon Auskunft. Da kann man sich natürlich nicht wirklich viel drunter vorstellen, daher hier noch ein paar Zahlen aus der Praxis. Wir haben für den Erzgebirge-Palast alles auf dem CDN liegen: CSS-Dateien, Layoutbilder und Produktbilder. Unser Monatsmittel 2013 lag bei ca. $21, im vergangenen Jahr bei ca. $26. Für das Geld bekommt man ganz sicher nirgends ein vernünftiges Serverupgrade, mit dem man Lastspitzen wegpuffern kann. Und für uns, die einen sehr deutlichen Peak am Jahresende haben, ist das natürlich sehr wichtig.

Los geht’s: CDN-Distribution anlegen

Man braucht für das, was jetzt folgt, einen Amazon-AWS-Account und Zugriff auf seine Domainkonfiguration. Den Account kann man sich auf der Amazon-AWS-Seite anlegen.
Hat man das erledigt und auch eine Zahlungsweise hinterlegt kann man in der AWS Console ‘CloudFront’ auswählen. Nach dem Klick auf ‘Create Distribution’ wählen wir die Option ‘Web’, denn wir wollen ja Inhalte über HTTP und HTTPS ausliefern.

Jetzt geht es ans Ausfüllen des Formulars. Der einzige wichtige Eintrag ist Origin Domain Name. Hier tragen wir die URL unseres Shops ein (im Beispielfall ladeze.it) und nutzen somit automatisch Custom Origin, was vom Wartungsaufwand deutlich angenehmer ist als beispielsweise das Ausliefern der Dateien über Amazon S3.

Wer darüber hinaus eine regionale Einschränkung bei seinen Besuchern vornehmen kann, weil er beispielsweise gar nicht nach Asien verkauft, kann in den ‘Distribution Settings’ das bei ‘Price Class’ entsprechend auswählen. Wer eigene Domainnamen verwenden will statt abc.cloudfront.net kann diese bei ‘Alternate Domain Names (CNAMEs)’ angeben. Das machen wir mal und tragen cdn0.ladeze.it bis cdn5.ladeze.it dort ein, pro CNAME eine Zeile. Das bringt uns nämlich Vorteile wenn wir die Downloadbeschränkung der Browser umgehen wollen. Bei SSL müssen wir dann aber auf die von Amazon zur Verfügung gestellten URLs zurückgreifen, die Konfiguration mit einem eigenen SSL-Zertifikat würde den Rahmen dieses Artikels sprengen.

Nach dem Klick auf ‘Create Distribution’ startet Amazon das Deployment unserer neuen Distribution. Das dauert einen Moment und daher können wir die CNAME-Einträge für unsere Domains anlegen. Die Ziel-URL für den CNAME-Eintrag zeigt uns Amazon im Distribution-Dashboard bei ‘Domain Name’ an.

cdn-deployment

Wenn beides fertig ist, sowohl das Deployment der Distribution als auch das Einrichten der DNS-Einträge, können wir unser neues CDN zum ersten Mal testen. Das geht ganz einfach im Browser. Statt http://ladeze.it/images/product_images/thumbnail_images/53_0.jpg rufen wir aber http://cdn5.ladeze.it/images/product_images/thumbnail_images/53_0.jpg auf. Da DNS-Einträge bis zu 48 Stunden dauern können kann man, sollten die eigenen sich noch nicht herumgesprochen haben, den Test auch mit der von Amazon zur Verfügung gestellten URL durchführen und http://d4qtfj4qyflow.cloudfront.net/images/product_images/thumbnail_images/53_0.jpg aufrufen. Kommt das richtige Bild haben wir alles richtig gemacht.

Ein Blick in die Header-Angaben zeigt uns auch durch den vorhandenen Via-Record, dass die Datei von Cloudfront ausgeliefert wurde. Auch finden wir hier den X-Cache-Record. Beim ersten Aufruf steht dort ‘Miss from cloudfront’. Hier lag das Bild also nicht in Cloudfront vor und der Amazon-Server musste es von unserem Server laden. Alle subsequenten Aufrufe haben dann den Eintrag ‘Hit from cloudfront’.

cf-misscf-hit

Auch sieht man hier schön, dass unsere Einstellungen für max-age übernommen werden. Das Header-Plugin im Screenshot ist übrigens HTTP Headers.

Anpassungen am Shop

Jetzt geht es darum, dass unser modified-Shop die Bilder auch vom CDN ausliefert und nicht mehr von unserem Server.

Cache-Busting

Daten auf dem Cloudfront-CDN werden in der Default-Konfiguration erst nach 24 Stunden erneut auf Änderungen überprüft. Unsere .htaccess sagt sogar, dass Bilder 30 Tage im Cache gehalten werden können, ohne erneut zu prüfen, ob sich etwas verändert hat. Wir kommen also um ein Cache-Busting nicht herum. Dieses manuell zu machen wäre aber viel zu aufwendig. Daher betrifft die erste Änderung die Datei includes/classes/product.php, Zeile 492 wird dort ersetzt durch:

      $iTime = filemtime(DIR_FS_CATALOG.$path.$name);
      $aPath = pathinfo($name);
      return $path.$aPath['filename']."__".$iTime.".".$aPath['extension'];

Wir bauen also das letzte Modifikationsdatum mit in den Dateinamen ein und trennen es vom eigentlichen Namen mit zwei Unterstrichen ab. Völlig egal also ob wir über den Webbrowser oder direkt per SFTP ein Produktbild erneuern, es bekommt dann ein neues Modifikationsdatum und damit auch einen neuen Namen, der noch nicht im Cloudfront-CDN vorhanden ist und daher frisch angefordert wird.

Damit das auch funktioniert müssen wir außerdem im images/-Ordner eine .htaccess anlegen mit folgendem Inhalt:

RewriteEngine On
RewriteBase /
 
RewriteRule (.*)/(.*)__(.*).jpg$ images/$1/$2.jpg [L]

Weitere Änderungen am Core

Für das weitere Vorgehen braucht es eine Änderung in includes/configure.php, die wir nach dem define für HTTP_SERVER einfügen:

	define('HTTP_SERVER_CDN', 'http://cdn{i}.ladeze.it');
	define('HTTPS_SERVER_CDN', 'https://d4qtfj4qyflow.cloudfront.net');

Als nächstes modifizieren wir inc/xtc_image.inc.php.

Ersetzt wird

	// alt is added to the img tag even if it is null to prevent browsers from outputting
	// the image filename as default
	$image = '<img src="' . xtc_parse_input_field_data($src, array('"' => '&quot;')) . '" alt="' . xtc_parse_input_field_data($alt, array('"' => '&quot;')) . '"';

durch

	if(preg_match("/__/", $src)) {
		$aImage = pathinfo($src);
		$sSrc = preg_replace("/(.*)__(.*)/", "$1", $aImage['filename']);
		$sRealSrc = $aImage['dirname']."/".$sSrc.".".$aImage['extension'];
	}
	if(file_exists($src)) {
		$iCDN = (filesize($src)%5);
	} elseif(isset($sRealSrc) && file_exists($sRealSrc)) {
		$iCDN = (filesize($sRealSrc)%5);
	}
	if(REQUEST_TYPE!="SSL") {
		$sCDNSrc = str_replace("{i}", $iCDN, HTTP_SERVER_CDN)."/".$src;
	} else {
		$sCDNSrc = str_replace("{i}", $iCDN, HTTPS_SERVER_CDN)."/".$src;
	}
 
	// alt is added to the img tag even if it is null to prevent browsers from outputting
	// the image filename as default
	$image = '<img src="' . xtc_parse_input_field_data($sCDNSrc, array('"' => '&quot;')) . '" alt="' . xtc_parse_input_field_data($alt, array('"' => '&quot;')) . '"';

Damit werden jetzt schon diverse Bilder über das CDN geladen, aber vor allem die Produktbilder noch nicht. Um das zu erreichen braucht es ein Smarty-Plugin und Anpassungen an allen betroffenen Template-Dateien. Das kann in Arbeit ausarten, muss aber nur einmal gemacht werden. An dieser Stelle machen wir es nur anhand der Produktinfo-Seite.

Außerdem nutzen wir statt einer Domain für die Bilder jetzt mehrere. Da wir die Subdomain aufgrund des Modulos der Dateigröße festlegen ist es auch immer die gleiche Subdomain, die genutzt wird. Da Browser im Maximum sechs gleichzeitige Verbindungen zu einer Domain aufbauen haben wir damit die Anzahl der parallelen Zugriffe vervielfacht – und das CDN steckt das performancetechnisch locker weg.

Templates

Zunächst das Smarty-Plugin, dieses kommt nach templates/xtc5/smarty/function.cdn_image.php:

<?php
/**
 * Smarty plugin
 * @package Smarty
 * @subpackage plugins
 */
 
 
/**
 * Smarty {cdn_image} function plugin
 *
 * Type:     function<br>
 * Name:     cdn_image<br>
 * Purpose:  print an cdn_image()
 * @author Matthias Slovig
 * @param array parameters
 * @param Smarty
 * @return string|null
 */
function smarty_function_cdn_image($params, &$smarty) {
	require_once (DIR_FS_INC.'xtc_image.inc.php');
 
	return xtc_image($params['src'], $params['alt'], $params['width'], $params['height'], $params['params']);
}
 
/* vim: set expandtab: */
 
?>

Und dann die Anpassungen in templates/xtc5/module/product_info/product_info_tabs_v1.html:

<img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" />

wird ersetzt durch

{cdn_image src=$PRODUCTS_IMAGE params="class='productimage'" alt=$PRODUCTS_NAME}

Das ist wie gesagt überall dort zu wiederholen, wo Bilder, die eigentlich über das CDN geladen werden sollen, bislang noch durch einen normalen img-Tag eingebunden sind, also Produktlistings, Kategorienlistings, Boxen etc.

CSS und Javascript

Zuletzt sind CSS und Javascript dran, dafür bedarf es auch zunächst eines Cache-Bustings, dieses Mal in der normalen .htaccess des Shops direkt nach der Defintion der RewriteBase:

  RewriteRule (.*)-([0-9]+)\.css$ $1.css [L]
  RewriteRule (.*)-([0-9]+)\.js$ $1.js [L]

Die neue templates/xtc5/css/general.css.php sieht so aus:

<?php
/* -----------------------------------------------------------------------------------------
   $Id: general.js.php 1262 2005-09-30 10:00:32Z mz $
 
   XT-Commerce - community made shopping
   http://www.xt-commerce.com
 
   Copyright (c) 2003 XT-Commerce
   -----------------------------------------------------------------------------------------
   Released under the GNU General Public License
   ---------------------------------------------------------------------------------------*/
 
   // Put CSS-Definitions here, these CSS-files will be loaded at the TOP of every page
 
	$iCDN['stylesheet'] = filesize(DIR_FS_CATALOG."templates/".CURRENT_TEMPLATE."/stylesheet-min.css")%5;
	$iCDN['thickbox'] = filesize(DIR_FS_CATALOG."templates/".CURRENT_TEMPLATE."/css/thickbox-min.css")%5;
	$iCDN['jquery-ui'] = filesize(DIR_FS_CATALOG."templates/".CURRENT_TEMPLATE."/css/jquery-ui.css")%5;
	$sURL['stylesheet'] = str_replace("{i}", $iCDN['stylesheet'], REQUEST_TYPE=='SSL' ? HTTPS_SERVER_CDN : HTTP_SERVER_CDN)."/templates/".CURRENT_TEMPLATE."/stylesheet-min-".filemtime(DIR_FS_CATALOG."templates/".CURRENT_TEMPLATE."/stylesheet-min.css").".css";
	$sURL['thickbox'] = str_replace("{i}", $iCDN['thickbox'], REQUEST_TYPE=='SSL' ? HTTPS_SERVER_CDN : HTTP_SERVER_CDN)."/templates/".CURRENT_TEMPLATE."/css/thickbox-min-".filemtime(DIR_FS_CATALOG."templates/".CURRENT_TEMPLATE."/css/thickbox-min.css").".css";
	$sURL['jquery-ui'] = str_replace("{i}", $iCDN['jquery-ui'], REQUEST_TYPE=='SSL' ? HTTPS_SERVER_CDN : HTTP_SERVER_CDN)."/templates/".CURRENT_TEMPLATE."/css/jquery-ui-".filemtime(DIR_FS_CATALOG."templates/".CURRENT_TEMPLATE."/css/jquery-ui.css").".css";
?>
<link rel="stylesheet" href="<?php echo $sURL['stylesheet'] ?>" type="text/css" />
<link rel="stylesheet" href="<?php echo $sURL['thickbox'] ?>" type="text/css" media="screen" />
 
<?php // BOF - web28 - 2010-07-09 - TABS/ACCORDION in product_info ?>
<?php
if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO )) {
?>
<link rel="stylesheet" href="<?php echo $sURL['jquery-ui'] ?>" type="text/css" media="screen" />
<?php
}
?>
<?php // EOF - web28 - 2010-07-09 - TABS/ACCORDION in product_info ?>

Das Laden der CSS-Datei über das CDN führt automatisch dazu, dass auch alle relativ referenzierten Bilder ebenfalls über Cloudfront ausgeliefert werden.

Und so sieht die neue templates/xtc5/javascript/general.js.php aus:

<?php
/* -----------------------------------------------------------------------------------------
   $Id: general.js.php 1262 2005-09-30 10:00:32Z mz $
 
   XT-Commerce - community made shopping
   http://www.xt-commerce.com
 
   Copyright (c) 2003 XT-Commerce
   -----------------------------------------------------------------------------------------
   Released under the GNU General Public License
   ---------------------------------------------------------------------------------------*/
 
 
   // this javascriptfile get includes at the BOTTOM of every template page in shop
   // you can add your template specific js scripts here
 
	$iCDN['jquery'] = filesize(DIR_FS_CATALOG."templates/".CURRENT_TEMPLATE."/javascript/jquery.js")%5;
	$iCDN['thickbox'] = filesize(DIR_FS_CATALOG."templates/".CURRENT_TEMPLATE."/javascript/thickbox.js")%5;
	$iCDN['jquery-ui'] = filesize(DIR_FS_CATALOG."templates/".CURRENT_TEMPLATE."/javascript/jquery-ui.js")%5;
	$sURL['jquery'] = str_replace("{i}", $iCDN['stylesheet'], REQUEST_TYPE=='SSL' ? HTTPS_SERVER_CDN : HTTP_SERVER_CDN)."/templates/".CURRENT_TEMPLATE."/javascript/jquery-".filemtime(DIR_FS_CATALOG."templates/".CURRENT_TEMPLATE."/javascript/jquery.js").".js";
	$sURL['thickbox'] = str_replace("{i}", $iCDN['thickbox'], REQUEST_TYPE=='SSL' ? HTTPS_SERVER_CDN : HTTP_SERVER_CDN)."/templates/".CURRENT_TEMPLATE."/javascript/thickbox-".filemtime(DIR_FS_CATALOG."templates/".CURRENT_TEMPLATE."/javascript/thickbox.js").".js";
	$sURL['jquery-ui'] = str_replace("{i}", $iCDN['jquery-ui'], REQUEST_TYPE=='SSL' ? HTTPS_SERVER_CDN : HTTP_SERVER_CDN)."/templates/".CURRENT_TEMPLATE."/javascript/jquery-ui-".filemtime(DIR_FS_CATALOG."templates/".CURRENT_TEMPLATE."/javascript/jquery-ui.js").".js";
?>
 
<script src="<?php echo $sURL['jquery'] ?>" type="text/javascript"></script>
<script src="<?php echo $sURL['thickbox'] ?>" type="text/javascript"></script>
 
<?php // BOF - web28 - 2010-07-09 - TABS/ACCORDION in product_info ?>
<?php
if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO )) {
?>
<script src="<?php echo $sURL['jquery-ui'] ?>" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
	//Laden einer CSS Datei mit jquery
    $.get("<?php echo 'templates/'.CURRENT_TEMPLATE; ?>"+"/css/javascript.css", function(css) {
		$("head").append("<style type='text/css'>"+css+"<\/style>");
	});
 
	$(function() {
		$("#tabbed_product_info").tabs();
		$("#accordion_product_info").accordion({ autoHeight: false });
	});
/*]]>*/
</script>
<?php
}
?>
<?php // EOF - web28 - 2010-07-09 - TABS/ACCORDION in product_info ?>

Optimizing JPEG images – save 20% in file size

Optimizing your image file size is one of the low hanging fruits when it comes to page speed optimization for your website.

My current workflow for JPEGs looks something like this:

  • ‘Save for Web’ in Photoshop with 60% quality
  • Run through ImageOptim to reduce file size

Yesterday, Marc Thiele asked on Twitter:

In the unfolding discussion some folks stated that they use both JPEGmini and ImageOptim when it comes to JPEGs and that this would reduce the file size even more. Fortunately I had to add pictures to 50 new products today. Every product has three pictures from different angles, so this sums it up to 150 images in various sizes, 900 images in total, all JPEG.
So I gave it a try and here are the results (I bought JPEGmini for this test as 20 images on the lite version might not be enough to get reliable results, still, your mileage may vary).

‘Save for Web’

With just using ‘Save for Web’ the images had a total size of 84MB. Quite heavy.
photoshop

ImageOptim

Running these through ImageOptim saved nearly 10% and lowered the total size to 75.7MB.
imageoptim

JPEGmini

Using the ‘Save for Web’ images again (not touched by ImageOptim yet) results in 74.2MB.
jpegmini

ImageOptim after JPEGmini

Now adding another run of ImageOptim to the images already optimized by JPEGmini lowers the total size to 66.9MB. Thats more than 20% in file size saved without compromising image quality.
jpegmini-imageoptim

As far as I can tell it is not necessary to run the tools multiple times. At least in ImageOptim it is obvious that the latest version does this by itself. And I wasn’t able to spot any major changes on a second and third run with JPEGmini.

To give you the ability to compare the results, below are two images. The left one is the image just saved from Photoshop, the right one is the image after the whole optimization process.
photographer_ps photographer_optimized

Kundenservice? Not here. Not now.

Ich bin umgezogen. Irgendwann im Mai. Im Rahmen der Einrichtung der neuen Wohnung habe ich es geschafft, mir meine sämtlichen Plastikkarten zu bricken. Also von Kreditkarte über Packstation, Krankenkasse bis hin zu Payback. Topfmagnet vs. Karte ist halt keine so gut Idee. Wurde mir auch klar, als der Magnet sich von meinem Kleingeld magisch angezogen fühlte.

Also konnte ich direkt zwei Fliegen mit einer Klappe schlagen: Adressänderung und neue Karten anfordern. Bei der Bank habe ich angerufen. Da ging auch alles glatt. DHL und DAK habe ich eine E-Mail geschrieben. Wobei das nicht wirklich richtig ist. Ich habe das Kontaktformular benutzt, das auf deren Homepages angeboten wird. Bei beiden ist das jetzt 3,5 Wochen her. Seitdem ist nichts geschehen. Keine Bestätigung der Adressänderung, keine neuen Karten. Der Griff zum Telefonhörer also unvermeidlich.

Bei DHL wusste man nichts von einer Mail. „Das Kontaktformular geht über verschiedene Kanäle” war da die Aussage. Was auch immer das heißen mag. Vielleicht, dass man es sich betriebsintern so lange weiterleitet bis sich das Problem von selbst erledigt hat. Ich weiß es nicht. Eine neue Karte würde aber zwei Wochen dauern. Das ich schon mehr als drei Wochen warten würde, weil DHL die internen Prozesse nicht im Griff hat, wollte man nicht gelten lassen. Immerhin war die neue Adresse schon hinterlegt. Das liegt aber daran, dass man die bei DHL selbst ändern kann.

Mehr als drei Wochen keine Reaktion und dann zwei Wochen Wartezeit für ein neues Plastikkärtchen. Geht nicht schlimmer? Klar geht das schlimmer. Nächster Anruf DAK:
Da die DAK-Karte keinen Magnetstreifen besitzt hatte ich denen ins Kontaktformular geschrieben, dass sie mir doch bitte mitteilen sollen, ob es der Karte schadet wenn man sie mit einem Magnet in Kontakt bringt. Genau das war meine Einstiegsfrage ins Gespräch:

Support:
Das kann ich Ihnen leider auch nicht sagen.
Ich:
Dann bringen Sie das doch bitte mal in Erfahrung.
Support:
Waren Sie in der Zwischenzeit beim Arzt und sie hat nicht funktioniert?
Ich:
Nein, ich dachte ihr seit in der Lage, innerhalb von drei Wochen eine E-Mail zu beantworten.
Support:
Äh, da kann ich jetzt nichts zu sagen. Ich schick Ihnen eine neue zu.
Ich:
Klären Sie doch erstmal, ob das wirklich nötig ist!
Support:
Das kann ich nicht.
Ich:
Es wird doch irgend jemand bei Ihnen im Haus geben, der diese Frage beantworten kann.
Support:
Äh… Moment.
(Geht also doch. Man will nur nicht. Man hört Rascheln im Hintergrund, keine Warteschleifenmusik. Sehr professionell.)
Support:
Ja, es schadet der Karte. Ich schick Ihnen also eine neue zu. Wie heißen Sie denn.
Ich:
Slovig
Support
Sowick?
(Die genaue Schreibweise war nicht zu ermitteln)
Ich:
Slovig. Siegfried, Ludwig, Otto, Vogel, Ida, Gustav.
Support:
Vorname?
Ich:
Matthias
Support:
Mit einfachem T?
Ich:
Mit doppelt-T und H.
Support:
In Berlin?
Ich:
Nein. Ich glaube, es ist einfacher, ich gebe Ihnen meine Versichertennummer.
Support:
Ja, das ist eine gute Idee.

Es gibt keinen Matthias Slovig mit genau dieser Schreibweise in Berlin. Die Supportmitarbeiterin hat es also tatsächlich geschafft, einen aus sechs Buchstaben bestehenden buchstabierten Nachnamen falsch ins Formular einzutragen. Warum sie nicht von sich aus nach der Versichertennummer gefragt hat wird ein ewiges Rätsel bleiben.

Support:
In Mainz also.
Ich:
Ja.
(Zumindest das fehlerfreie Eintippen eines Buchstabens und einer neunstelligen Nummer hat funktioniert.)
Support:
Ich schick die Karte dann raus.
Ich:
Welche Adresse haben Sie denn hinterlegt?
Support:
Am Schinnergraben 102.
Ich:
Verdammt noch mal! Ihr habt es also in diesen drei Wochen nicht mal geschafft, meine neue Adresse in Euer System zu übernehmen! Das kann es doch echt nicht sein!

Ich bin seit Geburt bei der DAK. Derzeit zahle ich monatlich einen hohen dreistelligen Betrag, damit ich zweimal jährlich meine Zahnreinigung selber zahlen darf *. Ich habe mich trotzdem nie mit dem Gedanken getragen, die Krankenkasse zu wechseln. Bis heute. Wenn das der Anspruch der DAK ist, den sie an ihren Kundendienst stellen (unfähige Hotline-Mitarbeiter, niemand, der E-Mails bearbeitet), dann muss ich mich ernsthaft fragen, ob das noch immer die Krankenkasse ist, bei der ich versichert sein möchte.
Sollte man jetzt auch noch ein neues Bild brauchen, weil man das alte verschlampt hat, werde ich das so lange ausfechten bis man mir eine Karte ohne Bild schickt, das ist sicher.

* Mir ist durchaus klar wie so ein Solidarsystem funktioniert. Kommentare diesbezüglich kann man sich also sparen. Danke.

xt:Commerce performance issues due to getAlsoPurchased()

Modern shopsystems, and for the sake of this post I’m counting the dated xt:Commerce 3 as ‘modern’, are full of features. Features you most likely never use. We, for instance, don’t use Tell-a-friend (as it’s not compatible with german law) or wishlists (as we never saw a need for it).

However, chances are good that those unused features turn out to be a bottleneck when it comes to performance. Especially when they are coded by someone who has heard the word ‘MySQL’ for the first time (i.e. those guys who wrote xt:Commerce 3).

At X-Skating we recently faced the problem that the front page loaded pretty good, the page for a single product however had almost one second till time to first byte (the .700 in the screenshot is better than most other tests we ran).
Read more

Free these mobile contracts, Deutsche Telekom

To give you some context this starts last friday. I attended border:none, a conference for web professionals that took place in Nuremberg. My parents only live an hour north and so I took the opportunity and swung by their place. Also my brother is among the best german model railroaders, his work is known all over Europe and, thanks to his website, worldwide. His club ran their yearly exhibition on that same weekend and as I hadn’t seen it in action before I went there to have a look at his new South Africa layout. Of course I took some pictures and back at my parents uploaded them to my dropbox. Well, at least I tried.

My parents have DSL6000, that means 6016 kbit/s down and 576 kbit/s up. However, as the line is too long, they only can use a fraction of this. It took ages to upload only one picture. I put my phone in the pocket and went upstairs to see my other brother. There is no WIFI reception upstairs and when I unlocked my phone in the attic the upload was incredible fast. I was stunned. What happend? Due to the lack of a WIFI connection my iPhone 5S ‘dropped’ to LTE, which is available in the area. LTE, however, gives me something similar to DSL16000 and all 40 images and two videos got uploaded in less than 10 minutes. You would like to cancel the DSL6000 contract now, put a SIM into your router and use LTE from there on. There is, however, one problem and it has a name: The carriers.

The contracts offered by Deutsche Telekom (and all other carriers in Germany) don’t have a real flatrate, you get your bandwith limited when you hit a ridiculously low amount of data transfered. Remove this, Deutsche Telekom, or at least lift it up to something useful, 50GB or 100GB would do for the beginning. Free these mobile contracts! It’s your chance! And your obligation. Make Germany fast!

International Tracking Links

I’m currently building a new ERP for our company. To make life easier for our customer service they have direct links from within any order to the parcel tracking. We ship most of our items with DHL Germany. Other than with DHL Express the parcel will not be delivered with DHL in the destination country but with the local company instead. DHL provides us with a match code/UPU once the parcel reaches the destination country.

I already built a lot of icons for this but I wanted to improve this even more for our customer service. So where available I tracked down the URL for the Track&Trace in the destination countries – if available the direct link to the result page without any need for our people to put in the match code into another form and submit it.

I’d like to share this list, maybe it’s helpful to anybody else. If you have suggestions, improvements or want to add missing companies, just drop me a line.

This project on Github

Read more