Render-Blocking and Content-Blocking: how to prevent them.

Author
By Darío Rivera
Posted On in HTML

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.

bubble sort step

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.

bubble sort step

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.

bubble sort step

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.

bubble sort step

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!

bubble sort step

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.


Acerca de Darío Rivera

Author

Application Architect at Elentra Corp . Quality developer and passionate learner with 10+ years of experience in web technologies. Creator of EasyHttp , an standard way to consume HTTP Clients.

LinkedIn Twitter Instagram

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.