Минимизировать css: Минимизировать CSS Tool — Сжатие CSS таблицы стилей онлайн

Минимизировать CSS Tool — Сжатие CSS таблицы стилей онлайн

О CSS Minifier?

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

Минификация против Gzipping

Gzipping является процедура так же, как минификация, которые могут помочь вам уменьшить размер ваших кодов, однако, это две разные вещи, которые служат той же цели. Обе эти практики применяются к активам на вашем сайте, такие как .css и .js файлы, уменьшая размер файла и делают его более эффективным для навигации по сети между браузерами и серверами.

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

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

CSS Minifier поможет вам в

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

Почему вы должны использовать наш CSS Minifier?

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

Как использовать CSS Minifier инструмент?

Минификация в CSS, используя наш бесплатный и простой в использовании CSS инструмент Minifier очень просто. Все, что вам нужно сделать, это скопировать и вставить код CSS в текстовом поле и нажмите на зеленую кнопку с надписью «Отправить». CSS Minifier с возвращением вам результаты в течение нескольких секунд.

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

Другие языки: English, русский, 日本語, italiano, français, Português, Español, Deutsche, 中文

Что такое минификация CSS и как ее сделать

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

Что такое минификация кода?

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

Минификация позволяет значительно сократить количество строк кода в разметке или скриптах. Под раздачу попадает буквально все, что делает жизнь программистов легче, повышая читаемость кода: пробелы, переносы строк, дополнительные запятые и т.п. Ведь программе все эти «приспособления» не нужны. Компьютер спокойно читает огромный поток кода без каких-либо опознавательных знаков, необходимых человеку.

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Зачем минифицировать код?

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

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

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

Разница между компрессией и минификацией

Процесс минификации – это целый комплекс мер по удалению символов в коде и изменению названий переменных. То есть непосредственное влияние на содержимое файлов со стилями.

Компрессия – это методика сокращения размера файлов со стилями до того, как они будут «доставлены» в браузер пользователя. Что-то в духе архивирования файлов перед отправкой их другим людям по электронной почте или до отправки файлов в облачное хранилище. 

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

Как минифицировать CSS?

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

Далее рассмотрим несколько наиболее популярных методов минификации CSS-кода. 

При помощи npm-плагинов

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

• CSSNano – это расширение для популярного пакета PostCSS, позволяющего значительно расширить возможности базовых файлов стилизации благодаря дополнительным функциям и модулям, в разной степени меняющих контент в CSS. На базе PostCSS работают почти все CSS-фреймворки, и CSSNano не стал исключением. Чтобы его установить, нужно ввести команду npm install cssnano, затем установить postcss и в конфигурационном файле прописать параметры для CSSNano. Подробнее о них можно узнать на официальном сайте cssnano. 
• CSS-Minify – это независимая сторонняя утилита, которая может работать без привязки к сторонним приложениям. То есть можно просто установить CSS-Minify и не думать о настройке параметров в условном PostCSS. Чтобы воспользоваться этой программой, вводим в командную строку команду npm install css-minify -g (она установит утилиту на ПК). Потом вводим команду css-minify -f [путь до файла со стилями]. Довольно просто.

Плагины в составе упаковщиков

Описанный выше процесс можно частично автоматизировать, если подключить установленные ранее плагины к бандлерам. Бандлер (или упаковщик) – это специальный комплекс программ, позволяющий каким-либо образом перерабатывать весь код, что хранится в вашем проекте. 

Один из таких упаковщиков – Webpack. С его помощью можно разрозненные JavaScript-, HTML- и CSS-файлы собрать в единый проект, уже минимизированный и готовый к прочтению любыми браузерами. Процесс обработки сайтов называется компиляцией и включает в себя много этапов. Причем многие из них можно добавить в Webpack самостоятельно, установив модули вроде MiniCssExtractPlugin, postcss-loader и т.д. 

Чтобы использовать сторонние плагины для минификации CSS внутри Webpack, необходимо ознакомиться с официальной документацией программы и научиться корректно настраивать конфигурацию webpack. config.js.

