Probao-Case-Study: nutzerfreundlich, schnell und SEO-optimiert

Heute möchte ich euch mein neues Projekt “Probao” vorstellen. Auf Probao teste ich Online-Dienste, die ich selbst für nützlich halte. Dabei schreibe ich auf Probao über meine Erfahrungen mit den einzelnen Diensten und wie man sie am besten nutzt.

Mein Ziel mit Probao ist es Verbrauchern die Möglichkeiten aufzuzeigen, wie man sich das Leben mit Online-Diensten erleichtern kann und dabei auch noch den ein oder anderen Euro sparen kann.

Neben meinen persönlichen Erfahrungen, die ich in den Testberichten sehr ausführlich niederschreibe, findest du auf Probao auch noch Erfahrungsberichte von anderen Nutzern.

Anders als auf so vielen anderen Plattform, können die Nutzer aber nicht irgendwelche Erfahrungsberichte hochladen oder unsachliche Hasstiraden loslassen. Alle veröffentlichten Erfahrungsberichte müssen den Qualitätsstandard von Probao entsprechen.

Das heißt Hassberichte oder übertriebenes Lobeshymnen wirst du in den Erfahrungsberichten nicht finden. Nur Erfahrungsberichte, die einen Mehrwert für dich bieten, werden wir veröffentlichen.

Wenn du selbst Erfahrungen mit Online-Diensten gemacht hast, laden wir dich ein, diese auf Probao zu veröffentlichen. Du kannst jeden Monat eine 50 Euro Amazon-Gutschein gewinnen.

Technische Umsetzung

Die technische Umsetzung basiert wie bei meinen meisten Projekten auf WordPress. Mittlerweile setze ich für Content-Projekt eigentlich immer auf WordPress. Mit WordPress bekommt man einfach die meiste Funktionalität frei Haus.

Durch das riesige Angebot an Plugins kann man mit fast jede Art von Projekt schnell umsetzen. Darüber hinaus ist WordPress schnell und Suchmaschinen-freundlich.

Ich nutze bei Probao folgende Plugins:

Als Theme benutze ich eine Eigenentwicklung, die speziell aus SEO-Gesichtspunkten optimiert ist. So lade ich nur die Javascript– und CSS-Dateien, die ich wirklich will. Mein Ziel ist es so die Ladezeiten deutlich zu verkürzen. Vor allem mobile Nutzer sollen auch komfortabel Probao nutzen können.

Herausforderungen technischer Natur

Wie schon geschrieben, war ein zentrales Ziel die Ladezeiten so weit wie möglich zu verkürzen, um ein gutes Ergebnis beim PageSpeed Insights zu bekommen.

Ferner galt es auch die Testergebnisse auf Probao ordentlich darzustellen und sie gleichzeitig als Microformats mit semantischen Informationen zu versehen, damit Suchmaschinen die Inhalte besser verstehen.

Ein dritter Punkt war die Notwendigkeit schnell und einfach Querverlinkungen zwischen unterschiedlich Erfahrungsberichten herstellen zu können. Die Querverweise sollten optisch ansprechender als einfache Links und mehr Kontext für den Leser darstellen.

Minimierung der Ladezeiten

Um die Ladezeiten so kurz wie möglich zu halten, nutze ich im Großen und Ganzen drei Strategien. Als Allererstes lasse ich Probao bei einem ordentlichen auf WordPress spezialisierten Hostinganbieter laufen.

Dies sorgt schon für die nötigen technischen Einstellungen auf dem Server. Ich muss mich weder um Caching, Komprimierung noch HTTP-Version kümmern.

Darüber hinaus sorge ich mit zwei Plugins dafür, dass Bilder stark komprimiert werden und, wenn der Besucher sie denn auslesen kann, im neuen WebP-Format ausgeliefert werden. Dies erspart meinen Besuchern viele Kilobytes und einiges an Ladezeit.

Die wichtigste Maßnahme ist aus meiner Sicht die Reduzierung der Requests. Auch wenn durch HTTP2 mehrere Downloads gleichzeitig angestoßen werden können, ist das Zusammenfassen von JavaScript und CSS immer noch ein wichtiger Teil der Optimierung.

Üblich ist dafür die Nutzung bestimmter Caching-Plugins, die die Dateien der einzelnen Plugins und von WordPress zu jeweils einer einzigen CSS- und einer einzigen JavaScript-Datei zusammenfassen.

Allerdings hatte ich mit diesem Ansatz bisher einige Probleme. Manchmal wurde dadurch die Darstellung meines Themes verhunzt. Deswegen bin ich einen anderen Weg gegangen:

In meinem WordPress-Theme pflege ich die einzelnen JavaScript- und CSS-Dateien händisch ein. Im Produktivmodus werden diese jeweils in eine Datei zusammengefügt.

So kann ich sicherstellen, welches CSS und JavaScript in meinem Theme benutzt wird und habe trotzdem keine Probleme mit der Darstellung.

Darstellung der Testergebnisse und Microformats

Testergebnis und Microformat aus benutzerdefinierten Feldern.
Testergebnis und Microformat aus benutzerdefinierten Feldern.

Eine weitere Herausforderung war die Darstellung der Testergebnisse. Zum einen wollte ich nicht jedes Mal eine Tabelle in das WordPress-Dokument einfügen. Zum anderen sollten die Daten auch als MicroFormat für Google zur Verfügung stehen.

Darüber hinaus gab es auf den Plan, zukünftig die Daten der Testberichte auch an anderer Stelle auf Probao zur Verfügung zu haben.

Aus diesem Grund werden die Testergebnisse nicht direkt im jeweiligen Testbericht gespeichert, sondern als benutzerdefinierte Felder, die jedem WordPress-Dokument zugeordnet werden können.

Das Probao-Theme stellt dann bei Vorhandensein bestimmter benutzerdefinierte Felder die entsprechenden Informationen zum Erfahrungsbericht dar.