CleanIT WordPress Theme

26. Mrz. 2017

Für diese Website habe ich ein komplett eigenes WordPress-Theme entwickelt mit dem Fokus auf Minimalismus, schnellen Ladezeiten und 100% mobile Optimierung. Was dieses Theme sonst noch auszeichnet, erfahrt ihr im folgenden.

Ich persönlich surfe fast ausschließlich auf mobilen Geräten, weshalb ich bei der Entwicklung stets darauf achte, dass die jeweilige Website auch auf Handys optimal funktioniert, um keine Funktionen beschnitten wird und auch bei mobiler Datenverbindung in sekundenschnelle geladen ist. Doch bevor wir ins Detail gehen erst einmal zum groben Aufbau.

Aufbau und Funktionen von CleanIT

Wie man schnell erkennt ist CleanIT sehr minimalistisch. Es gibt einen Header-Bereich, in dem der Titel der Website und das Logo auf der linken und ein Menü inklusive Suchfunktion auf der rechten Seite platziert sind, den man immer am oberen Bildschirmrand wiederfindet. Das Menü und die Suche passen sich auf mobilen Geräten etwas an, sodass sich diese Funktionen hinter einem kleinen Knopf in der oberen rechten Ecke verbergen.

Der Hauptbereich der Website ist ebenfalls sehr minimalistisch gehalten. Alle Artikel sind untereinander angeordnet und mit einem dezenten Balken voneinander abgetrennt. 

Jeder Artikel kann dabei ein Thumbnail erhalten, welches vorzugsweise im 21:9 Format vorliegen sollte. Darunter wird der Titel, das letzte Bearbeitungsdatum und natürlich eine kurze Artikelvorschau angezeigt.

Am Ende des Hauptteils ist vereinzelt noch eine minimalistische Paging-Anzeige vorhanden und darunter folgt auch direkt der Footer mit dem Copyright und weiteren Links.

Bei Artikelseiten, bei denen Kommentare erlaubt sind finden sich zudem, direkt unter dem Artikel ein paar Knöpfe zum Teilen des Artikels. Diese funktionieren komplett ohne Javascript und nutzen lediglich CSS für die Darstellung.

Unter diesen Share-Buttons gibt es zudem einen Knopf um die Kommentare anzuzeigen, welche erst bei einem Klick von Disqus geladen werden. Das späte Laden erfolgt dabei aus nur einem Grund: Performance! Als mobiler Nutzer ist mir mein Datenvolumen sehr wichtig und wenn ich bereits sehe, dass es keine Kommentare gibt, und ich auch keinen neuen Kommentar verfassen möchte, dann möchte ich mein kostbares Datenvolumen nicht für das Laden von Disqus-Inhalten verschwenden. Zudem gehe ich davon aus, dass wenn jemand einen Kommentar schreiben möchte, er nicht von diesem einen weiteren Klick abgehalten wird.

Performance

CSS-Ladezeit perfektionieren

Ein weiterer Performance Trick ist das asynchrone laden von CSS und dem zwischenspeichern im Localstorage des Nutzers. Dies habe ich mit ein wenig Javascript (ohne jQuery, das ist auf meiner Website sowieso nicht mehr vertreten, da es einfach zu groß und unnötig ist) umgesetzt. Eigentlich wollte ich einen ServiceWorker nutzen, doch da ich auf meiner Website bereits einen ServiceWorker für die Benachrichtigungen nutze und 2 Serviceworker per Domain nicht möglich sind und eine Integration beider in einen ebenfalls recht komplex ist habe ich mich schnell wieder dagegen entschieden.

Ich habe also einen Javascript Code geschrieben, welcher die gegebenen Anforderungen erfüllt. Weiteres könnt ihr in diesem Artikel nachlesen.

Optimierung, die nicht im Theme enthalten ist

Wenn ihr das Theme installiert und eingerichtet habt, werdet ihr eines sicher feststellen: Die Ladezeit eurer Seite ist gar nicht so gut wie erwartet! Das liegt daran, dass dieses Theme speziell für meinen Webspace angepasst wurde. So werden Thumbnails stets in voller Größe von WordPress ausgegeben, da ich eine stark angepasste Version von adaptive-images verwende um alle Bilder On-The-Fly zu optimieren. Zudem verwende ich MinCSS V2 um sämtlichen CSS-Code komprimiert auszugeben. Hierfür wird es auch bald noch einen weiteren Artikel geben, denn MinCSS ist nun noch Benutzerfreundlicher geworden. Die 3. Optimierung die ich verwende ist das HTML-Caching, damit WordPress nicht bei jedem Seitenaufruf die Seite neu generieren muss. Diese ist jedoch so spezifisch auf meinen Webspace angepasst, dass ich mir noch nicht sicher bin ob ich dazu jemals ein Tutorial veröffentlichen werde. Es gibt aber genug Caching-PlugIns für WordPress die euch sicherlich ebenso helfen werden.

Mit all diesen Optimierungen schaffe ich Ladezeiten von unter 300ms und selbst bei miserabler GPRS-Internetverbindung mit dem Handy lädt die Seite noch in unter 15sek. Das ist Performance, wie ich sie mir von allen Websites wünsche. Und das ist auch der Grund, wieso ich dieses Theme mit euch teilen möchte. Nutzt es, optimiert es und verschafft euren Besuchern ein frustfreies Surferlebnis!

weitere Anmerkungen

Dieses Theme ist nicht Ready2Run! Ihr solltet vor dem produktiven Einsatz jede Zeile Code durchgehen und auf eure Bedürfnisse anpassen. Viele Linkssind aus Performancegründen gehardcoded und funktionieren somit auf eurer Website nicht. Der Code sollte aber übersichtlich genug und mit genug Kommentaren versehen sein, dass ihr alles anpassen können solltet. 

Und nun viel Spaß beim ausprobieren.

Download Theme