zu Hause haben wir eine Baustelle und im Blog sieht es ebenso aus: Das Theme wurde komplett neu aufgesetzt (auch wenn es äußerlich fast so aussieht als bisher). Es hakt noch an vielen Stellen und einiges muss noch optimiert werden. Doch nun ist es endlich soweit, dass ich wenigstens  mal wieder Content liefern kann.

Im Zuge der Optimierungsarbeiten überlegt ich mir auch, welcher “Lightbox-Effekt”  im Blog eingebaut werden soll. Die Frage ist durchaus berechtigt, denn Lightbox ist nicht gleich Lightbox. Oftmals ist es auch eine “Heavybox”, deshalb kommt es durchaus darauf an, dass man den “passenden” Effekt wählt.

Das t3n-Magazin ist um eine Attraktion reicher: Dort gibt es nun eine Community, bei der Ihr Fragen zu den Themen  Web 2.0, Open Source, Webentwicklung oder E-Business stellen oder beantworten könnt. So stellte ich dort vor ein paar Tagen auch eine Frage, die dankenswerterweise glänzend beantwortet wurde:

Was haltet Ihr von Lightbox-Effekten für Bilder im Blog? Alles Quatsch oder schicke Garnitur?

Welche sind bei Euch im Einsatz? Kennt Ihr empfehlenswerte Scripte?

Thomas Quensen meinte, ein Lightbox-Effekt sei besser als das große Bild auf einer neuen Seite anzuzeigen oder garnicht anzubieten. Dieser Meinung schließe ich mich vollkommen an. Jedenfalls nannte er einen Link zu einem Projekt, bei dem zahlreiche Lightbox-Effekte in einer Tabelle aufgelistet sind.

Was ist der “richtige” Lightbox-Effekt für mich?

In der o.g. Tabelle ist auch aufgelistet, welche Javascript-Dateien für die zahlreichen Lightblox-Clone jeweils erforderlich sind. Das Ganze sieht so aus (bei der Gelegenheit könnt Ihr meinen “Lightbox-Effekt gleich anschauen und Euren Senf dazu abgeben, wenn Ihr möchtet):

Lightbox-Effekte im Überblick (klicken zum Vergrößern)

Nun kommt es darauf an, ob Ihr einfach mal wild drauf los poppen wollt, oder ob Ihr Euch überlegt, welche Skripte bei Euch ohnehin aktiv sind. Denn viele Themes und Plugins erfordern für mehr oder weniger hilfreichen Schnickschnack einiges an Javascript-Power. So hatte ich vor einiger Zeit noch das Wordpress-Plugin “Lightbox 2” aktiv, das neben den ohnehin vorhandenen Skripten (Lightbox.js und Lightbox-resize.js) noch 172k Prototype.js + Scriptaculous.js ludt. Das war eigentlich total unnötig, denn für andere Lightbox-Effekte war der vorhandene Blog viel besser geeignet. Meine Wahl fiel auf Fancybox, das neben dem hauseigenen Skript nur noch jquery.js benötigt, das bei mir ohnehin aktiv ist. Für Fancybox gibt es übrigens auch ein Wordpress-Plugin, das allerdings entbehrlich ist. Eine weitere Beschreibung des nachfolgend vorgestellten Effekts findet Ihr bei Caschy.

Schaut am Besten mal in Eurem Blog nach, welche Javascript-Dateien mit Lightbox-Effekt und welche ohne Lightbox-Effekt geladen werden. Hierfür gibt es zahlreiche Tools und Programme, die ich im Artikel “Blogladezeiten optimieren” vorgestellt habe.

Fancybox in Wordpress einbinden

Das ist eigentlich nicht so schwer und wird auf der Herstellerseite auch gut erläutert. Ich fasse das ma ganz schnell zusammen:

1.) Javascript Dateien, Stylesheets und Bilder hochladen

2.) Javascript einbinden

im Normalfall in der header.php:

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.0.pack.js"></script>

Nach “src” tragt Ihr natürlich Euren eigenen Pfad ein (aus Schritt 1). Vergewissert Euch, ob jquery.js aktiv ist – falls nicht, bindet Ihr es gleichfalls ein.

3.) Stylesheet einbinden

ebenfalls im Normalfall in der header.php:

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.0.css" type="text/css" media="screen">

Auch hier tragt Ihr wieder Eure eigene Adresse ein. Die Stylesheet verweist u.a. auf  die Grafikdateien, die Ihr im Schritt 1 hochgeladen habt. Ggf. müsst Ihr die Datei noch bearbeiten, wenn die Grafikdateien in einem anderen Ordner gesteckt habt.

4.) “Popups” im Beitrag richtig verlinken

Damit sich der Pop-Effekt auch auswirkt, müsst Ihr die Bildverweise auch richtig verlinken.  Ihr fügt einfach das Attribut rel=”fancybox” hinzu. Das sieht dann beispielsweise so aus:

<a rel="fancybox" href="http://www.plerzelwupp.de/wp-content/uploads/2010/02/Lightbox01.png">

Damit Ihr das nicht jedes Mal machen müsst und Fancybox auch auf die vorhandenen Bildverweise anspringt, solltet Ihr noch eine passende Regel hinzufügen. Folgenden Code hab ich aus dem oben verlinkten Plugin geklaut:

<script type="text/javascript">
	jQuery(document).ready(function($){
		var select = $('a[href$=".bmp"], a[href$=".gif"], a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".BMP"], a[href$=".GIF"], a[href$=".JPG"], a[href$=".JPEG"], a[href$=".PNG"]');
		select.attr('rel', 'fancybox');
		select.fancybox();
	});
</script>

Das war’s auch schon. Ab sofort könnt Ihr munter drauf los poppen.

Anwendungsmöglichkeiten von Fancybox:

Die Anwendungsmöglichkeiten sind sehr vielfältig. Es kann eine kleine Bildergalerie sein, die man dann auch durchklicken kann, oder einfach nur ein Textlink sein. z.B.

Ein paar Bilder (Beispiele):

• Bild 1: Herbst
• Bild 2: Urlaub in Kambodscha
• Bild 3: Singapore von oben
• Bild 4: Mein Kamel hat AUA
• Bild 5: Plerzelwupp bei Nacht

Auch Youtube Videos können eingebettet werden:

Hier könnt Ihr beispielsweise sehen, wie es bei mir zu Hause zugeht:

plerzelwupp (Oliver) bei den Bunnies

Für Youtube Videos ergänzt Ihr ganz einfach den Code (z.B. in der header.php), der auf der Seite von Fancybox dargestellt wird und ergänzt Eure Youtube-Verlinkung mit dem Attribut id=”tip4″.

Workaround bei Problemen

Falls der Effekt bei Euch ausbleibt, dann vergewissert Euch, dass die Stylesheet-Datei und Javascript ordnungsgemäß eingebunden sind. Benutzt hierfür eines der genannten Hilfsmittel aus dem oben verlinkten Artikel.

Vergewissert Euch außerdem, dass die Bilder in der Stylesheet ordnungsgemäß verlinkt sind.

Wenn es immer noch nicht geht erhaltet Ihr mit Firebug möglicherweise die Fehlermeldung:

jQuery: “$ is not a function”

In diesem Fall ersetzt Ihr im Javascript-Code sämtliche $-Zeichen durch “jQuery” und stellt die Codezeile jQuery.noConflict(); voran. der Code für obiges Youtube-Video lautet dann wie folgt:

