WordPress professionell einrichten – Website-Checks

Anmerkung: Diese Artikelserie entstand in Kooperation mit der Full Service Werbeagentur WERBEBOTSCHAFT aus Nürnberg.

Ist Ihre Webseite nun online, sollten Sie vor der Veröffentlichung noch einige wichtige Tests laufen lassen, um die Qualität und Geschwindigkeit Ihres Auftritts zu gewährleisten.

Dafür gibt es heutzutage viele kostenlose Tools, von denen ich Ihnen die wichtigsten heraus gepickt habe.

Achten Sie darauf, dass Sie, falls aktiviert, das Maintenance Plugin für diese Tests abschalten, da die jeweiligen Tools sonst nicht auf Ihre Webseite zugreifen können.

Komprimierungs-Check

Ob Ihre Webseite, wie vorher in Ihrer .htaccess Datei angegeben, auf dem Live-Server wirklich komprimiert ausgeliefert und damit dem Besucher auf die schnellst mögliche Weise angezeigt wird, prüfen Sie am besten mit dem Überprüfungstool Http Compression Test.

Tragen Sie einfach die URL Ihrer Homepage ein, klicken Sie auf den Button „Test“ und wenn die Komprimierung richtig eingestellt ist, erhalten Sie ein grüne Erfolgsmeldung.

Sollte die Komprimierung nicht aktiviert sein, obwohl Sie den richtigen Code in Ihre .htaccess eingetragen haben, wenden Sie sich am besten an Ihren Provider.
Möglichkeiten, warum die Komprimierung nicht funktioniert, können z.B. Fehlende Server-Module oder eine andere, neuere Apache-Version sein. Der Apache Webserver in der Version 2 erfordert nämlich eventuell einen leicht abgewandelten Code.

W3c HTML-Check

Die Qualität Ihrer HTML Ausgabe, können Sie mit dem Tool W3 Validator prüfen lassen. Tragen Sie einfach Ihre Seitenadresse ein und klicken Sie dann auf „Check“.

Bekommen Sie nun Fehler angezeigt, Warnungen müssen Sie nicht immer beachten, sollten Sie diese beheben und den Check erneut laufen lassen.

Diesen Check können Sie auch schon mit einer Offline-Version Ihrer Seite(n) durchführen, in dem Sie entweder IHren Quelltext kopieren und unter dem Tab „Validate by Direct Input“ eintragen, oder im Tab „Validate by File Upload“ eine vorher gespeicherte HTML-Version Ihrer Webseite hochladen.

Wichtig ist, dass Sie nicht nur eine Seite, wie z.B. Ihre Homepage, testen, sondern mehrere Seite durch den Validator schicken, da verschiedene Seite ja durch den Einsatz verschiedenster Elemente, wie z.B. Formulare, Maps, Slider usw., verschieden Quelltext enthalten .

W3c CSS-Check

Wie beim W3C HTML-Check, können Sie auf der Seite CSS Validator Ihren CSS Code auf Fehler prüfen.
Sie haben auch hier die Möglichkeit, die URL Ihrer Seite einzugeben, einen File-Upload mit CSS Code zu machen, oder Ihren CSS Code direkt einzufügen.

Danach testet das Tool Ihren Code und gibt Ihnen ggf. Fehler aus, die Sie unbedingt beheben sollten.

Page Speed Insights

Google hat einen eigenen Mechanismus und Kriterien entwickelt, um die Qualität und Geschwindigkeit von Internetseiten zu bewerten.

Unter PageSpeed Insights tragen Sie hierzu die URL Ihrer Seite ein und Google gibt Ihnen eine detaillierte Auflistung aller Punkte, die Sie beheben müssen, um eine höhere Punktzahl zu erreichen und damit am Ende besser bei Google gerankt zu werden.

Dazu teilt das Tool die Bewertung in Desktop mobile Version Ihrer Internetseiten und gibt in beiden Fällen Vorgaben zur Verbesserung der Performance und auch der Accessibility bzw. Benutzererfahrung.

Man muss leider sagen, dass es im Normalfall extrem schwer für Sie werden wird, 100 Punkte in der Bewertung zu erreichen, da einige, von Google angezeigten Punkte mit WordPress nur sehr mühsam, wenn überhaupt praktikabel umzusetzen sind.

Bewerten Sie das ganze System aber nicht über und jagen Sie nicht nach den 100 Punkten. Ein Ergebnis im Bereich 90 und aufwärts, ist völlig ausreichend.

