il granaio
Il Granaio is a single page restaurant site built in pure HTML, CSS and vanilla JS, with a custom Italian and English switch and lightweight motion.
Problem
DevTools local metrics were already strong on LCP at 0.46s and INP at 8ms, but CLS was poor at 0.29. The goal was to bring layout shift under 0.1 without making the site slower or less responsive.
Role & scope
Solo, audit and optimization. I reviewed the page for every post-paint shift and tightened the front end without adding frameworks or heavy libraries.
Key decisions
Reserve space before anything loads
I treated every likely shifting asset as a layout contract: images, media and embedded content need explicit width and height or a stable aspect-ratio, so the page keeps its structure from the first paint.
Animate with transform, not layout
All entrance and motion effects were checked to make sure they rely on transform and opacity, never on properties like top, left, margin, width or height that can trigger reflow and visible jumps.
Stabilize fonts and the language switch
The remaining risk was text reflow: web fonts need a safer swap strategy with a tuned fallback, and the Italian/English switch has to reserve enough space so different string lengths do not push nearby elements.
Craft
A focused CLS optimization pass on a pure code stack: audit of shifting elements, fixed media sizing, transform-only motion, safer font loading, and a language switch designed to avoid text-driven layout changes.
Outcome
A more stable first render, with the work specifically aimed at pushing CLS below 0.1 while preserving the site's already strong LCP and INP.