Js минимизация: Как работают сжиматели JavaScript

Содержание

Минификация (minification) в языках программирования: что это

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

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

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

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

Это не значит, что код нужно намеренно делать непонятным. В реальных проектах CSS и JS обычно существуют в двух версиях. Первая — версия разработчиков, подробная и ясная, со структурой отступов и наглядными именами переменных. Вторая — минимизированная, с названием, которое традиционно заканчивается на .min.css или .min.js — это договоренность между разработчиками про общие для всех названия.

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

Курс Уверенный старт в IT Поможем определить подходящую вам IT-профессию и освоить её с нуля. Вы на практике попробуете разные направления: разработку на разных языках, аналитику данных, Data Science, менеджмент в IT.

Это самый подходящий курс для построения карьеры в IT в новой реальности.

Подробнее

Минификацией занимаются специальные программы. Они называются минификаторы (minifier) или минимизаторы и могут быть написаны на JS, PHP или другом языке. Такая программа получает на вход код и преобразует его по определенным правилам:

названия переменных сокращаются до одного символа;
переносы строк удаляются;
пробелы и запятые между словами, если они не несут смысла, тоже удаляются;
названия цветов и других сущностей упрощаются;

похожие и одинаковые действия могут объединиться;
комментарии в коде удаляются.

Минимизация — это не сжатие. В процессе не происходит компрессии и изменения формата — только редактирование кода. Минифицированный код — это все еще CSS или JS, написанный «портянкой», непонятный для человека, зато короткий и легковесный.

Минификация происходит перед загрузкой на сервер. До этого в ней просто нет смысла. Если код пока в процессе написания и разработчик запускает его только для тестирования, он работает с «полной» версией. На этом этапе человекопонятность важнее скорости.

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

Существуют программы для ручной минификации. Это обычно веб-сервисы: в поле для ввода текста надо загрузить код и нажать на кнопку Minify. После этого самостоятельно скопировать минифицированный код и сохранить его в файл.

Есть и программы, которые называют таск-менеджерами, — они предназначены для автоматизации рутинных задач разработки. Известный таск-менеджер для веба называется Gulp. После настройки и привязки к проекту он способен автоматически минифицировать код. Разработчик вводит команду в консоль, Gulp получает ее и выполняет целый комплекс действий:

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

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

Программ-минификаторов много. Можно открыть любую подходящую, скопировать туда код и нажать на кнопку минификации. Скрипт автоматически минифицирует CSS или JavaScript и покажет, сколько памяти удалось сохранить. Нужно скопировать из окна минифицированный код, вставить его в файл с окончанием .min.css или .min.js и сохранить. Затем минифицированный файл останется подключить к HTML-странице. Это занимает меньше пяти минут.

Автоматическая минификация сложнее: понадобится разобраться с Gulp или другим похожим инструментом и настроить его. Зато потом все действия будут выполняться без участия пользователя.

Курс Frontend- разработчик PRO Получите перспективную творческую профессию и знания уровня middle. Вы изучите JavaScript и TypeScript. За время обучения вы выполните 5 проектов на JavaScript и получите 13 проектов в портфолио.

Подробнее

Минимизация Javascript кода и CSS с помощью Microsoft Ajax Minifier / Хабр

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

Один из способов борьбы с лишними байтами – сжатие данных на сервере и передача gzip’ированного потока браузеру, который уже распаковывает его во время отрисовки страницы. Обсуждение данного способа не входит в данную статью. Я бы хотел рассказать о способе уменьшения данных с помощью удаления всех незначащих символов из сопутствующих веб-странице файлов: JavaScript и CSS – минимизации.

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

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

16-го февраля 2010-го Microsoft выпустили четвёртую версию своей утилиты под названием Microsoft Ajax Minifier, задача которой упростить и автоматизировать трансформацию читабельных файлов JavaScript и CSS – в минимизированный формат. Эта утилита может применяться как из командной строки или из собственной программы на языке .NET (не входит в данную статью), так и с помощью системы MSBuild при разработке в Microsoft Visual Studio (я работаю с VS 2008).

После установки пакета Microsoft Ajax Minifier появляется возможность добавить задачу для MSBuild’а в проекты, созданные на основе встроенных веб-проектов, например ASP.NET Web Application. Сайты, добавленные в студию как Web site – не подходят, так как не обладают .

