The Browser - Loading

Modern browsers have built-in features that provide many resources for finding useful performance data.

The data from analytics or feedback from users helps us know what needs to be improved but it only helps you know where to point the microscope it isn't the microscope. Using the browser, we can get concrete performance data.

The Network Tab

In browser developer tools there is often a network tab. This tab is an excellent place to see how the back-end is performing, to see how big the download is, and what your load time is.

Download Size

Getting the download size is the easy one to do. First, ensure your network tab is open and then either refresh the page or navigate to a new page if that is what you are testing. Typically there will be a size column for each request and a total download size for the site.

Large downloads can have a significant impact on the initial load times. Large download size is especially apparent on slower connections so if you have users in rural areas or on mobile devices track this with care.

Load Time

Load time is the time it takes from when your browser tries finding the URL to when it has finished downloading the content for the page.

Like download size, there usually is a column for this and a total for the site. Load time is closely related to the download size and so don't be surprised to see a correlation. However, if you look at the timing for each request, you will see that other factors affect the load time. So we should check both and pay particular attention to anything that doesn't seem to be related to the download size.

Time To First Byte

If you look at the timing for a request, you will see a field labeled either "Waiting" or "TTFB". TTFB stands for Time To First Byte and is an indication of how long the browser has to wait from when it sends a request to the server before the server starts replying.

TTFB is the metric you use to see how the back-end is performing.

When the server receives the request, the server immediately begins fulfilling it. The server runs all the code that is needed for the request and makes any required calls databases, external APIs, files on the server, or other servers, all of which take time. So if you see a long TTFB on your requests, especially your XMLHttpRequests(XHR)s, then you may want to look at your back-end code or see if you can reduce calls to the database or external APIs.

There will be some time spent waiting for the request to reach the server and then some time spent waiting for the first packet to come back to the browser.

There are two places to check for load time gained outside of the server. The first is, tied to inefficiencies in your's and your user's infrastructure. For this reason, it makes a significant difference on how your load balancers are setup and what you use for a load balancer since every millisecond you lose is a loss to every request.

In addition to infrastructure, there is the actual distance between the server and the browser, the speed of light can be such a drag at times. If you have static files that are taking a while to load consider looking into a content delivery network (CDN). CDNs provide multiple locations and highly optimized hardware and software to reduce the TTFB for them.