There are several factors to look at when considering the total page load time for your website. Metrics such as Time to First Byte, Start Render Time, Visually Complete, and Full Page Load Time are important for different reasons and each have an impact on your user experience.
If a user is waiting a long time before anything appears in their browser, that will negatively impact their browsing experience. However, they will also have a poor experience if a site begins to draw in the browser quickly but then slows considerably before all of the above-the-fold images are loaded.
The work your website does to produce a fully loaded, interactive page can very generally be split into two areas: Back end load time, and front end load time. Both are equally important and either can have a huge impact on your total load time, but the processes to improve backend vs frondend speeds are very different.
Back end load time
Back end load time includes all of the processes that take part in the background as soon as a URL is searched for in a browser. This includes looking up the DNS host of the website, which tells the browser that www.mysite.com can be found at a certain IP address, opening up a connection to the website server at that IP address, successfully connecting to that web server, and exchanging any necessary security keys so that content sent between the browser and server can be encrypted.
This occurs before any information is sent back to the browser. All of the instructions on where to fetch images, files, and CSS is located in the HTML document, which is the first thing the server sends back to the browser. Once the HTML document is received, the loading switches over to front end load time.
Front end load time
Front end load time includes everything that is loaded in the browser once the browser and server connect. This includes text, images, JavaScript snippets, fonts, layouts, and more.
Because modern websites are quite content and image-heavy, there can be hundreds of roundtrips between the browser and server before a page is fully loaded. This is why many websites focus their speed optimizations on front end measurements by optimizing images, enabling lazy-loading, minifying CSS and performing other tricks that reduce the front end load time. Google’s PageSpeed module, offered by Section, is an example of a Front End Optimization reverse proxy.
Why you should improve back end load time
Although many websites examine their metrics and aim to improve total page load time, a surprising number ignore the importance of backend load time. Because front end load time can take several seconds if not optimized well, websites aim to improve those parts of their website and don’t worry too much about the additional few hundred milliseconds it can take to load backend elements.
But a slow back end time can be crippling, as the user will be waiting in front of a blank screen before back end tasks are completed. In addition to bad user experience, studies have shown that the Time to First Byte, which is recorded when the HTML document is received by the browser, is one of the main speed metrics used for search engine rankings.
A good rule of thumb is that back end load time should take no more than 20% of your total load time. Studies show that the top 50K websites do even better than this, averaging about 13% to 87% in back end vs front end load time. A good back end load time to aim for is 200ms or less.
So if you want to improve back end load time, how do you go about doing it? While you can look into upgrading your origin server hardware, the best way to dramatically improve your back end load time is to cache your HTML document. By caching this vital piece of information, your cache server or CDN will immediately send it to the browser without having to fetch it from the origin. This not only speeds up the TTFB, it also significantly reduces load on your origin server therefore reducing hosting costs.
While this solution is effective, many websites will not cache their HTML documents because they believe it to be too risky. The HTML document is so vital to the building of a webpage that, without being able to test if caching works as expected, they cannot risk caching it.
At Section we have built a solution that enables all users to easily cache HTML documents. Section’s platform includes a local testing environment and all the logs and metrics needed to ensure HTML caching is working as expected before and after website changes go live.
To learn more about how to improve your back end load time with Section, contact us today.
