Schnelligkeit, SEO, beste Praxis und Barrierefreiheit- alles 100%

Lighthouse ist ein Werkzeug um verschiedene Aspekte einer Webseite zu messen und Rückmeldungen zu geben. Es wurde von  Google entwickelt, ist öffentlich und kann frei gebraucht werden. Es wurde hauptsächlich für Webentwickler entworfen und möchte zur Verbesserung der Webseiten beitragen.

Lighthouse gibt es neben anderen Möglichkeiten auf web.dev/measure oder unter Chrome bei den “Developer Tools”, in der obersten Leiste der letzte Punkt.

• Performance: Die Leistung einer Webseite z.B. wie schnell das grösste Element geladen ist.
• Accessibility: Wie erreichbar bzw. nutzbar die Seite für verschiedene Menschen ist. Auch visuell eingeschränkte Menschen sollen eine Webseite nutzen können, wozu es Anpassungen wie beschreibende Attribute braucht.
• Best Practices: Hier wird die Seite hauptsächlich auf sicherheitsrelevante Punkte getestet: Nutzt eine Webseite https (die sichere Variante von http, mehr dazu unter Anmerkungen)? Haben die benutzten JavaScript-Bibliotheken Sicherheitslücken?
• SEO: Search Engine Optimization spezifische Faktoren wie die Beschriftung von Bildern oder das Besitzen einer "Anleitung" für Roboter, welche die Seite durchsuchen, wie robots.txt.
• PWA: Bei Progressive Web App handelt es sich um die Fähigkeit einer Webseite, auch native Merkmale wie z.B. eine App auf einem Smartphone zu haben. Für die meisten Webseiten ist das nicht nötig, darum werde ich in diesem Artikel nicht weiter darauf eingehen.

Lighthouse bewertet eine Webseite nach vorgegebenen Kriterien. Grundsätzlich ist anzunehmen, dass Webseiten mit einer hohen Lighthouse-Score schnell laden, benutzerfreundlich und sicher sind, sowie schnell gefunden werden.
Also sobald ich 100% erreicht habe und alles grün ist, ist meine Seite perfekt, oder? Nicht ganz, in diesem englischen Artikel wird zum Beispiel gezeigt, wie eine Webseite 100% Accessibility, also für möglichst viele erreichbar ist, erreicht… Eigentlich aber darauf ausgerichtet wurde, dass der Inhalt nicht sichtbar ist und sogar der Text im Quellcode für Menschen unleserlich ist. Das trifft, wie gezeigt, vor allem auf Accessibility zu, in welchem Bereich es trotz möglicher 100% viel Potenzial zur Verbesserung gibt/geben kann.
Zudem wird meist nur eine Seite, oft die Hauptseite, getestet. Dies kann natürlich verstellt werden: pixmill.ch/blog/ Hiermit würde zum Beispiel die Blog-Unterseite getestet werden.

Schlussendlich ist Lighthouse aber ein nützliches Werkzeug, um die Qualität einer Seite zu messen und durch verschiedene Ratschläge, beispielsweise die Geschwindigkeit beschleunigen, zu verbessern.

Nun zurück zur Hauptaufgabe, dem Erreichen von 100% der neu designten Pixmill-Webseite. Hier sind einige anfänglichen Werte der Homepage

In einem ersten Schritt habe ich die Bilder auf die verschiedenen Formate und Grössen angepasst. Auf dem Server werden dafür unterschiedliche Bilder gespeichert und der Browser entscheidet, welches davon am geeignetsten ist und er darstellen kann. Auf einem Handy ist es sehr nützlich kleinere Bilder herunterzuladen, da meist eine schlechtere Internetverbindung besteht und grosse Bilder so oder so nicht nötig sind.

Zudem habe ich den JavaScript-Code durchgeschaut und mit dem Coverage (deutsch: Abdeckung oder Umfang)-Tool in Chrome analysiert, wie viel von einer gewissen Datei genutzt wird. In dem Zug wollte ich den eigenen Code von einer grossen Bibliothek namens jQuery lösen, musste aber schlussendlich leider feststellen, dass jQuery aufgrund der anderen genutzten Bibliotheken noch nicht entfernbar ist und wir es immer noch brauchen. Trotzdem war das nützlich, da es immer gut ist, Alternativen zu kennen und überflüssiger Code entfernt werden konnte.

In einem nächsten Schritt, wurde die Webseite auf den neuesten Workflow umgestellt: Dadurch können Files für die Produktion besser komprimiert und kleiner ausgeliefert werden. Zudem, was fast wichtiger ist, ist der neue Workflow übersichtlicher. Na gut, aber was bringt das den Nutzer*innen oder Kund*innen? Durch eine verbesserte Struktur können schneller Änderungen vorgenommen werden und die Webseite kann beispielsweise viel schneller verändert werden, was viel Zeit und damit Geld einsparen kann. Da sich das Internet schnell verändert und neue Technologien erscheinen, ist es essentiell “schönen” Code zu schreiben um möglichst (schnell) auf Änderungen reagieren zu können und immer auf der Welle zu schwimmen.

