Speed up the hero section
The page shows its main message sooner, so fewer visitors bounce.
The number it moves
Page load time · Typical: 2.5 seconds or less is good, at the 75th percentile of visits
Seconds until the main headline or hero appears (Largest Contentful Paint).
What your AI does
Find the hero image or video, fonts and render-blocking scripts. Check for oversized files, autoplay video loaded eagerly, and third-party scripts in the head. Propose a compressed responsive hero image, preloading the LCP element, and deferring non-critical scripts.
Done when
- The hero image is compressed and sized per screen
- The main headline or image is preloaded
- Scripts the first view does not need load later
The prompt
Paste this into any AI coding tool, or run it in MightyMouse and your AI works on your own project.
Speed up the hero section (Landing page) Find the hero image or video, fonts and render-blocking scripts. Check for oversized files, autoplay video loaded eagerly, and third-party scripts in the head. Propose a compressed responsive hero image, preloading the LCP element, and deferring non-critical scripts. Done when: - The hero image is compressed and sized per screen - The main headline or image is preloaded - Scripts the first view does not need load later Read the code first. If it already does this well, change nothing and say so. Otherwise make the smallest change that makes every line above true. Work with what this project already uses. Do not add a paid tool or service unless I ask for one. Playbook: https://getmightymouse.com/playbooks/landing-speed-up-the-hero-section/ - published by MightyMouse. Source: web.dev (Google), https://web.dev/articles/vitals
The skill file
Save this as SKILL.md and Claude Code or Cursor can run the playbook any time you ask.
--- name: landing-speed-up-the-hero-section description: The page shows its main message sooner, so fewer visitors bounce. Use on a landing page project to improve "Page load time". --- # Speed up the hero section Find the hero image or video, fonts and render-blocking scripts. Check for oversized files, autoplay video loaded eagerly, and third-party scripts in the head. Propose a compressed responsive hero image, preloading the LCP element, and deferring non-critical scripts. ## Done when - [ ] The hero image is compressed and sized per screen - [ ] The main headline or image is preloaded - [ ] Scripts the first view does not need load later ## How to run it Read the code first and tick every line that is already true. If all are true, change nothing and say so. Otherwise make the smallest change that makes the rest true, then report each line as done or not done. Work with what this project already uses. Do not add a paid tool or service unless I ask for one. Playbook: https://getmightymouse.com/playbooks/landing-speed-up-the-hero-section/ - published by MightyMouse. Source: web.dev (Google), https://web.dev/articles/vitals