Lighthouse gave me a shitty score during the weekend.
...
I was finishing up the marketing site for Reachly, and everything looked pixel-perfect. Then, I ran the initial Lighthouse test.
My heart sank: Accessibility and SEO were all yellow (not bad but i love me a Green). 😁
Google flagged a critical error: “Image elements do not have [alt] attributes.” (See image)
🚨The culprit? The video testimonials.
1. I was using Framer’s native YouTube component.
2. Lighthouse was demanding image alt text for a video thumbnail (weird).
3. Framer doesn't provide an option to add alt text to that native component.
So i spent a stressful Sunday down a research rabbit hole. Nothing worked. I closed my laptop and took the weekend off.
On Monday, with a clear head, I fixed it - took maybe 20 minutes.
🚨So how did i do it?:
"I ditched the native YouTube component & instead copied the raw HTML embed code for each video, inserted an Embed block and pasted the HTML embed code.
The error vanished. Lighthouse shot straight up into a clean, green circles all 90s
(Fun fact: Webflow users run into this exact same video thumbnail issue, though the workaround is slightly different).
🚨The takeaway:
Having design and building skills is great but learn the technical side too.
I could have easily ignored this error and handed off the site, but ignoring the technical side under the hood is a mistake. Hidden technical debt is a silent killer for your SEO and kills your chances of getting free customers from Google.
🚨PS: I'm thinking of writing a longer & more detailed, step-by-step guide on how I solved this probelm.
Would this be useful to you? Let me know in the comments.
#framerdesigner #framerdeveloper #webdesigner