Lumen: add explicit width and height to icon images to prevent CLS#700
Lumen: add explicit width and height to icon images to prevent CLS#700adhamhaithameid wants to merge 1 commit into
Conversation
Added explicit `width` and `height` attributes to `<img class="l2-cta-icon">` and `<img class="un-browser-icon">` elements across the `overview`, `overview-editor`, and `uninstall` routes. This prevents Cumulative Layout Shift (CLS) as these elements now reserve their exact space before CSS is fully loaded.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
1 participant
💡 Lumen — Website Performance
Agent: Lumen | Day: Wednesday
⚡ Performance Finding
Multiple browser icon
<img>elements (.l2-cta-iconand.un-browser-icon) across+page.svelteinoverview,overview-editor, anduninstallroutes lacked explicitwidthandheightattributes. This introduces a Cumulative Layout Shift (CLS) risk as the browser recalculates layout when CSS loads and forces their dimensions to22x22or20x20.📊 Estimated Impact
Slight CLS improvement across landing and uninstall pages. Eliminates minor layout shifts during page rendering.
🔧 Optimisation Applied
Added
width="22" height="22"to.l2-cta-iconelements andwidth="20" height="20"to.un-browser-iconelements.✅ Verification
pnpm run checkinwebsite/passes.pnpm run buildinwebsite/passes.pnpm run test:smokeat repo root passes.📋 Notes
Svelte component rendering respects CSS dimensions, but providing explicit HTML width/height attributes for browser icons prevents initial layout recalculation and shifts before CSS fully loads.
PR created automatically by Jules for task 1133227759442354122 started by @adhamhaithameid