{
    "slug": "render_blocking_resources",
    "term": "Render-Blocking Resources",
    "category": "frontend",
    "difficulty": "intermediate",
    "short": "CSS and synchronous JavaScript in <head> that prevent the browser from rendering any content until they are downloaded and parsed — the primary cause of slow First Contentful Paint.",
    "long": "The browser cannot render until it has the CSSOM (from CSS) and has executed synchronous scripts. Every <link rel='stylesheet'> and <script> without async/defer in <head> blocks rendering. Strategies: inline critical CSS (removes a request for above-fold styles), defer non-critical CSS (link with media='print' + onload trick), async JavaScript (parallel download, executes when ready — may execute out of order), defer JavaScript (parallel download, executes in order after HTML parsed). Third-party scripts are the most common culprit — analytics, chat widgets, ad scripts.",
    "aliases": [
        "render blocking",
        "critical CSS",
        "async defer",
        "FCP"
    ],
    "tags": [
        "frontend",
        "performance",
        "css",
        "javascript"
    ],
    "misconception": "async and defer are the same — async executes as soon as downloaded (may interrupt parsing); defer executes after HTML is parsed in order. For most scripts, defer is safer.",
    "why_it_matters": "A single render-blocking CSS file adds one full network round-trip before any content appears — eliminating render-blocking resources is the highest-impact FCP optimisation.",
    "common_mistakes": [
        "<script> in <head> without async or defer — blocks HTML parsing until the script downloads and executes.",
        "Inlining too much CSS — inlined CSS cannot be cached; critical CSS should be < 14KB.",
        "async on scripts that depend on each other — async scripts execute out of order, breaking dependencies.",
        "Not deferring third-party scripts — analytics and chat widgets are rarely needed for initial render."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "critical_rendering_path",
        "web_vitals",
        "preload_prefetch",
        "gzip_compression"
    ],
    "prerequisites": [
        "web_performance",
        "web_vitals",
        "prefetching_strategies"
    ],
    "refs": [
        "https://web.dev/articles/render-blocking-resources"
    ],
    "bad_code": "<!-- Render-blocking — nothing paints until all are loaded:\n<head>\n  <link rel=\"stylesheet\" href=\"all-styles.css\">     <!-- Blocks render -->\n  <script src=\"vendor.js\"></script>                  <!-- Blocks parsing -->\n  <script src=\"app.js\"></script>                     <!-- Blocks parsing -->\n  <script src=\"https://analytics.example.com/track.js\"></script> <!-- Blocks -->\n</head>",
    "good_code": "<!-- Optimised — critical path unblocked:\n<head>\n  <style>/* Inlined critical above-fold CSS only */</style>\n  <link rel=\"preload\" href=\"all-styles.css\" as=\"style\" onload=\"this.rel='stylesheet'\">\n</head>\n<body>\n  <!-- Content here -->\n  <script src=\"vendor.js\" defer></script>   <!-- Deferred — after HTML parsed -->\n  <script src=\"app.js\" defer></script>       <!-- Deferred — maintains order -->\n  <script src=\"analytics.js\" async></script> <!-- Async — independent -->\n</body>",
    "quick_fix": "Add defer to all non-critical <script> tags and move them before </body>; use <link rel='preload'> for critical fonts; inline critical CSS for above-the-fold content",
    "severity": "high",
    "effort": "medium",
    "created": "2026-03-15",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/render_blocking_resources",
        "html_url": "https://codeclaritylab.com/glossary/render_blocking_resources",
        "json_url": "https://codeclaritylab.com/glossary/render_blocking_resources.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Render-Blocking Resources](https://codeclaritylab.com/glossary/render_blocking_resources) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/render_blocking_resources"
            }
        }
    }
}