A guide to quickly evaluating the quality of a website
A guide to quickly evaluating the quality of a website
As web engineers we’re in a unique position to understand the nuance and context of the web, and to help others who are less well informed…
As web engineers we’re in a unique position to understand the nuance and context of the web, and to help others who are less well informed about how the web works understand the difference in the quality of websites. This was a useful skill indeed as I recently was tasked with evaluating the technical quality of several public facing eCommerce systems to help someone pick a service provider.
Due to time constraints and the nature of the request and the number of systems that were investigated we need as much quality information as possible on as short a time frame as possible. Luckily, there are a number of standard tests that we can run that will help us determine how the site is performing.
Meeting our candidate
For the purpose of this analysis, we’ll be evaluating the NY Times home page:
The NY Times is a website that I enjoy reading on occasion as it’s articles bubble up through Twitter or other medium, but not one that I’ve evaluated before. So, we’ll be discovering the outcomes together!
Evaluations
Frontend
Lighthouse is a took published by the Chrome development team to help evaluate a sites performance. Designed initially to help developers identify issues in their site that may require attention, Lighthouse is now embedded in Chrome Developer Tools and thus provides an excellent framework for evaluating a site quickly.
More information can be found on the Google Developer Docs.
Surprisingly for me at least, NYTimes scores quite badly in some areas:
It took 4 seconds to initially render the website over the limited 3G connection of the test, and 20 seconds until the site was reliably “useable”. This is a remarkably long time! By comparison, simple sites such mine are able to reach this paint in ~1.5s over the same connection, and another comparable news (washington post) site in 3.1s
However, it does quite well in other areas. The site appears to be quite accessible, and well optimised for indexing in search engines. Yay accessibility!
Server
httpstat is a tool that is designed to make a single HTTP request and give detailed insights about the response. It’s a useful diagnostics tool to determine at what stage of the connection the problems are however in this case we’re using it to determine how fast the server responds.
The version I’m using was written by Dave Cheany in Golang.
httpstat is invoked via a terminal:
That’s pretty hard to read. The important bit is:
Wheow! That’s pretty quick! well done NY times; they score well in all areas. Specifically, TCP connection seems to be terminated early, TLS handshake was quick and server responded quickly.
By comparison, another website (Magento.com) had a TLS handshake 3 times slower than NYTimes, and a server processing time 10 times slower.
Here, NY Times does super well!
Security
Security is suuper tricky to evaluate. There are sometimes specific tools that can be useful to determine if a site has fallen into a specific set of security holes such as the excellent “Magescan”, but security analysis tools run the risk of being destructive. Additionally, because of the nature of security issues companies tend to be fairly unforgiving of unauthorized analysis of their systems.
However, one test that can run easily and used to determine whether the security of a system has received some attention is the Qualys SSL scanner. This tool makes connections to the website and determines if those connections are vulnerable to a whole series of attacks such as TLS downgrade, FREAK, DROWN or other HTTPS attacks.
Hooray! NYTimes also does an excellent job here. The TLS is correctly configured for a modern web browser, and does not suffer any of the issues that make it more susceptible to the aforementioned attacks.
Another test that we can quickly and safely run is to check the “security headers” that the website responds with. These are hints to the browser that allow the browser to be “stricter” about what is supposed to happen with the site, preventing issues even when there is unauthorized access or compromise of the site.
While NYTimes implements perhaps the most important headers ( X-FRAME-OPTIONS and Content-Security-Policy), there are several opportunities to further restrict the behaviour of the site to known bounds, making users even safer.
Conclusion
Determining the quality of a website can be tricky. When looking for a service provider (such as Sitewards) it’s useful to be able to evaluate their work against an objective criteria. The above tests are well maintained, objective and fairly accurate tests that allow anyone to make reasonable judgements about the quality of that web development.
Thanks
Jochen Breunig for encouraging me to write this one up!