Когда люди посещают ваш сайт, они ожидают, что каждая веб-страница будет загружаться быстро. Если загрузка займет слишком много времени, люди покинут ваш сайт и увидят, что могут предложить ваши конкуренты.
Это может показаться таким маленьким, но важно, чтобы посетители вашего сайта были заинтересованы. Это помогает превратить их из посетителей в потенциальных клиентов, а затем из потенциальных клиентов в клиентов.
Вы также хотите, чтобы люди находили ваш сайт в поисковых системах, верно? У Google есть много разных критериев того, как он определяет, где ваш сайт появляется в рейтинге.
Скорость сайта является одним из таких критериев.
Есть много вещей, которые вы можете сделать, чтобы увеличить скорость загрузки вашего сайта. Это включает в себя оптимизацию ваших файлов, включая изображения, CSS и JavaScript, чтобы они были как можно меньше.
Вы можете оптимизировать свой CSS, свернув его, Если это более технически, вы можете сделать это вручную. Если вы считаете себя нетехническим, есть плагины WordPress, которые минимизируют CSS для вас: Некоторые из лучших плагинов для минимизации WordPress перечислены ниже.
Что и почему с Minify CSS 🔍
Ваша таблица стилей CSS представляет собой текстовый файл. Как и во всех других файлах, он имеет определенный размер файла. Это может быть как пять килобайт, так и несколько мегабайт.
Минимизация CSS помогает сохранить размер файла как можно меньше.
Если вы когда-либо видели типичный файл CSS, вы увидите, что есть много пустых мест и комментариев. Это хорошо для разработчиков, потому что помогает сохранять все организованным и читабельным. Он хорошо вам подходит при разработке кода, потому что помогает вам работать более эффективно и результативно.
Тем не менее, пробел и комментарии не нужны для фактической работы на сайте. Все, что вам нужно, это сами CSS-команды.
Например, у вас может быть оглавление в верхней части вашего CSS-файла, которое выглядит следующим образом:
/ * ——————————
>>> СОДЕРЖАНИЕ:
———–
# Нормализовать
# типографика
# Предметы
# Формы
# Навигация
# Дизайн
## Ссылки
## Меню
—————————— * /
Тем не менее, это оглавление не требуется для правильной работы реального веб-сайта. Это просто помогает вам поддерживать порядок при разработке кода.
Ничего между / * и * /, начиная и заканчивая комментариями, не требуется на живом веб-сайте. Их наличие просто увеличивает размер файла.
Теперь давайте возьмем следующее Блок CSS, который не является комментарием и необходим для правильной работы сайта:
html {
семейство шрифтов: без засечек;
-webkit-text-size-Adjust: 100%;
-ms-text-size-Adjust: 100%; }
Все разрывы, разрывы и разрывы строк не являются необходимыми для фактической работы сайта. Они просто делают код более читабельным для разработчиков.
Теперь давайте посмотрим, как выглядит этот свернутый CSS:
html {font-family: sans-serif; -webkit-text-size-Adjust: 100%; – ms-text-size-Adjust: 100%}
Все ненужное для работы сайта удаляется, и ваш размер файла будет намного меньше, Меньший размер файла = быстрое время загрузки.
Обновление контента
Бесплатный веб-сайт Speed EBook
[4 страницы] 12-ступенчатый контрольный список для
Достигнуть времени зарядки менее 1 секунды
скачать
Способы минимизации CSS для разработчиков и пользователей 🖊️
Если вы не профессиональный разработчик, то вы все еще можете минимизировать CSS простыми и удобными способами, Если вы устанавливаете WordPress и настраиваете плагины для других, или если вы являетесь пользователем, который создал ваш сайт, вы можете воспользоваться преимуществами, предлагаемыми минимизацией CSS.
Если вы когда-либо вносите какие-либо изменения непосредственно в ваш файл CSS, убедитесь, что всегда иметь незагрязненную копию, Попытка отредактировать свернутый файл CSS – невероятная и ненужная головная боль.
Поэтому, если вы минимизируете свой CSS в первый раз, обязательно сохраните его непроизведенную копию.
Онлайн инструменты
Вы можете использовать онлайн-инструменты для минимизации CSS. Ограничитель CSS от Dan's Tools позволяет вам скопировать и вставить свой CSS в текстовое поле и нажать кнопку, чтобы свернуть его.
У Jakub Pawlowicz есть инструмент, который позволяет вам загружать ваш CSS-файл в минификатор.
Плагины для WordPress
Плагины WordPress также могут помочь вам минимизировать CSS. WP Super Minify является самым обновленным плагином и совместим с последней версией WordPress на момент написания этой статьи.
Я нашел несколько других плагинов, но не все они были обновлены по крайней мере за год, и они не показывают совместимость с последней версией WordPress. Поэтому я не могу их рекомендовать.
Способы свести к минимуму CSS для разработчиков
Если вы профессиональный веб-разработчик, есть два основных способа легко минимизировать ваш CSS.
Красота задач гонщиков
Брокеры задач помогают автоматизировать многие задачи, которые необходимо выполнить, чтобы вы могли выполнять свою работу более эффективно. Грант и Гулп – два самых известных брокера задач. У Grunt есть пакет, который минимизирует CSS, и Gulp тоже. Я использую Gulp в своем собственном рабочем процессе, и Gulp Clean CSS работает довольно хорошо для меня.
Если вы используете препроцессор CSS, такой как SASS или LESS, то у вашего исполнителя задач, вероятно, будет отдельный модуль для компиляции CSS. Вы можете использовать модуль minifier вместе с ним.
Например, это основной код, который я использую в своем основном файле Gulpfile.
Использование препроцессора CSS
Если вы используете SASS или LESS и не используете брокер задач, тогда ваш компилятор также должен иметь возможность минимизировать CSS. До открытия Gulp я использовал Compass в качестве компилятора SASS. В файле Compass config.rb вы можете просто установить параметры вывода на сжатый. Ваши файлы SASS останутся несжатыми, а скомпилированный CSS будет свернут.
Если вам не нравится командная строка и вы предпочитаете использовать инструменты разработки на основе графического интерфейса, такие как CodeKit, вы можете установить вывод «сжатый» или «компактный» или любой другой параметр.
Тест улучшения скорости страницы
Если вы хотите знать, насколько минимизация CSS ускоряет ваш сайт, вы можете использовать инструмент для быстрого тестирования. Вам следует попробовать различные инструменты тестирования, чтобы увидеть, какие отзывы вам дают. Три инструмента, с которых вы можете начать:
Помимо минимизации CSS, эти сайты предоставят вам рекомендации по улучшению времени загрузки страницы.
Обновление контента
Бесплатный веб-сайт Speed EBook
[4 страницы] 12-ступенчатый контрольный список для
Достигнуть времени зарядки менее 1 секунды
скачать
Теперь идти вперед и минимизировать!
Минимизация CSS может принести вам большие преимущества, особенно когда речь идет о том, чтобы держать посетителей на вашем сайте. Задача минимизации CSS не должна быть сложной со всеми доступными инструментами. Как только вы примените это на практике, вы можете добавить другие методы, чтобы ваш сайт загружался быстрее.
Превратите свой сайт в демона скорости, по одной методике оптимизации за раз!
SaveSave
