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

Question

[Test Test]

Добрый день. Хотел спросить, влияет ли на скорость загрузки страницы, если в стилях прописано много маленьких media, вместо, например, двух больших?

Comments

[Сергей delphinpro]

Очевидно, что множество media содержат больше символов, и результирующий CSS файл получается больше. Отсюда следует, что в абсолютных единицах при прочих равных условиях файл со множеством media будет загружаться дольше. :)

[Nikolay Talanov]

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

[Test Test]

Nikolay Talanov: как раз 10 000 строк в css-файле... но есть минификация этого файла.

[Nikolay Talanov]

Nikolay Talanov: Естественно подразумевается что css должен быть минифицирован на продакшене.

[Test Test]

Nikolay Talanov: ну в моем случае подойдет вариант с множеством media?

[Nikolay Talanov]

Евгений Полевов: В общем про увеличение размеров самого файла уже написали выше. Но тут любому понятно, что речь идет о крупицах, в сравнении с картинками/большими либами. Тем более если css минифицирован.
Касательно скорости парсинга ссылок на статьи сейчас не найду, но могу с 95% уверенностью сказать что разница в скорости парсинга между 5к и 10к строк стилей, допустим, будет составлять менее 10-15мс (если конечно у вас там не используются селекторы с 5+ уровнями вложенностями, node-tag'ами на конце и прочими жуткими вещами в больших количествах).

[Test Test]

Nikolay Talanov: Хорошо, спасибо за информацию!

[Nikolay Talanov]

Евгений Полевов: Я сам использую множественные media, проблем и угрызений совести не испытываю.

[Test Test]

Nikolay Talanov: напишите ниже в ответы, я поставлю вам решение.

Answer 1

[ummahusla]

Как насчёт того чтобы открыть F12 в Chrome и открыть Network таб и посмореть, как долго будет загружатся сайт с 10 или 2 стилями.

Comments

[Test Test]

нету такой возможности сейчас взять и переписать весь проект в 2 media.