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

Question

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

A) Обеспечить все CSS, используемый веб-сайт в одном (сжатый файл) B) обеспечивают CSS для того требует элементов на странице, которая в настоящее время просмотрены только

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

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

Есть ли что-нибудь (фундаментальное), которое мне здесь не хватает?

Answer 1

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

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

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

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

Answer 2

Что лучше?

1. Запись файла один CSS
2. Пишущие больше CSS файлы

Что лучше?

1. Tracking, сохраняя файл 1 CSS обновленный
2. Tracking, сохраняя больше CSS файлы обновлены

Что esier?

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

Что стоимость создания каждого отдельного файла CSS по сравнению с генерируя один глобальный файл CSS ,

Answer 3

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

Answer 4

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

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

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