С помощью онлайн-сервисов

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

Minify

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

CSS Minifier 

Аналогичный минификатор. Отличается от вышеописанного только возможностью минифицировать другие виды языков.

Minify Code

Схожий инструмент со слегка измененным интерфейсом. Более логичный в плане управления.

С помощью CDN-серверов

Некоторые хостинг-провайдеры, помимо размещения приложения на конкретном сервере, предлагают целую серию CDN-площадок (дополнительных серверов, которые сохраняют кэшированные версии вашего сайта и сильно ускоряют их «доставку» пользователям). На этих CDN-площадках иногда работают минификаторы и компрессоры, позволяющие без редактуры основного кода проекта (не используя минификаторы и прочие обработчики непосредственно в коде сайта или приложения) отправлять переработанные стили посетителям страницы. Грубо говоря, вам не придется делать какую-то дополнительную работу, а пользователи получают сжатый контент, который быстрее загружается. 

Tailwind и другие фреймворки

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

Похожим образом поступают бойлерплейты (шаблоны) в духе Bootstrap или Bulma. Они помогают писать код, используя человекоудобный синтаксис, а на этапе запуска на сервере предоставляют компьютеру уже видоизмененные данные. Про Tailwind я уже писал более подробно. 

Удаление ненужного CSS-кода

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

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

Подробно о том, как удалить неиспользуемый CSS-код, я писал ранее. 

Ручная минификация

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

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

Вместо заключения

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

Как минимизировать CSS и ускорить работу вашего веб-сайта

Когда вам нужно ускорить работу вашего веб-сайта, вы можете услышать предложения по минимизации CSS. Ни для кого не секрет, что CSS — это удобный инструмент, который владельцы веб-сайтов могут использовать для точного оформления страниц и контента, но слишком много его может иногда вызывать проблемы со временем загрузки страницы. Большие CSS-файлы могут перегрузить ваш сайт при чрезмерном использовании, снизить производительность и отправить посетителей в другое место.

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

Один из лучших? Как вы уже догадались — выбор минификации (и да, это отличается от принятия решения о сжатии CSS!).

Что такое минимизация CSS?

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

Итак, что именно мы подразумеваем под «ненужным кодом»? В CSS (и большинстве других языков программирования) разработчики внедрили передовые методы форматирования и синтаксиса, чтобы сделать код более удобочитаемым для людей. Они эффективно повышают производительность, помогают в отладке и упрощают поддержку кода CSS. Но они дополнительные, потому что браузеру и целевой платформе они не нужны для запуска.

Рассмотрим CSS в примере ниже:

 
 /* элементы заголовка */ 
 body { 
     color: #33475b 
 } 
 
 h2 { 
     font-size: 2rem; 
     вес шрифта: 700; 
     line-height: 2,75 rem 
 } 
 
 h3 { 
     font-size: 1,625 rem; 
     вес шрифта: 700; 
     line-height: 2,25 бэр 
 } 
 
 h4 { 
     размер шрифта: 1,5 бэр; 
     вес шрифта: 500; 
     line-height: 2. 125rem 
 } 
 
 /* другие элементы */ 
 
 p, span { 
     font-size: 1rem; 
     вес шрифта: 400; 
     line-height: 1,75rem 
 } 
 
 blockquote { 
     font-size: 1.5rem; 
     вес шрифта: 400; 
     line-height: 2,375rem 
 } 
 
 ol, ul { 
     list-style: none 
 } 
 
 table { 
     border-collapse: свернуть; 
     border-spacing: 0 
 } 
 
 кнопка { 
     внешний вид: нет; 
     шрифт: унаследованный; 
     margin: 0 
 } 
 
 

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

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

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

