feat: Add performance-budget skill for EDS content ops - #187
Conversation
trieloff
left a comment
trieloff
left a comment
There was a problem hiding this comment.
Needs work. I'd also add something to suggest codifying the performance budget in CI, perhaps through a GitHub action.
| | AVIF | 60 | Modern browsers | 15-30 KB | | ||
| | JPEG | 80 | Fallback | 35-60 KB | | ||
| | PNG | — | Graphics with transparency | Varies widely | | ||
| | SVG | — | Icons, logos | Under 5 KB | |
There was a problem hiding this comment.
This is probably unnecessary or misleading. If this causes the agent to try to optimize images that go into content, then it's duplicating the work of Edge Delivery Services' built-in image optimization. For images that go into code, this might be useful, but then again, the models know the difference between PNG and JPEG.
|
|
||
| | Violation | Typical Cost | Fix | | ||
| |-----------|-------------|-----| | ||
| | Unoptimized hero image (PNG/JPEG) | +30-80 KB | Convert to WebP, resize to viewport width | |
There was a problem hiding this comment.
This does not happen. Hero images are in content and get delivered as WebP, regardless of input format.
| curl -s "https://<branch>--<repo>--<owner>.aem.live<path>" | ||
| ``` | ||
|
|
||
| In EDS, the HTML is intentionally minimal — typically 10-20KB. If it exceeds 30KB, investigate why (inline styles, excessive DOM nodes, server-side includes). |
There was a problem hiding this comment.
There are no server-side includes in Edge Delivery Services
|
|
||
| ## Step 2: Identify the LCP Element | ||
|
|
||
| In EDS pages, the LCP element is typically one of: |
There was a problem hiding this comment.
This is guesswork. The LCP element can be identified reliably through Chrome Dev tools or RUM.
…nce per review - EDS auto-serves content images as WebP responsively; stop advising manual conversion/resize of content images (only code-bundled images apply) - Identify the LCP element via Chrome DevTools / RUM, not structural guessing - Remove 'server-side includes' (EDS has none); name real causes of large HTML - Add CI enforcement section (Lighthouse CI / PSI GitHub Action on preview URL) - Flag per-resource sub-budgets and letter grades as heuristics, not official limits Addresses @trieloff review on adobe#187.
Also corrects two lingering aem.css references to styles.css.
|
Thanks Lars, all four addressed. Dropped the content-image format/size guidance (the media pipeline already delivers responsive WebP), so the skill now only touches code-bundled images. LCP element is identified via Chrome DevTools or RUM instead of structure. Removed the "server-side includes" line. And added a CI section per your suggestion: a GitHub Action running Lighthouse CI or PSI against the preview URL to gate the budget on every PR. (Also fixed a stale filename and labelled the sub-budgets as heuristics, not official limits.) Pushed. |
… to 94% - Prefix bare script path references with '/' to clear the 3 missing-path warnings (SKILL.md lines 133, 209 and references file line 13) - Remove backtick formatting from treosh/lighthouse-ci-action to avoid tessl treating it as a missing local bundle path - Trim Step 5 E-L-D phase descriptions that duplicate references file; replace with concise verification checklist - Trim Step 6 image optimization prose that duplicates references file; add pointer to references/performance-budget-rules.md Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Lars Trieloff <lars@trieloff.net>
|
cc @trieloff Friendly nudge — all four review points were addressed and pushed back on July 7 (summary in the comment above). One note on the red checks, in case they're what's holding this up: they look CI-side rather than content-side. |
…r aem.live docs - Delayed phase starts at least 3s after the LCP event (not after page load), and note the boilerplate no longer enforces it with a hard-coded timer. - Replace the unsourced '3G baseline / 1.5s' figure with Lighthouse's Slow 4G (the PageSpeed Insights mobile profile); reconcile the troubleshooting row to Slow 4G so throttling guidance is consistent. - Remove two em dashes.
|
Thanks @trieloff. The factual issues are fixed. I removed the server-side-includes reference (EDS has none), corrected the image guidance (content images are auto-delivered as responsive WebP by the media pipeline, so the skill no longer suggests converting them), and the LCP element is now identified via Chrome DevTools, Lighthouse, and RUM rather than guessed. I also added an "Enforcing the Budget in CI" section per your suggestion (a GitHub Action on pull requests using Lighthouse CI or the PSI API against the preview URL). While going back through it I also corrected the delayed phase to start at least 3 seconds after the LCP event (not page load) and standardized the throttling guidance on Lighthouse's Slow 4G profile. Ready for another look. |
3 participants
Summary
Adds the performance-budget skill to the EDS content ops plugin.
Audits the AEM Edge Delivery Services 100KB LCP budget — inventories every critical-path resource before the LCP element, calculates total byte cost, and checks E-L-D phase compliance.
Follows the established format (functional description, External Content Safety, concrete code examples, reference file for progressive disclosure, Apache-2.0). Submitted as a standalone PR per @trieloff's request to keep one skill per PR.
Test plan