fix(perf): reserve dimensions on TaskIcon to eliminate CLS#4697
Open
fix(perf): reserve dimensions on TaskIcon to eliminate CLS#4697
Conversation
Add explicit width/height attributes and aspect-ratio CSS to TaskIcon so the browser reserves layout space before SVGs load. Previously, the blueprint header rendered up to 43 task icons without dimensions, causing a cascade of layout shifts (CLS 0.44 desktop / 0.238 mobile on /blueprints/business-automation). Also adds loading="lazy", decoding="async" and an onerror handler so missing icons fail silently instead of breaking the layout. Impact: this single component is reused across blueprint, plugin, and use-case pages — fix improves CLS on ~1500+ pages. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Contributor
☁️ Cloudflare Worker Preview Deployed!🔗 https://ks-fix-cls-task-icon-dimensions-docs.kestra-io.workers.dev ## 🔦 Lighthouse Benchmark
Scores (0–100, higher is better)
Core Web Vitals (lower is better)
Legend🟢 improved · 🔻 regressed · (blank) no significant change |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
width="32" height="32",loading="lazy",decoding="async", and anonerrorfallback to the<img>rendered byTaskIcon.astro.aspect-ratio: 1 / 1to bothTaskIcon.astroandTaskIcon.vuewrappers as a safety net.Why
On
/blueprints/business-automationthe page renders 50<img>tags, 45 without dimensions. 43 of them are task icons rendered in the blueprint header (Header.astro→TaskIcon.astro, looping overpage.includedTasks). Each SVG load triggers a cascading layout shift, pushing CLS to 0.44 desktop / 0.238 mobile — Google's "Poor" threshold is 0.25.Setting explicit
width/heightHTML attributes lets the browser reserve a 1:1 box per icon before the SVG arrives, eliminating the cascade. CSSaspect-ratioon the wrapper is the safety net if attributes get stripped or overridden.Impact
TaskIcon.astroandTaskIcon.vueare reused across:/blueprints/*(311 pages)/plugins/*(~1100 pages)/docs/*examples and use-case pagesA single component fix should bring CLS below 0.1 on ~1500+ pages.
Test plan
Local:
npm run build && npm run preview, open/blueprints/business-automation, run Lighthouse → CLS < 0.1.Visual check: blueprint header still renders icons at the same 30×30 size (40px box minus 5px padding); no flicker on theme toggle.
After deploy, run PSI on 5 representative URLs:
/blueprints/business-automation/blueprints/data-engineering-pipeline/blueprints/microservices-and-apis/plugins/plugin-aws/s3/io.kestra.plugin.aws.s3.upload/docs/quickstartTarget: CLS < 0.1 on all five.
Notes
onerror="this.style.visibility='hidden'"handles the one stray<img src="">observed in the page audit (likely a custom plugin task with no matching icon file).width="32" height="32"is a hint for aspect-ratio reservation only — actual rendered size is still controlled by the parent box (e.g. 40×40 with 5px padding inHeader.astro).🤖 Generated with Claude Code