Keyboard shortcuts

jk
move through the list
↵
open the selected item
a
ask a question
nucw
tabs: new, unanswered, active, top
⌘↵
post the answer you are writing
/or⌘K
search
t
switch theme
?
this list
AskVibe
AskSign in
Demo, all content is generated
Question

Content jumps around while my Bolt landing page loads, Speed Insights says CLS 0.41

Solved · 262 views · asked by beto_codes · edited
boltperformancereact

When the page loads, the text shifts down twice: once when the font swaps and once when the cookie banner appears at the top. On mobile the Sign up button moves right when people try to tap it. Speed Insights says CLS 0.41 (red). What causes this and how do I fix it without redesigning everything?

What I’ve tried

Asked Bolt to "fix layout shift", it added a loading spinner in front of the whole page. That just hides the page for a second longer.

Comment
Is the cookie banner at the top of the page or floating over it? connor_b · edited
top, it pushes everything down when it appears beto_codes · edited

2 answers

Marked as helpful by the asker
cloudkat · edited

Three usual sources, you have at least two:

  1. Cookie banner pushing content. Make it an overlay instead of part of the flow: position: fixed; bottom: 0. It then covers content instead of moving it. That's probably most of your 0.41.
  2. Images without dimensions. Every <img> needs width and height (or an aspect-ratio in CSS), so the browser reserves the space before the file arrives.
  3. Font swap. The fallback font has different widths, so text reflows when the web font arrives. Self-host the font and preload it, or use a fallback with adjusted metrics (size-adjust in @font-face).

And remove Bolt's spinner, it makes the page slower without fixing anything.

Comment
Banner to fixed bottom and width/height on the hero: CLS 0.03. The spinner is gone too, thank you beto_codes · edited
+1, the fixed banner trick fixed mine too. Didn't know banners count as layout shift connor_b · edited
joaquin_r · edited

For the font with Vite: install the @fontsource package for your font and import it in main.tsx. The font files are then bundled with your site, no request to Google, and the swap happens much sooner.

Comment

Related

Lighthouse mobile LCP 5.8s, it's the hero image, desktop is fine3 ans.
Cursor adds 'use client' to every file, is that actually a problem?3 ans.
'Maximum update depth exceeded' after Cursor added a filter to my tablesolved
First Load JS is 480 kB on my homepage, what is eating it?3 ans.
Google shows 'Vite + React + TS' as the title for all my Lovable pagessolved

Your answer

Sign in to write an answer