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.
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.
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.
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.
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.
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.
I think some of the web frameworks people use are converting the desktop site into a mobile layout by applying additional CSS and layers ontop of it that makes it more inefficient.
If done well this isn't a noticeable performance impact. CSS is blazingly fast and even mobile devices can handle thousands of rules essentially instantly... sometimes, however, modern web frameworks use Javascript to either dynamically rewrite rules or, worse even, manually apply different styles to individual elements based on page width.
Also, react is a bloated piece of shit that can make any page take forever to load on a 3g or lower connection... and it's extremely popular.