Obwohl mittlerweile jedem Webworker klar sein dürfte, dass die Optimierung einer Webseite auf eine höhere Ladegeschwindigkeit und niedrigere Ladezeit in mehrerer Hinsicht ein essentieller Erfolgsfaktor ist, scheitern dennoch sehr viele an der Umsetzung. Dieser Artikel soll also vor allem praktische Optimierungstechniken aufzeigen, die sich auch beim eigenen Projekt anwenden lassen. Um dabei nicht in theoretischen Floskeln zu versinken, werden die verschiedenen Maßnahmen am Beispiel vier großer deutscher Webseiten veranschaulicht.
Zwischen den Festtagen kurz Twitter gecheckt, da kam mir ein Tweet von @KaiThrun unter die Augen. Er war auf der Suche nach einem WordPress Plugin zum besseren Arbeiten mit der VG Wort. Da ich intern bereits etwas ähnliches in Verwendung hatte, habe ich zwischen den Jahren nochmal fix meine IDE angeworfen und das Plugin etwas aufpoliert, so dass ich es nun hier im Blog zum Download anbieten kann. VG Was…? Erfahrungsgemäß ist die VG Wort vielen kein Begriff. Deshalb möchte ich an dieser Stelle ein paar Worte darüber verlieren.
Da das gestrige und erste Video-Tutorial Einfacher AJAX-Request mit Hilfe von jQuery laut den Blogkommentaren doch besser ankam als ich dachte, habe ich mich entschlossen, dass Video-Bloggen weiter zu verfolgen und in Zukunft regelmäßig Video-Tutorials auf meinem Blog zu veröffentlichen. Auf meinen Streifzügen durchs Web fallen mir immer mal wieder CSS3-Eigenschaften auf, die man regelmäßig wiederfindet. Dazu gehören beispielweise border-radius, um Elemente abzurunden, oder box-shadow, um einen Schlagschatten zu definieren.
Bei mir lief es folgendermaßen ab: Als ich ungefähr die ersten 1.000 Besucher im Monat auf meiner Webseite hatte, war die Versuchung groß. Erfahrungsberichte von gestandenen Online-Profis – vor allem jene von Peer Wandiger – machten Lust auf das große Geld verdienen im Internet. Obwohl mir damals nur Googles AdSense ein Begriff war, schienen die Möglichkeiten gigantisch. Artikel schreiben, massig Traffic abgreifen, ein bis zwei AdSense Banner einbauen, Geld kassieren – total simpel. Natürlich musste ich schnell feststellen, dass es so einfach nicht funktioniert.
Vor wenigen Tagen flog ein Tweet von Herrn Kratz (@karlkratz) durch meine Twitter-Timeline, in dem es hieß: „Der Facbook #like Button ist PageSpeed-technisch eine echte Wutz. :-(„. Diese Aussage konnte ich auf Grund meiner eigenen gemachten Erfahrungen nur bestätigen. Obwohl sich die Ladezeiten mit der neuen fbml-Methode gegenüber der alten iframe-Methode schon gebessert haben, wird dem Benutzer weiterhin suggeriert, die Webseite befindet sich in einem Ladezustand. Zum Beispiel verhaart der Cursor so lange im Ladezustand und auch in Browsern mit Fußleiste (z.B.
Zur Zeit sind die so genannten Single Pages ja wirklich schwer in Mode. Zum Beispiel gab es erst vor zwei Tagen beim seo-book.de einen spannenden Beitrag, der der Frage nachging, ob eine Single Page wohl besser für das Google Ranking sei? Auch ich habe Anfang dieser Woche den Relaunch meines Portfolios veröffentlicht und dabei wieder auf ein Single Page Webdesign gesetzt.
Der Call-to-Action-Button oder das Call-to-Action-Element ist ein Schlüsselfaktor im erfolgreichen Online-Marketing. Experten messen diesem Element eine entscheidende Rolle im Hinblick auf die Konversion-Rate bei. Ganz einfach ausgedrückt bedeutet das: Ist das Call-to-Action-Element gut gestaltet, wird mehr verkauft. Auch im Affiliate-Marketing ist es deshalb wichtig, dem Call-to-Action-Button auffällig und prominent zu gestalten.
Für das CMS fokus nehme ich zur Zeit einige technische Tutorials auf. Per Screencasting-Software zeige ich beispielsweise, wie man Templates erstellt oder mit den komplexen Dokumentenklassen umgehen sollte. Da mir diese Arbeit sehr viel Spaß bereit – aber auch enorme Übung erfordert – habe ich mir gedacht, warum nicht auch mal ein Video-Tutorial für diesen Blog erstellen? Gesagt getan: Für den Anfang habe ich mir ein Thema vorgenommen, welches hier im Blog bereits in einer eigenen Artikelserie behandelt wurde.
Im Video-Tutorial Einfacher AJAX-Request mit Hilfe von jQuery hatten wir bereits das beliebte Javascript-Framework im Einsatz. Heute ist es natürlich wieder mit an Bord, wenn auch die Erweiterung jQuery UI das eigentliche Objekt unserer Begierde ist. Im heutigen Tutorial soll es darum gehen, eine einfache unformatierte HTML-Liste (<ul><li></li></ul>) für den Benutzer sortierbar zu machen. Das bedeutet, die Einträge bleiben nicht in ihrer ursprünglichen Sortierung erhalten, sondern der Nutzer kann das letzte Element an die erste Position schieben und umgekehrt.
In der Welt der Webentwickler ist es eines der Trending Topics dieses Jahres: Website Speed. Kaum ein anderes Thema erlebt in Zeiten der zunehmenden Breidband-Zugänge eine so starke Renaissance wie die Optimierung von Webseiten auf eine kürzere Ladezeit. Der Anstoß zum Speed-Wahn kam dabei aus einer ganz anderen Ecke: Im Frühling 2010 entschied sich Google dafür, Page Speed zum Rankingfaktor zu machen.
Facebook bietet dieses Features schon lange an: Ein Widget per iframe auf der eigenen Seite einbauen, dass dann im bekannten Facebook-Stil ein Kommentieren über die eigene Webseite ermöglicht und die Kommentare auf Wunsch auch gleich noch den Freunden mitteilt. Auch Google+ zieht nun nach und hat seinen Dienst „Blogger“ mit einer ähnlichen Funktion ausgestattet. Google schreibt dazu folgendes: Eure Blog-Leser haben nun die Möglichkeit, ihre Kommentare für alle oder nur für ihre Kreise auf Google+ zu veröffentlichen.
Seit gestern Abend 19:00 Uhr stellt Facebook Entwicklern eine neue Funktion bereit, um Facebook Beiträge per Code Snippet auf die eigene Webseite zu bringen. Das Verfahren zum Einbetten der Beiträge folgt dabei in etwa dem selben Schema wie dem Einbinden des Like Buttons oder der Facebook Kommentare. Twitter schuf diese Möglichkeit bereits vor längerer Zeit und immer häufiger sieht man Artikel oder Blog-Beiträge, die durch die Tweets berühmter Persönlichkeiten angereichert werden.
Das Web Fonts Projekt von Google ist mittlerweile schon länger online, dennoch habe ich den Eindruck, dass viele Webdesigner und -entwickler diese Möglichkeit zur Verwendung externer Schriftarten auf der eigenen Webseite noch nicht kennen. Dabei bieten sowohl die angeboten Fonts als auch die Art der Verwendung & Einbettung diverse Vorteile gegenüber klassischen Varianten. Der Hintergrund Eine gefühlte Ewigkeit war man als Webentwickler darauf angewiesen, sich auf die bestehenden Standard-Fonts bei der Umsetzung einer Webseite zu verlassen.
Im Programmieralltag mit PHP bekommt man es sehr oft mit GET- oder POST-Variablen zu tun. Diese bringen Interaktivität auf die Webseite und ermöglichen dem Benutzer, mit dem Script zu kommunizieren. Natürlich ist es für PHP-Programmierer deshalb sehr wichtig, gut mit diesen Variablen umgehen zu können. Dazu gehört natürlich ein richtiges Verständnis ihrer Funktionsweise, das Wissen wie man sie absichert, aber natürlich auch die Möglichkeit, sich durch Funktionen das Leben zu erleichtern um dadurch Quellcode zu sparen.
Nachdem ich mir vor einigen Wochen schon mal den Spaß gemacht habe, das Logo des berühmten wpSEO-Plugins nur mit HTML und CSS3 nachzubauen, war ich auf der Suche nach einer noch größeren Herausforderung. Was liegt da näher, als das Logo des großen Internet-Gewinners 2010 nachzubauen: Facebook. Schon nach wenigen Minuten war klar, dass das Facebook-Logo keine leichte Aufgabe würde. Vor allem die große Wölbung in der Mitte und die schrägen Ecken beim „f“ erforderten Kreativität.
Montag Morgen, 6 Uhr, Feiertag – beste Voraussetzungen um mich mal wieder einem ausführlichen Blogbeitrag zu widmen. In den letzten Wochen ist es leider etwas still hier geworden, aber die Launch-Phase des CMS fokus fordert mir leider alles ab. Gut also, dass es Feiertage wie diese gibt. :) Das Thema für den heutigen Artikel kam mir vor ca. zwei Wochen auf den Schirm, als ich von Christian ein Interview für zweidoteins.de bekam. Eine Frage die Christian mir stellte lautete: „Hast du dich schnell in das neue HTML5 einarbeiten können?„.
Obwohl es wohl eher eine Kleinigkeit ist, werden viele bei der Einbindung ihrer Affiliate-Links schon mal vor dieser Frage gestanden haben: Soll ich dem Link ein target=“_blank“ mitgeben oder eher nicht? Beide Varianten haben natürlich Vor- und Nachteile, die es abzuwägen gibt. Und obwohl es viele nur als Kleinigkeit abtun, ist es auf jeden Fall ein geringer Einflussfaktor auf die Conversion Rate.
