Why order of execution matters

Establishing the proper order of execution on a web page is one of the best ways to ensure a good user experience. This is a case where the term “user experience”  is important: it’s a broader concept than simply how fast the page loads.

Optimizing the order of page asset execution promotes “progressive rendering” and a fast Time to Start Render, meaning the user has some content to look at during the load process and thus has the assurance that the page is on the way.

However, ordering your assets incorrectly can cause a blank screen in place of a progressive render, indicating system errors (instead of coding mistakes) and eliminating progress indicators.

About 60% of visitors expect a website to load in under 3 seconds, and most will leave if it takes longer. A screen without proper progressive rendering signals, such as one that results in a blank screen, can quickly turn off users and cause frustration.

The Blank Screen vs. the “Flash of Unstyled Content”

A blank screen is a bad screen – in most cases, if a visitor isn’t signaled with any progress indicators, they may attempt to continually refresh the screen or assume that the site has crashed. Both of these actions have negative effects, resulting in either a frustrated user or a bounced visit. The blank screen appears as the site is awaiting the stylesheet at the bottom of the page to be loaded. It also appears because a browser wants it to – the browser delays all of the other assets from loading so as not to confuse the visitor with errant components until all of the components have been fetched.

The “flash of unstyled content,” is a term coined by Steve Souders in his book High-Performance Web Sites (pro tip: go out and buy it, it’s good). This is the response some browsers have to mis-ordered assets instead of showing a blank screen. Essentially, it will render the assets that have been loaded even if they aren’t in the correct spot, so the assets will jump around the screen until the final styles are set. This is also a no-no.

What this means from a user perspective

Progress indicators are essential to the end user’s experience. They reassure the visitor that the site is working to connect and hasn’t crashed, give an indication of approximate time left to wait and provide the visitor with something to look at and process while the rest of the site loads.

Improving order of execution improves user experience by painting the content on the page progressively. This effect has been tested: users actually perceive better performance in pages with progressive rendering, even when the page load time is ultimately slower than the baseline.

Want more insight? Download our eBook to get step-by-step instructions on properly ordering execution by:

1. Moving JavaScript files to the bottom
2. Moving CSS files to the top
3. Inlining images and JavaScript
4. Post-loading components

Plus: what tools are available to get started optimizing!