Tipp: Automatisiertes Testing der Website mit Lighthouse

In der Eile des Agenturalltages vergisst man manchmal die eine oder andere Sache. Deshalb machen automatisierte Tests sehr viel Sinn um zumindest die wichtigsten Punkte zu finden.

Ein sehr hilfreiches Tool ist hierbei „Lighthouse“ von Google Chrome. Man muss dieses Plugin aber nicht zwingend installieren, sondern kann es über ein Lesezeichen (Favoriten) auch in anderen Browsern wie Firefox aufrufen. Und zwar so:

Lege dir im Browser ein neues Lesezeichen an und benenne es beispielsweise „Website-Test“. Im Feld Adresse gibst du dann aber keine normale URL ein, sondern das hier:

javascript:void(document.location='https://googlechrome.github.io/lighthouse/viewer/?psiurl='+escape(document.location)+'&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa')

Jetzt gehst du wie gewohnt mit deinem Browser zu der Seite die du testen möchtest. Wichtig ist, dass die Seite öffentlich zugänglich ist. Falls sie auf einem Testspace liegt, müsstest du sie also ggf. vom vorgeschalteten temporären Passwort befreien (liegt bei Contao meist in /web/.htaccess – hier die Zeilen der temporären Passwortabfrage mit # auskommentieren).

Sobald du das gemacht hast, öffnest du die Website und klickst im Browser auf das zuvor von dir angelegte Test-Lesezeichen. Nun beginnt Lighthouse die diversen automatisierten Tests. Du wartest einfach in Ruhe ab, bis die Testergebnisse u. a. in den Sparten Performance, Accessibility (Barrierefreiheit), Best Practice und SEO erscheinen. Es werden auch ein paar Infos für Progressive Web Apps ausgegeben, aber das trifft auf die meisten Websites nicht zu.

Bei den jeweiligen Punkten steht dann auch immer dabei, was du tun kannst um bessere Ergebnisse zu erhalten. Sobald ich mal Zeit habe, werde ich zu den gängigsten Problemen auch noch Beiträge mit Tipps veröffentlichen.