Performant website testing

June 27, 2024

Estimated Read time: ~10 min

What it means to perform full testing of a website

    I have a professional background as a Quality Assurance Engineer on web-based platforms. Quality Assurance as a profession is a position within the realm of software development that's goal is to assure that the end product that is given to a customer is of the highest quality possible. What this means in practice is to spend time testing web-based applications and surfacing bugs and issues to developers so that they get fixed before making it to the end user.

    There are a number of different types or sub-categories of testing that are contained within the responsibilities of a Quality Assurance Engineer. I will only touch on some of the more important ones here. Some examples are: black-box testing, responsive testing, cross-browser testing, performance testing, accessibility testing, regression testing, security testing and others.

Black-box testing

    When starting out testing a new website, it is best to approach it from the mindset of a end user of the website. If you are the one that build it, then change your mindset to act like it is the first time ever visiting the site. Take things slowly and deliberately. The website acts as a black box that you do not know the inner workings of. All you have is the output that is visible on screen. Make note of how the navigation works (is it intuitive, are there any hidden or dead-end pages). Make note of how content is arranged on the page (do sections logically flow into each other). Make note of any buttons or dynamic content sections (are buttons behaving consistently. Does dynamic content load into the page correctly). Make note of the images and text on each page (do images show up clearing with correct proportions. Is all text readable).

    For larger and more detailed websites or web applications, create a "happy path" workflow. The "happy path" is the most logical navigation or page pathing that users will go through. Ensuring that the most commonly used features are working correctly is more important than testing for edge case scenarios.

Testing Responsiveness

    Responsive web design is a pivotal part of having a modern website. Users who visit the site will be using a wide variety of devices and screen sizes. Having a responsive design allows for the website to look good and be consistent on any of the devices that it might be viewed on. Testing for responsive design is relatively easy although it can become time consuming. The best way to test for responsive design is to use a wide variety of physical devices to access the website. An alternative to having to have lots of different devices is to simulate them.

Cross-browser testing

    Different users prefer using different browsers when accessing the web. You cannot testing on your preferred browser and expect things to work the same for all users. Different browsers behave differently in subtle ways that may effect how the website is displayed.

Accessibility Testing

    Accessibility of websites refers to the ability for

Performance testing

    Performance testing refers to how a website functions

Google Lighthouse as a testing metric

    Google Lighthouse is a built-in browser tool available for Chromium based browsers that will audit the quality and performance of a web page and return a report and some advice on how to improve best practices. The Lighthouse tool can be a quick way to understand the basic structure of a web page.

    However, there are a few downsides to the tool. Firstly, it only runs on a single web page at a time. It is not a comprehensive audit of an entire website. Most of the time Lighthouse will be run on the landing page of a website since that is the most important page to make a good first impression with users. Secondly, Lighthouse is not incredibly accurate. Running the tool back to back on the same web page will often return slightly different metric numbers. It is important to take the results with a grain of salt and not get caught up on specific numbers. It is only meant to give a quick general perspective on how a web page is performing. Thirdly, the improvement suggestions are not always correct or a good idea to implement.

Related:

Return to Homepage

created by: Matt Ray