Sunday, August 21, 2022, at 9 p.m. EST, was a dark moment for some of us. I remember the moment when I had just opened one of my favorite websites so I could watch the new Game of Thrones prequel, House of the Dragon, and to my disappointment, the website was taking forever to load. I called it blasphemy. I had popcorn and drinks ready to embark on the exquisiteness of George R. R. Martin's fantasy world and dance with the dragons on Vhagar’s back in my imagination. So imagine my frustration when I left the website after only seconds of waiting for it to load properly.
Did you know that the average time it takes someone to leave a website with poor performance is only about three to five seconds? Experts disagree on the exact time, but I think we can all agree that it takes the blink of an eye to abandon a slow website.
This generates the question of how we, as developers, test a website's performance and how we can score well on these performance tests. Today, I share the secrets to scoring an A on a website performance test.
First, let’s talk about how our sites are tested. There are a lot of tools available to test website performance that will provide you with a full analysis of all the factors that affect a website's visibility in search engines. Factors such as
Check out some of the metrics websites can be tested on and opportunities to speed up page loads in the graphics below.
The Performance scores come directly from these metrics. This series of checks tells us all about the optimization of our site's pages and how well users are able to navigate our website's content. The main takeaway on Performance Scoring is that by analyzing the scores, we can make changes that will improve the opportunities that directly improve our scores.
Think of accessibility as one of the best practices we follow and implement in order to ensure that our websites are accessible to everyone. Not just for Internet wizards, but for people that might have physical disabilities and for those that do not have the latest and fastest Internet connection. We should always make our website available and free of interaction barriers.
Accessibility scores come directly from the weighted average of all ‘accessibility audits.’ This score assures consistency throughout the pages. For example, we do nothing by just having 10 images, and eight of them have an ‘alt attribute,’ and two don’t. We will get a big zero on the score even though the majority of the alt attributes are present.
But it makes sense if you think about it. There is no such thing as a lot more accessibility, right? We either have the text in the alt text area, or we don't. I mean, imagine if a user, for some reason, cannot view an image and is using a screen reader. Would he give us an eight out of 10 for being able to read the alt text of eight of the ten images? Of course not. We all know it would be a zero.
Best practices are our way to ensure our code follows healthy standards and to decrease defects and maintenance costs. Standard best practices are what allow our website to be user-friendly. From displaying images with the correct aspect ratio to making sure there are no browser errors, best practices will enable the user interacting with your website to have a positive experience. This will increase the likelihood they will return.
Best practice audits check whether we have lots of unorganized, unstructured, and difficult-to-maintain source code, also known as having spaghetti code 🍝😂. It ensures our code's health and that it follows the best practices. For example, it checks image optimization, browser errors, and passive event listeners.
Search Engine Optimization (SEO) is the process of making our websites more visible when people search for content, services, and products that are related to our business. To put it simply, it's what allows our website to appear as close to or right at the very top of search engines results pages such as Google, Bing, and DuckDuckGo.
SEO scoring goes from meta description checks to structured data audits. It reflects how search engines rank and understand our website. A poor SEO scoring of our website will prevent our website from being found since the closer our site is to the top of the search engines, the more exposure it gains. More than half of Google users actually click on the pages at the top of their search results pages.
Progressive Web Application (PWA) is a website that uses default mobile app behavior. Basically, it allows the user to access a mobile-like application in the browser without having to download it from the app store. For example, Starbucks has a Progressive Web Application that allows the user to have access to most of the application without the need for an Internet connection. This PWA superpower comes from its ability to use the cached data from your previous communication or interactions with the web app.
In conclusion, you can use many different tools to test your website. In fact, a performance test will help highlight things to improve your website pages and improve the user experience. A good website performance test can often reveal many secrets on how to make your pages optimized and user-friendly.
Oh, I almost forgot — did I manage to watch House of the Dragon premier that day? You bet I did! An hour later, I managed to find a more reliable and well-tested site and had a great time watching it. 🐲
And there you have it, friends, the secrets to scoring an A on a website performance test. Check out this blog, where I talk about how to use the HubSpot SEO Scan Tool to further optimize your website.