Вот как выглядит приведенный выше пример CSS после минимизации:

 
 body{color:#33475b}h2{font-size:2rem;font-weight:700;line-height:2.75rem}h3{font-size: 1.625rem; вес шрифта: 700; высота строки: 2,25 rem} h4 {размер шрифта: 1,5 rem; вес шрифта: 500; высота строки: 2,125 rem} p, span {размер шрифта: 1 rem; шрифт- вес: 400; высота строки: 1,75 рем} блок-цитата {размер шрифта: 1,5 рем; вес шрифта: 400; высота строки: 2,375 рем} ol, ul {стиль списка: нет} таблица {граница-коллапс: свернуть ;border-spacing:0}button{внешний вид:none;шрифт:inherit;margin:0} 
 

Это менее читаемо для нас, но выглядит (и работает) так же для компьютера. И лучшая часть? Это поможет вашему веб-сайту улучшить взаимодействие с пользователем, повысив скорость загрузки, чтобы порадовать посетителей. Как маркетолог, это всегда ваш главный приоритет.

Минификацию можно применять и к другим языкам. Например, HTML и JavaScript, два других основных языка Интернета, также следуют соглашениям о визуальном форматировании и могут быть минимизированы.

Почему вы должны минимизировать CSS?

Владельцы веб-сайтов в основном выбирают минимизацию CSS для увеличения скорости страницы. Основной принцип прост: чем меньше кода нужно обработать, тем меньше времени потребуется для загрузки веб-страницы. Это позволяет радовать посетителей сайта быстрой загрузкой. Почти 70% потребителей утверждают, что скорость загрузки страницы влияет на их готовность совершить покупку в интернет-магазине.

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

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

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

В духе прозрачности минимизация CSS не мгновенно сделает ваш сайт чрезвычайно быстрым. Но вероятность отскока увеличивается на 32% с 1 секунды до 3 секунд времени загрузки. Любое незначительное улучшение производительности может быть разницей между посетителем, решившим остаться или уйти. Более быстрые страницы также улучшают удобство использования для мобильных посетителей. По состоянию на июнь 2022 года более 61 % трафика веб-сайта поступает с мобильных устройств, поэтому это может существенно повлиять на успех вашего сайта.

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

В чем разница между сжатием и минимизацией CSS?

Знаете ли вы, что принятие решения о сжатии CSS отличается от минимизации? Хотя кажется, что минимизация и сжатие CSS — это два синонимичных термина, это два разных понятия. Между ними есть некоторое сходство — оба имеют дело с оптимизацией производительности, которая в конечном итоге приводит к уменьшению размера.

Однако минимизация включает изменение содержимого кода. Как вы знаете, он работает путем удаления ненужного форматирования, символов и пробелов. Результат — меньше символов. Напротив, сжатие может не изменить само содержимое кода. Вместо этого размер файла уменьшается за счет его сжатия перед предоставлением браузеру по запросу.

Как минимизировать CSS

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

Онлайн-инструменты для минимизации

Независимо от того, хотите ли вы минимизировать CSS (или HTML, или JavaScript), несколько веб-сайтов могут помочь вам бесплатно. Некоторые популярные варианты включают минимизатор CSS и инструменты Дэна.

Эти веб-сайты просты в использовании и работают одинаково. Просто вставьте отформатированный CSS, переключите любые доступные параметры, и веб-сайт выведет уменьшенную версию. Затем скопируйте и вставьте его в свой файл, и та-да! Вы успешно минимизировали CSS.

Источник изображения

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

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

Инструменты командной строки

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

Один из вариантов — использовать пакет npm для минимизации CSS. Если на вашем компьютере уже установлен npm, вы можете загрузить пакет css-minify с помощью команды:

 
 npm install css-minify -g 
 

Затем вы можете минимизировать один файл с помощью команды:

 
 css-minify --file имя файла 
 

… где имя файла — это расширение вашего файла, заканчивающееся расширением .css . Или уменьшите все файлы CSS внутри каталога с помощью команды:

 
 css-minify -d sourcedir 
 

… где sourcedir — это имя каталога. Все мини-файлы CSS хранятся в каталоге с именем 9.0148 css-dist по умолчанию. Вы можете указать другой каталог назначения с помощью команды:

 
 css-minify -d sourcedir -o distdir 
 

В качестве альтернативы вы можете попробовать пакет minify, который работает на нескольких языках кодирования — HTML, CSS и JavaScript.

CDN

Используете ли вы сеть доставки контента (CDN)? Если это так, эти сервисы могут минимизировать файлы вашего веб-сайта. Это происходит до того, как они отправят их в браузеры. Преимущество метода CDN заключается в том, что это самый простой способ минимизации. Поскольку процесс становится работой вашей CDN, он не повлияет на ваши исходные файлы, хранящиеся на исходных серверах.

Плагины WordPress

Запустить сайт WordPress? Плагины оптимизации могут минимизировать ваш код, например W3 Total Cache, Hummingbird и Autoptimize. Все эти плагины не требуют кода и просты, позволяя оптимизировать файлы, изображения и многое другое на вашем сайте одним нажатием нескольких кнопок.

Инструменты сборки программного обеспечения

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

Сократите свой CSS для лучшего взаимодействия с пользователем.

Нам нравится слово «минификация» — оно заставляет вас звучать как сумасшедший ученый, направляющий уменьшающий луч на ваш громоздкий код. И вашим посетителям это тоже понравится, так как это дает им лучший опыт и более плавную навигацию по вашему сайту. И возвращается довольный гость.

Не поймите нас неправильно, CSS великолепен. Без него Интернет был бы довольно скучным местом. Но хороших вещей может быть слишком много, и слишком много CSS может в конечном итоге замедлить работу ваших страниц и повредить пользовательскому опыту. Минимизация CSS — это полезный обходной путь, который экономит всем время, не влияя на ваш рабочий процесс или содержимое страницы.

Этот пост был первоначально опубликован в ноябре 2021 года и обновлен для полноты информации.

Minify CSS — разработчики Chrome

Minify CSS

Опубликовано Четверг, 2 мая 2019 г. • Обновлено на в пятницу, 29 мая, 2020

Перевод: Español, на Таблице Español, Портсоилу.

• Как минимизация файлов CSS может повысить производительность
• Используйте минимизатор CSS для минимизации кода CSS
• Stack-specific guidance
  • Drupal
  • Joomla
  • Magento
  • React
  • WordPress
• Resources

The Opportunities section of your Lighthouse report lists all unminified CSS files, along with the potential savings in kibibytes ( КиБ), когда эти файлы минимизированы:

# Как минимизация файлов CSS может повысить производительность

Минификация файлов CSS может повысить производительность загрузки вашей страницы. Файлы CSS часто больше, чем нужно. Например:

 /* Фон заголовка должен соответствовать цветам бренда. */ 
 h2 { 
 background-color: #000000; 
 } 
 h3 { 
 background-color: #000000; 
 } 

Можно уменьшить до:

 h2, 
 h3 { 
 background-color: #000000; 
 } 

С точки зрения браузера эти два примера кода функционально эквивалентны, но во втором примере используется меньше байтов. Минификаторы могут дополнительно повысить эффективность использования байтов за счет удаления пробелов:

 h2, 
 h3 { 
 цвет фона: #000000; 
 } 

Некоторые минификаторы используют хитрые приемы для минимизации байтов. Например, значение цвета #000000 может быть сокращено до #000 , что является его сокращенным эквивалентом.

Lighthouse оценивает потенциальную экономию на основе комментариев и пробелов, найденных в вашем CSS. Это консервативная оценка. Как упоминалось ранее, минификаторы могут выполнять разумную оптимизацию (например, уменьшать #000000 9от 0259 до #000 ), чтобы еще больше уменьшить размер файла. Таким образом, если вы используете минификатор, вы можете увидеть большую экономию, чем сообщает Lighthouse.

# Используйте минимизатор CSS для минимизации кода CSS

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

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

Узнайте, как минимизировать код CSS в Minify CSS.

# Руководство по стеку

# Drupal

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

# Joomla

Ряд расширений Joomla может ускорить ваш сайт за счет объединения, минимизации и сжатия стилей CSS.