Tip: Automated testing of the website with Lighthouse

This is an archive post. It will not be updated.

In the rush of everyday agency life, you sometimes forget one thing or another. That’s why automated tests make a lot of sense, at least to find the most important issues.

A very helpful tool for this is “Lighthouse” from Google Chrome. However, you don’t necessarily have to install this plugin; you can also run it via a bookmark (favourite) in other browsers such as Firefox. Here’s how:

Create a new bookmark in your browser and name it, for example, “Test website”. In the “Address” field, however, don’t enter a normal URL, but this:

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')

Now open the page you want to test in your browser as usual. It is important that the page is publicly accessible. So if it is on a test space, you would have to remove the temporary password protection in front of it (in Contao usually located in /web/.htaccess – comment out the lines of the temporary password prompt there with #).

Once you’ve done that, open the website in your browser and click on the bookmark you created earlier. Lighthouse now runs various automated tests. Simply wait patiently until the test results appear, among others in the categories Performance, Accessibility, Best Practice and SEO (search engine optimisation). Some information on Progressive Web Apps is also displayed.

Each item always states what you can do to get better results.