Render-Blocking and Content-Blocking: how to prevent them.
Content that blocks the presentation are external resources loaded by a page such as CSS, JavaScript, fonts and others that stop the HTML parsing to download and execute, to later resume parsing.
This behavior generates several problems at performance level and at user experience level. On one hand, current applications use extremely large files where almost everything is packaged into a single JS or CSS application file, even when many of these features are not used in every page of the app. You can have, for example, a JS function that is only called on forms with multiple selectors, and on your website you may only have a contact form.
Preventing render-blocking in JavaScript
When working with JavaScript it is necessary to understand how a resource that blocks the presentation is loaded. Let's see the default behavior of JavaScript and how we can use async and defer to improve it.
Default
By default, the browser pauses HTML parsing to download and execute the file. Once this process is done, HTML parsing resumes.
Async
When using async in the loading of JavaScript resources, we can download the file at the same time that we parse the HTML and only pause parsing during execution.
Defer
On the other hand, when using defer we are equally downloading the file at the same time that we parse the HTML, but we are delegating execution until the end when all HTML is parsed.
Preventing render-blocking in CSS
At pleets we have previously discussed how to prevent blocking content in CSS files.
Preloading resources to improve FCP
FCP (First Contentful Paint) is the first screen the user sees of the page they are accessing (not blank). Fonts, as well as any CSS file, can interfere with this aspect by leaving the page loading until they are downloaded. The good news is that CSS loading can be delegated just like JS files.
I invite you to read our article Optimizing web load times in CSS files for a deeper implementation detail on how to achieve this goal.
Critical CSS Loading
Critical CSS is the CSS your application needs on the first screen the user sees. It is quite obvious that many CSS styles do not appear until certain parts of our application are navigated, which is why a very common technique is to load the critical CSS normally in our app and leave the rest delegated. This technique noticeably improves loading and FCP!
Smart Font Loading
Fonts are a very special case of CSS that can be used in an intelligent or absolutely ineffective manner. I invite you to review our post How to load web fonts intelligently to have a deeper understanding of what the FOIT effect is and how to optimize font loading.