Why is it website performance optimization important, and why should we QA Site Performance?
This will help us to have great impression of the different users that visit the website, will help us with SEO (Search Engine Optimization), and can even improve your brand reputation
If the user do not get any content loaded in 2 or more seconds, that can start to be a really bad impression and a bad experience for that user, ending out as a user that leaves your site with no interactions
There are several key points that Quality Assurance (QA) teams should consider. some of them are:
Page Load Time:
Measure the time it takes for web pages to load and ensure they meet acceptable performance standards. Identify and address any factors that contribute to slow loading, such as large file sizes, excessive HTTP requests, or inefficient code.
A tool that can help us to have measures on this is the: LightHouse Inspector, where you can get loading metrics, and areas of improvement in a really detailed environment, the Page load time can be affected by: un-used scripts, images format that are not optimized
Caching:
Implement proper caching mechanisms to reduce server load and minimize the need for redundant resource requests. Be sure to validate that caching is functioning correctly and doesn't interfere with dynamic content updates.
Content Delivery Network (CDN):
We can Define CDN as a distributed network of servers strategically located in various geographical regions. When a user requests content from a website, the CDN routes that request to the server closest to the user's location.
Evaluate the implementation of a CDN to distribute website content across multiple servers geographically. Ensure that the CDN configuration is correct and effectively improves the website's performance.
Minification and Compression:
Validate that HTML, CSS, and JavaScript files are minified and compressed to reduce file sizes and improve load times. Verify that the magnification process hasn't introduced any functional or formatting issues.
Image Optimization:
Check that images are appropriately optimized, using appropriate file formats (e.g., JPEG, PNG, WebP) and compression techniques. Ensure that images are scaled and compressed without sacrificing visual quality.
As well in here we can get the help from LightHouse inspector, it will let us know the size or format of the images that can be optimized, compressed or re-shaped
Browser Compatibility:
Test the website across multiple browsers and browser versions to identify any performance discrepancies. Evaluate the website's performance on different platforms (desktop, mobile, tablets) and ensure consistent performance across devices.
Nowadays, we need to include responsiveness to our designs, since Tablet and Mobile navigation is a really common scenario, and as well testing the site for different browsers
we can start by using the most common breakpoints
- Mobile devices – 320px — 480px.
- iPads, Tablets – 481px — 768px.
- Small screens, laptops – 769px — 1024px.
- Desktops, large screens – 1025px — 1200px.
- Extra large screens, TV – 1201px, and more.
