Das Problem

• Das eingekaufte Theme hatte gefühlte 100 Funktionen und mit jedem Update kamen neue Spielereien hinzu, die ich nicht benötigte.
• Obwohl ich die meisten nicht verwendete, wurden diese mitgeladen.
• Standard-Optimierungsmaßnahmen, wie Caching und Fotokomprimierung, brachten nur kleine Erfolge.
• Das Resultat war ein aufgeblähter Quellcode und eine höhere Ladezeit, die sich besonders bei mobilen Datenverbindungen bemerkbar machte.

Was die höhere Ladezeit für mein Geschäft bedeutete

Meine Hauptzielgruppe, Unternehmer, griffen meist mit einem stationärem PC und guter Internetverbindung auf meine Website zu, sodass die Seite meist in 1,5 bis spätestens 2 Sekunden geladen war.

Dementsprechend performte meine Website bereits ausreichend. Zumindest für meine Zielgruppe.

An dieser Stelle würden die meisten Menschen aufhören weiterzudenken. Schließlich hatte ich eine Website, die bei meiner Zielgruppe funktionierte.

Doch bei dieser Rechnung fehlt ein Faktor in der Gleichung:

Bisher fiel die Seite bei schlechten Internetverbindungen durch.

Das Ergebnis

Google Audit für mobile Verbindungen bestanden

Der PageSpeed Score verbesserte sich signifikant von 35 auf 61. Das ist ein enormer Sprung, der sich definitiv sehen lassen kann.

Weitere Verbesserungen:

Kennzahl	Bestseller-Theme	Individuelles Theme	Resultat
Seitengröße (webpagetest.org)	990 KB	615 KB	-37,8%
Speed Index (webpagetest.org)	2,444 s	1.095 s	-55,2%
Page Speed Score (mobil) (PageSpeed Insights)	36	69	+91,7%
Page Speed Score (Desktop) (PageSpeed Insights)	70	91	+30%
Speed Index (mobil) (PageSpeed Insights)	10,3 s	5,0 s	-51,46%

Speed Index um über 50% reduziert

Gemessen mit PageSpeed Insights, das standardmäßig eine langsame 3G Internetverbindung zur Analyse verwendet, konnte ich dem Speed-Index von 10,3 auf 5 Sekunden reduzieren. Also eine signifikante Verbesserung um 51,46%.

Im Vorher nachher-Vergleich auf webpagestest.org konnte ich den Speed Index bei guter Datenverbindung um über 50% von 2,444s auf 1,095s reduzieren.

Ebenso konnte ich die Downloadgröße der Startseite von 990KB auf 615KB und somit um 37,8% reduzieren.

Besonders für mobile Nutzer, die eine schlechte oder gedrosselte Datenverbindung haben, ist das eine super Sache.

Doch auch auf dem PC sind die Verbesserungen in Puncto Ladezeit deutlich spürbar, was mir langfristig mit Sicherheit mehr Nutzerzufriedenheit und bessere Rankings einbringen wird.

Endlich unabhängig vom Theme-Anbieter

Dieser Punkt sollte sich von selbst erklären.

Dank des neuen, eigenen Themes konnte ich die Abhängigkeiten zu Drittanbietern weiterhin reduzieren und habe gleichzeitig mehr Kontrolle über meine Website gewonnen.

Google Chrome DevTools Audit gerockt

Einer meiner Lieblingstests für Websites ist die in den Chrome-Browser integrierte Audit-Funktion.

Denn mit dem Chrome Audit erhalte ich nicht nur Tipps zum Website-Speed sondern auch zur Barrierefreiheit und Best Practices, wie zum Beispiel fehlende rel=“noopener“ für Links, die sich einen neuen Tab öffnen sollen.

Da der Audit recht umfangreich ist, lasse ich die Auswertung aus und veröffentliche lediglich die Endresultate.

Mobile Version

Desktop Version

Die Herangehensweise

Ich entschied mich das Maximum aus dem Projekt herauszuholen und ausschließlich auf moderne Techniken zu setzen.

Modularität für schnellere Ladezeiten