Google gibt Ihnen zur Behebung der einzelnen Punkte immer detaillierte Erklärungen und Links zu ausführlichen Artikeln.
Auch können Sie z.B. optimierte Versionen von Bildern, CSS und Javascript Dateien direkt im Page Speed Tool herunter laden, um sich ein Bild von den Optimierungen machen und diese auch gleich in Ihren Webauftritt integrieren zu können.

Webpagetest.org

Die Seite Webpagetest bietet die Möglichkeit, die Geschwindigkeit Ihrer Webseite zu testen. Der Clou daran ist nicht nur die Möglichkeit, verschiedenste Geräte und Browser an verschiedensten Standorten der Welt auswählen zu können, sondern vor allem die umfassenden Auswertungs-Statistiken mit Angaben, die in vielen anderen Test-Programmen dieser Art fehlen.

Es wird z.B. die Dauer bis zum ersten gesendeten Byte gemessen, was Rückschlüsse auf die Server-Geschwindigkeit zeihen lässt. Wann der Rendervorgang beginnt und wie die gesamte Ladezeit auf die verschiedenen Inhalte verteilt ist, lässt sich in einem umfangreichen Diagramm ablesen.

Dazu gibt es aussagekräftige Bewertungen der einzelnen Disziplinen, bewertet von A (sehr gut) bis F (sehr schlecht) nach dem Vorbild des amerikanischen Schulnoten-Systems, welchen auf den ersten Blick eventuelle Geschwindigkeits-Probleme Ihrer Webseite aufdeckt.

Mobile checks

Ihre Webseite sollte heute komplett responsive sein, sich also jedem Ausgabegerät anpassen und dort komplett lesbar und funktionstüchtig sein.

Ob sich Ihre Webseite in dieser Sicht optimal anpasst, können Sie schon während der Entwicklung, aber vor allem nach Abschluß aller Entwicklungen, ganz einfach mit den in Chrome integrierten Entwicklertools prüfen.

Besuchen Sie dazu Ihre Seite und rufen Sie die Entwicklertools im Menü unter „Weitere Tools->Entwicklertools“ auf. Es öffnet sich ein separater Bereich in Ihrem Browser, meist unten, in dem Ihnen diverse Werkzeuge an die Hand gegeben werden, um Ihre Webseite zu untersuchen und zu testen.

Wir interessieren uns jetzt aber erst einmal nur für die Funktion „Toggle device Toolbar“. Diese befindet sich im neu geöffneten Bereich links oben gleich neben dem Quadrat Icon mit Pfeil.
Es sieht aus, wie ein Handy, das neben einem Pad steht.

Klicken Sie dieses Icon an, öffnet sich Ihre Seite in einer anderen Ansicht, meist in einem schmaleren Bereich. Diesen Bereich können Sie nun links und rechts anpacken und stufenlos größer und kleiner machen.
Zusätzlich haben Sie ganz oben die Möglichkeit, vorgegebene Device-Breiten und sogar Devices, die der Broser dann simuliert und sich als dieses Device ausgibt, auszuwählen und somit Ihre Webseite auf Herz und Nieren für die unterschiedlichsten Ausgabebreiten zu testen.

Neben Chrome, gibt es noch weitere Tools und Online-Checks, um die Ausgabe auf verschiedenen Devices testen zu können.
Die Webseite http://mobiletest.me lässt Sie z.B. ebenfalls mobileGeräte auswählen und Ihre Webseite darauf anzeigen. Beachten Sie: Es wird nur die breite, nicht das physkalische Gerät simuliert.

Weitere solcher Services mit mehr oder auch weiterführenden Funktionen sind z.B:

• http://browsershots.org
• https://www.browserling.com
• http://www.browseemall.com
• http://www.testize.com
• https://www.browserstack.com

Keine der vorher genannten Optionen kann aber das Testen auf echten Geräten ersetzen. Sie sollten also am besten immer ein iPhone und ein Android Gerät zum Testen parat haben, um sicher gehen zu können, dass Ihre Webseiten und alle Funktionen dieser auch wirklich auf den mobilen Geräten funktionieren.

Browser-Checks

Nicht nur das Testen auf mobilen Geräten, sondern auch das Testen in verschiedenen Browsern ist ein wichtiger Teil der Entwicklung, aber auch nach Abschluß und Livegang Ihrer Seite.

Testen Sie Ihre Seite in so vielen Browsern wie möglich. Denken Sie an Chrome, Firefox, Opera und den Internet Explorer.