<script type="text/javascript">
jQuery.noConflict();
jQuery("#tip4").click(function() {
	jQuery.fancybox({
			'padding'		: 0,
			'autoScale'		: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic',
			'easingIn'		: 'easeOutBack',
			'easingOut'		: 'easeInBack',
			'title'			: this.title,
			'width'		: 680,
			'height'		: 495,
			'href'			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
			'type'			: 'swf',
			'swf'			: {
			   	 'wmode'		: 'transparent',
				'allowfullscreen'	: 'true'
			}
		});

	return false;
});
</script>

So etwas wie ein Fazit

Wenn Ihr Bilder nicht auf eine neue Seite verlinken wollt, dann sind Lightbox-Effekte unerlässlich. Für welchen Effekt Ihr Euch entscheidet, bleibt natürlich Euch überlassen. Doch sollte bei der Wahl beachtet werden, dass es von Vorteil ist, einen Effekt zu wählen, dessen Skripte ohnehin am Laufen sind (für die “Kurzleser”: Das ist oben näher erläutert).

Natürlich eigenen sich auch Plugins – es gibt jede Menge davon; für die unterschiedlichsten Blogsysteme. Doch ich denke, mit der o.g. Liste seid Ihr besser bedient. U.a. auch deswegen, weil sich die Javascript-Dateien besser steuern lassen und ggf. zusammengefügt werden können. Doch darüber schreibe ich das nächste Mal.

Benutzt Ihr eigentlich solche Effekte? Was haltet Ihr davon? Hab ich Euch ein klein wenig inspiriert? Habt Ihr Lust auf poppende Bilder in Eurem Blog? – Ich freue mich über Eure Kommentare.

Foto: “Paarungszeit” © Bernd Boscolo / PIXELIO (beschnitten)

Oftmals sind die Gravatare sehr schnell da – doch es kommt auch sehr häufig vor, dass der ein oder andere Gravatar mal “hängt”. Außerdem gibt es eine gewisse Abhängigkeit von der Verfügbarkeit des Gravatar-Servers.

Warum also die Gravatare nicht cachen?

Nun, die Idee ist ja nicht neu. Dazu gibt es mehrere Anleitungen und/ oder Plugins im Netz. Doch so richtig funktioniert hat nichts von alledem. Da erinnerte ich mich an Tanja, die mit Ihrem Cache-Skript so allerlei Anwendungsmöglichkeiten aufzeigte. Das Skript kann, in jeweils abgewandelter Form, für zahlreiche Cache-Lösungen herangezogen werden. Man muss nur erfinderisch sein. Ob Ihr nun Widgets cachen wollt, “related Posts” oder den ganzen Kommentarbereich – hier seid Ihr richtig!

Jedenfalls hatten wir einen Dialog und wenige Tage später wandte sich Tanja per E-Mail an mich. Sie habe eine Gravatar-Cache-Lösung und ich solle es gleich ausprobieren. Das hat allerdings nicht auf Anhieb geklappt – in einem zweistündigen Telefonat haben “wir” es dann doch zum Laufen gebracht. Über die Hintergrunde werde ich nach Vorstellung des Skripts noch eingehen. Lest Euch zuerst alles durch, bevor Ihr anfangt.

Was bedeutet denn überhaupt “Gravatar-Cache”?

Die Gravatare Eures Blogs, die anhand der E-Mail-Adresse der Kommentierenden von gravatar.com geholt werden, werden “gefangen” und auf Eurem eigenen Host (als Kopie) abgelegt. Im Standard-Zustand des nachfolgend vorgestellten Skriptes werden die Gravatare vier Wochen lang gecached. Das heißt: Ein einmal von gravatar.com geladener Gravatar in Eurem Blog wird fortan nicht mehr von gravatar.com , sondern von der Kopie auf Eurer Domain (Eurem Wenhoster) geholt. Ihr könnt Euch selbst davon überzeugen: Je nach Browser kann dies in aller Regel per Klick mit der rechten Maustaste auf einen Gravatar in meinem Kommentarbereich überprüft werden. Im Kontextmenü gibt es einen Eintrag “Grafikadresse kopieren” (Firefox), “Eigenschaften” (Internet Explorer 8), “Bild-Adresse kopieren (Opera)” oder “Bild-URL-kopieren” (Chrome 4).

Doch genug der langen Worte – schreiten wir zur Tat.

Gravatare cachen

1. Cache-Ordner anlegen

Ihr legt direkt in das Root (also in der obersten Ebene des ftp-Verzeichnisses) einen Ordner “z-cache” an. Darin legt Ihr einen weiteren Ordner “gravatar” an. Im gravatar-Ordner legt Ihr wiederum einen Ordner “images” an. Alle drei genannten Ordner bekommen die Rechte 777.

2. comments.php bearbeiten

Ihr sucht den Gravatar-Aufruf der Kommentarausgabe:

<?php echo get_avatar( $comment, 60); ?>

Dieser Aufruf sollte normalerweise in der comments.php Eures Themes stehen. Es kann jedoch auch vorkommen, dass Euer Theme etwas anders arbeitet. In meinem Fall befindet sich der Aufruf beispielsweise in der functions.php. Auch die Größe “60″ kann variieren. Möglicherweise kommen bei Euch Gravatare anderer Größe zum Einsatz (bei mir sind es 50×50px). Dazu gleich mehr. Wir fahren mit der comments.php fort – ich erinnere an die obligatorische Sicherungskopie!!!

Jedenfalls löscht Ihr die o.g. Zeile und setzt stattdessen folgenden Code ein:

<?php $teil = get_comment_author_email(); //1 Teil Cachefile
	$teil = strtolower  ($teil);
	$teil = md5($teil);
	$cachefile13 = "z-cache/gravatar/".$teil.".html";
	$cachetime13 = 40320 * 60; // 40320 = 4 Wochen
	if (file_exists($cachefile13) && (time() - $cachetime13 < filemtime($cachefile13))) {
		include($cachefile13);
		//$test = date('d.m.Y H:i', (filemtime($cachefile13) + $cachetime13));
		//echo "<!-- Cache vom ".date('j. F Y H:i', filemtime($cachefile13))." - naechster Update: $test-->";
	}
	else {
	ob_start(); ?>

		<?php $text = get_comment_author_email();
		$text = strtolower  ($text);
		$text = md5($text);
		$cachefile21 = "z-cache/gravatar/images/".$text.".png";
		$grav_img = "http://www.gravatar.com/avatar/".$text."?s=60&d=wavatar&r=G";

		ob_start();
		$fp = fopen($grav_img, "rb");
		fpassthru($fp);
		fclose($fp);
		$file = ob_get_contents();
		ob_end_clean();

		$fp = fopen($cachefile21, "wb+");
		fwrite($fp, $file);
		fclose($fp); ?>

		<img alt="" src="http://www.plerzelwupp.de/<?php echo $cachefile21;?>" height="60" width="60" />

		<?php //echo get_avatar( $comment, 60); ?>

	<?php $fp = fopen($cachefile13, 'w'); // Cache 2. Teil
	fwrite($fp, ob_get_contents());
	fclose($fp);
	ob_end_flush();
	} // Cache Endefile ?>

• Wenn Ihr Gravatare anderer Größe verwendet, ändert Ihr die Zahl “60″ in den Zeilen 18, 31 (2x) und 33 entsprechend.

• Die Webadresse in Zeile 31 müsste Ihr auf Euren Blog umstellen.

