Web development

A web development checklist

These are the tools I use to establish a baseline of usability for the websites I develop:

Pagespeed Insights

Developed by Google, and open-sourced as Lighthouse, this service checks the performance of a web page, taking into account the page load time, the size of the dependencies, including JavaScript and images, and a few other red flags. All tests run from a mobile and desktop perspective. It provides a good starting point to make sure I’ve got the basics right.

You can find the service at Pagespeed Insights.

Qualys SSL Labs server test

This test checks the characteristics of the TLS connections allowed by your web server, and indicates whether the configuration is too permissive and may be vulnerable to various attacks. Generally the default ciphers applied by the Let’s Encrypt certbot script seem to provide decent results on this test.

Mozilla Observatory

Observatory is a fairly thorough test of things often omitted, such as HSTS and CSP headers. Besides the HTTP tests it also offers SSH and TLS tests.

Firefox accessibility testing

This tool is included as part of the standard Firefox developer tools, although you may need to enable it in the developer settings to see the tab. As this tool can be resource-intensive I only enable the checks when I specifically want to review the results.

The MDN website provides an in-depth view of this inspection tool.

Firefox web console

Also included in the Firefox developer tools is the web console, which provides a running log of activity when pages load and run. You’ll often find warnings for deprecated functions and security risks here, so it’s worth checking from time to time, as these standards change regularly.

Firefox network monitor

The network tab of the Firefox developer tools show a more in-depth view of some of the things tracked by the Pagespeed Insights tool mentioned above, but it allows you to check the response codes from the web server, and identify possible issues, in addition to seeing basics like request sizes and timings. You can also inspect HTTP headers (and edit and resend them), and check individual timings for DNS resolution and TLS negotiation.

Browser testing

I generally test sites in Firefox (also used for development) – desktop and mobile, Chromium, Internet Explorer (even if I don’t plan to address the idiosyncrasies it’s still good to know how it renders) and Lynx. I also test the site in Firefox’s Reader Mode.