Reserve space for images and ads
Pages stop jumping, so readers do not leave mid-read.
The number it moves
Pages that shift while loading · Typical: 0.1 or less is good
Layout jump score (Cumulative Layout Shift) as the page loads, from ads, images and fonts.
What your AI does
Find img, iframe, embed and ad slot markup and web font loading. List elements without width/height or aspect-ratio and fonts without font-display. Propose adding explicit dimensions, reserved slot heights and font-display: swap with a preload for the main font.
Done when
- Images, embeds and ad slots have a set size
- Fonts show text right away while loading
- The main font is preloaded
The prompt
Paste this into any AI coding tool, or run it in MightyMouse and your AI works on your own project.
Reserve space for images and ads (Content site) Find img, iframe, embed and ad slot markup and web font loading. List elements without width/height or aspect-ratio and fonts without font-display. Propose adding explicit dimensions, reserved slot heights and font-display: swap with a preload for the main font. Done when: - Images, embeds and ad slots have a set size - Fonts show text right away while loading - The main font is preloaded 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/content-reserve-space-for-images-and-ads/ - 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: content-reserve-space-for-images-and-ads description: Pages stop jumping, so readers do not leave mid-read. Use on a content site project to improve "Pages that shift while loading". --- # Reserve space for images and ads Find img, iframe, embed and ad slot markup and web font loading. List elements without width/height or aspect-ratio and fonts without font-display. Propose adding explicit dimensions, reserved slot heights and font-display: swap with a preload for the main font. ## Done when - [ ] Images, embeds and ad slots have a set size - [ ] Fonts show text right away while loading - [ ] The main font is preloaded ## 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/content-reserve-space-for-images-and-ads/ - published by MightyMouse. Source: web.dev (Google), https://web.dev/articles/vitals