proj файлом, в котором устанавливаются задачи MSBuild’а.

Выбрать пункт Unload Project в контекстном меню проекта сайта.
В контекстном меню уже отгруженного проекта выбрать Edit project name; Visual Studio отобразит файл *.proj для редактирования.
Прописать следующий код внутри тега <Project>:
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks"/> <Target Name="AfterBuild"> <ItemGroup> <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js"/> </ItemGroup> <ItemGroup> <CSS Include="**\*.css" Exclude="**\*.min.css"/> </ItemGroup> <AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=". min.js" CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css"/> </Target> * This source code was highlighted with Source Code Highlighter.
Пункт контекстного меню данного проекта Reload Project – возвратит сайт в лоно Visual Studio и, теперь, можно сделать Build (или Rebuild) для проверки работоспособности.
Важно заставить студию отображать файлы, не включённые в проект (меню Project, Show All Files).
Также важно нажать на Refresh после компиляции проекта, иначе студия не покажет минимизированные файлы, добавленные задачей MSBuild’а.

Если нигде не закралась ошибка – минимизированные файлы будут отображены в файловой структуре проекта как не принадлежащие данному проекту. Выбор включать ли их проект – за вами. Поскольку я просто копирую файлы с компьютера разработчика на FTP – сгенерированные файлы у меня в проект не включены.

Для тех, кто не знаком с языком MSBuild’а – краткое пояснение п. 3:

Для включения новых задач, установленных вместе с Microsoft Ajax Minifier
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks"/>* This source code was highlighted with Source Code Highlighter.
Объявление задания, запускаемого после успешного компилирования проекта
<Target Name="AfterBuild">* This source code was highlighted with Source Code Highlighter.
Декларирование групп файлов, над которыми мы хотим произвести трансформацию – минимизировав их. Теги <JS> и <CSS> – название групп файлов. Эти названия определяются вами, можно написать <JS> или <JSFiles>, или, даже, <MinimizeThis>. В данном случае мы хотим минимизировать все файлы с окончанием .js и .css в проекте, кроме тех которые заканчиваются на . min.js или .min.css, или находятся в папке Scripts.
<ItemGroup> <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js"/> </ItemGroup> <ItemGroup> <CSS Include="**\*.css" Exclude="**\*.min.css"/> </ItemGroup> * This source code was highlighted with Source Code Highlighter.
Запускаем задание на минимизацию. Группы JavaScript и CSS файлов для минимизации обозначается именами, указанными в предыдущих строках (<JS> и <CSS>). Файлы, подлежащие минимизации, и расширение для ново-утрамбованных файлов указанны в атрибутах JsSourceExtensionPattern, CssSourceExtensionPattern и JsTargetExtension, CssTargetExtension, соответственно.
<AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=". min.js" CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css"/>* This source code was highlighted with Source Code Highlighter.

Задача имеет ряд дополнительных параметров:

JsCollapseToLiteral="true|false"* This source code was highlighted with Source Code Highlighter.

Переводит new Object() в {}, new Array() в [].
JsCombineDuplicateLiterals="true|false"* This source code was highlighted with Source Code Highlighter.

Подставляет локальную переменную вместо повторяющихся строковых или цифровых значений в коде.
JsEvalTreatment="MakeAllSafe|Ignore|MakeImmediateSafe"* This source code was highlighted with Source Code Highlighter.

Указывает, возможно, ли применить методику переименования функций и локальных переменных в коде, использующем eval. Следует избегать данной установки, когда природа кода в eval не ясна или может измениться.
JsIndentSize="number"* This source code was highlighted with Source Code Highlighter.

Когда JsOutputMode=«MultipleLines», указывает количество пробелов для отбивки вложенных конструкций.
JsInlineSafeStrings="true|false"* This source code was highlighted with Source Code Highlighter.
JsLocalRenaming="CrunchAll|KeepAll|KeepLocalizationVars"* This source code was highlighted with Source Code Highlighter.

Степень применения методики переименования локальных переменных и функций. Когда JsLocalRenaming=«KeepLocalizationVars», переменные, начинающиеся с L_, не будут переименованы.
JsMacSafariQuirks="true|false"* This source code was highlighted with Source Code Highlighter.

Поддержка требований движка JavaScript в Safari под Mac.
JsOutputMode="SingleLine|MultipleLines"* This source code was highlighted with Source Code Highlighter.

