Оптимизация скорости загрузки сайта. Объединение стилей (CSS).

28 августа 202028 авг 2020

1 мин

Привет Этой статьей открою серию публикаций по оптимизации скорости загрузки сайтов для последующего прохождения аудита у Pagespeed Insight, GTMetrix и иных инструментов, которые используются в такого рода работах. Итак, объединение стилей - что это и для чего нужно? Часто в шапке сайта можно наблюдать такую ситуацию: Стилей, как вы видите много, каждый из них - отдельная ссылка на уникальный файл. Из этого следует, что для того, чтобы сайт отображался как следует и как задумано должны быть прочитаны все эти файлы с их содержимым, а, т.к. каждый отдельный файл - это ссылка и определенный весь самого .css, то таким образом в данном случае мы загрузим 8 файлов общим весом в 64 кБ (эта статистика доступа в консоли DevTools браузера Chrome). Суть оптимизации стилей при работах в ускорении сайтов - это объединение и минификация (minify), т.е. мы должны склеить все файлы в один и сжать этот файл удалив все промежутки и комментарии (есть множество подобных сервисов). Каким образом это делаю я

Привет

Этой статьей открою серию публикаций по оптимизации скорости загрузки сайтов для последующего прохождения аудита у Pagespeed Insight, GTMetrix и иных инструментов, которые используются в такого рода работах.

Итак, объединение стилей - что это и для чего нужно?

Часто в шапке сайта можно наблюдать такую ситуацию:

Стилей, как вы видите много, каждый из них - отдельная ссылка на уникальный файл. Из этого следует, что для того, чтобы сайт отображался как следует и как задумано должны быть прочитаны все эти файлы с их содержимым, а, т.к. каждый отдельный файл - это ссылка и определенный весь самого .css, то таким образом в данном случае мы загрузим 8 файлов общим весом в 64 кБ (эта статистика доступа в консоли DevTools браузера Chrome).

Суть оптимизации стилей при работах в ускорении сайтов - это объединение и минификация (minify), т.е. мы должны склеить все файлы в один и сжать этот файл удалив все промежутки и комментарии (есть множество подобных сервисов).

Каким образом это делаю я:

1. Открываю VisualStudio Code

2. Копирую все файлы, которые требуется объединить в одну папку таким образом, чтобы к ним быстрый доступ.

в отдельной папке располагаются все стили, которые требуется объединить и минифицировать. При это обратить внимание, что некоторые из них уже минифицированы (приставка min в названии файла).

3. Создаю test.css - это файл, в котором будут объединяться все файлы.

4. Итак, приступим:

a) Первый файл - boostrap-datemepicker.min.css. Как мы видим он уже минифицирован. Копируем его содержание в "test.css". Рекомендую размещать полную ссылку или полное имя файла из которого вы забираете содержание, например,

на первой строке - имя файла из которого скопировано содержимое в общий файл стилей test.css

b) Второй файл списка - bootstrap.min.css. Оставляем одну строку между содержимым для более удобного чтения файла и на строке 5 размещаем содержимое bootstrap.min.css. Что получается:

c пятой строки начинается название и содержимое файла bootstrap.min.css

c) Проделываем такие действия со всеми файлами из папки. Те файлы, которые требуют сжатия - сжимаем онлайн сервисами (например, https://cssminifier.com/)

d) Когда общий файл стилей test.css готов мы готовы прописать его вместе всех иных стилей шапки. Таким образом копируем test.css на ваш сайт в папку где лежат все остальные (или основные стили). Прописываем путь до этого файла в шапке сайта, остальные файлы стилей комментируем.

e) Сохраняем изменения, если необходимо, то чистим кэш сайта. Результатом должно быть то, что во вкладке DevTools у нас располагается 1 стилевой файл test.css, т.о. мы создаем один запрос вместо 8, а общий размер файла будет меньше, т.к. мы минифицировали все стили перед тем как копировать в test.css ранее.