unix addicted webdeveloper & designer…

so eben gefunden und für cool befunden

wer sich bisher mit grep und awk duch seine logs hangelt sollte sich mal goAccess anschauen.

http://goaccess.prosoftcorp.com/

einfacher geht es nicht

goaccess -f /var/log/apache2/access.log

oder wer wie ich ungerne zusätzliche software auf seinem Server Installiert.

ssh user@server 'cat /var/log/apache2/access.log' | goaccess

und so sieht das ganze aus.

Na klasse! Da hat man seine App fertig und macht nochmal die obligatorischen Browser-Tests und dann das: Der IE weigert sich standhaft den Auth-Cookie zu setzen. Ich habe wirklich lange nach einer Lösung suchen müssen.

Das Problem ist folgendes:

Die Sicherheits-Einstellungen des Internet Explores verbieten das Setzen eines Cookies Innerhalb eines IFrames (nichts anderes ist ja das Facebook Canvas). Ich habe mir daraufhin andere Facebook-Apps angeschaut und tatsächlich: Selbst so bekannte Anwendungen wie “Mafia Wars” bleiben in der Authentifizierungs-Schleife hängen.

Abhilfe schafft das Setzen des Cookies explizit zu erlauben. Dies geschieht über das “Devil Eye” in der Statusleiste des IE. Für die meisten Benutzer ist das aber keine wirklich praktikable Lösung.

Es geht aber auch anders.

Mittels des sogenannten P3P-Headers kann man eine “Privacy-Policy” setzen, die es der eingebetteten Seite erlaubt, einen Cookie zu speichern. Dies erfolgt durch das Senden eines Header Feldes “P3P” mit folgendem Inhalt:

CP='IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT

Dann klappt es auch mit dem Internet Explorer.

Dies kann entweder per PHP, Python oder durch den Apache Webserver geschehen. Dazu muss die .htaccess nur um folgende Zeilen erweitert werden:

<IfModule mod_headers.c>
    <Location />
        Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
    </Location>
</IfModule>

Doch was bedeuten diese Zeilen? Unter p3pwriter.com gibt es ein Schlüssel-Verzeichnis. Zum Beispiel steht “DEVi” für:

“Information may be used to enhance, evaluate, or otherwise review the site, service, product, or market. Opt-in means prior consent must be provided by users.”

Ich habe keine Ahnung, wie verpflichtend diese Policy ist und ob es rechtliche Konsequenzen hat, diese zu brechen. Jedenfalls bin ich docherstaunt, das Facebook diese Problematik anscheinend egal ist und nirgendwo eine Hilfestellung zu diesem Problem anbietet.

Trotz immer besserer Internetanbindungen wird die Optimierung der Ladezeit aus verschiedenen Gründen immer wichtiger. Der Einsatz eines CDN (Content Delivery Network) kann dabei ein wichtiger Optimierungsfaktor sein, der sich positiv auf folgende Punkte auswirken kann:

• Die Absprungrate
• Suchmaschinen-Plazierung
• Server-Last/-Traffic
• Kostenreduzierung

Doch zuerst: Was ist ein CDN oder Content Delivery Network? Ein CDN ist meist ein weltweit oder kontinentales Netzwerk aus Servern, die Inhalte an den Besucher ausliefern können. In diese werden statische Inhalte wie Bilder, Javascript, CSS und Videos vorgehalten, die dann von einem möglichst nah am Besucher liegendem Server an diesen ausgeliefert werden. Da die Inhalte zum einen nicht durch das ganze Netz transportiert werden müssen, und zum anderen der Client von zwei Ressourcen parallel Daten anfordern kann, steigt die Ladegeschwindigkeit und die Latenz sinkt.

Netzwerk ohne Content Delivery Network

Netzwerk mit Content Delivery Network

Kommen wir nun zu den Punkten, auf die sich die Verwendung eines solchen Netzwerkes positiv auswirken kann.

Die Absprungrate

Der erste Punkt ist eigentlich jedem klar: Wer auf eine Seite warten muss, springt ab und obwohl die Anbindungen in der Regel schneller werden, sind die Besucher wesentlich ungeduldiger als noch vor ca. 5 Jahren, als das Warten auf eine Seite noch zum Alltag gehörte. Welche Korrelation zwischen Ladezeit und Absprungrate besteht, ist zu individuell, um darüber eine pauschale Aussage zu treffen. Allerdings gilt für alle Seiten: Je schneller, desto besser

Google hat dazu in einem Test das Ausliefern ihrer Suchergebnisse künstlich verzögert. Und zwar im Maximum um gerade mal 400 ms. Die Folge ist ein Einbruch des Suchvolumens um 0,59%. Dieses Ergebnis ist meiner Meinung auch noch extrem geschönt, da Google einen hohen Trust hat und die Benutzer wissen, was Sie erwartet. Ein Erstbesucher auf Ihrer Seite weiß das nicht, daher ist dort die Absprungrate meist um ein Vielfaches höher.

Suchmaschinen Platzierung