• Die Zeilen 1-12 leiten den Cache ein, die Zeilen 35-39 schließen ihn wieder. In eventuellen Test-Szenarien löscht Ihr diese Zeilen und schaut, ob der Kern funktioniert. Beim ersten Aufruf einer Kommentarseite dauert die Ladezeit erheblich länger – ein gutes Zeichen: das Cache-Skript macht seine Arbeit. Vergewissert Euch im FTP-Verzeichnis, ob die neu angelegten Ordner gefüllt werden. Prüft außerdem nach, ob die geladenen Gravatare tatsächlich “bei Euch gehostet” sind.

Das war’s auch schon. Ab sofort müssten Eure Gravatare gecached werden! Doch erinnert euch an meine Worte: Lest erst mal weiter – insbesondere, was die Funktion fopen() betrifft.

Workaround: Mögliche Fehlerquellen erkennen

Arbeitet das Skript noch nicht richtig?

Die beiden auskommentierten Zeilen 8 und 9 sind zu Testzwecken eingerichtet. Aktiviert diese Zeilen bei den ersten Aufrufen und setzt dabei zusätzlich die Zeit in Zeile 3 auf 1 (anstatt 40320). Vergewissert Euch, ob der Cache auch funktioniert, indem Ihr nun den Quelltext öffnet und nach “cache vom….” sucht. Da müsste nun die richtige Zeit stehen.

Wenn Ihr den Cache per FTP wieder löschen wollt, empfiehlt es sich, zuvor die Caching-Funktion zu deaktivieren: Durch Auskommentieren oder Löschen der o.g. Zeilen (1-12 und 35-39). Nach dem Löschen des Caches aktiviert Ihr diese Zeilen wieder.

Die Sache mit fopen(): Es kann sein, dass Euer Hoster diese Befehle nicht unterstützt. Ob diese Funktionen bei Euch aktiviert sind erfahrt Ihr, wenn ich Euch eine kleine info.php bastelt. Dazu erstellt eine Textdatei mit folgendem Inhalt:

<?
phpinfo();
?>

Ihr speichert diese Datei dann unter info.php ab (aus die Dateiendung achten) und legt sie dann per ftp in Euer Heimverzeichnis. Mit dem Browser steuert Ihr diese Seite dann an – z.B. http://Eure-Domain/info.php

Dort sollten “allow_url_fopen” und “allow_url_include” Funktionen auf “on” stehen.

Bei mir war das zunächst nicht der Fall. Also wandte ich mich an den Kundensupport von 1&1. Nach erfreulich geringer Wartezeit erklärte mir ein kompetenter Mitarbeiter, dass diese Funktionen für externe URLs standardmäßig gesperrt ist. OK, soviel wusste ich auch. Ich wusste auch, dass diese Funktionen durch Bearbeitung der “php.ini” aktiviert werden können (bei mir war jedoch keine php.ini vorhanden – ‘dachte, ich käme nicht dran). Was ich aber nicht wusste: Bei meinem Hoster ist es erlaubt, solch eine php.ini zu erstellen. Der entsprechende Befehl zur Aktivierung der beiden Funktionen lautet:

allow_url_fopen=1
allow_url_include = on

Das Datei wird php.ini genannt und kommt sowohl in das Root, als auch in den Script-Ordner.

Wenn diese Funktionen bei Euch nicht unterstützt werden lohnt es sich auszuprobieren, ob Ihr auch eine php.ini erstellen oder eine bereits vorhandene modifizieren könnt. Ansonsten lohnt sich ein Anruf beim Hoster. Erklärt den Mitarbeitern, was Ihr vorhabt und was Ihr mit den Funktionen machen wollt. Vielleicht sind sie gnädig.

Übrigens: Falls url_fopen nicht unterstützt wird, merkt Ihr das auch, wenn statt denn Gravataren “fehlerhafte Bilder” angezeigt werden. Öffnet dazu eine der gecachten png-Dateien mit einem Texteditor (unter z-chache/gravatar/images). Dort müsste eine Fehlermeldung stehen – in der Art: Warning fopen(…Url….)…. failed to open stream: HTTP wrapper does not support writeable connections in … on line ……

Fazit

Die Ladezeiten der Artikel-Ansichten (mit Kommentaren) sind deutlich stabiler und schneller geworden. Kommt ein Besucher, dessen Gravatar bereits gecached ist, erhält beim neuerlichen Kommentieren die Cache-Version seines Gravatars. Meines Erachtens ist dieses Skript eine glänzende ALternative zu einem entsprechenden Plugin.

Vielleicht hab ich Euch ein wenig auf den Geschmack gebracht? Habt Ihr schonmal die gravatar-Ladezeiten beobachtet? Euch mit diesem Thema schon beschäftigt? Lust, das mal auszuprobieren? gerne gebe ich Hilfestellung.

Ich freue mich über Eure Kommentare

Nachtrag vom 16.02.2010

Jeffrey vom infoblog.li hat sich der Sache nun ebenfalls angenommen und das Skript noch erweitert bzw verfeinert. Die Gravatare können nun per Skript aktualisiert werden, was den Vorteil hat, das Alter der gecachten Gravatre nicht ständig auslesen zu müssen.  Das Skript könnte dann (beispielsweise über Nacht) per cronjob gestartet werden.  Jeffreys Beitrag ist hier zu lesen.

Schade nur, dass mein Hoster keine cronjobs zulässt vielleicht gibt es in dieser Hinsicht Vorschläge(?)

Um eins gleich vorwegzunehmen: Es geht hier nicht um xml-Sitemaps für Suchmaschinen Google & Co, sondern um eine Seitenübersicht  Eures Wordpress-Blogs: Ein strukturierter Überblick Eurer Artikel, sortiert nach Kategorien. Ein toller Service für Eure Leser und Besucher.

Zunächst dachte ich, solch eine Sitemap wird ohnehin nicht geklickt, doch mittlerweile bin ich vom Gegenteil überzeugt: Die Sitemap wird geklickt! Meines Erachtens  sollte die Sitemap ein fester Bestandteil eines ordentlichen Internetauftritts sein.  Sie trägt zur Benutzerfreundlichkeit bei und schafft einen Überblick über den kompletten Blog. Wie so eine Sitemap aussieht, könnt Ihr hier sehen; wie sie erstellt wird, erfahrt Ihr im Folgenden.

Dies ist übrigens der dritte Beitrag in Folge zum Thema “xyz ohne Plugin” – irgendwie bin ich im Zuge der Serie “Blogladezeiten optimieren” in eine Art Blutrausch verfallen. Zahlreiche Plugins mussten einer händischen Methode weichen. Aber keine Angst: In den letzten beiden blogfreien Wochen hab ich genug Stoff für weitere Themen gesammelt

Lösung 1 – für Faule: Plugin

Wer es einfach und unkompliziert mag, erstellt eine Sitemap unter Zuhilfenahme eines Plugins. Empfehlenswert in diesem Zusammenhang ist das Plugin “Sitemap Generator for Wordpress“. Es wird installiert wie jedes andere Plugin auch, unter Einstellungen/ DDSitemapGen modifiziert und an jeder x-beliebigen  Stelle im Blog unter Angabe des folgenden Codes zum Vorschein gebracht:

<!-- ddsitemapgen -->

Dieses Plugin war lange Zeit bei mir im Einsatz und verrichtete brav seine Dienste. Doch relativ leicht geht es auch ohne Plugin.

Lösung 2: Kategorien einzeln ausgeben

