Web performance

A step of the Cloud application tree on Gradus, in the Frontend area: Second app, UI, browser tests.

Measure the key pages on a mid-range phone, fix what makes them slow and set a budget so they stay fast.

Usually comes after: Landing page.

Prompt for your AI assistant

Run Lighthouse or PageSpeed Insights in mobile mode on the deployed landing page and the first page of the journey, three times each, and record performance, FCP, LCP, TBT and CLS in docs/. Name the LCP element of each page, which is often a banner or a heading rather than the image you expect. Fix the biggest causes first: split the code so each page loads only what it uses, remove unused JavaScript and render-blocking CSS, size images for the slot they fill in a modern format with lazy loading below the fold, subset fonts, use font-display: swap, fetch only the font files the page uses and make sure entrance animations never leave the first screen empty. Break up long tasks on heavy pages such as maps or animations. Add a Lighthouse CI run with a budget that fails when a score drops, and record the numbers after the fixes.

This is https://gradus.kazet.blog/tree/cloud-application/step/web-performance as plain HTML. In a browser the page also lets you mark the step forged and copy a message for your AI assistant.