Den Fehler, den der Entwickler des Bestseller-Themes machte, wollte ich nicht wiederholen.

Es sollen zukünftig ausschließlich die Funktionen und Dateien in geladen werden, die ich auf jeweiligen Unterseite verwende.

Dazu teilte ich die Website in Komponenten auf und integrierte die dazugehörigen CSS und JS-Dateien nur in die jeweilige Unterseite, wenn sie wirklich auf der Seite verwendet wurde.

In welchen Browsern soll meine Website fehlerfrei funktionieren?

Wie auch bei einem Kundenprojekt musste ich eine Entscheidung zwischen Arbeitsaufwand und Browserkompatibilität treffen:

Auf welchen Browsern muss die Website einwandfrei funktionieren und bis zu welcher Browser-Version soll die Rückwärtskompatibilität gegeben sein?

Um eine Entscheidung zu treffen, wertete ich meine Analytics-Daten der letzten 6 Monate aus.

Google Chrome, Apples Safari und Mozilla Firefox machten knapp 80% meines Traffics aus.

Bis auf den Internet Explorer mit knapp 7% und Microsoft Edge mit 1,9% waren weitere Browser lediglich mit maximal 0,5% vertreten und wurden deshalb nicht weiter von mir beachtet.

Das ewige Sorgenkind von Webworkern – der Internet Explorer

Zugegebenermaßen stellt der Browser aus dem Hause Microsoft nur noch für die wenigsten Projekte ein Problem dar.

Denn die Designer und Entwickler konzentrieren sich auf aktuelle Browser anstatt einem Stück Softwaregeschichte hinterherzurennen.

• Der Marktanteil des IE in Deutschland hat sich im letzten Jahr beinahe halbiert.
• Der Browser wird mit dem Support-Ende von Windows7 im Januar 2020 wahrscheinlich nahezu komplett aus den Analytics verschwinden.

Das Problem: Während der IE bei Privatleuten kaum Anwendung findet, so nutzen ihn leider noch einige Unternehmen, die ihre Infrastruktur auf den Browser aufgebaut haben.

Und Unternehmen sind meine Zielgruppe.

Dementsprechend habe ich die wichtigsten Funktionen, wie Menüleiste und Kontaktformulare, optisch angepasst, damit die Darstellung und Funktionalität auch mit dem Internet Explorer gewährleistet sind.

Sonstige Websitesinhalte wurden nicht extra für den IE optimiert.

Das Konzept

Welche Funktionen brauche ich wirklich und wie sorge ich für einen besonders schlanken Code?

1. Mobile First Design

Da das oberste Ziel dieses Projekts die Geschwindigkeitsoptimierung war, setzte ich auf den mobile first approach.

Das bedeutet, dass ich die Seite für Handys entwickelte und die CSS-Regeln lediglich um einige Anweisungen für große Bildschirme erweiterte.

Dadurch war es mir möglich schlanken Code zu schreiben. Denn überladene Animationen, viele verschiedene Farben und zig verschiedene Inhaltselemente sorgen auf kleinen Bildschirmen sowieso nur für Verwirrung und Frust.

2. Modularität und Script Management

Da meine Websitesinhalte auch schon vor dem Relaunch gut optimiert waren, konnte ich die meisten Bestandteile übernehmen und musste lediglich kleine Anpassungen machen.

Um für jeden Seitenaufruf die geringstmögliche Seitengröße herauszuholen, habe ich die CSS und JS Bestandteile jeder einzelnen Funktion in separate Dateien gepackt.

So sind anstatt einem großen CSS-file nun knapp 10 kleine geworden, die nun ausschließlich geladen werden, wenn sie wirklich benötigt werden.

3. Einfache Skalierbarkeit dank relativer Größen

Niemand weiß, wohin die Reise geht.

In den letzten Jahren sind die Bildschirme größer geworden, das Bild wird immer schärfer und wer weiß schon, wo wir in 10 Jahren herauskommen?

Um das Websites Design in Zukunft schnell auf neue Anforderungen anpassen zu können, habe ich im eigenen Theme-CSS auf relative Größen, hauptsächlich auf REM, gesetzt.