Zu Punkt zwei. Diese Auswirkung wird oft vergessen, aber Fakt ist, dass alle großen Suchmaschinen offen zugeben, die Ladezeit mit in das Ranking aufzunehmen. Zu welchem Teil, darüber lässt sich natürlich nur spekulieren. Aber gering kann er nicht sein, wenn Yahoo und Google sogar eigene Page-Speed-Analyse-Werkzeuge als Browser-Plugin anbieten. Aber selbst, wenn sie die Ladezeit nicht als Ranking-Faktor einbeziehen würden – die Absprungrate und Verweildauer auf Ihrer Seite ist es auf jeden Fall. Und die hat ebenfalls einen Einfluss auf das Ranking. Hier beißt sich also die Katze in den Schwanz….

Darüber hinaus wird die Verwendung eines CDN so oder so positiv bewertet. Bei Google heißt es zwar nur, dass man statische Inhalte wie Bilder, Javascript und CSS auf eine sogenannte “cookieless domain” auslagern soll. Yahoo dagegen vergibt nur die volle Punktzahl, wenn ein echtes CDN eingesetzt wird.

Server-Last/-Traffic

Der letzte Punkt ist die Entlastung des eigenen Servers. CDN sind eine wirklich gute Möglichkeit, Last vom Server zu nehmen. Dieser kann sich ganz auf die Bereitstellung der dynamischen Inhalte konzentrieren, ohne die vielen weiteren Requests für die restlichen Seitenelemente bearbeiten zu müssen. Aber auch wer mit Engpässen aufgrund eines hohen Traffic-Aufkommens Probleme hat, kann sich mit der Auslagerung von Downloads oder Audio-/Video-Inhalten in ein CDN helfen.

Kostenreduzierung

Dieser Punkt mag den ein oder anderen verwundern, da Content Delivery Networks in der Regel sehr teuer sind. Aber es gibt auch Fälle, wo sich durch Ihren Einsatz sparen lässt. Wer seine Seite in der Cloud hosted, bezahlt in der Regel recht viel für den anfallenden Datenverkehr. Im Beispiel von JiffyBox sind das pro GB 0.09 Cent. Dagegen kostet MaxCDN pro GB umgerechnet nur 0.07 Cent und wird bei der Abnahme von größeren Volumen sogar noch günstiger.

Fazit

Kleine, performante Seiten stehen im krassen Gegensatz zum Trend, immer mehr Bilder/Videos und JavaScript-Frameworks einzusetzen. Trotzdem sollte vor dem Einsatz eines CDN zuerst einmal die Datenmenge reduziert werden z.B. durch Kompression der verwendeten Scripte und CSS-Dateien. Auch die Bilder sollten nochmal durch ein Optimierungs-Tool wie optipng laufen. Photoshop hat das leider nicht so ganz raus…

Zur Messung der eigenen Seiten-Performance empfiehlt sich der Einsatz eines Browser-Plugins wie PageSpeed oder eine Onlinemessung wie sie z.B. Pingdom bietet. Diese geben auch gute Tipps zu weiteren Optimierungs-Faktoren.

Nächste Woche geht es dann im Teil zwei weiter. Dieser wird verschiedene Typen von CDN beleuchten und auch ein paar Tips und Empfehlungen geben, wie Ihr günstig selber ein CDN für Euch nutzen könnt.

Wer auf “State of the Art” Features wie Nesting, Loops und ähnliches verzichten kann, für den lohnt es sich in ein paar Zeilen ein eigenes Template-Plugin zu schreiben.

Hier das jQuery Plugin:

jQuery.fn.render = function(values){

    this.each( function (index, template) {

        var org_ob = $(template)
        var ob = org_ob.clone();

        for (var key in values) {
            re = new RegExp('@'+key+'@', 'gm');
            ob.html(ob.html().replace(re,values[key]))
        }  

        ob.addClass('jst_ready').insertAfter(org_ob)

        var id = org_ob.attr('id');
        re = new RegExp('jst_', 'gm');
        ob.html(ob.html().replace(re,id))

        if (ob.hasClass('jst_hide')) { ob.hide(); } else { ob.show(); }

    });
}

Templates sehen dann so aus:

<div class="name" style="display:none;">@firstname@ @lastname@</div>

und

$('.name').render({'firstname':'Max','lastname':'Muster'});

macht daraus…

<div class="name_item jst_ready" style="display:none;">Max Muster</div>

Darüber hinaus kann durch die Klasse “jst_hide” das Template zwar gerender aber nicht angezeigt werden und eine “id” sollte wie folgt aufgebaut sein damit es keine Kollisionen gibt.

id="jst_name"

wird zu

id="name"

Sharing your hosts network connection with your freerunner is pretty simple under Debian and Ubuntu. Create a script with the following code and you are done.

#!/bin/bash
sudo iptables -A POSTROUTING -t nat -j MASQUERADE -s 192.168.0.0/24
sudo sysctl -w net.ipv4.ip_forward=1
sudo ip addr add 192.168.0.200/24 dev eth2
sudo ip link set eth2 up
scp /etc/resolv.conf root@192.168.0.202:/etc/resolv.conf
ssh -X root@192.168.0.202