Agent skill

kirby-performance-and-media

Improves Kirby performance and media delivery (cache tuning, CDN, responsive images, lazy loading). Use when optimizing page speed, caching, or image handling.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/kirby-performance-and-media

SKILL.md

Kirby Performance and Media

Quick start

  • Follow the workflow below, and run a full audit checklist when performance work spans multiple templates or plugins.

KB entry points

  • kirby://kb/scenarios/55-cdn-asset-and-media-urls
  • kirby://kb/scenarios/56-lazy-loading-images
  • kirby://kb/scenarios/57-responsive-images-srcset
  • kirby://kb/scenarios/58-fine-tune-page-cache
  • kirby://kb/scenarios/79-conditional-loading-frontend-libraries

Required inputs

  • Target pages/templates and performance symptoms.
  • Image/media volume and CDN constraints.
  • Acceptable cache settings or invalidation rules.

Audit checklist

  • Identify templates that render large image sets or long listings.
  • Check kirby://config/cache and kirby://config/thumbs for overrides.
  • Verify media URLs, cache headers, and variant generation.

Measurement step

  • Inspect Cache-Control headers and confirm generated /media variants exist.

CDN fallback rule

  • If the CDN is unavailable, fall back to local asset/media URLs without breaking pages.

Common pitfalls

  • Generating thumbnails in loops without srcset() or caching.
  • Routing media through a CDN without preserving variants.

Workflow

  1. Call kirby:kirby_init and read kirby://config/cache and kirby://config/thumbs.
  2. Inspect templates/snippets that render large collections of images:
    • kirby:kirby_templates_index
    • kirby:kirby_snippets_index
  3. Search the KB with kirby:kirby_search (examples: "cdn asset and media urls", "lazy loading images", "responsive images srcset", "fine tune page cache").
  4. Apply minimal changes first:
    • use srcset()/sizes for responsive images
    • add loading="lazy" and decoding="async"
    • adjust cache ignore rules via blueprint options or fields
    • route assets/media through a CDN when required
  5. Verify output and caching behavior:
    • kirby:kirby_render_page(noCache=true) for HTML
    • inspect generated media variants and cache headers in a browser

Didn't find tool you were looking for?

Be as detailed as possible for better results