Anstatt nun bei jedem Breakpoint das gesamte CSS anzupassen, passe ich ausschließlich den Ursprungswert des body-Tags an und alle anderen Elemente des Themes orientieren sich automatisch an diesem Wert.

Wie mir jedoch aufgefallen ist, setzen die meisten Plugins auf fixe Größenangaben in Pixeln. Dementsprechend müsste ich diese manuell angleichen, um ein harmonischen Endergebnis auf großen 4k-Bildschirmen zu erhalten oder etwas eigenes Programmieren.

Ich hatte mich während der Entwicklung dazu entschlossen die CSS-Dateien der Plugins größtenteils unberührt zu lassen und nach und nach auf eigene Plugins umzusteigen, die ebenfalls diesen relativen Ansatz verfolgen.

Das fertige Theme

Inhaltsoptimierungen

Einige Funktionen aus dem vorherigen Bestseller-Theme habe ich nicht übernommen, weil ich diese zu selten benutzt habe. Dementsprechend musste ich nach dem Theme-Wechsel die betroffenen Unterseiten anpassen.

So habe ich mich beispielsweise dazu entschieden die PopUps auf der Über mich Seite zu entfernen und mehr über meine Fähigkeiten zu schreiben als über meine persönlichen Vorlieben.

Denn dass ich keinen Kaffee mag und Anzüge für andere Menschen bestimmt sind, hilft dem potentiellen Kunden leider nicht bei der Frage, die er beim Aufruf der über mich Seite hat: Wer ist dieser Mensch und wie kann er mir helfen?

Benutzerfreundlichkeit

War den Besucher nicht ehrt, ist den Kunden nicht Wert

Die Ladezeitenoptimierung war ein zentraler Aspekt der Theme-Programmierung. Hauptsächlich als Mittel zum Zweck, um meine Google Positionen zu verbessern.

Gleichzeitig hat sich mir während der Programmierung ein ganz anderer Aspekt der Benutzerfreundlichkeit eröffnet.

Die Barrierefreiheit

Viele Webdesigner werben mit Barrierefreiem Design. Dem Kunden wird dann erklärt, dass eine Seite, die sich automatisch an den Bildschirm anpasst „barrierefrei“ sei.

Als ich es selber noch nicht besser wusste, habe ich das auch mal in irgendeinem Text im Internet veröffentlicht.

Doch heute weiß ich: Das ist natürlich absoluter Quatsch.

Fakt ist: Die wenigsten Websites unterstützen eingeschränkte Menschen bei der Seitenbenutzung.

Barrierefreiheit bedeutet, dass eingeschränkte Menschen die Website ebenso bedienen können, wie uneingeschränkte Menschen – vollständig und ohne großen Aufwand.

In der Praxis bedeutet das:

• Hervorhebungen im Fließtext sollten auch für Menschen, die Probleme beim Unterscheiden von Farben haben, erkennbar sein. Unterstreichungen und Umrandungen sind hier eine valide Möglichkeit.
• Kontraste und Schriftgrößen sollten sinnvoll gewählt sein
• Die Website sollte per Tastatur bedienbar sein, hauptsächlich werden dafür die Tabulator- und Enter-Taste genutzt
• Screen-Reader sollten die Website verstehen können, damit auch blinde Menschen Zugang zu den Informationen auf der Website haben

Bis auf einige Funktionen externer Plugins konnte die neue Seite mit dem eigenen Theme, zumindest in meinen Tests, problemlos per Tastatur bedient werden.

Die nächsten Schritte auf dem Weg zur barrierefreien Website wären die Anpassung der verwendeten Plugins und eine Website-Analyse mit einem Screen Reader.

Browser Detection

Da der Internet Explorer 11 seit 2015 nicht mehr weiterentwickelt wird und technisch gesehen veraltet ist, habe ich mich gegen eine Anpassung der Website an den IE entschieden.

Um die Nutzer des Internet Explorers nicht vollständig im Regen stehen zu lassen, erhalten diese einen Hinweis am oberen Bildschirmrand.

Mit dem Umstieg auf einen modernen Browser, könnten sie webfluence.de und andere Websites ohne Abstriche im Design nutzen.