I help companies to improve their websites. I thus need to be able to assess the technical quality of a website on performance, discoverability, SEO, accessibility and general best practices.
At the start of my career the web was much simpler. Creating quality websites was a task of styling text and images for desktop browsers. It was possible to evaluate the quality of a website by checking a couple of things. E.g. does the website have a proper
<title> tag? Is there a proper font defined for each operating system?
In recent years the web became more and more relevant for people and businesses. It developed into an essential tool (and part) of our lives.
This change resulted in new and evolving requirements websites need to tackle:
- The internet connects to new devices like smartphones, watches, cars and televisions. Websites need to be able to adapt to more screen sizes and environments.
- Users load websites on unreliable mobile networks. Hence developers have to optimise their file-size and delivery.
- Major platforms and search engines sort and rank content for their users. Websites need high quality content and metadata to rank well on these.
Thus I created checklists with common topics every website needs to tackle. During a website project I repeatedly checked sites against these checklists. This allowed me to make sure I did not break anything by optimising the website.
Due to the fast development of the web platform it is difficult to keep checklist up to date. I thus replaced the checklists with validators that allow me to automate the process. Following, you will find a list of my favourite website validators. I use this list as a reference myself and try to keep it up to date.
Lighthouse is a validator tool that comes bundled with the Desktop Chrome browser. Lighthouse relates to Google. It thus is a good starting point to optimise websites for the Google Search Engine.
Lighthouse audits websites in regards to 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. It gamifies website optimisation by providing actionable advice on how to improve these scores.
While working on website projects i check sample pages in Lighthouse. This allows me to keep performance and SEO in mind when I work on visual adjustments or features.
I also use Lighthouse to check for optimisation potential of potential clients. It is great to be able to prove statements with data.
You can access Lighthouse by opening the Developer Tools in Chrome. There you will find Lighthouse under the "Audit" section.
Sharing website content on social media platforms proofs as a great way to reach a new audiene. It is important to let platforms like Facebook and Twitter generate good looking previews of your websites when someone shares a link of your website.
Over the years many standards developed to define how the preview of websites should look like. Social media platforms use so called Open Graph and Twitter Card
metatags.io allows you to check how social media platforms preview your site. It also offers ready to use code snippets to improve the previews.
Moreover metatags.io links to the official validator of major social media platforms. This allows to take a deep dive after resolving the basics.
Click here to access metatags.io
Favicon are icons and settings browser and operating systems use to display your site in a lot of places. The favicon is for example displayed in following places:
- Browser tabs,
- Favourite or starred website list of browsers
- Homescreen of smartphones for installed progressive web apps.
When a user actually adds your site to his favourite website list you want to make a good impression. A good Favicon can help users to rediscover your website.
realfavicongenerator.net allows you to check your favicon icon. It also has a generate to generate favicon icons in minutes.
Click here to access Favicon Checker
securityheaders.com checks the configuration of security related HTTP headers of your website. These headers usually restrict some potential insecure functionalities of browsers.
The tool provides resources and links for each security header. This allows to take a deep dive in the configuration of each field.
With this tool I learned a lot on the capabilities of HTTP header fields. When working and optimising websites it can be beneficial to check the configuration. This can help to start optimisation projects for the security of websites.
Click here to access securityheaders.com
Nu Html Checker
The w3c Nu Html Checker validates the HTML code of a website. It identifies syntax errors and incompatibilities with the web specification.
The first check of a website usually outputs many alerts and warnings. It might take a considerable amount of time to resolve the all. Browsers are very smart about fixing these issues on their end. Thus not all adjustments might have an immediate business benefit.
Anyway it is good practice to stay inside the web specification as much as possible. This future proofs your website and helps to avoid issues with browser updates.
After fixing a couple of websites with the w3c Nu Html Checker it becomes second nature to stay within the specification.
Click here to access the w3c validator
Web accessibility is a very important topic. The WAVE validator of webaim.org allows to identify common accessibility issues. Typical issues are low colour contrasts or missing alternative text for screen reader user.
wave.webaim.com is amazing as it does not only provide a list of optimisation potentials, but also displays them as an overlay on the actual website. It is even available as a Chrome extension. This allows to check a site in seconds.
Beside checking websites in wave.webaim.com I also recommend to check the website with an actual screen reader.
Click here to access wave.webaim.org
Validators are only a small part of optimising websites. Anyway I enjoy improving websites as much as possible with these validators. This allows me to learn and internalise best practices and make me a better citizen of the web.