Если у вас есть страница, на которой подключаются файлы стилей с разными медиазапросами:
<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
то будут загружены все css-файлы, даже если они не будут матчиться на текущее значение media. На первый взгляд это может показаться избыточным: зачем скачивать стили, предназначенные для небольших дисплеев, если я просматриваю страницу на большом экране?
В этом нет ошибки. Cтраницы отображаются в динамичной среде. Вы можете изменить размер браузера или перенести окно с одного монитора на другой с другим разрешением и плотностью пикселей, поэтому браузеры скачивают все стили для несматченных медиавыражений с низким приоритетом. Более того, браузеры должны загружать стили для невалидных media queries в соответствии с правилами игнорирования, описанными в спецификации.
#css #mediaqueries #performance
https://blog.tomayac.com/2018/11/08/why-browsers-download-stylesheets-with-non-matching-media-queries-180513