The file resources of a website work together to form the content, visual styling and functionality users see and interact with in the browser. HTML code is the foundation of each page and coordinates how those resources are loaded. Optimizing the structure of HTML is an important step to streamline the loading process and ensure that pages load quickly and efficiently.
Consider the basic structure of an HTML file:
In general, the
<body> section contains the visible content of the page, like text and images, and the
<head> this way have to be downloaded, applied or executed before the user can see any content.
A Progressive Approach
For CSS, a priority-oriented approach means applying critical styling immediately, while loading non-critical CSS in the background without delaying the initial display of the page content.
Critical styles are those that apply to the initially-visible or above-the-fold elements of the page. This can be done with a small, conventionally-loaded (and purposefully render blocking) external CSS file:
In this case the render blocking effect is desirable to avoid unstyled content from appearing before the CSS is applied - sometimes called a flash of unstyled content - which can be disorienting to users. This single render blocking file should be kept as small as possible, ideally under ~10KB minified and compressed.
Inline Critical CSS
A single small render blocking CSS file is a good strategy for critical CSS and doesn't impact page speed on an otherwise well-optimized page. But what if you want to eliminate all render blocking CSS resources?
To eliminate all render blocking CSS, critical styles can be added to the page as an inline
style block. This technique avoids the render blocking effect of a separate file reference by embedding the critical CSS directly in the HTML.
A potential downside to this method is that inline CSS won't be cached by the browser and is therefore re-loaded each time the page is viewed. HTTP/2 may also make this method less advantageous.
Non-critical CSS resources for content that isn't initially visible should be loaded in the background without blocking further rendering of the page. This is often called asynchronous CSS loading.
For the best results, explore asynchronous CSS loading in detail to ensure that non-critical CSS resources don't hinder loading speed:Asynchronous CSS
The recommended method for most cases uses a combination of the
This technique loads the non-critical CSS in the background and with a low priority, although as shown, an optional
<link> reference is an easy fallback.
Media queries are another great way to manage render-blocking CSS by selectively prioritizing critical resources based on conditions like screen size. All files will be downloaded, but with appropriate priority, and only CSS with matching media conditions will block rendering.
defer attributes to instruct those files to download in the background at a low priority without interrupting the rendering process. Although their loading behavior is the same,
- May interrupt page rendering to execute
- Executes as soon as possible and in no particular order
- Won't interrupt page rendering to execute
- Executes in sequence before the
In most cases, the best strategy is to
<script> blocks can't be avoided and they also rely on a
DOMContentLoaded event listener to run after the
defer'd file that depends on another
DOMContentLoaded event listener to ensure that it runs after jQuery.
But wait, there's more!
HTML resources hints can help to get a jumpstart on any needed 3rd-party network connections and strategically pre-load other critical resources like custom fonts and above-the-fold images.
What are resource hints like
preload? Learn how to leverage a few simple lines of HTML for an important page speed improvement: