Производительность, обслуживать все CSS сразу или как нужно?

Question

Насколько я знаю, в наши дни есть два основных метода, используемых для включения CSS в веб-сайт.

A) Предоставить весь CSS, используемый сайтом в одном (сжатом) файле Б) Предоставить CSS для требуемых элементов на странице, которая в настоящее время просматривается только

Позитивы для A: весь CSS, используемый на сайте, кэшируется при первом посещении через 1 http-запрос
Отрицательные для A: если это большой файл, для начальной загрузки потребуется много времени

Положительные значения для B: более быстрое время начальной загрузки
Минусы для B: больше HTTP-запросов, больше файлов для кэширования

Есть что-нибудь (фундаментальное), что я здесь упускаю?

Answer 1

Профиль. Это зависит от того, как ваши пользователи используют ваш сайт.

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

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

Вы не можете сказать, не глядя на то, что на самом деле делают пользователи.

Answer 2

Даже большой файл CSS, gzipped, крошечный по сравнению со многими другими вещами (такими как изображения, фильмы и т. Д.), Которые загружаются. Единственная реальная причина разбить CSS на отдельные файлы - это поменять специальные правила, чтобы заставить определенные браузеры вести себя (я смотрю на вас, IE).

Answer 3

A или B не существует, это всегда компромисс между ними. Например: вы хотите, чтобы главная страница загружалась как можно быстрее, поэтому вы запрашиваете только то, что необходимо. Для следующих страниц вы запрашиваете оставшиеся CSS. Всего 2 запроса.

По сути, вы создаете пакеты / группы связанных CSS. Динамически комбинируя и сжимая эти пакеты, вы можете создать поддерживаемую структуру файлов. Это также позволяет вам экспериментировать с наилучшим сочетанием скорости, производительности, запросов и пропускной способности ...

Вся эта история также применима к файлам JavaScript, поскольку могут быть достигнуты те же компромиссы.

Answer 4

Что лучше?

1. Написание одного файла CSS
2. Написание большего количества CSS-файлов

Что лучше?

1. Отслеживание, обновление 1 файла CSS
2. Отслеживание, обновление новых css-файлов

Что сложнее?

1. Принятие решения, что вставить в один файл CSS
2. Решение, что поместить в каждый из ваших CSS-файлов

Сколько стоит создание каждого отдельного файла CSS по сравнению с созданием одного глобального файла CSS.