Играет ли ролько количество media на загрузку страницы?

Question

[Елена]

Если в проекте много media, которые не отрабатывают, например

@media (max-width: 400px) {
  .main {
    font-size: 22px;
  }
}

когда разрешение больше 400px это влияет на загрузку или нет?

Answer 1

[ForSureN1]

Ну для этого достаточно посмотреть на размер файла который загрузился при открытии страницы, и посмотреть сколько весит файл в папке, если они ==, то все грузится сразу, да и было бы как минимум странно, если бы стили подгружались после изменения экрана..

Comments

[Елена]

ForSureN1 я отталкивалась от того, что это же функция, которую надо же проверить, если их будет 20к, браузеру надо каждую проверить, подходит или нет. Вес то не изменится, стили же не загрузятся

[ForSureN1]

Елена, Так браузер сначала грузит файл, а потом отдает клиенту, и грузит он его сразу весь
P.S. если стили очень много весят, и так же присутствует различного рода анимации, которые требуют некоторого времени загрузки, то думаю стоит ставить прелоадер на сайт, чтобы пользователь не смотрел на пустой экран пока это все прогрузится, а залипал на прелоудер

[Елена]

ForSureN1, поняла. Теперь бы еще понять, есть ли смысл удалять баласт из медиа, которых около 6 тыс в проекте)

[Вадим]

Елена, https://developer.mozilla.org/ru/docs/Web/Performa...

[ForSureN1]

Елена, Само собой имеет, это же все влияет на загрузку сайта, и медиа запросы считаются вроде как самыми тяжелыми для загрузки, поэтому чем их меньше, тем лучше, рефакторить css можно до бесконечности

[Вадим]

Елена,

есть ли смысл удалять баласт

Всегда
P.s. ну кроме пет проектов