quick to do list
Quick To Do List is a static Astro app with vanilla JS, local storage persistence and a custom accessibility widget, built to stay simple, instant and private by default.
Problem
The product already felt lightweight, but its Core Web Vitals had not been measured yet. The goal was to audit LCP, CLS and INP, then fix anything below target, with CLS as the first priority.
Role & scope
Solo, audit and optimization. I measured the vitals, identified the elements responsible, and improved rendering and interaction without adding heavy dependencies.
Key decisions
Stabilize layout before JS runs
I treated layout stability as the first pass: explicit dimensions on images and icons, reserved space for the task list container, and a fixed footprint for the custom accessibility widget so hydration or injection would not push content after first paint.
Protect the largest contentful paint
The largest above the fold element needed to render immediately, so I avoided lazy loading there and tightened delivery with preloaded fonts and critical CSS, keeping LCP under 1 second as the target.
Keep interactions light on the main thread
Add, edit and reorder flows had to stay instant, so non critical JS was deferred and main thread work kept small, with the target of maintaining INP under 200ms while preserving local storage and accessibility.
Craft
A performance pass on a static Astro build with vanilla JS: Core Web Vitals measurement first, then layout reservation, safer font loading with font-display: swap and fallback sizing, protected above the fold rendering, and deferred non critical scripts.
Outcome
A faster, more stable to do app measured against real Core Web Vitals targets, with the work aimed at bringing CLS below 0.1, LCP below 1s and INP below 200ms without losing local storage or accessibility support.