Why do so many mobile versions of sites run worse on phone than desktop versions?

Because modern web is bloatware. Too much javascript, CSS, ads and cookie popups. A phone's hardware and internet speeds are generally not as fast as a desktop. So, it takes much longer to render on a phone.

Also, a lot websites nowadays deliberately make their mobile web experience shitty (cough ** reddit cough) to force their users to install their app.

Not every developer designs their site for mobile. Some design it for desktop, others for apps, some for phones.

At least some of it is shitty companies either neglecting to optimize or even outright sabotaging their own sites to try and force you to install their data harvesting app so they can sell more of your data for profit.

The rest is just lazy devs not optimizing because they're lazy and/or underpaid and overworked.

And the data harvesting app is nothing more than a stripped-down browser with the company's color scheme slapped on it.
Or a junior dev implemented it and somehow it passed code review. Then when it was tested by the dev on localhost, it ran great. Then when (if) it hit qa, it was ran on local servers and worked fine.

A lot of things slip through the cracks. That’s what hot fixes and patches are for. It happens.
- Bold of you to assume they even use QA
Seriously, fuck Instagram and Pinterest so much. I have those sites blocked from my searches permanently for just this reason.

You have to cram everything into a much smaller space while still having the whole thing be usable with much more clumsy touch inputs. Thos are serious limitations.

If 60% of the screen is taken up by some form of ad, that's a design choice not a technical hurdle.
- Well, there is your problem then. You're not using an adblocker.

When you're developing a site you have to decide whether to have a completely separate site for mobile (which is generally twice as much work for future site updates) or try to make one layout that adapts to both desktop and mobile (which tends to favor one or the other.)

It's really not that hard to make a single, responsive layout, but these fuckers just love cramming in the most unnecessary bs into their web experience.

And that is what makes it a problem.
- The trend when doing web-development since at least 2014 or so is mobile-first responsive design, which is basically as you describe, and it is really not that hard.
  
  You're right - the only reason that any regular website isn't performant is usually because it's chock full of bullshit. Most of the web is unfortunately riddled with a few problems:
  
  library bloat. The vast majority of developers (even outside of just web) will include a giant library for 1-2 functions instead of just writing it themselves. I don't really blame them, most of the incentive for development these days has little to do with building things well, but instead focuses on building them quickly. With web dev in particular, it's extremely common to import a few thousand npm packages from dubious sources.
  
  on the web especially, everything seems to be running 3-4 different tracker networks, ad tech bullshit, anti-adblock stuff, click/scroll/jackers, etc. I'd hazard a guess that the vast majority of the regular web, the content is less than half of the actual function of the site.
  
  It's also extremely common in web dev to use some cool kid toolset designed to recreate photoshop on the web to build a blog or whatever.

Ads maybe? Firefox + uBlock Origin might help with some sites that have ads for trackers.

I don’t find that to be true. What device are you using?

For example the mastodon app on iOS sucks ass.