Позволяет минимизировать код, сохраняя некую читабельность, хотя все остальные методики минимизации (переименование локальных переменных, например) – будут всё равно применены.
JsRemoveFunctionExpressionNames="true|false"* This source code was highlighted with Source Code Highlighter.
JsRemoveUnneededCode="true|false"* This source code was highlighted with Source Code Highlighter.

Убирает код, который не участвует в процессе выполнения программы (unreachable code).
JsStripDebugStatements="true|false"* This source code was highlighted with Source Code Highlighter.

Изымает обращение к: debugger, $Debug, Debug, Web.Debug или Msn.Debug, WAssert.
CssColorNames="Strict|Hex|Major"* This source code was highlighted with Source Code Highlighter.

Указывает на возможность подстановки имени цвета вместо RGB кода, если данное имя короче (CssColorNames=«Strict»).
CssCommentMode="None|All|Hacks"* This source code was highlighted with Source Code Highlighter.

Указывает на возможность минимизации за счёт CSS комментариев. CssCommentMode=«Hacks», например, оставит в коде только условно комментированные CSS-хаки.
CssExpandOutput="true|false"* This source code was highlighted with Source Code Highlighter.

Позволяет минимизировать код, сохраняя некую читабельность, когда код будет представлен в несколько строк, вместо одной.
CssSeverity="number"* This source code was highlighted with Source Code Highlighter.

Указывает, какие неточности CSS будут выведены как ошибки.
CssTermSemicolons="true|false"* This source code was highlighted with Source Code Highlighter.

Управляет расстановкой точки с запятой после правил CSS.

Следует иметь в виду, что компилирование такого проекта — с задачами Microsoft Ajax Minifier — требует установки данной утилиты на все машины, участвующие в процессе компиляции.

Ссылки:

Сайт Microsoft Ajax Minifier: http://aspnet.codeplex.com/releases/view/40584
Учимся пользоваться Microsoft Ajax Minifier: http://www.asp.net/ajaxlibrary/AjaxMinQuickStart.ashx
Параметры задачи MSBuild’а для Microsoft Ajax Minifier: http://www.asp.net/ajaxLibrary/AjaxMinTask.ashx

В продолжение темы хочу написать статью об использовании следующего поколения клиентских библиотек от Microsoft — Microsoft Ajax Library, в связке с обычными и минимизированными файлами JavaScript, в зависимости от конфигурации.

Минимизация JavaScript | WebStorm Documentation

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

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

UglifyJS работает только с JavaScript (ES5 и более ранние версии). Для ES6 и более поздних версий используйте инструменты сборки, например Babel или webpack. Узнайте больше на официальном сайте UglifyJS.

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

По умолчанию минимизация начинается, как только файл JavaScript в области наблюдения за файлами изменяется и сохраняется. Вы можете указать другие события, которые вызывают UglifyJS. Узнайте больше от Наблюдателей за файлами.

Сгенерированный минифицированный код хранится в отдельном файле с именем исходного файла JavaScript и расширением min.js. Расположение этого сгенерированного файла определяется в поле Пути вывода для обновления диалогового окна Новый наблюдатель. Однако в дереве проекта файл с уменьшенным кодом отображается под исходным файлом JavaScript, который отображается как узел. Чтобы изменить это представление по умолчанию, настройте вложение файлов в окне инструмента «Проект».

Прежде чем начать

Убедитесь, что на вашем компьютере установлен Node.js.
Убедитесь, что в настройках включен подключаемый модуль File Watchers. Нажмите Ctrl+Alt+S , чтобы открыть настройки IDE и выбрать Плагины. Перейдите на вкладку «Установлено». В поле поиска введите File Watchers. Дополнительные сведения о подключаемых модулях см. в разделе Управление подключаемыми модулями.

Установить UglifyJS глобально

Во встроенном терминале ( Alt+F12 ), введите:
npm install --g uglify-js
Узнайте больше на официальном сайте UglifyJS.

Создание наблюдателя за файлами UglifyJS

