Growing with the Web

Optimisation and validation tools for web development

Published
Tags:

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!

A checklist

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.

Design

These tools help with the validation of a site’s design.

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.

Comments

comments powered by Disqus
Like this article?
Subscribe for more!