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.
Für Suchmaschinenoptimierer war es 2011 ein interessantes Thema, ich glaube 2012 wird es noch heißer. Die Rede ist von den sogenannten Rich Snippets. HTML-Mikroformate, die die Google Serps ordentlich aufpolieren können. Die Vielzahl der Möglichkeiten ist bereits heute groß: Vorschaubilder, Eventdaten, Produktinformationen oder Nutzerbewertungen; es lassen sich allerlei Informationen in die Google Suchergebnisse bringen. Rich Snippets gelten genau wie die Meta-Description als indirekte Optimierung.
Im letzten und außerdem ersten Teil der Mini-Artikelserie Fenster per jQuery & HTML5 haben wir ein Grundgerüst des Fensters mit Hilfe von HTML5 und CSS3 entwickelt. Wer diesen Artikel noch nicht gelesen oder den Quellcode nicht mehr parat hat, sollte den ersten Teil unbedingt nochmals überfliegen. Denn dort werden bereits die grundlegenden Basics für die Verwendung unserer Fenstertechnologie gelegt. Im heutigen Teil möchten wir nun endlich die versprochene Bewegung mit ins Spiel bringen.
Nachdem ich vor einigen Tagen die neuen HTML5 Formulare vorgestellt habe, soll es heute um ein weiteres Spielzeug aus der großen bunten HTML5-Spielzeugkiste gehen. Gegenstand unserer Begierde ist die neue Javascript Gelocation API, mit der sich ziemlich exakt der Standort eines Besuchers ermitteln lässt. Dies funktioniert bereits in fast allen modernen Browsern und lässt sich somit bereits heute optional nutzen.
Der heutige Artikel stellt meinen Beitrag bei der aktuellen Blogparade auf Selbständig im Netz dar. Diesmal hat sich Peer ein spannendes Thema herausgesucht, nämlich Tipps für die ersten Kunden. Viele starten motiviert in die Selbständigkeit, stellen dann aber schnell fest, dass die Kunden ausbleiben. Was auf dem Papier exakt ausgearbeitet war und felsenfest sitzen sollte, stellt sich in der Realität häufig als viel zu optimistische Zielsetzung heraus. Dies gilt sowohl für Offline-, als auch für Online-Anbieter.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
