Middle

What can block the rendering of an HTML page?

sobes.tech AI

Answer from AI

JS scripts without async or defer attributes located in <head>. CSS files without media="print" or media="all" attributes located in <head>. CSS with @import.

<!DOCTYPE html>
<html>
<head>
    <title>Block Rendering Example</title>
    <!-- Blocks rendering -->
    <script src="blocking-script.js"></script>
    <!-- Blocks rendering -->
    <link rel="stylesheet" href="blocking-style.css">
    <!-- Does not block rendering -->
    <script src="non-blocking-script.js" async></script>
    <!-- Does not block rendering -->
    <link rel="stylesheet" href="non-blocking-print-style.css" media="print">
</head>
<body>
    <h1>Content</h1>
</body>
</html>

Previous Next