Scripts block parsing

Did you know that scripts block parsing?

This document has a few text paragraphs and one slow-to-download-and-execute script tag:

<h1 />
<p />
<pre />
<p />
<script> – a script that downloads for 2 seconds and executes for 0.5 seconds
<hr />
<p />
<p />

Now, the script loads. Wait for it...

🎉 Cool! We’re done.

If you watched this page, you should’ve noticed that this text wasn’t visible for 2.5 seconds. This is the whole time the script was downloading and executing. This happens because browsers stop parsing DOM once they encounter a script.

Because of this, the more scripts you have in the middle of the document, the longer the visitor won’t see the whole page. Stay aware of that.

Here’re the ways to solve this problem