Wer nur wenige Kategorien hat, kann diese auch gezielt auslesen lassen. Dabei könnt Ihr nach folgendem Prinzip vorgehen:

Überschrift – Kategorie1

• Code zum auslesen der Kategorie 1

Überschrift Kategorie 2

• code zum Auslesen der Kategorie 2

usw……..

Bei dieser Herangehensweise erstellt Ihr für die Sitemap eine eigene Vorlage (“Template”). Am geschicktesten verwendet Ihr dafür die page.php eures Themes, kopiert diese und gebt der kopierten Datei den neuen Namen “sitemap.php”. Mit einem Editor (wie beispielsweise notepad++) bearbeitet Ihr diese Datei. Gleich am Anfang der Datei fügt Ihr folgende Zeilen ein:

<?php
 /*
 Template Name: Sitemap
 */
 ?>

Damit Euere Wordpress auch “weiß”, dass es sich um ein Template mit dem Namen “Sitemap” handelt. Ursprünglich war das Template (eine Art “Schablone”) dazu gedacht, eine statische Seite auszugeben. Der Seiteninhalt wird in aller Regel mit dem Aufruf <?php the content(); ?> geholt. Nun wollen wir unsere Sitemap aber nicht mit Inhalten mit Content, sondern mit unserem eigenen Code füllen, deshalb löscht Ihr diese Zeile ganz einfach.

An diese Stelle kommt dann Euer Code zum Auslesen einer einzelnen Kategorie, den ich in abgewandelter Form von Frank Bültge “geklaut” habe:

<ul><h3>Beitr&auml;ge aus der Kategorie "Anleitungen"</h3>
<?php
$MyCat_Content = get_posts('numberposts=10&category=3');
$MyCat_Echo = '';

if (is_array($MyCat_Content)) {
 foreach ($MyCat_Content as $post) {
 $MyCat_Echo .= '<li><a href="' . get_permalink($post->ID) . '" title="' . $post->post_title . '">' . $post->post_title . '</a> (' . mysql2date('d. M Y', $post->post_date) . ')</li>';
 }
}
echo $MyCat_Echo;
?>
</ul>

In Zeile 1 befindet sich die Überschrift und der Name der Kategorie.

In Zeile 3 könnt hier hinter “numberposts” angeben, wieviele Artikel aus der Kategorie geholt werden sollen. In diesem Beispiel sind es die letzten 10 Beiträge – Ihr könnt aber auch beliebig mehr (oder weniger) angeben.

Wichtig ist noch die Kategorie-ID, die ebenfalls in Zeile 3 eingegeben wird. Im obigen Beispiel hat die Kategorie “Anleitungen” die ID-Nr. 3. Welche ID die jeweilige Kategorie hat, erfahrt Ihr im Wordpress Frontend: Unter Artikel/ Kategorien werden Eure Kategorien aufgelistet. Wenn Ihr mit der Maus über die gewünschte Kategorie fahrt, seht Ihr in der Fußleiste die dazugehörige Adresse.  Das sieht in etwa so aus:

http://www.plerzelwupp.de/wp-admin/categories.php?action=edit&cat_ID=3

Alternativ könnt Ihr den Link auch in die Zwischenablage kopieren und an anderer Stelle ausgeben.

Das war’s auch schon. Das selbe macht Ihr dann mit den anderen Kategorien auch.

Wenn Ihr mit eurem Template fertig seid,  müsst Ihr zuguterletzt  eine statische Seite erstellen (Seite / erstellen). Diese nennt Ihr “Sitemap”. Ihr braucht hier keinen Content einzugeben. Wichtig ist nur, dass Ihr das richtige Template auswählt. Wenn Ihr alles richtig gemacht habt, müsste unter “Template” Eure Sitemap aufgelistet sein.

Das war’s auch schon! Ist doch nicht so kompliziert, oder?

Viel Spaß beim Nachmachen

Lösung 3: Sitemap komplett ausgeben lassen

Auf diese Methode möchte ich eigentlich nicht näher eingehen, denn sie wird bei obenlands.de eingehend erläutert. Die Herangehensweise ist die gleiche, jedoch mit anderem Code.

Unglücklicherweise hat das bei mir nicht zu 100% funktioniert: Die Kategorien wurden nicht vollständig ausgelesen. Das mag auch daran liegen, dass ich Kategorien im Laufe der Zeit umbenannt habe.

So etwas ähnliches wie ein Fazit

Für welche der drei Methoden Ihr Euch entscheidet könnt Ihr Euch selbst aussuchen. Wenn Ihr Euer Blog nicht über allzu viele Kategorien verfügt, könnt Ihr gerne die Methode 2 ausprobieren. Der Aufwand ist viel geringer als es zunächst aussehen mag. In wenigen Minuten verfügt Ihr über eine Sitemap. Das Ganze ohne Plugin. Wenn Ihr wollt, könnt Ihr Euch die Ausgabe auch nach Tanjas Methode cachen – das schont den Server und spart  etwas Zeit.

Wie schaut’s denn mit Dir aus? Hast Du schon eine Sitemap? Wie denkst Du darüber? Sollte eine Angeboten werden?

Wenn Ihr “nachbasteln” wollt, helfe ich (wie immer) gerne weiter, wenn es mal haken sollte. Ansonsten freue mich auf Eure Kommentare.

Foto: “Ein Herz für Bücher” © BirgitH / PIXELIO

Im Rahmen der Serie "Blog-Ladezeiten optimieren" recherchierte ich auch in Richtung "Pluginfreie Zone". Das ist natürlich etwas übertrieben, denn ganz ohne Plugin geht es nicht, doch lassen sich viele Aufgaben durch Alternativen ersetzen, die das ein oder andere Plugin überflüssig werden lässt.

Als erstes musste das Kontakt-Formular-Plugin weichen. Stattdessen ist nun ein pluginfreies Kontaktformular eingebunden,  das die zugesandten E-Mails automatisch in ein Google-Spreadsheet einfügt. Bei dieser Lösung ist die Benachrichtigungsfunktion übrigens in beide Richtungen aktiviert. René liefert hierzu eine glänzende Beschreibung.

Hurra, wieder ein Plugin gespart. Nun sollte es dem nächsten an den Kragen gehen, da fiel mir "WP-Polls" in's Auge. Mit jedem Blogaufruf wurde dieses  Plugin geladen, ob es benötigt wird oder nicht. Das war umso ärgerlicher, da ich lediglich zwei Umfragen im Blog gestartet habe.  Nun, WP-Polls ist zwar durchaus praktisch und gefällig im Funktionsumfang, doch es ist auch etwas behäbig.

Aber es geht ja auch ohne WP-Polls (oder ähnlichen Plugins) – und zwar auch hier wieder mit Google Text und Tabellen. Im Folgenden möchte ich beschreiben, wie das funktioniert und was dabei zu beachten ist.

Google Formular für Umfrage nutzen

Wir loggen uns bei Google-Text und Tabellen ein und erstellen ein neues Formular.

Wir landen im Bearbeitungsmodus für Formulare. Das vorgegeben Formular können wir gleich mal per Klick auf den Mülleimer löschen. Stattdessen legen wir ein neues Formular an.

Nun kommt es darauf an, welchen Formulartyp wir erstellen wollen. Unter "Element hinzufügen" treffen wir unsere Wahl. Für eine Umfrage eignen sich die Typen
1.) Auswahlfrage 2.) Ankreuzen 3.) Aus einer Liste wählen 4.) Skala 5.) Gitter

