Direkt zur Navigation | Direkt zum Inhalt



Hinter den Kulissen von rueprich.de

Hinter den Kulissen von rueprich.de

Meine neue Website ist inzwischen seit einigen Tagen online und die gröbsten Optimierungen sind seit heute auch vollendet. Bei der Umsetzung habe ich großen Wert auf die semantische Auszeichnung der Inhalte, sprechende URLs und eine gute Performance gelegt. Wie ich dies in WordPress realisiert habe, beschreibe ich in diesem Artikel.

Semantische Auszeichnung der Inhalte

Da ich für meine Website ein eigenes WordPress Theme erstellt habe, war die Erfüllung des ersten Punktes keine große Herausforderung. WordPress Themes bestehen aus einer Reihe von PHP-Dateien mit bestimmten Namen (beispielsweise header.php, footer.php oder home.php). Hat man eine fertige XHTML Vorlage seiner Website, kann man diese direkt in die von WordPress vorgesehenen Dateien aufteilen. Somit hatte ich bei der Auszeichnung der Inhalte in XHTML alle Freiheiten. Die Auszeichnung von Inhalten, die dynamisch hinzugefügt werden, können leicht angepasst werden. Und die Inhalte des Rich Text Editor werden ebenfalls korrekt formatiert.

In dem Artikel High Accessibility Is Effective Search Engine Optimization geht Andy Hagans bei A List Apart auf den Zusammenhang von Accessibility und Suchmaschinenoptimierung ein. Ein netter Nebeneffekt einer Website mit validem XHTML und reicher Semantik ist, dass sie auch sehr gut bei Suchmaschinen gelistet wird. Um die Qualität einer Website zu messen, empfehle ich die Firefox Extesion SenSEO von meinem Kollegen Nico Steiner.

Sprechende URLs

URLs sehe ich als eine Art API der Website an. Eine URL sollte daher einerseits die Struktur der Website wiederspiegeln. Anderseits sollte sie aber vor allem einfach, benutzerfreundlich und beschreibend sein. In WordPress nennen sich sprechende URLs Permalinks. Das Format dieser Links kann relativ einfach über die Einstellungen des Blogs konfiguriert werden. Schön finde ich dabei, dass direkt beim Schreiben eines Artikels der Seitenname angezeigt wird und editiert werden kann.

Mit den Namen meiner URLs habe ich versucht einen Satz zu konstruieren. Artikel der Kategorie Clean Code können z.B. wie folgt aufgerufen werden:

rueprich.de/bloggt/ueber/clean-code

Und Projekte, an denen ich bisher gearbeitet habe können unter arbeitet-an/PROJEKT-NAME aufgerufen werden.

rueprich.de/arbeitet-an/fitness-beruf

Bei Blog-Einträgen habe ich eine Ausnahme gemacht, da es relativ schnell passieren kann, dass ein Titel mehr als einmal verwendet wird. Aus diesem Grund habe ich den Monat und das Jahr der Veröffentlichung in die URL mit aufgenommen:

rueprich.de/bloggt/2010/01/rueprichde-behind-the-scenes

Der Vorteil an diesen URLs ist, dass man so z.B. auch alle Einträge im Januar 2010 ansehen kann:

rueprich.de/bloggt/2010/01

Oder alle Artikel von 2009:

rueprich.de/bloggt/2009

In WordPress konnte ich die URLs über zwei Felder in den Blog-Einstellungen konfigurieren. Für Blog-Einträge verwende ich diese benutzerdefinierte Struktur:

/bloggt/%year%/%monthnum%/%postname%

Und als Basis für Kategorien verwende ich:

bloggt/ueber

Wenn ihr auch eine Vorliebe für sprechende URLs habt, kann ich euch den Artikel von Chris Shiflett URL Vanity empfehlen.

Performance

Um eine gute Performance für meine Website zu erreichen, habe ich versucht alle Inhalte so klein wie möglich zu halten. Aus diesem Grund habe ich versucht mit so wenig HTML-Elementen, CSS-Klassen und -Eigenschaften wie möglich auszukommen. Die Bilder habe ich in Photoshop direkt für das “Web” gespeichert, daher sind diese bereits sehr gut komprimiert. Hover-Effekte bei Bildern habe ich mit Hilfe von CSS Sprites umgesetzt, um die Anzahl der HTTP-Request zu verringern. Denn viele HTTP-Requests führen zu einer längeren Ladezeit. Ein weiterer Vorteil von CSS Sprites ist, dass die Bilder im Hover-Zustand bereits geladen sind und es so nicht zu einem kurzen Flackern beim ersten “hovern” kommt.

In dem Artikel „Speed Up: Optimierungstipps für Ihre Seiten“ fasst Nelly Brekardin bei Dr. Web einge Tipps für die Optimierung von Websites zusammen. Für meine Website war vor allem der Punkt „Die richtigen HTTP-Header senden“ hilfreich. Hier wird beschrieben, wie man mit Hilfe der .htaccess Konfiguration die HTTP-Header Expires und Cache-Control sendet und textuelle Inhalte per gzip komprimiert.

Ein guter Einstieg für die Performance-Optimierung einer Website ist die Firefox Extension YSlow. Diese misst unterschiedliche Kriterien auf der Seite und beurteilt diese in Noten von A – F. Zu jedem Punkt gibt es eine Erklärung und Tipps, wie man die entsprechende Note verbessern kann. Unter dem Reiter “Statistics” sieht man darüber hinaus, wieviel Speicher die Website beim ersten Laden und wieviel Speicher die Site im “gecachten” Zustand benötigt.

Wer sich für dieses Thema interessiert, dem sei auch der Artikel „Best Practices for Speeding Up Your Web Site“ empfohlen.

Neues Kommentar