In a recent post we looked at the impact latency can have on web page performance. So if higher latency connections are not uncommon, especially among mobile users, what can we do to ensure that these users have optimal experiences when visiting our websites?
Critical Resources First
Regardless of the latency, we want to have our pages load as soon as possible. Ideally, users would see and be able to interact with our site immediately.
So, although we may not be able to load everything immediately, we can still give the user the impression that the site loaded very quickly by making sure all the critical resources are loaded as soon as possible. This is a good approach regardless of the connection, but becomes that much more valuable when the user is connecting over a high latency connection.
The crucial resources would include the HTML, as well as any necessary CSS and JS. By necessary, I’m referring to any CSS or JS that is absolutely essential for the user’s initial view of the page. Ideally, there there wouldn’t be any absolutely “necessary” JS for the initial view, and the CSS would be only the minimum necessary for “above the fold.” If there were necessary scripts, ideally they would be either inline or loaded async.
The First 14k
Once the browser has all the necessary HTML, CSS, and JS loaded, it can begin rendering the page. So how quickly should we try to get all these necessary components to the browser?
The gold standard would be within the first round trip between the browser and the server. The fewer round trips needed the better, especially with high-latency connections, since the latency will affect every trip that takes place.
So how much data do we have to work with in the first round trip?
Currently, a good number to target is about 14k of data—approximately how much data recently updated web servers deliver on their initial connection with the browser.
This means if you can get all your necessary HTML, CSS, and JS in the first 14k, you’ll be able to give the browser what it needs in the first batch of data from the server. And this means the browser can start rendering what the user will see immediately, without needing to wait for more information in subsequent round trips. And if the browser can begin rendering quickly, the user will also be able see the page quickly, which will have a positive impact on perceived performance.
Every Round Trip Counts
Of course, 14k may seem ridiculously small, especially for a large or complicated site. But it does give us a target to shoot for. If nothing else, just the process of thinking though which styles and scripts are absolutely necessary, and which ones can be loaded later, is a valuable exercise. It can help us organize things in a way that will help reduce the round trips needed for the initial view. And when we do this, our users will be grateful. Because when it comes to high-latency connections, every round trip is all the more important.