Der Internet Explorer ab Version 11 hat eine tolle Funktion eingebaut, die es ermöglicht die neueste und alle älteren Versionen zu simulieren. So können Sie über dessen Entwicklertools z.B. einen IE 8 simulieren und Webseiten wirklich genau so browsen, als ob Sie mit einem IE 8 unterwegs wären.
Dies erspart Ihnen sehr viel Arbeit und Installationsaufwand und ist tatsächlich sehr verlässlich.

Auch hier können zusätzlich wieder die vorher genannten Tools für Screenshots in diversen Browsern eingesetzt werden.

Browser-Konsole

Über die Konsole in den Entwicklertools Ihrer Seite, können und müssen Sie während der Entwicklung, aber spätestens beim Live Gehen, prüfen, ob eventuell Javascript Fehler und/oder fehlende Dokumente wie Bilder, CSS und Javascripte vorliegen.

Besuchen Sie dazu Ihre Seite, rufen Sie die Entwicklertools auf und öffnen Sie den Tab „Konsole“. Fehler und fehlende Dokumente werden Ihnen dann sofort angezeigt.
Beheben Sie diese Fehler und fehlenden Dateien und laden Sie Ihre Seite neu, bis kein einziger Fehler mehr angezeigt wird.

Besuchen Sie möglichst jede Ihrer Seiten. Denn auf anderen Seiten können andere Funktionen Fehler hervorrufen, die Sie auf anderen Seiten wiederum nicht haben.

CSS Specificity Graph

Dies ist zugegebenermaßen schon ein sehr spezieller Test und vielleicht nur durch Ihre Entwickler richtig nachzuvollziehen und vor allem zu beheben, aber wenn Sie daran interessiert sind, die Geschwindigkeit Ihrer Webseite zu erhöhen, sollten Sie diesen Check unbedingt mit in Ihre Testphase einbauen.

Auf der Webseite zu diesem Check finden Sie zuerst einen Graphen, an dem Sie Ihr Ergebnis ablesen können, und darunter eine Eingabebox für das CSS Ihrer Webseite.
Wie Sie sehen, können Sie nur den Code für eine Stylesheet-Datei eintragen, was aber kein Problem sein sollte, da wir ja mit dem Punkt „Combiner und Minify Plugin installieren“ unsere CSS-Dateien auf eine einzige reduziert haben.

Nach der Eingabe klicken Sie außerhalb des Eingabefelds und warten, bis sich der Graph aktualisiert hat.

Der Graph zeigt nun an, wie spezifisch Ihr CSS ist. Hohe Ausschläge bedeuten hierbei, dass das CSS entweder sehr verschachtelt, und/oder mit IDs arbeitet.

Die Verwendung von IDs, also z.b. #header{} ist hierbei schlecht, weil CSS priorisiert. IDs überschreiben dabei Klassen.
Eine #header{} Definition gilt dann trotzdem, obwohl danach .header{}, also eine Klasse, definiert wurde.
Bei größeren Seiten kann dies zu Problemen und einen regelrechten Kampf um Prioritäten führen, indem Sie dann irgendwann bei Konstrukten wie: „html body #header{} #nav ul li“ landen, was natürlich extrem schwierig zu bearbeiten ist.

Haben Sie solch lange Definitionen, kann dies zu einer langsameren Verarbeitung durch den Browser führen, da sich dieser durch die große Verschachtelung erst einmal durchkämpfen muss.

Sollten Sie die Geschwindigkeit Ihres Seitenaufbaus also erhöhen wollen, nutzen Sie dieses Tool, finden sie große Verschachtelung und versuchen Sie diese zu minimieren.
Ein Ansatz hierfür ist z.B. BEM, mit dem Sie Ihre CSS Ebenen auf eine einzige reduzieren können.

Accessibility Checks mit WAVE

Das kostenlose WAVE (Web Accessibility Evaluation Tool) eignet sich hervorragend, um Ihre Webseite hinsichtlich Barrefreiheit / Barrierearmut zu prüfen.
Nach Eingabe Ihrer Web-Adresse erhalten sie u.U. Fehlermeldungen und Warnungen, die Sie in Hinsicht auf die Zugänglichkeit Ihrer Seite beheben sollten.
Beispiel hierfür sind u.A. fehlende Alt-Tags für Bilder, falsch angelegte Strukturen und Hierarchien oder falsch angelegte Formular-Elemente.