I can't understand why so many websites use an onclick handler on a button to redirect to websites.
It's not hard to even find something like
<a href="#" onclick="location.href='https://example.com';">click here</a>
The worst part is that it's not just random websites doing this, this can be found on most FAANG websites as well.
Layout shift. Google has an entire article [0] about why it's bad.
But as this is likely never going away, I made a Chrome extension [1] (5 lines of code) that gets rid of the box.
Though "auto-genned div starts with eob" seems unlikely to last forever as a reliable method (Google News recently changed the div naming structure as an example). has-text():nth-ancestor(n) would be more reliable but a slightly less performant rule.
Still more performant than misclicking your link. We are in the evolutionary battles era of the internet for a long time already. To open an article you usually have to click in a right place, scroll past the image, close the popup, close the popdown, scroll past blocked ads box and click on “read more” wrapper, ignoring that flashing “ask us a question” assistant, and when you move your pointer away from text, close another “wait don’t leave” popup. Worrying about a rule inefficiency is not sensible anymore.
A few months ago I almost rant about the same "people also search for" box on twitter but wanted to do my homework first. So I learned about layout shift, how google itself explains it's bad UX, also that it's not a new issue, complaints were made since at least 2019. In above link, Addy Osmani (from Google) replied he submitted an internal bug report to Google search (July 2020). So obviously Google knows about this but somehow decided not to fix the UX.
Nowadays we start having tools to detect and measure layout shift in the browser. So, when it happens that a layout shift replaces the element under the cursor just before a click is triggered, considering the typical reaction time of the user, it's not so hard to imagine what a good browser could do there. If the layout shift was not initiated by the user and we have a click triggered <100ms later, well, most probably they actually wanted to click on the thing that was previously there but that got displaced. But for the browser to notice this it would need some sort of record of the layout changes to know what was where and when. So another way could be to just ignore any user interaction for like, a second, on the elements affected by a layout shift after it happens. Would it be too harsh, break some websites? I don't know but I bet it would prevent a lot of those "misclicks"...
Also, "misclick" sounds like it's a user mistake but at this point I feel more like it's some sort of click hijacking where some js knowingly replaces your click target with another one once it's too late for you to stop your finger to actually trigger the click. There's no guarantee it will work for one specific user, but at scale, well, do some A/B testing to measure the average time to click on A and then setup B to replace the expected link target 50ms before to the average click happens, done! Pretty sure it wouldn't be so hard to optimize ;) (Ethical you say? Shuuuush!)
This is a website I've been working on for the last month.
I've run Lighthouse audits (performance, a11y, best practices, SEO, ...) + analyzed the used web technologies on the top 100k sites.
Then aggregated the averages of websites per each web technology.
You can sort technologies by the audit values or filter them by category, or see which technologies are often used together.
Few audits also include CrUX metrics (data from real Chrome users).
Keep in mind that these stats show values of the average website using a specific technology, not the technology itself.
The worst part is that it's not just random websites doing this, this can be found on most FAANG websites as well.