Hier gibt es einige Dinge zu beachten, um nicht ganze Gruppen von Menschen auszuschliessen. Heutzutage ist das Nutzen von sogenannten aria-labels wichtig, da Bildschirm-Leser sich davon die wichtigen (beschreibenden) Informationen holen (wenn sie eben gesetzt sind). ARIA steht für “Accessible Rich Internet Applications”, zu deutsch etwa “barrierefreie, reiche Internet Anwendungen”, und es gibt viele verschiedene Tags, die das Bedienen für eingeschränkte Menschen erleichtern soll. Ein solcher Tag kann zum Beispiel einen button besser Beschreiben: “Mehr lesen” auf einer Seite mit vielen verschiedenen Blogs und solchen buttons ist schwer verständlich für Personen, die möglicherweise nicht sehen und die Webseite nur mit der Tastatur navigieren können. Dann wird immer wieder “Mehr lesen” vorgesprochen, aber es gibt keinen Zusammenhang: Zu was lese ich mehr? Mit einem aria-label=”Zum Blog Optimales Bildformat für Webseiten navigieren” ist es viel verständlicher.
Daneben kann der Kontrast von Farben ein Problem für sehbehinderte Personen darstellen. Auf pixmill haben wir beispielsweise das aktive Element in der Navigation anstatt von grüner aus weisse Schrift umgestellt, dafür grün unterstrichen.

Zu dieser Kategorie habe ich zuerst einmal alle Links zu externen Webseiten mit sogenannten noreferrer, in HTML rel=”noreferrer”, versehen. Dieser blockt das Verändern des ursprünglichen Links bzw. Ziel-Destination durch JavaScript window.opener. Durch window.opener wäre z.B. das Verändern des Ortes (meine-webseite.ch → hackerWebseite.com) oder schlimmstenfalls das Einfügen fremden Codes in die Seite möglich, was verhindert werden soll.

Zweitens sorgt der tag dafür, dass beim Öffnen des Links, die geöffnete Webseite nicht mitbekommt, welches die Webseite mit dem Link ist. Der Person bietet das mehr Privatsphäre, da sein Gang durchs Internet weniger aufgezeichnet wird.

Der noreferrer hat einen leichten Nachteil, wenn es um indirekte SEO bzw. Statistiken dazu geht. Denn er verbirgt, was sein Zweck ist, woher die Seite geöffnet wurde und dies kann dadurch z.B. in Google Analytics nicht aufgezeichnet werden. 
Dazu gibt es die Alternative des rel=”noopener”. Dies verhindert, gleich wie beim noreffer, das sofortige Weiterleiten nach dem Öffnen eines Links. Aber er gibt die Information, von wo aus eine Seite geöffnet wurde, weiter. 

Bei Lighthouse hat die SEO recht klare und grundsätzlich eher einfache Kriterien. Dadurch konnte die Score durch das Ergänzen eines robots.txt-File, welches den Robotern mitteilt, welche Verzeichnisse es durchsuchen soll bzw. für eine*n Besucher*in interessant sein kann und einem canonical-meta-tag auf 100% gebracht werden. Ein canonical-meta-tag sagt dem Browser welches die Original-Seite ist und beugt Probleme mit duplizierten Inhalt vor. Duplizierten Inhalt kann schnell entstehen, ohne dass es bewusst ist: Durch Webseiten die mit/ohne www, mit http und https erreichbar sind und/oder eine Druckansicht haben z.B. wie meine-seite.ch/inhalt.html und meine-seite.ch/inhalt_print.html.

Da die Webseite bei anderen Punkten wie meta-tags, Seitentitel oder durchsuchbare Links bereits perfekt SEO optimiert war, musste ich nichts weiteres machen.

Zudem achten die Suchmaschinen auch auf die anderen Punkte wie Leistung/Geschwindigkeit (viele Benutzer*innen bleiben nicht lange, wenn die Webseite langsam lädt), Barrierefreiheit (Suchmaschinen möchten so viele Personen wie möglich ansprechen) und sichere, verschlüsselte Übertragung (https).

Alle Werte sind im grünen Bereich! Auch wenn ich es leider nicht erreicht habe, in allen Kategorien auf dieser Seite 100% zu erreichen, konnte ich die Seite um einiges verbessern und habe viele Dinge dazugelernt. All dieses Wissen fliesst selbstverständlich auch in alle Wartungs-/Überarbeitungsarbeiten und in neue Webseiten ein. 

Hoffentlich haben auch Sie etwas davon mitnehmen können, verstehen besser was es für eine ausgezeichnete Webseite braucht und wenn Sie auf Ideen gekommen sind, dann kontaktieren Sie uns jetzt!
Weiterhin einen schönen und erfolgreichen Tag :)