Damit Ihr gleich einen Überblick habt, was die verschiedenen Umfragetypen bewirken, hab ich hier mal einen Screenshot zusammengestückelt:

Das Erstellen dieser Formulare ist relativ selbsterklärend. Die Auswahlfrage (1.) sieht im Editor folgendermaßen aus:

Pflichtfragen werden übrigens mit einem Sternchen versehen und entsprechend gekennzeichnet.

Habt ihr Eure Umfrage erstellt, könnt Ihr noch eine Bestätigungstext eingeben, der nach dem Voten erscheint -  à la "Vielen Dank, dass Du abgestimmt hast, Deine Stimme wurde gezählt".

Außerdem gibt es unter "Bestätigung bearbeiten" noch die Option "Antwortzusammenfassung allen anzeigen".  Ist diese Option aktiviert, wird den Votern nach der Stimmangabe das derzeitige Umfrageergebnis angezeigt. Wollt Ihr das Umfrageergebnis in einem Standard-Kuchendiagramm darstellen, so aktiviert diese Option. Das ist die einfachste Möglichkeit. Wollt Ihr  aber Euer eigenes Diagramm basteln (Balken, Säulen, punkte, Linien, bunt, einfarbig, usw.), so lasst Ihr diese Option deaktiviert. Doch dazu später mehr.

Nach  Klick auf "In Webseite/Blog einbinden" erhaltet Ihr  jedenfalls den Code (iframe), den Ihr dann in Eurem Blog einbaut. Im iframe-Code könnt Ihr dann noch die Breite des Frames den Bedürfnissen Eures Blogs anpassen.

Live sieht das dann so aus – Ihr dürft gerne Voten Wie oben schon erwähnt, werden auch die Ergebnisse des Votings nach Klick auf  "siehe vorherige Antworten" in einem Standard-Kuchendiagramm dargestellt

Wo werden die Daten der Abstimmung gesammelt?

Tatsächlich steckt hinter dieser Umfrage bzw dem Formular eine Google-Tabelle, die Ihr natürlich auch aufrufen könnt. Diese Tabelle wird automatisch mit dem Formular erstellt und Ihr könnt Sie vom Dashboard (Google Text- und Tabellen) aufrufen. Hier ist ein Screenshot der Tabelle des obigen Formulars:

Eigenes Diagramm für Umfrageergebnisse erstellen

Der Gedanke, der dahinter steckt ist folgender: Ihr erstellt eine Umfrage, lasst das Ergebnis aber nicht anzeigen (die Option "Antwortzusammenfassung allen anzeigen" ist deaktiviert!). Stattdessen erstellt Ihr ein Diagramm Eurer Wahl, füttert es mit den Daten der o.g. "Google-Tabelle" und blendet dieses zusätzlich ein. Am besten Ihr erstellt eine Hilfstabelle in einem weiteren Tabellenblatt, in dem Ihr die Ergebnisse des Original-Tabellenblattes tabellarisch auswertet. Aus der Hilfstabelle wird dann das Diagramm erstellt, das Ihr freigebt und einbettet. Zur Verdeutlichung ein Screenshot:

Wie Ihr seht, genügt eine einfache "COUNTif-Abfrage" (analog Excels "Zählenwenn"): Zähle mir, wie oft der Begriff aus Zelle A2 in der Spalte B des anderen Tabellenblatts vorkommt.

Aus dieser Tabelle klöppelt Ihr dann Euer Diagramm. Die Möglichkeiten sind beinahe unendlich. Auf die Schnelle hab ich für obiges Beispiel ein Balkendiagramm erstellt und eingebunden:

Sogar Gadgets sind möglich, die auf der Google-Startseite angezeigt werden. Diese Gadgets könnt Ihr auch im Blog einbinden. Es ist natürlich alles Spielerei; hier jedenfalls das Ergebnis der obigen Umfrage als "Anzeigetafel". Diese Gadgets werden aktualisiert, sobald die Seite neu geladen wird.

Eure Meinung

habt Ihr vielleicht schon mit der obigen Umfrage kund getan. Ich freue mich aber auch über Kommentare

Wer noch mehr Spielereien mit Google-Spreadsheets ausprobieren möchte, dem sei auch mein früherer Artikel empfohlen: Wikipedia-Tabellen in Google Spreadsheet importieren und in Google-maps darstellen.

das passt bekanntermaßen gut zusammen. Jedenfalls hab ich mich vor einiger Zeit bei Google Wave angemeldet. Wer da auch gerne mal reinschnuppern möchte und den neuen Dienst ausprobieren möchte, benötigt eine Einladung.

25 Einladungen hab ich zu vergeben. Wer Interesse hat, meldet sich einfach per Kommentar.

Yigg, Yigg, Hurra!

So heißt die neue Aktion von Alex, Workablogic. Nach den Aktionen "Wollen wir nicht alle Technorati-Freunde werden?" und "Wikio-Freunde" der beiden Blogger-Kollegen Matthias und Matthias, geht nun die nächste Aktion an den Start.  

Worum es bei der AKtion genau geht, könnt Ihr bei Alex nachlesen. Jedenfalls haben wir im Vorfeld über diese Aktion gesprochen und so findet Ihr heute auch Artikel bei Sascha, Matthias und mr.gene zum Thema.

So viel sei schonmal verraten: Alex hat die Yigg-Gruppe YiggYiggHurra geboren. Wenn Ihr nichts verpassen wollt, solltet Ihr schleunigst bei Alex vorbeischauen und der Gruppe beitreten.

Apropos beitreten: Auch mein Yigg-Profil hat noch Platz für ein paar Yigg-Partnerschaften. Komm und sei mein Freund

Den eigenen Blog auf verschiedenen Browsern und Betriebssystemen testen

vor einiger Zeit berichtete ich über den Online Dienst Adobe Browser Lab. Mit "Browser Lab" könnt Ihr Eure Webseiten auf unterschiedlichen Browsern testen und  sehr schnell sehen, wie sie dort dargestellt werden.

Erfreulicherweise wurde das Angebot bei Adobe erweitert. Neu hinzugekommen ist Misrosofts Internet Explorer 8 sowie Apples Safari 4. Welche Browser/ Betriebssystem-Kombinationen getestet werden können, seht Ihr auf dem beigefügten Screenshot.

Gedanken lesen

Es ist einfach unglaublich, was bei Akinator abgeht.

Der Akinator rät Eure Gedanken und nennt Euch die Person, die Ihr Euch zuvor überlegt habt. Sei es eine Comic-Figur, eine berühmte Persönlichkeit (lebend oder verstorben), Eure Hauskatze, Euer Mann, Frau, Freundin, Kind, Vorgesetzte ……… Es ist einfach unglaublich.

Natürlich liest der Akinator nicht wirklich Gedanken. Es stecken wohl eine riesen Datenbank und Wahrscheinlichkeitsalghorithmen dahinter. Das Ergebnis zaubert einem oftmals Gänse auf die Haut.

Die Firma Tecadress geht mir auf den Sack

Täglich gehen mehrfache Spam-Nachrichten von dieser Firma ein, die allesamt zuverlässig von Sergejs AntiSpamBee aussortiert werden. Dennoch geht mir diese Firma tierisch auf den Keks. Normalerweise kommen und gehen die Spam-Wellen (ha…. schon wieder eine Welle), doch Tecadress lässt nicht locker. Zudem schreibt sie immer einen Kommentar-Roman.  Ich verzichte hier bewusst auf eine Verlinkung. Aus dem Impressum ist jedenfalls zu entnehmen, dass die Firma unter der E-Mailadresse:

