As a Tech Consultant I need to be able to quickly assess the technical quality of a website in regard to performance, discoverability, SEO, accessibility and general best practices.
At the start of my career the web was much simpler. Creating quality websites was mostly a task of styling text and images to look good on desktop browsers, and configuring the web server with sensible defaults. I therefore created a checklist of important technical topics that need to be covered by websites (mostly behind the scenes), so that I could quickly check the quality of a website.
In recent years the web became much more important for people and businesses and developed into an essential tool (and part) of our lives.
This change resulted in new and evolving requirements websites need to tackle (again mostly behind the scenes):
- New devices like smartphones, wearables, cars, refrigerators and televisions started to connect to the internet. Consequently websites needed to be able to adapt to multiple screen sizes and environments.
- Websites are more and more accessed on mobile networks. Hence the file-size and delivery of websites needs to be optimised as much as possible.
- Major web platforms decide which content is shown to users and therefore require well formatted websites with quality content and metadata.
- Companies started to migrate their existing processes and applications to the web. In consequence modern website frameworks were developed that help to implement app-like experiences. There frameworks unfortunately hide away a lot of what is going on behind the scenes.
Most of these requirements are important for all public websites and therefore I started to create a checklist with common features every website needs to include. When I started to develop or optimize a website I would regularly check the website against my checklist to be able to identify technical improvements and to make sure the improvement of one feature does not make another feature worse.
Unfortunately, it was really difficult to keep these checklists up to date due to the fast developing web platform. Therefore, I started to replace my checklists with validators that take care of identifying common gotchas in an automated way. This allows me to validate the website repeatedly throughout a website project to ensure that technical improvements or changes to the website have an overall positive impact.
Following, you will find a list of my favorite website validators. I use this list as a reference myself so I will try to keep this post up to date.
Lighthouse is a validator tool that comes bundled with the Desktop Chrome browser. Lighthouse is directly related to Google and therefore a great starting point for Google SEO.
The tool allows to run website audits that check for typical optimization potentials in regard to website performance, discoverability, accessibility and general best practices. It provides a broad (and quite deep) overview of the technical quality of a website that it sums up in x out of 100 scores.
Additionally, it provides actionable advice to improve websites on how to optimise these scores and therefore gamifies the technical optimization of websites.
While working on website projects I regularly check some sample pages in Lighthouse to make sure I keep performance and discoverability in mind while tweaking the website. Furthermore, I use Lighthouse to check websites of potential clients to quickly identify optimizations potentials I can help them with.
You can access Lighthouse by opening the Developer Tools in Chrome. There you will find Lighthouse under the "Audit" section.
Announcing and sharing website content on social media platforms proofs as a great way to reach a new audience. Therefore it is important to implement mechanisms to let platforms like Facebook and Twitter generate good looking previews of your website when you or someone else shares your website.
Over the years multiple standards developed to define how the preview of the content should look like. For social media platforms this is mostly achieved via Open Graph and Twitter Card
metatags.io allows you to check how your website is displayed in social media platforms and it provides ready to use code snippets for the most important
Additionally the site offers links to the official validators for major social media platforms that can be used to build upon the basic snippets of metatags.io.
Click here to access metatags.io
Favicons are icons and settings browser and operating systems use to display your site in a lot of places. Typically they are used:
- To show a small icon on browser tabs.
- To show a small icon in the favorite or pinned sites list of browsers.
- To show a small icon on smartphone home screens when installing a website shortcut.
When your website actually makes it to the favorite or pinned sites list of a website visitor you want to make a good impression and show easy to identify icons. Hence I always check websites to see how the favicons look on different browsers and devices.
Additional realfavicongenerator.net does not only provide the Favicon Checker, but also has a generator that generates favicon icons in minutes.
Click here to access Favicon Checker
securityheaders.com checks the availability and content of security related HTTP header fields of a website. The tool does furthermore provide some suggestions for sane defaults for these header fields and links to additional resources for a deep dive into their configuration options.
In most projects you can not just check and then adjust the security header fields to the defaults the tool suggests as this might have unwanted side effects—but the report of the validator provides a great starting point to discuss website security with the involved teams and people.
Thanks to securityheaders.com I learned a lot on HTTP header fields and website security by following these header fields and the security issues they try to address.
Click here to access securityheaders.com
Nu Html Checker
The w3c Nu Html Checker validates the HTML code of a website for formatting issues and incompatibilities with the web specification.
When you validate your website for the first time it might output a lot of alerts and warnings and it might take a considerable amount of time to fix all of them. Therefore it needs some development experience to identify the critical issues to resolve them first as many alerts have minimal to no impact on the actual usability and performance of the website as browsers are more "flexible" in comparison to the HTML specification.
It is good practice to stay inside the web specification as much as possible.
After validating and fixing a couple of websites standard compliant HTML formatting becomes second nature and reduces the amount of errors in the w3c validator in coming projects.
Click here to access the w3c validator
Web accessibility is a very important topic. The WAVE validator of webaim.org allows to check for common accessibility issues like low contrast ratios or images without an alternative text for screen readers.
wave.webaim.com is amazing as it does not only provide a list of optimization potentials, but also displays them as an overlay on the website design.
Beside checking websites in wave.webaim.com it is also important to check the website with an actual screen reader to make sure that all content and functionality of the website is available to all website visitors.
Click here to access wave.webaim.org
I hope these validators will help you to check the technical quality of your websites and inspire you to improve them. In case you need help to optimize your website or in case you have other website validators you want to share I am looking forward to get in touch.