• 536
  • 536

Top Website Performance Metrics

10web-performance-metrics-banner

Taking care of your website’s speed and being aware of its performance at any given time is very important. It dictates your users’ overall experience navigating through your site and any shortcomings in providing your users with a consistent, responsive experience will immediately affect negatively on your site as a whole.

Ever since Google announced that a website’s speed directly affects its SEO ranking and that users were jumping to other websites if a website performs below their expectations, checking a website’s performance and ensuring a good performance grade became essential in maintaining a successful website.

How to perform website performance checks

Running a performance check of your website has never been easier. You can do so online through several websites, but I prefer the 10Web performance service.

performance-service-10web

Subscribing to 10Web’s all-in-one platform not only allows you to maintain every function of your website through a single dashboard, but you can regularly test your website’s performance with a single click.

The performance service provides you with everything you need to know about your website’s performance. It shows your website’s load time, the total size of your page, the number of requests made, and provides you with an overall performance grade, displaying exactly where your website stands, these are all the performance metrics that you need to worry about.

1. Page load time

The performance checker displays your website’s load time, which displays the exact time it takes for your website to execute its onload event and displays no network activity for two seconds.

page-load-performance-service-10web

The onload event is a JavaScript that looks like this:

<body onload="myFunction()">

It runs right after your website finishes loading.

2. Total page size

Your page size is as straightforward as it sounds. It shows how large your pages are. The amount of bytes that a visiting user receives is your website’s overall weight. The way each asset is set up on your site plays a large part in your website’s page size rating, sometimes a single heavy element can weigh down everything else.

10web-performance-page-size

It goes without saying the smaller the page size the faster it loads. A common mistake that’s often overlooked is images hosted on your website. Directly uploading high-quality photos on your website dramatically increases your page sizes. You can avoid increasing page sizes by optimizing your photos using the 10Web Image Optimizer.

10web-optimizer

3. Number of requests

We’ve covered the weight that different elements and assets add on your website, but there’s still the issue of the total number of those assets. Having too many assets (CSS, JS, images, HTML, etc.) can weigh down your website a lot, but there’s a difference between their number and weight.

requests-number-10web-performance

Regardless of their size, if the number of elements on your website is too high, it will negatively affect your website’s performance. So take the initiative to build your website with as few components as possible and you’ll see it reflected on your website’s performance grade.

4. Performance grade

Your website’s performance grade is a reflection of all the things — both good and bad, that affect your website’s performance and accessibility.

10web-performance-grade

The performance grade is displayed in a simple, straightforward F to A grading system so you know exactly where your website ranks on a set standardized ranking system. Making it easier to both understand and compare your website’s performance ranking with previous performance checks.

Those are the 4 key metrics that determine your website’s overall performance rating, if you work on each of these individually and improve on them after each performance check, your website will start hitting the higher performance ratings in no time.

5. Secondary metrics

There are many “behind the scenes” metrics that go into calculating your website’s performance, here’s a few of them to familiarize with some of the more important ones:

  • Time to first byte (TTFB): Calculates the time it’s taken for the very first byte to reach your user’s web browser after it has connected to the server.
  • Time to start render: Calculates from the instant the user requests (clicks) to the moment content shows up on their screen. This is important since the sooner your users see information pop on their screen, the less likely they are to leaving your website.
  • Connection time: Calculates the time it takes between the user’s request (click) and the user connecting to your web server.

6. Perceived performance vs metrics

There are cases when your website’s performance and your users’ behavior don’t seem to match. Where you could be doing everything to the book, yet their patterns and traffic analytics suggest otherwise.

This is down to how your users perceive your website to be working, instead of how it actually is. Sometimes despite your website’s fast load times and high-performance grades, your users can still “feel like” your website’s functioning slowly to their liking.

Some developers implement “lazy loading” to speed up their loading times. Lazy loading is used to disallow some assets or elements on your site from loading until their function is required. While this speeds up the initial load speed of your website when your users see unfinished loading bars on some assets that utilize “lazy loading” they’ll be much more aware of the fact that the page hasn’t fully loaded yet.

Small aspects such as this ultimately affect how your users “perceive” your website. So in this example, if you remove the loading bars from the assets that use “lazy loading” your users won’t be on a constant reminder that the page hasn’t fully loaded.

You need to make sure to tailor your website’s loading process around the user’s experience. While it has no effect on your website’s speed, user perception is one of the most important aspects of your website’s overall performance.

7. Performance checker recommendation tool

When you use 10Web’s performance service and receive your website’s performance rating, you’ll see a large area in the middle of your dashboard under the “Page Speed” tab. This area contains a list of specific recommended actions that you can do to improve your website’s performance.

recommendation-tool-10web

There are many recommendations to get into each specific one individually. What you need to know is:

  • The middle section shows each individual aspect that you can work on for improving your website’s performance.
  • The grades on the left side display your website’s current situation regarding each specific issue.
  • The right side of each line you’ll see the category to which each specific issue belongs to, such as, Performance, Accessibility, or Best Practice.
  • Finally, upon clicking on each line, it drops down to show further detail on that issue.

The recommendation tool will save you a lot of time and headache as it’s perfect for identifying the specific issues that your website has and focusing your optimization work on fixing those select ones.

It’s clear that a website’s performance is a complicated subject, but with the correct tools and services at your disposal, you can simplify the entire matter into a handful of key metrics that you can easily keep tabs on and optimize them as you see fit.

Don't forget to share this post!

Garbis Vizoian
Garbis Vizoian
If Garbis is not in front of his computer screen, writing articles and exploring the world of WordPress and tech at 10Web, he must be painting Warhammer, playing video games or screaming his lungs out in his metal band.

Leave a comment

Your email address will not be published. Required fields are marked *

Your email address will never be published or shared. Required fields are marked *

COMMENT

NAME *

WEBSITE

Cancel reply