Объединение файлов CSS

CSSCSSCSS

Каждый файл CSS, который вы используете для своего веб-сайта, увеличивает скорость загрузки страницы. Иногда это неизбежно, однако в большинстве случаев вы можете объединить два или более файла CSS, используя только «copy and paste».

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

Поскольку все файлы CSS по умолчанию блокируют рендеринг, важно иметь как можно меньше файлов css.

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





WordPress и CSS

Вы должны обратить особое внимание на это руководство, если вы используете Wordpress. Практически каждая тема Wordpress имеет несколько загруженных файлов CSS. Если вы обнаружите, что это относится к вашему блогу, и вам удобно редактировать файлы, вы можете взять содержимое каждой из вызываемых таблиц стилей CSS и поместить их в основной файл CSS (тот, который вы часто используете, когда вы открываете «Внешний вид> Редактор» на панели инструментов). Просто не забудьте удалить вызовы для объединенного CSS.

Как объединить свой CSS

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

скопируйте содержимое одного файла css и вставьте его в другой, чтобы объединить их

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





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

Например, допустим, у вас есть три файла css...

  • main.css
  • other.css
  • third.css

В этой ситуации вы можете открыть свой «other.css», скопировать и вставить содержимое этого файла в «main.css».

Вы можете сделать то же самое и для «third.css».

Как только вы это сделаете, вы удалите вызов «other.css» и «third.css» из своего HTML. Теперь у вас есть только один файл CSS вместо трех, которые веб-браузер должен загрузить перед отображением вашей веб-страницы. Теперь ваша веб-страница будет загружаться быстрее.

порядок загрузки css

Другие темы по оптимизации CSS

Возможно, вы захотите оптимизировать доставку css в соответствии с рекомендациями Google 1 ...