Focus On The Critical Rendering Path To Make Your Site Faster

Critical Rendering PathThere are lots of things we can do to make our sites faster: caching, image optimization, compression, and, of course, low-latency web hosting. They’ll all have an impact on load times, but often, taking a scattergun approach to performance optimization isn’t the most effective method. To get the best performance from a site, we need to think about what needs to load to present a usable site as quickly as possible and then load that first.

The critical rendering path is defined as “the code and resources required to render the initial view of a web page.” What’s important to note here is “initial”. We want to present a working and satisfactory web page to the user as soon as possible. But we also want to include lots of images and external resources. Of course, those images and resources take a significant amount of time to load and render. We could strip pages back to the barest functionality: an HTML file and a CSS file are all that are really necessary, but that would deprive us of much of the richness of the modern web.

What’s important is not so much the load time of the entire page, but the load time of the part that’s initially presented to the user. Perceived performance is as important as overall performance. If you have six full bleed images on your page, there’s no need to load them all at once, just those that the user sees initially. The same goes for CSS: you don’t need to load every stylesheet immediately, only the instructions used to render the initial page view.

JavaScript can also be postponed until after the page has loaded in many cases—although you should note that this is not the same as moving JS files to the bottom of the page; that will help prevent JS-loading from blocking the downloading of other assets, but it won’t make the page appear any faster.

To determine what should be initially presented you need to understand the critical rendering path of your pages; there’s no one size fits all solution. You need to understand how the browser loads and renders assets and how they impact each other. And then you must apply that knowledge to your own site. Because optimizing the critical rendering path is situation dependent, I can’t give a detailed description of the process here, but there are some common techniques:

  • Inlining CSS — Including CSS styles necessary to load above-the-fold content in the head of an HTML file means that there’s no need to load an external file. There is a downside though: the CSS won’t be cached. You may prefer to split CSS necessary for above-the-page loading into its own file and load other CSS files after the initial page load.
  • Lazy Load Images — Lazy loading is the process of only loading an asset when it is about to appear in the browser window. Many sites use lazy loading of images: you’ve probably quickly scrolled down a page and caught images loading on one of these sites. Lazy loading on WordPress is a simple matter of installing a plugin.
  • Defer Loading of JavaScript — Some JS must be loaded before the initial render or the page won’t function properly, but much of it can be loaded after the initial view, particularly social media widgets.

To learn more about the critical rendering path, take a look at this excellent article from Patrick Sexton.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.