There 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.
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.
To learn more about the critical rendering path, take a look at this excellent article from Patrick Sexton.