Auswahl des richtigen Bildformats fürs Web

So wählen Sie für Ihre Website das richtige Bildformat aus.

Grundsätzlich haben sich im Web drei Bildformate durchgesetzt. Jedes einzelne Format birgt dabei Chancen und Risiken bei der Anwendung. Ziel der Website-Performance-Optimierung ist dabei immer, für den Anwendungsfall das geeignete Bildformat mit der geringsten Bildgröße zu finden.

Bilder nicht per HTML skalieren

So verkleinern Sie Bilder für die Website richtig.

Bilder sind heutzutage zum integralen Bestandteil der meisten Websites geworden. Egal ob Urlaubsfotos, Diagramme oder Schaubilder – Bilder lockern auf und helfen dabei Inhalte zu vermitteln.

Wenn man Bilder per HTML in eine Website integriert, kann man mit dem Height- und Width-Attribut des Img-Tags die Dimension des Bidles anzugeben. Tatsächlich ist es damit aber auch möglich, Bilder die eigentlich viel breiter und höher sind, entsprechend zu skalieren. Leider wird durch diese Skalierung nicht die tatsächliche Dateigröße des Bildes verkleinert, sondern lediglich die Ausgabe.

Mit PHP überprüfen ob eine URL vorhanden ist

So können sie mit Hilfe von PHP testen, ob eine Website vorhanden ist.

Ich nutze dazu einfach CURL und hole mir mit curl_getinfo die entsprechenden Header-Informationen. In dem Response-Header gibt es den http_code, der entsprechend auf HTTP-Error 404 überprüft wird.

function isUrlExists($url) {

  $ch = curl_init();
  curl_setopt($ch,CURLOPT_URL,$url);
  curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
  curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,0);
  curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,2);
  curl_setopt($ch, CURLOPT_CUSTOMREQUEST,'GET');
  curl_setopt ($ch, CURLOPT_HEADER, 0);

  curl_exec($ch);

  $i = curl_getinfo($ch);

  curl_close($ch);

  return ($i['http_code'] != "404");  

}

Statische Inhalte ohne Cookie ausliefern

So setzen liefern Sie statische Inhalte ohne Cookie aus und sparen dabei Traffic, CPU-Ressourcen und erhöhen die Web-Performance.

Viele Komponenten einer Website sind eher statische Inhalte, d.h. sie verändern sich nicht während der Laufzeit bzw. einer Nutzer-Session. Beispiele dafür sind sämtliche Bilder, Javascript- und Stylesheet-Dateien. Wenn diese Komponenten vom Webserver übertragen werden, ist es also in aller Regel nicht notwendig einen Cookie zu senden.

Ausmaße der Bilder im HTML-Quellcode festlegen

Wie Sie durch die Angabe von Höhe und Breite die Darstellungsgeschwindigkeit der Website verbessern können.

Ist Ihnen auch schonmal aufgefallen, dass beim Laden einiger Websites das Layout ständig verrutscht? Das kann daran liegen, dass die Macher nicht die Höhe und Breite der Bilder angegeben haben. Dadurch weiß der Web-Browser zwar, dass ein Bild an einer bestimmten Stelle angezeit werden soll, aber beim Ladevorgang, noch nicht wie groß es ist. Erst wenn es vollständig heruntergeladen wurde, kann er die Bilddimensionen berechnen und es entsprechend im Layout einfügen.

Favicon an die richtige Stelle

Wie ein kleines Bild an der richtigen Stelle den Server entlasten kann.

Wir kennen sie alle, diese kleinen bunten Bildchen, die im Tab oder in der Adressleiste des Webbrowser angezeigt werden. Diese Bilder heissen Favicon und liegen an einer ganz bestimmten Stelle auf dem Webserver. Der entsprechende Pfad ist üblicherweise: http://www.example.com/favicon.ico

MySQL Dump ohne Locking von Tabellen

So können Sie ein Backup einer MySQL-Datenbank während des Betriebs der Datenbank erstellen.

Wenn man von sehr großen Datenbanken zur Laufzeit ein Backup machen möchte, hat man das Problem, dass MySQL eigentlich einen sogenannten Lock (also eine Sperre) auf die Tabellen setzt. Dadurch wird zum einen verhindert, dass unkonsistente Daten enstehen, zum anderen aber eben auch, dass überhaupt mit der MySQL-Datenbank und den Tabellen gearbeitet werden kann.

Am einfachsten geht ein Backup mit der --opt Option. Dabei werden automatisch eine wichtige Parameter wie extented Inserts u.a. gesetzt. Dummerweise eben aber auch --lock-tables. Um das ganze zu umgehen, kann man einfach die Option --skip-lock-tables hinzufügen. Dadurch wird es möglich ohne eine Störung während des Betriebs ein Dump einer MySQL-Datenbank zu machen.

Hier nochmal der komplette Syntax:

mysqldump --opt --skip-lock-tables -uUSERNAME -pPASSWORD DATABASE > FILE

Wobei die Wörter in Großbuchstaben durch die entsprechenden Daten ersetzt werden müssen.

Ausgehende Links/Klicks mit Google Analytics tracken

So können Sie Outbound Links, als die Klicks auf ausgehende Links auf Ihrer Website, mit Google Analytics tracken.

Ich habe die letzten Tage damit zugebracht herauszubekommen, wie man ausgehende Links mit Google Analytics tracken kann. Grundsätzlich gibt es dabei zwei Schwierigkeiten: 1.) Ist die Dokumentation nicht wirklich hilfreich und teilweise veraltet und 2.) gibt zwei Möglichkeiten Klicks zu tracken:

  1. Event-Tracking: Mit dem Event-Tracking können verschiedenen Aktionen auf der Website entsprechende Events zugeordnet werden. Den einzelnen Events kann man außerdem noch Kategorien, Aktionen und Labels zuordnen. Grundsätzlich sehr nett, allerdings mit dem riesigen Nachteil, dass man diese Events nicht in den Zieltrichter aufnehmen kann – es lassen sich also keine Ziele mit Outclicks definieren.
  2. Virtuelle Pageviews: Um Ziele zu definieren, benötigt man immer Seitenaufrufe. Aus diesem Grund kann man per Javascript-OnClick-Event einen Pageview mit Hilfe eines _trackPageview auslösen. Die Seite die dabei getrackt wird, muss nicht tatsächlich existieren. Man kann sie strukturiert aufbauen um hinterher auch Filter anwenden zu können, z.B. /de/out/kategorie/produkt/click-auf-preis/ o.ä.

Der Code für die zweite Variante kann dann beispielsweise so aussehen:

<a href="http://www.." onClick="javascript:_gaq.push(['_trackPageview', '/out/product/']);"

Der Nachteil an dieser Variante ist, dass dadurch mehr Page-Impressions im Account generiert werden, da jetzt jeder Klick auf einen externen Link eine virtuelle Page-Impression auslöst. Das ganze kann man auch in der Migrationsanleitung von Google Analytics nachlesen.