В диалоговом окне «Настройки/Предпочтения» ( Ctrl+Alt+S ) нажмите «Следопыты за файлами» в разделе «Инструменты». На открывшейся странице File Watchers отображается список уже настроенных File Watchers.
Щелкните или нажмите Alt+Insert и выберите предопределенный шаблон UglifyJS из списка.
Откроется диалоговое окно «Новый наблюдатель».
В текстовом поле Программа укажите расположение исполняемого файла UglifyJS.
Если вы установили UglifyJS через диспетчер пакетов узлов, WebStorm сам находит пакет и автоматически заполняет поле псевдонимом uglifyjs . В противном случае введите путь вручную или щелкните и выберите расположение файла в открывшемся диалоговом окне.
Примите параметры по умолчанию для Наблюдателя за файлами или измените их, если необходимо, как описано в разделе Наблюдатели за файлами, и нажмите OK. WebStorm возвращает вас на страницу File Watchers, где в список добавляется новый File Watcher:
Убедитесь, что установлен флажок Включено.
По умолчанию File Watcher будет доступен в текущем проекте. Чтобы использовать его в других проектах, выберите Global из списка Level.

Последнее изменение: 05 декабря 2022

Диаграммы зависимостей модуля Closure Linter

Какие инструменты минимизации CSS и JavaScript лучше всего подходят для WordPress?

Если вы стремитесь к идеальному результату 100/100 в Google Pagespeed или GTMetrix, минимизация CSS и JavaScript поможет вам в этом.

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

В этой статье мы рассмотрим лучшие бесплатные инструменты минимизации CSS и JavaScript, которые вы можете использовать в своих проектах.

Вот краткий список лучших бесплатных инструментов для минимизации CSS и JavaScript, если вы спешите:

Лучшие инструменты для минимизации JavaScript

Closure Compiler
UglifyJS2
YUI Compressor
JS Compress

Best CSS Minification Tools

CSSnano
CSSO
UNCSS
CSS-Minifier

Best CSS and Javascript Minification Tools for WordPress

Автооптимизация
Очистка активов
Fast Velocity Minify
WP Rocket

Как быстро должен загружаться сайт?

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

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

Если вам нужен контрольный показатель, вот то, что веб-разработчик Google установил в качестве стандарта:

Крупнейшая отрисовка содержимого (LCP) : LCP должна произойти в течение 2,5 секунд после начала загрузки страницы.
Задержка первого ввода (FID) : Страницы должны иметь FID не более 100 миллисекунд.
Совокупный сдвиг макета (CLS) : Страницы должны поддерживать CLS равным 0,1. или менее.

	Good	Poor	Percentile
Largest Contentful Paint	≤2500ms	>4000ms	75
First Input Delay	≤100ms	>300ms	75
Совокупный сдвиг макета	≤0,1	>0,25	75

Как могут помочь инструменты минимизации CSS и JavaScript?

Сценарии и таблицы стилей являются ресурсами, блокирующими рендеринг, которые вызывают задержку при первой задержке ввода (FCP) и наибольшей отрисовке содержимого (LCP). Несмотря на то, что существуют и другие методы увеличения Core Web Vitals вашего сайта, минификация значительно повышает производительность и доступность сайта, что сразу же приводит к лучшему пользовательскому опыту.

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

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

Каковы недостатки минификации?

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

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

Лучшие инструменты для минимизации JavaScript

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

Closure Compiler

Closure Compiler — это инструмент минимизации JavaScript с открытым исходным кодом, поддерживаемый Google, который также оптимизирует ваш код. Это самый продвинутый минификатор Javascript в нашем списке.

Это хороший вариант, который анализирует и анализирует JavaScript, при необходимости переписывает код, а затем минимизирует его.

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

Однако использование Closure не рекомендуется, если читаемость кода является приоритетом, поскольку скомпилированная инфраструктура может быть неадекватной. Даже если удобочитаемость кода JavaScript сильно снижается, общая стабильность и оптимизация кода значительно улучшаются при использовании службы Closure Compiler.

UglifyJS2

UglifyJS2 минимизирует, анализирует и оптимизирует ваш JavaScript. Это популярный инструмент для минификации JavaScript, который также имеет настройки отладки.

Существует также «режим быстрого минимизации Uglify», который намного быстрее минимизирует ваш код, поскольку «удаление пробелов и изменение символов составляет 95% уменьшения размера минимизированного кода для большинства JavaScript, а не сложные преобразования кода».

Также доступна демонстрация UglifyJS2.

YUI Компрессор

