Asking for a Friend: Performance Metrics
Dear reader, you are a person of culture, you know the in-and-outs of front-end web development like the back of you hand. But, face it, not everyone is as well informed as you! Perhaps you have an acquaintance who is trying to become more well read on these things, self improvement is commendable, but - gosh - you simple don't have the time to learn them in the ways, teach them to walk the path of proper front-end development. Well friend, we have a bit of time, send them over and let's begin our discussion of todays topic: Web Page Performance Metrics!
Now reader, we all know users make snap judgments so don't let the first thing they see be a big, slowly loading blurry logo. To better understand how page performance is discussed and what the jargon means let's review some useful terms:
DNS Lookup Time
This is the amount of time it takes for your DNS provider to translate a domain name into an IP address. Services such as Pingdom or WebPageTest can quickly calculate your website's DNS lookup times for each domain it must lookup.
Connection Time
When you hear this think about the time between a request and when a connection is established between the user's browser and your server is called. This is the connection time.
Time to First Byte
This is the time it takes for the very first byte of information to reach a user's browser after a connection to the server has been established is called time to first byte or TTFB. The order in which users receive information is important, and some slight alterations in your code can boost this website performance metric.
Time to Title
This is the amount of time between the instant a visitor requests your website and the moment your site's title shows up in their browser tab is called the time to title. Seeing a title right away lets the user know that your website is legitimate, which makes them more likely to wait for the page to finish loading. Time to title is determined by the speed of delivery from your origin server to the user's browser.
Time to Start Render
The time elapsed between a user's request and the moment when content appears in their browser is called time to start render. This is also a very important metric to analyze as the sooner a visitor sees content appear, the more likely they will be to stay for the rest of the page to load.
Time to Interact
The time between a request and the moment when a user can click on links, type in text fields or scroll the page is called time to interact. Some elements such as scripts and trackers may continue to load during this period.
Time to Last Byte
When the user's browser finally receives every last byte of your page, then the last byte time is recorded. The quality of your code/database queries play a big role in this metric. Other factors that may be affecting your TTLB include a wonky web server, or if the server has reached its capacity.
Content Complexity
Keeping track of website performance metrics involving time isn't very useful if you don't understand all of the other factors at play. Information about your website's content complexity can help you find ways to improve all of the previously discussed metrics.
Overall asset count
The number of assets you have obviously affects your website's overall weight, but it's important to differentiate between asset count and weight. Every asset, no matter how small or compressed, has the potential to add more time to the loading process. Your overall asset count includes your total JavaScript, CSS and image counts.
Third party domains
The majority of your website's content is hosted on your domain, but many sites also include third party content such as embedded videos or social media widgets. Because these items originate from other domains, you have limited control over their functionality. Therefore, the potential for problems rises with each domain that's in play. Only rely on other domains that can guarantee impeccable performance, or else a third party could compromise your users' experience.
Overall Weight
The total number of bytes the user receives is referred to as the overall weight of your website. More important than the overall weight is the relationship between each asset since one heavy asset can slow down everything else. Furthermore, the growth of web page size has continued to expand year after year, therefore it's important to sometimes step back and see which assets are truly necessary.
By separating individual metrics such as JavaScript weight, CSS weight, image weight and total asset weight, you can pick out which categories are too heavy, and then you can perform a waterfall analysis to identify the asset that needs to be altered or removed.