search

reactiflux / reactiflux.com

Reactiflux Website
https://www.reactiflux.com/
MIT License
255 stars 53 forks source link

SEO: Cumulative Layout Shift is damaging our search rank on Desktop #274

Closed vcarl closed 1 year ago

vcarl commented 1 year ago
Screen Shot 2023-09-27 at 5 44 49 PM
vcarl commented 1 year ago

The "problem" unfortunately is that there's a big difference in character width between the fallback and primary fonts, so text is shifting a lot.

Actually while researching this comment I found this https://css-tricks.com/css-basics-fallback-font-stacks-robust-web-typography/ which led me to this tool https://meowni.ca/font-style-matcher/

which gave me a great way to make this way better with fewer tradeoffs. hell yea

vcarl commented 1 year ago

But there's no CSS selector for "using fallback fonts" so we need some JS to apply a class https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/loadingdone_event

vcarl commented 1 year ago

https://github.com/reactiflux/reactiflux.com/assets/1551487/a3340cf0-f749-4323-a122-ca0f1a277160

Here's how bad the problem is