YUI Compressor уникален тем, что это инструмент для минимизации как CSS, так и JavaScript. Это может сэкономить вам дополнительно 20% скорости загрузки вашей страницы в среднем по сравнению с другими популярными инструментами минимизации CSS и JavaScript, не перечисленными здесь.

Он также безошибочно сжимает ваш код, поскольку он на 100 % безопасен.

Однако поддержка этого инструмента неактивна с 2013 года и может считаться прекращенным проектом.

Дальнейший анализ состояния обслуживания yui-compressor на основе частоты выпуска версий npm, активности репозитория и других точек данных определил, что его обслуживание неактивно.

JS Compress

JSCompress — это бесплатный онлайн-компрессор JavaScript, который может сжимать и минимизировать ваши файлы JavaScript. Сжатые сценарии javascript подходят для производственных приложений, поскольку они часто уменьшают размер файла на 30–90%. Большая часть уменьшения размера файла достигается за счет удаления ненужных комментариев и пробелов.

Лучшие инструменты минимизации CSS

Подобно перечисленным выше инструментам минимизации JavaScript, все эти инструменты минимизации CSS бесплатны и регулярно обновляются.

CSSnano

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

В любом случае этот инструмент минимизации удаляет пробелы, а также сжимает цвета, удаляет комментарии, отбрасывает переопределенные at-правила, нормализует дескрипторы диапазона Unicode, включая параметры градиента, и многое другое.

Вы также можете получить доступ к CSSnano через онлайн-версию, если не хотите ее устанавливать.

CSSO

CSSO минимизирует ваш CSS, удаляя избыточность, такую как пробелы, заменяет более короткие формы и реструктурирует ваш CSS, объединяя объявления, наборы правил и многое другое.

Параметры отладки также разрабатываются для будущего выпуска.

Вы также можете получить доступ к онлайн-версии CSSO, если не хотите ее устанавливать.

UNCSS

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

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

CSS-Minifier

CSSMinifier — это онлайн-инструмент для минимизации с несколькими различными настройками на выбор.

Можно выбрать один из следующих вариантов:

Самый высокий (Нет удобочитаемости, Наименьший размер)
Высокий (Умеренная читаемость, Меньший размер)
Стандартный (Баланс между удобочитаемостью и размером)
Низкий (Повышенная удобочитаемость)

Возможны другие варианты, например – Отменить свойства CSS (CSS 3.0, CSS 2.1, CSS 2.0 и CSS 1.0), Добавить метку времени к окончательный CSS. Цвета должны быть сжаты, как и вес шрифта. Удалите все лишние символы обратной косой черты и последние точки с запятой.

Лучшие инструменты минимизации CSS и Javascript для WordPress с помощью плагина

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

Например,

Посмотрите демо-версию темы Divi. Если вы нажмете «Проверить элемент», он покажет загружаемые 11 файлов CSS и 42 файла JS.

Пример демонстрации темы Divi и количество файлов CSS

Добавить заголовок и замещающий текст

Пример демонстрации темы Divi и количество файлов JavaScript

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

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

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

Autoptimize

Autoptimize — один из наиболее широко используемых плагинов WordPress для минимизации. Помимо минимизации ваших скриптов, он может кэшировать скрипты и стили, автоматически вставлять CSS в верхний колонтитул страницы, а также перемещать и откладывать скрипты в нижний колонтитул. Существует несколько сложных опций для разработчиков, а также большой API, позволяющий адаптировать Autoptimize к точным требованиям вашего сайта. Это также бесплатно!

Asset Cleanup

Asset Cleanup — это бесплатный плагин с профессиональной версией, который пытается помочь вам удалить ненужные CSS и javascript из вашей установки WordPress. На лету он объединяет, минимизирует и кэширует скрипты и таблицы стилей. Он предназначен для совместимости с любой темой и плагином WordPress.

Раздел «Оптимизация CSS» позволяет комбинировать таблицы стилей, чтобы уменьшить общий размер страницы вашего сайта. Он имеет параметры для минимизации, задержки и слияния.

Область оптимизации JavaScript работает так же, как и раздел Оптимизация CSS. JavaScript можно минимизировать, комбинировать и встраивать по мере необходимости. Однако встраивание доступно только в профессиональной версии.

Fast Velocity Minify

