Website Analysis Tools Part 1: Auditing with Lighthouse
No website is perfect - but it is certainly possible to come close! Fortunately, there are numerous useful tools available to website developers to help take a website from "good" to "great". In this series, I'm going to take a look at some of the site analysis tools that we've used at Ashday to bring our websites closer to that ever-elusive goal of "perfect."
The first tool we'll explore is Lighthouse, a handy site auditing feature that comes included with Google Chrome; it can be found in the Audits tab of the browser's developer tools. Lighthouse can analyze numerous aspects of a site to find potential improvements that can be made. These improvements fall into four main categories: Performance, Accessibility, Best Practices, and Progressive Web App functionality. Since the last of these isn't currently too important for most websites, I'm going to focus on the first three for now.
Although there are better tools for analyzing website performance - some of which will be discussed in a future post - Lighthouse's included performance tools make for a great quick overview of the site's speed and of some potential issues that could be slowing it down. Commonly found issues include image files being larger than they need to be, and ancillary scripts on the page being loaded sooner than they necessarily need to be, which slows down the rest of the site from loading.
The accessibility audit is another useful one. The main purpose of this audit is to determine how well the website should function for people with disabilities or who otherwise need to access the site through alternative means (such as by using a screen reader). Many accessibility needs can be readily met with fairly small adjustments to an existing site's code. It's good for developers to get in the habit of considering such things during initial site development, but until they get in the habit, this tool can point out a variety of potential issues.
Some accessibility improvements are simple things, like including "alt" text for images in case the images for some reason can't be seen, and ensuring that links on the page have a reasonably discernable title. Other potential issues found by the audit can be more significant; for instance, if the color contrast on the site is poor, then people with certain forms of color blindness may have difficulty using the site. Fixing this could be as simple as adjusting the site's colors a little bit, or as significant as completely redesigning the site.
Finally, the best practices audit checks to see if the site is built using usual website development conventions. Following the industry best practices is important, as it helps ensure that the site works well both now and in the future. These checks look for the use of deprecated methods, which web browsers likely won't support forever, as well as for things that might bother the site's users, like requesting geolocation information immediately when the page loads. It also tests everything loaded on the page to ensure that HTTPS is used for security, and that HTTP/2 is used for improved speed.
Although Lighthouse does not give the most thorough inspection possible for any of the things it audits, it is a great tool already built-in to Chrome to get a quick overview of several key aspects of the site. While it is almost impossible for a website to get a perfect 100% score on all of Lighthouse's audits - even Google itself doesn't often manage that, and the tool is part of their own browser - it is fairly easy to boost a site's score with some simple changes identified by the tool.
This tool is a fairly new addition to Chrome, having just been added to the browser in July, but even in that short time it has been a helpful tool for us at Ashday, and one I'm looking forward to using to improve all of our sites.