kundenservice@tecadress.com

zu erreichen ist. Wenn Ihr Lust habt, könnt Ihr dieser Firma auch mal schreiben. Oder hat jemand von Euch russische Freunde, die sich mit solchen Problemen auskennen? Hattet Ihr auch schon Mails von dieser Firma im Kommentar-Spam?

Erinnert Ihr Euch noch? Vor einiger Zeit rief Alex (workablogic.de) den Adventskalender "24 Stöckchen müsst Ihr sein" in's Leben. Täglich gab es ein Adventskalendertürchen in einem der teilnehmenden 24 Blogs. Dahinter verbargen sich kleine Überraschungen, Besinnliches und Gewinnspiele.

Auch auf meinem bescheidenen Blog startete ein kleines Gewinnspiel – insgesamt gibt es sieben Preise zu verlosen. Natürlich freute ich mich riesig an der regen Teilnahme;  auch zahlreichen neue Gesichter waren im Blog zu sehen. Verwundert über diesen Umstand stellte ich fest, dass mein bescheidenes Gewinnspiel im "Gewinnspiel-Portal.de" gelistet war (ich verzichte an dieser Stelle auf eine Verlinkung).

Nun, wie auch immer – was als kleines Gewinnspiel für meine Besucher gedacht war, lockte auch zahlreiche Gewinnspielnomaden an.

Nachfolgend sind die Teilnehmer aufgelistet – die Nummern wurden von oben nach unten vergeben:

1) Zeitstrategie 2) Alex 3) Nila 4) Matthias (Mac_Beth) 5) Pe-Su_ki 6) Markus-Arlt 7) Hombertho Michael Finger 9) Arven (Michaela) 10) Locutus 11) Lizzy 12) Retronaut 13) Sascha 14) christiane 15) Michaela 16) Trends 17) Michael 18) mr.gene 19) Lilo 20) Gucky 21) Irmelchen, 22) Claudia 23) Biggi 24) Andreas 25) Yvonne 26) Axel 27) Catrin 28) Dieter 29) Jonas 30) Steffen 31) Darina, 32) Hirsch Nadia 33) Robert 34) posa100 35) rolando 36) Ines 37 Christin 38) Marek 39) Winfried 40) Martin 41) Sonja

Die Auslosung ließ ich ganz unspektakulär über random.org ermitteln. Hier das Ergebnis:

Die Nummern wurden den Teilnehmern und den Preisen zugeordnet (in der Reihenfolge der Darstellung). Das ergab dann folgendes Resultat:

Die Gewinner

• Gucky gewinnt den Fotokonverter für digitale Bilderrahmen. Herzlichen Glückwunsch! Armer Hase, ich weiß ja, dass Du Linux-Nutzer bist und hoffe, dass Du Dich dennoch freuen kannst und Verwendung für die Windows-Software findest
• Sascha gewinnt das PC-Spiel Ghostbusters. Viel Spaß bei der Geisterjagd
• Michaela gewinnt das süße Familien- und Kinderspiel Felix – Eine wundersame Reise durch die Zeit 1. Ja, liebe Michaela: Gemeinsam mit Hase Felix geht es jetzt auf Weltreise – viel Spaß dabei
• Alex gewinnt das PC-Spiel Demigod: Ein Revolutionärer Genremix aus Strategie-, Rollenspiel- und Actionelementen. Lass Dich fesseln – viel Spaß beim Zocken.
• Locutus gewinnt den MyTube Internet Recorder. Herzlichen Glückwunsch. Suche und lade Deine Clips!
• Andreas gewinnt das Systemtool SimonTools DriveDefrag. Na dann mal viel Spaß beim Defragmentieren
• Lilo gewinnt Das grosse PC-LEXIKON vom Data Becker Verlag: Hardware, Software, Internet – das Wesentliche auf den Punkt gebracht (gebundene Ausgabe). Lilo, da weiß ich ja, wohin ich mich wenden kann, wenn ich mal PC-Probleme habe Viel Spaß mit dem Buch!

Vielen Dank

den Teilnehmern, auch wenn es diesmal nicht geklappt hat.  Dabei sein ist alles – vielleicht klappt's im nächsten Advent.

Den Gewinnern gratuliere ich nochmals recht herzlich – ich werde Euch per E-Mail kontaktieren, bitte teilt mir dann die gewünschte Versandadresse mit.

Ansonsten freue ich mich über Eure Kommentare. Wie fandet Ihr die Aktion? Sollte so etwas wiederholt werden? Was könnte man besser machen? Seid Ihr traurig, dass Ihr nicht gewonnen habt? Gewinner, könnt Ihr mit Eurem "Preis" etwas anfangen?

Foto: "alea iacta est" © Oliver Haja / PIXELIO

So, es geht weiter mit dem Projekt 52. Dieses Jahr hat sich Sari neue Regeln einfallen lassen. In der Vergangenheit wurden offenbar auch Bilder "geklaut" bzw. fremde Bilder als eigene ausgegeben. Um dem vorzubeugen, muss jeder Bild-Beitrag künftig ein Erkennungszeichen beinhalten. Eine Art Maskottchen.

Das ist meines Erachtens eine ganz gute Idee und hat den Nebeneffekt, dass ich gezwungen werde, die Bilder eigens für das Projekt zu fotografieren und nicht in die Konservenkiste zu greifen.

Das neue Projekt-Jahr startet konsequenterweise mit der Aufgabe, das Maskottchen vorzustellen. Außerdem soll noch begründet werden, weshalb das Maskottchen ausgewählt wurde. Das will ich nun nachfolgend gerne tun.

Kindheitserinnerungen

Eine Peinlichkeit aus meiner Kindheit hat überlebt. Es ist mein brauner Affe, mit dem ich immer in's Bett ging. Nach mehr als 30 Jahren sitzt der Affe immer noch neben dem Bett. der braune Affe hatte bedauerlicherweise noch nie einen Namen. Er hieß einfach nur

brauner Affe

Doch zu Ehren des Projekts wird mein Kindheitstraum nun getauft. Der Affe soll fortan

Hase

heißen.

Hinzu kommt, dass mein Blog-Erkennungszeichen und mein Gravatar ein Koboldmaki ist; eine sehr kleine Primaten-Art. Was liegt da näher, als auch das Projekt52-Maskottchen zum Affen werden zu lassen?

Hase ist recht eigenwillig und ein Lebemann. Ich gebe Euch mal ein paar Impressionen.

Hier, kurz nach einem Konzertbesuch:

Manchmal macht er es sich auch auf dem Ventilator bequem und schaut auf mich herunter. Bei laufendem Betrieb! Mein Affe Hase ist ein verrücktes Huhn!

"Schäm Dich". Du ungezogenes Ding! Was sollen denn die Leute denken? Zur Strafe setze ich Dich an's Fenster, in die Kakteen.

Im Großen und Ganzen ist er ein sehr smarter Typ. Ich mag ihn einfach, meinen Hasen.

So, das war's auch schon. Das ist es, mein Maskottchen, dass in allen künftigen Projekt52-Bildern irgendwo zu sehen ist.

Ich hoffe, Ihr könnt Euch damit anfreunden(?)

Mach Deinem Blog Beine