Fast Velocity Minify — это плагин с открытым исходным кодом, который снижает HTTP-запросы, группируя ресурсы CSS и JS. Самое приятное в этом плагине то, что он автоматически минимизирует файлы CSS, JS и PHP. Кроме того, процесс минификации выполняется в режиме реального времени и исключительно на внешнем интерфейсе.

Этот подключаемый модуль по умолчанию предоставляет возможность минимизировать HTML, JavaScript и CSS. Однако вы можете отключить один или несколько из них вручную, перейдя на страницу Fast Velocity Minify в настройках. Вы также можете исключить определенные файлы из минимизации.

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

WP Rocket

Наконец, давайте упомянем наш продукт, WP Rocket. Это плагин, который устанавливается, как и большинство других, но наша главная цель — сделать его очень простым в использовании для всех.

После загрузки и установки WP Rocket на вашем сайте перейдите в «Настройки» > «WP Rocket» и щелкните вкладку «Оптимизация файлов».

Затем установите флажки «Сократить файлы CSS» и «Сократить файлы JavaScript».

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

ПРИМЕЧАНИЕ. Имейте в виду, что иногда эти параметры могут нарушить работу вашего сайта. Вы захотите включить каждый из этих файлов по отдельности и проверить, какие из этих файлов могут сломать ваш сайт.

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

Перед сохранением изменений обязательно сделайте резервную копию и протестируйте свой сайт.

Дополнительные сведения см. в разделах Уменьшение количества минифицированных файлов и Решение проблем с оптимизацией файлов.

Почему здесь упоминается WP Rocket?

Это премиум-плагин для веб-производительности, поэтому он требует затрат. Хотите знать, зачем платить за плагин, если мы только что упомянули бесплатные плагины, которые вы можете выбрать?

Если вы искали только исправление минимизации CSS и JavaScript, вы можете выбрать все рекомендуемые выше инструменты. Однако PageSpeed Insight или производительность сети в целом — это нечто большее.

WP Rocket также предлагает другие возможности, такие как мощное кэширование страниц и предварительная загрузка кеша. Он регулярно обновляется для обеспечения надежности, безопасности и стабильности, а также является чрезвычайно популярным вариантом с более чем 2 000 000 активных установок.

Мы создали наш плагин с учетом оценки PageSpeed Insight Score.

Например,

Он не только минимизирует CSS и JavaScript, но и обеспечивает полную веб-производительность в качестве сервисного плагина.

Одной из основных проблем, связанных с получением 100 баллов в рейтинге PageSpeed Insight Score, является оптимизация для решения проблемы «Удалить неиспользуемый CSS».

WP Rocket собирает все таблицы стилей и скрипты на вашем веб-сайте и использует наш внешний инструмент для обработки и удаления неиспользуемого CSS. Большинство других плагинов не способны выполнять эту задачу и используют большую часть ресурсов вашего сервера для обработки веб-производительности.

Asset Cleanup — это один плагин, который вы можете использовать для ручного отключения каждого CSS на странице, и он имеет массу настроек. Однако он только отключает неиспользуемый CSS, а не компилирует его, как у нас.

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

Вы можете просмотреть нашу документацию по удалению неиспользуемых CSS.

Другие настройки, которые следует упомянуть:

Оптимизация кэширования
Отложенная загрузка JavaScript
Задержка выполнения JavaScript

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

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

Как протестировать сравнение производительности минимизации CSS или JavaScript

Если ваша цель — набрать 100 % в тесте скорости веб-сайта, вам следует использовать инструменты анализа PageSpeed от Google или Lighthouse.

Чтобы протестировать с помощью PageSpeed Insight, введите URL-адрес своего веб-сайта и нажмите «Анализ»:

Вы можете увидеть результаты вашего теста ниже:

После того, как вы минимизируете свой CSS или JavaScript, он будет перемещен из «Возможностей». на «Пройденные аудиты»:

Инструмент анализа PageSpeed использует Lighthouse для анализа данного URL-адреса, поэтому вы можете выбрать тот или иной.

Для тестирования с помощью Lighthouse: щелкните правой кнопкой мыши и выберите «Проверить элемент» (ПК) или «Проверить (Mac)»>>Нажмите Lighthouse и создайте отчет

Некоторые факты тестирования

Для достижения наилучших результатов выполните несколько тестов в режиме инкогнито: В заключение

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