Skip to content
Get packs

Script Loading Checker (defer/async)

Reviews HTML and templates for blocking script tags and suggests defer, async, or type=module fixes

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

When installed, the agent reviews HTML, templates, and shared components for script tags that block page rendering, such as a plain script in the document head without defer or async. It flags the exact elements, explains the difference between defer, async and type=module, and suggests the markup change. The skill is guidance only: it teaches the agent what to look for and how to fix it, and the files contain no executable code.

Great for

  • Front-end developers reviewing page templates or server-rendered HTML for performance problems
  • Teams checking shared components before release to avoid slow first render
  • Beginners who want an explanation of why script loading order affects page speed

Skip it if

  • Projects that rely on a framework or bundler that already manages script loading, since the advice may not apply to the generated output without checking the final HTML
  • Non-technical users who only want to build a website without reviewing code, because the skill assumes familiarity with HTML markup

Try asking

  • “Review this base layout template and flag any script tags in the head that lack defer or async.”
  • “Explain the difference between defer, async and type=module for my analytics and app scripts.”
  • “Check the rendered HTML of this page and tell me which script tags delay first render and how to fix them.”
Step-by-step guide: how to use Script Loading Checker (defer/async)Install, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    defer-async.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip defer-async.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip defer-async.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at the rendered HTML output, not only the source template, so framework-generated tags are included.
  • Verify changes in the browser after adding defer or async, since async scripts can run out of order if they depend on each other.
  • Ask for a before-and-after explanation so you can confirm the fix matches your script dependencies.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.