Im Web findet man so allerlei mehr oder weniger hilfreiche Plugins (für Wordpress), die die Ladezeiten durch Caching und/oder Kompression beschleunigen sollen. Viele davon hab ich auch geleckt, doch keins hat mir geschmeckt. Immer wieder machten diese Werkzeuge an anderer Stelle Probleme, indem irgendwelche Bugs um Backend auftauchten. Doch dabei ist es garnicht so schwer, so einiges an Performance herauszuholen. Ganz ohne Plugin. Naja, fast zumindest – doch dazu später mehr

Ein paar weitere Tipps, um mehr Performance aus Eurer Wordpress herauszuholen findet Ihr übrigens im früheren Beitrag Wordpress-Hacks.

Immer wieder las ich vom neuen Feature "Webseiten-Leistung", das in Google-Webmaster-Tools integriert ist. Nun hab ich mich endlich mal drangetraut und mich mit der Sache näher beschäftigt. Mit der Einführung des Tools ist der Verdacht nämlich nicht ganz von der Hand zu weisen, dass Google die Performance  als Kriterium bei der Beurteilung von Webseiten heranzieht. Aber vielleicht täusche ich mich da auch. Jedenfalls sind schnellere Ladezeiten auch ohne Google von erheblichem Vorteil.

Hier, im ersten Teil, möchte ich zunächst etwas über die Vorüberlegungen, die Analysewerkzeuge und einer manuellen gzip-Kompression der größten Ressourcenfresser berichten. Durch die Kompression konnte ich den Blog um einige hundert Kilobyte entschlacken. Natürlich befindet sich auch im derzeitigen Zustand noch genügend Ballast auf der Startseite, doch es ist ein Abwägen von Design, Funktion und Nüchternheit. Letztlich kann Ladezeitenoptimierung auch "Verzicht" bedeuten. Deshalb war die erste Maßnahme, die Anzahl der Artikel-Vorschauen zu reduzieren. Auch die rechte Seitenleiste wurde entschlackt. Meines Erachtens soll die Startseite einen groben Überblick und keinen Content liefern. Ein paar Eyecatcher, eine kurze Vorstellung. Der Rest ist über die Kategorie-Ansichten, der Sitemap, den statischen Seiten, dem Archiv und der Suchfunktion zu finden.

Google Page Speed

Google wartet nicht nur mit dem Lab-Dienst "Website-Leistung" auf, es gibt auch ein dazugehöriges Firefox-Plugin "Page Speed", das als Aufsetzer zu Firebug eingesetzt wird. Letzteres ist also Voraussetzung für Page Speed.  Ebenfalls ein Aufsetzer zum bereits verlinkten "Firebug" ist das Anlaysetool YSlow. Beides Plugins sind erstklassige Helferlein bei der Analyse und der manuellen Optimierung des Blogs und unerlässlich für unser weiteres Vorgehen . Zusätzlich könnt Ihr Euch den beiden Web-Analysetools "Is my blog working?" und "Pingdom Tools" bedienen. Die Funktionsweise und Zweck des letztgenannten Dienstes wird  bei Hombertho glänzend erläutert. Darauf werde ich in den nächsten Teilen näher eingehen.

Sind die genannten Plugins installiert, wird  Firebug um folgende Karteikarten ergänzt:

Bild 2: Page Speed und YSlow in Firebug (Klicken zum Vergrößern)

Wenn Ihr PageSpeed zum ersten Mal auf Euren (nicht optimierten) Blog loslasst, kann es sein, dass die Ernüchterung groß ist. Die Ergebnisse werden als Ampel ausgegeben (wie hoffentlich auch bald bei den Lebensmitteln):

• Rot: hier besteht (nach Ansicht von Google) Optimierungsbedarf
• Gelb: nicht ganz optimals – Einstellung ggf. überprüfen
• Grün: Alles OK

Wenn da zwei oder mehr "rote Ergebnisse" ausgespuckt werden, habt Ihr durchaus Spielraum nach oben

In den nächsten Artikeln möchte ich darüber berichten, wie ich die Analysen gedeutet habe und wie ich vorgegangen bin. Dabei bin ich mir recht sicher, dass auch für Euch etwas Brauchbares dabei ist.

Wie bereits angedeutet, fange ich im ersten Teil mit der unschönen Page-Speed Meldung an:

Enable gzip Kompression
Compressing the following resources with gzip could reduce their transfer size by about two thirds

Ist der Punkt grün, braucht Ihr heute nicht weiterlesen, ist er gelb oder rot, so dürfte es Euch vielleicht interessieren, wie ich vorgegangen bin. Die Ausgabe bei YSlow ist übrigens ähnlich. Jedoch hat mir bei Page-Speed besser gefallen, dass auch gleich angezeigt wurde, um welches Volumen es bei den einzelnen Dateien geht.

Komprimierungsmöglichkeiten:

Bevor wir beginnen, legen wir eine Sicherung an, damit wir unsere Schritte im Zweifelsfall rückgängig machen können. Zusätzlich sei erwähnt, dass das Thema "Blogladezeiten" sehr heiß diskutiert wird. Nicht alle Vorschläge und Plugins führen zum richtigen Ziel. Letztendlich kostet es etwas Geduld und Spielerei, bis es zu einer gesunden Mischung kommt. Einige Überlegungen und Vorschläge sind nachfolgend aufgeführt.

1. Seitenausgabe mit Plugin komprimieren

Zur Komprimierung von Dateien und der Blogausgabe gibt es unzählige Möglichkeiten und Plugins. In diesem Zusammenhang möchte ich auf Sergejs Plugin für die Komprimierung der Beiträge  verweisen. Hier wird die Kompression der Seitenausgabe einem php-Script überlassen. Das ist vor allem dann zu empfehlen, wenn der eigene oder Shared-Host-Server keine eigene Komprimierung unterstützt. Auf gidnetwork.com könnt Ihr dann testen, ob das genannt Plugin fruchtet. Jedoch komprimiert dieses Tool keine Javascript- oder CSS-Dateien, sondern nur die Seitenausgabe.

2. Dateien serverseitig komprimieren

Wenn Euer Server das externe Erweiterungsmodul mod_deflate unterstützt, könnt Ihr auch so vorgehen wie Perun. In seinem lesenswerten Artikel beschreibt er die Möglichkeit, die verschiedenen Dateitypen serverseitig komprimieren zu lassen. Hierzu ergänzt Ihr Eure .htaccess-Datei mit folgendem Codeschnipsel:

Für mod_deflate:

<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

Für mod_gzip: (gefunden bei samaxes.com)

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Kim Hübel behandelte die gleiche Thematik, wie ich soeben per pingback und tweet feststellte. Auch dort gibt es einen mehrteiligen Beitrag zum Thema – Hingehen, Lesen!

Welche Dateitypen komprimiert werden sollen, könnt Ihr selbst festlegen. Allerdings ist auch hier zu beachten, dass der Server bei jeder Datei-Anfrage komprimieren muss, was summa summarum nicht immer einen Vorteil bei der Ladezeit bringen muss. Je nach Auslastung des Servers könnte sich das auch negativ auswirken (z.B. beim shared hosting). Letztendlich müssen die Dateien beim Empfänger auch noch dekomprimiert werden. Doch es ist unbedingt einen Versuch wert.

Unterstützt Euer Server kein mod_deflate oder mod_gzip, werdet Ihr nach Bearbeitung der .htaccess den Blog nicht mehr erreichen können. Es wird ein "500-Error" ausgegeben. Halb so tragisch – durch erneutes Bearbeiten der Datei ist alles wieder beim Alten. Das mit der Sicherungskopie sagte ich schon, oder?

