Optimisation and validation tools for web development
There is a lot to cover when making a website. So much that it’s unreasonable to manually check a site for best practices in SEO, performance, accessibility, style and so on. Luckily the internet has you covered with these great tools to push your site to the next level!
This article presents several of those tools that I’ve found the most useful. Many have overlapping functionality but it’s great to get multiple opinions about the state of your site.
Accessibility
Accessibility is a big deal on the internet that is unfortunately often overlooked. An accessible website will not only widen your audience by catering to the disabled through the use of assistive technology, but it also allows a website to be presented in many other different forms that are useful to everyone.
- W3C Markup Validation Service checks a page for conformance against the HTML specification.
- W3C Link Checker scans a website for any links pointing to non-existant pages.
- W3C Feed Validation Service scans and validates a RSS or Atom feed.
- W3C mobileOK Checker performs various tests on a page and its resources to determine its level of mobile friendliness.
- W3C Internationalization Checker checks to see if a page contains any internationalization issues.
- Powermapper SortSite is the most comprehensive accessibility checker I’ve used, giving a detailed breakdown on WCAG 2.0 conformance errors and warnings.
- WAVE Web Accessibility Evaluation Tool by WebAIM scans a page and provides a series of inline accessibility errors and warnings.
Design
These tools help with the validation of a site’s design.
- Viewport Resizer is a bookmarklet from Malte Wassermann helpful in approximating how a page will display on different devices by wrapping a page in a resizeable container.
- W3C CSS Validation Service scans a CSS file and provides a series of warnings and conformance errors.
Performance
Achieving great performance is about pushing page-weight down as much as possible and optimising the above-the-fold content in order to improve the user experience. Above-the-fold loading performance is typically measured using speed index.
- PageSpeed Insights from Google scans a pages and gives some high-level advice for optimising it on desktop and mobile.
- Web Page Test is an open source project primarily supported by Google that runs a web page on a remote computer and provides in depth details on connections, requests, page size and speed index for both the non-cached first time load and cached repeated loads.
- CSS Stats is an open source project from Adam Morse that provides some unique insight into all the CSS used on a page, such as how many times a selector is used, all font sizes or colors on a page and so on. A clever web developer could use this to push down the size of their CSS file by merging selectors or cutting ones that shouldn’t be there in the first place.
- DOM monster is an open source bookmarklet from Thomas Fuchs that analyses the DOM of a page and gives some stats and a list of tips and warnings to improve the overall page weight.
SEO
These SEO tools will help resolve some issues that search engines may not like about your website.
- Feed the bot from Patrick Sexton focuses on meeting the Google webmaster guidelines.
- Quick Sprout from Neil Patel is a tool that focused on boosting traffic on a page by analysing its SEO, Speed and social status practices and providing recommendations. A paid option is available that can analyse an entire domain.
