With most traffic coming from mobile devices and therefore small screens, are there any websites that have put “desktop” styles in a separate file and only load it, if the media query matches?
Something like this?
<link
href="big-screens.css"
media="(min-width: 800px)"
>
This would remove render blocking by desktop styles when mobile devices visit the website. They are still being downloaded, but don’t block the time to first paint.
I don’t know any websites that do this yet, but maybe I just haven’t found them?