Wer auf Nummer sicher gehen will, bastelt sich eine kleine php-Datei mit folgendem Inhalt:

<?
phpinfo();
?>

Ladet diese per ftp auf den Blog und ruft diese Datei mit dem Browser auf und informiert Euch bei der Ausgabe Eurer php-Umgebung.

3. Dateien per ob_gzhandler komprimieren

Eine weitere, halbmanuelle Möglichkeit, Dateien per php komprimieren zu lassen, wird bei phpperformance.de beschrieben. Dies wäre eine Alternative, falls das mit dem mod_deflate bzw mod_gzip nicht funktioniert. Hierzu werden die zu komprimierenden Dateien mit einem Code ergänzt. Wer sich nicht durch sämtliche Dateien durchhangeln möchte, kann das auch automatisch generieren lassen. Der Autor des o.g. Beitrags liefert hierzu auch eine schöne Lösung. Sinngemäß wird eine Datei mit dem ob_gzhandler-Code erstellt, deren Inhalt per .htaccess-Befehl an den Anfang der gewünschten Dateien gestellt wird. Es ginge aber auch per Stapelverarbeitung auf dem heimischen Rechner – so hab ich das ausprobiert.

4. CSS-Dateien als php ausgeben und komprimieren

Eine weitere Komprimierungsmethode besteht darin, CSS-Dateien in php-Dateien umzuwandeln, die dann per gzip komrimiert werden können. Das hab ich bei markensysteme.de gefunden und es hat mir ganz gut gefallen: Die Stylesheet-Dateien werden durch einem kleinen Code (am Anfang und am Ende der Datei) ergänzt und in eine php-Datei umbenannt. Die Header.php (bzw. der Verweis auf die css-Datei) muss natürlich auch auf die neu erstellte php-Datei verweisen und entsprechend abgeändert werden.

5. Code-Kompression

Diese Komprimierungsmethode lässt sich eigentlich mit allen anderen genannten Methoden kombinieren. Denn hier werden keine Dateien komprimiert, sondern deren Inhalt (Code). Hierzu gibt es verschiedene Kompressions-Generatoren.

Google Page-Speed hat entsprechende Code-Kompressoren für CSS- und js-Dateien bereits eingebaut:

Bild 3: Minify CSS- and Java-Script (Klicken zum Vergrößern)

Ihr kopiert Euch den Inhalt der "minified version" und ersetzt den Originalinhalt der jeweiligen Datei. Zum dritten Mal erinnere ich daran, vorher alles zu sichern. Im oberen Beispiel wären zwar nur 512 bytes (2 %) gespart, es gab allerdings auch ganz andere Kaliber von mehreren KB. übrigens hab ich (im obigen Beispiel) einige css-Dateien in einer einzigen zusammengefasst (test.css). Doch dazu mehr in den nächsten Teilen.

An dieser Stelle soll auch Sergejs "Code-Compressor" nicht unerwähnt bleiben. Er komprimiert js- und css-Dateien wahlweise in "basic" oder "powerfull".

Es gibt daneben noch zahlreiche weitere Kompressoren  – doch die beiden sollten eigentlich genügen.

6. Dateien manuell komprimieren

Kommen wir zu letzten Kompressionsmethode, die ich hier vorstellen wollte. Das werde ich nun etwas ausführlicher tun, denn das ist die Methode, für die ich mich entschied. Die Methode im Schnelldurchlauf: Ihr komprimiert Eure Dateien selbst – z.B. Javascript Dateien – erstellt quasi Eure eigene gzip-Dateien und stellt diese auf dem Server bereit. Hinzu kommen ein paar Codezeilen in der .htaccess, die dafür sorgen, dass die gzippte Datei ausgegeben wird, sofern verfügbar. Diese Methode hat den Vorteil, dass Ihr:

• wisst, was geschieht
• die Originaldateien ebenfalls auf dem Server bleiben (zur Sicherheit)
• Weder Server noch php Komprimierungsarbeit leisten müssen.

Diese Methode hat den Nachteil, dass jede Datei händisch bearbeitet werden muss und geänderte Dateien (z.B. nach einem Update) nachgepflegt werden müssen. Das klingt im Moment recht erschütternd, ist jedoch viel weniger Aufwand als man glauben mag. Auch hier war Google Page Speed und YSlow behilflich. Sie zeigten mir die größten Sünder an. Nur Dateien ab einem gewissen Einsparungspotential ab ca 5kb hab ich optimiert. Das Beispiel auf Bild 4 zeigt, wie ein Bloggerkollege fast 300KB Transfergröße einsparen könnte. Der Screenshot ist einem anderen Blog entnommen,  bei mir waren es sogar fast 400KB (zwischenzeitlich optimiert).

Bild 4: Die größten Einsparpotentiale anhand Page Speed ermitteln (Klicken zum Vergrößern)

Mit dem größten Klopper fangen wir nun an. Durch Komprimierung der Datei prototype.js könnten fast 84KB gespart werden. Wir laden die Datei per ftp auf dem heimischen Rechner und komprimieren diese mit 7-zip.

Als Komprimierungsmethode wählen wir GZip  – als Stärke hab ich "Maximum" ausgewählt:

Die neu erstellte (komprimierte) Datei hat nun die Dateiendung "gz". Aus Kompatibilitätsgründen benennen wir die Dateiendung in "jgz" um. Also: "prototype.js.jgz".

Diese Datei laden wir dann auf den Server – gleicher Ort wie die Ursprungsdatei.

Damit der Server auch die gezippte (und nicht die Originaldatei) ausgibt, muss die Datei .htaccess noch folgendermaßen ergänzt werden:

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.jgz -f
RewriteRule (.*)\.js$ $1\.js.jgz [L]
AddType "text/javascript" .js.jgz
AddEncoding gzip .jgz

Es wird geprüft, ob eine gepackte Version vorliegt. Ist dies der Fall, wird dies anstelle der Originaldatei ausgegeben – gefunden bei tutorialajax.com.

Abschließend bewundert Ihr das positive Ergebnis, indem Ihr Eure Seite neu ladet und eine erneute Page Speed-Analyse startet. Das könnt Ihr dann nach und nach mit den Dateien machen, bei denen sich das Einsparpotential lohnt. Bei mir waren das gerade mal ca 8 Dateien und es ist ja auch sehr schnell erledigt. Ist der Page-Speed-Haken "grün", könnt Ihr aufhören – entsprechend ist es auch bei YSlow.

Fazit

Dargestellt hab ich sechs Kompressionsmethoden – jede hat Ihre Daseinsberechtigung. Ob und für welche Kompressionsmethode Ihr Euch entscheidet, bleibt Euch überlassen.

Erwartet keine Wunder: Kompression ist nicht alles – es gibt zahlreiche weitere Faktoren, doch dazu mehr im nächsten Teil.

Wie bereits erwähnt, kann sich Kompression auch nachteilig auswirken. Sucht Euch etwas aus, probiert, spielt und testet. So wie ich das auch (für die Startseite) getan habe. Doch seid vorgewarnt: Es geht nie zu Ende

Wenn Euch der Artikel gefallen hat und etwas interessantes für Euch dabei war, dürft hier hier gerne Euren Senf abgeben. Welche Erfahrungen habt Ihr denn gemacht? Kommt eine der Komprimierungsmöglichkeiten für Euch in Frage? Ist Euer Blog optimiert?

Foto: "Hand und Fuß" © Albrecht E. Arnold / PIXELIO