Некоторые javascript файлы не похожи на минифицированные
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Перед выкладыванием JavaScript на «боевую» машину – пропускаем его через минификатор (также говорят «сжиматель»), который удаляет пробелы и по-всякому оптимизирует код, уменьшая его размер.
В этой статье мы посмотрим, как работают современные минификаторы, за счёт чего они укорачивают код и какие с ними возможны проблемы.
Сокращение HTML-кода
Минификация HTML-кода не столь эффективна по отношению к сокращению CSS и JavaScript по двум причинам:
- HTML-код, как правило, составляет незначительную часть от общего объёма кода веб-страницы.
- HTML-код динамических сайтов формируется на сервере и отдаётся браузеру при запросах.
Поэтому предварительно минифицированные HTML-файлы могут применяться только на статичных веб-страницах. Но ведь PageSpeed Insights при наличии несокращенного кода на проверенной странице синим по белому пишет «Сократите код HTML». И действительно, есть выход даже для динамических сайтов: это расширения для CMS. Об этом читайте ниже.
Минификация HTML онлайн
Как указывалось выше, предварительная минификация HTML-кода на динамических сайтах не применяется, т. к. он формируется на сервере (например, посредством PHP ). Но если появится необходимость сократить HTML-код (например, для статичного сайта), то существует неплохой онлайн-сервис HTML Compressor, позволяющий также сокращать код CSS и JS.
Сервис позволяет установить степень сокращения HTML-кода, определяющая необходимость удаления переносов строк, кавычек для значений атрибутов и прочее.
Примечательно, что в закладке «Compressed», отображающей результат минификации, можно проверить валидность как исходного, так и оптимизированного кода, перейдя по ссылкам «Validate Original Code» и «Validate Compressed Code» соответственно.
К минусам сервиса можно отнести отсутствие возможности передавать файл для оптимизации кода, а также отсутствие продвинутых параметров оптимизации CSS-кода (автоматическое совмещение свойств для одинаковых селекторов).
Преимущества уменьшения файлов
Решение уменьшить размер CSS , JS и HTML файлов предоставляет преимущества, как пользователям сайта, так и его владельцу. Использование минификации - это отличный способ оптимизировать ваш сайт, и это легко реализовать с помощью рассмотренных инструментов и плагинов.
Дайте знать, что вы думаете по этой теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, подписки, отклики, дизлайки, лайки!
Добавить в избранное
Главное меню » Блог-платформа wordpress » Как минимизировать файлы CSS/JavaScript в WordPress
Что такое Минимизация и зачем она вам нужна?
Т ермин “Минимизировать” используется для описания способа, который делает размер файла вашего сайта меньше. Это достигается путем удаления белых пространств, линий и ненужных символов из исходного кода.
Обычно рекомендуется использовать только для файлов, которые отправляются в браузеры пользователей. Это включает в себя файлы HTML, CSS и JavaScript. Вы можете минимизировать файлы PHP тоже, но PHP является языком программирования на стороне сервера и минимизация это не улучшит скорость загрузки страницы для пользователей.
Очевидное преимущество минимизация файлов это улучшение скорости и производительности WordPress. Компактные файлы быстрее, чтобы улучшить скорость загрузки вашего сайта.
Тем не менее, некоторые эксперты считают, что повышение производительности очень небольшое для большинства веб – сайтов и не стоит свеч. Минификация только уменьшает несколько килобайт данных на большинстве сайтов WordPress. Вы можете уменьшить больше времени загрузки файла просто оптимизировав изображения для веб – сайтов.
Если вы используете flexbox при верстке сайтов, то используйте генератор flex для качественного и быстрого написания кода в css.
Ниже приведен пример обычного кода CSS:
После того, как произведена минимизация, код будет выглядеть следующим образом:
Если вы пытаетесь достичь 100/100 счет на Google PageSpeed или GTMetrix, то минимизация CSS и JavaScript позволит значительно улучшить ваши очки.
Сказав, давайте посмотрим, как легко минимизировать CSS/JavaScript на вашем WordPress сайте.
Минимизация CSS/Javascript в WordPress
Первое, что вам нужно сделать, это установить и активировать плагин Better WordPress Minify . Для получения более подробной информации, см наш шаг за шагом руководство о том, как установить плагин в WordPress плагин.
После активации плагин добавит новый пункт меню с надписью ‘BWP Minify’ в вашу админку WordPress. При нажатии на нее, вас приведет к странице настроек плагина.
На странице настроек необходимо проверить первые два варианта, чтобы автоматически минимизировать JavaScript и CSS файлы на WordPress сайте.
Теперь вы можете нажать на кнопку Сохранить изменения, чтобы сохранить настройки.
Есть много других дополнительных опций на этой странице. Настройки по умолчанию будут работать для большинства веб-сайтов, но вы можете просматривать и изменять эти параметры в каждом конкретном случае на индивидуальной основе.
Далее, вам нужно, зайти на свой веб-сайт. Щелкните правой кнопкой мыши в любом месте, а затем выберите ‘View Page Source “из меню браузера.
Теперь вы увидите исходный HTML-код, сгенерированный для вашего WordPress сайта. Если вы внимательно посмотрите, вы увидите, что этот плагин будет загружать CSS/JavaScript файлы в собственной папке плагина.
Это уменьшенная версии исходного CSS и JavaScript файлов. Плагин Better WordPress Minify будет держать их в кэше и передавать минимизированную версию для браузеров.
Вот и все, мы надеемся, что эта статья помогла вам узнать, как Минимизировать ваш WordPress сайт. Вы также можете увидеть наше конечное руководство о том, как ускорить WordPress.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Оптимизации
Сжиматель бегает по дереву, ищет «паттерны» – известные ему структуры, которые он знает, как оптимизировать, и обновляет дерево.
В разных минификаторах реализован разный набор оптимизаций, сами оптимизации применяются в разном порядке, поэтому результаты работы могут отличаться. В примерах ниже даётся результат работы GCC.
Объединение и сжатие констант
- 'my' + 'string' → "mystring" .
- 600 * 600 * 5 → 18E5 (научная форма числа, для краткости).
- 1 && 0 → 0 .
- b && 0 → без изменений, т.к. результат зависит от b .
- Локальная переменная заведомо доступна только внутри функции, поэтому обычно её переименование безопасно (необычные случаи рассмотрим далее).
- Также переименовываются локальные функции.
- Вложенные функции обрабатываются корректно.
После оптимизации GCC:
- Локальные переменные были переименованы.
- Лишние переменные убраны. Для этого сжиматель создаёт вспомогательную внутреннюю структуру данных, в которой хранятся сведения о «пути использования» каждой переменной. Если одна переменная заканчивает свой путь и начинает другая, то вполне можно дать им одно имя.
- Кроме того, операции elem = getElementsById и elem.parentNode объединены, но это уже другая оптимизация.
Если переменная присваивается, но не используется, она может быть удалена. В примере выше эта оптимизация была применена к переменной parent , а затем и к параметру node .
Заведомо ложная ветка if(0) < .. >убрана, заведомо истинная – оставлена.
То же самое будет с условиями в других конструкциях, например a = true ? c : d превратится в a = c .
Код после return удалён как недостижимый.
- Конструкция while переписана в for .
- Конструкция if (i) . переписана в i&&. .
- Конструкция if (cond) . else . была переписана в cond ? . : . .
Инлайнинг функции – приём оптимизации, при котором функция заменяется на своё тело.
После оптимизации (переводы строк также будут убраны):
- Вызовы функций createMessage и showElement заменены на тело функций. В данном случае это возможно, так как функции используются всего по разу.
- Эта оптимизация применяется не всегда. Если бы каждая функция использовалась много раз, то с точки зрения размера выгоднее оставить их «как есть».
Переменные заменяются на значение, если оно заведомо известно.
Переменная isVisible заменена на true , после чего if стало возможным убрать.
Переменная hi заменена на строку.
Казалось бы – зачем менять hi на строку? Ведь код стал ощутимо длиннее!
…Но всё дело в том, что минификатор знает, что дальше код будет сжиматься при помощи gzip. Во всяком случае, все правильно настроенные сервера так делают.
Алгоритм работы gzip заключается в том, что он ищет повторы в данных и выносит их в специальный «словарь», заменяя на более короткий идентификатор. Архив как раз и состоит из словаря и данных, в которых дубликаты заменены на идентификаторы.
Если вынести строку обратно в переменную, то получится как раз частный случай такого сжатия – взяли "Привет вам из JavaScript" и заменили на идентификатор hi . Но gzip справляется с этим лучше, поэтому эффективнее будет оставить именно строку. Gzip сам найдёт дубликаты и сожмёт их.
Плюс такого подхода станет очевиден, если сжать gzip оба кода – до и после минификации. Минифицированный gzip-сжатый код в итоге даст меньший размер.
- …И ещё некоторые другие мелкие изменения кода…
Drupal модуль минификации
В сообществе Drupal популярным вариантом для минификации является модуль Minify . Он позволяет минимизировать HTML , JavaScript файлы и использует компилятор Google Closure , чтобы проанализировать минификацию. Конфигурация данного модуля проходит быстро.
Joomla! Расширение для минификации
CMS Joomla также предлагает расширение для оптимизации сайта под названием JCH Optimize , которое уменьшает размер JavaScript и производит сжатие CSS файлов . Оно также предоставляет возможность включить GZIP сжатие для агрегированных файлов.
Минификация JS
Онлайн
Сокращенные файлы фреймворков
Все популярные JS-библиотеки и CSS-фреймворки предоставляют необходимые файлы в нормальном (удобочитаемом) и сокращенном формате с префиксом .min в названии. Например:
bootstrap.js Версия для веб-разработчика. При необходимости может редактироваться и минифицироваться, в последующем заменяя собой сокращенную версию. bootstrap.min.js Сокращенная версия для применения на сайте.
Файл | Нормальный | Сокращенный | Разница | Коэффициент |
---|---|---|---|---|
uikit-2.27.4.js | 119 КБ | 57 КБ | 62 КБ | 52% |
uikit-2.27.4.css | 181 КБ | 105 КБ | 76 КБ | 42% |
bootstrap-3.3.7.js | 69 КБ | 37 КБ | 32 КБ | 46% |
bootstrap-3.3.7.css | 143 КБ | 119 КБ | 24 КБ | 17% |
jquery-3.2.1.js | 261 КБ | 85 КБ | 176 КБ | 67% |
По данным таблицы не сложно заметить существенную разницу в размере обычных и сокращенных файлов: применение минифицированных версий определённо сделает веб-страницы легче, что благоприятно отразится на скорости загрузки сайта. Именно поэтому сервис PageSpeed Insights обращает внимание на объём кода (HTML, CSS и JS) и возможности по его сокращению для улучшения производительности:
Пример сокращения CSS-кода
Удобочитаемый фрагмент CSS-кода размером 123 Б:
Сокращённый вариант указанного фрагмента составляет 84 Б:
Размер уменьшился за счет:
- удаления комментария ( /* */ ),
- удаления лишних пробелов,
- удаления всех переносов строк,
- удаления символов ; перед закрывающей фигурной скобкой > ,
- объединения свойств для одного селектора ( a ).
Минификация CSS онлайн
Чтобы качественно сократить CSS-код рекомендуем применять специализированный онлайн-сервис CSS Resizer, который позволяет:
Разница между минификацией и сжатием
Минификация и сжатие CSS файлов – это не одно и то же. Хотя оба этих метода предназначены для уменьшения времени загрузки. Различие заключается в том, как они работают. Сжатие используется для уменьшения размера файла при помощи алгоритмов сжатия, таких как Gzip или brotli . Файлы сжимаются перед отправкой клиенту.
Следовательно, процесс сжатия осуществляется следующим образом:
- Файл сжимается с помощью алгоритма сжатия;
- Выполняется запрос для сжатой версии файла;
- Сжатый файл отправляется от сервера к клиенту;
- Клиент распаковывает файл и считывает информацию.
Поддерживаемые алгоритмы сжатия могут варьироваться в зависимости от сервера, а также браузеров. Когда браузер отправляет запрос серверу, он сообщает ему, какой метод сжатия поддерживает, так что сервер может оптимизировать отклик для этого браузера.
Если браузер не поддерживает конкретный алгоритм сжатия, сервер будет отправлять данные в первоначальном виде ( без обработки ).
Сокращение JS-кода
Минификация кода JavaScript не менее актуальна, чем для CSS: во многих случаях JS-код занимает наибольший объём памяти по сравнению с CSS и HTML вместе взятыми, т. к. на сайтах применяются JS-скрипты CSS-фреймворков, а также JS-библиотеки и плагины.
Принципы сокращения кода
Минификация (минимизация, сокращение) кода подразумевает его оптимизацию в пользу уменьшения объёма памяти, при этом в жертву приносится удобочитаемость.
Минифицированный код является полностью рабочим, но лишенным всех символов и участков, не влияющих на его работоспособность, к которым относятся:
- комментарии,
- лишние пробелы,
- табуляция,
- переносы строк,
- другие лишние символы.
Перечисленные символы и комментарии в коде применяются для лучшего его восприятия разработчиками при написании и редактировании, но «раздувают» его объём, увеличивая общий вес веб-страницы. Поэтому целесообразно их удалять перед применением на сайте, оставляя копию оригинала для возможного редактирования.
Современные сжиматели
Рассматриваемые в этой статье алгоритмы и подходы относятся к минификаторам последнего поколения.
Самые широко используемые – первые два, поэтому будем рассматривать в первую очередь их.
Наша цель – понять, как они работают, и что интересного с их помощью можно сотворить.
Конструкция with
Куда будет присвоено значение position = 'absolute' ?
Это неизвестно до момента выполнения: если свойство position есть в style – то туда, а если нет – то в локальную переменную.
Можно ли в такой ситуации заменить локальную переменную на более короткую? Очевидно, нет:
Такая же опасность для сжатия кроется в использованном eval . Ведь eval может обращаться к локальным переменным:
Получается, что при наличии eval мы не имеем права переименовывать локальные переменные. Причём (!), если функция является вложенной, то и во внешних функциях тоже.
А ведь сжатие переменных – очень важная оптимизация. Как правило, она уменьшает размер сильнее всего.
Что делать? Разные минификаторы поступают по-разному.
- UglifyJS – не будет переименовывать переменные. Так что наличие with/eval сильно повлияет на степень сжатие кода.
- GCC – всё равно сожмёт локальные переменные. Это, конечно же, может привести к ошибкам, причём в сжатом коде, отлаживать который не очень-то удобно. Поэтому он выдаст предупреждение о наличии опасной конструкции.
Ни тот ни другой вариант нас, по большому счёту, не устраивают.
Для того, чтобы код сжимался хорошо и работал правильно, не используем with и eval .
Либо, если уж очень надо использовать – делаем это с оглядкой на поведение минификатора, чтобы не было проблем.
Про минимизацию javascript и css знают все. Ну если кто не знает, то, вкратце, это уменьшение объема файлов за счет удаления комментариев, разметки, переносов строк и прочего. Особенно актуально оно для интернет сайтов, которые при первом же визите пользователя должны порадовать его своей производительностью. Но наш проект, во-первых, работает в локальной сети, а во-вторых, используется на одних и тех же компьютерах изо дня в день, поэтому мы долгое время совсем не задумывались об оптимизации скриптов и стилей. Пока не стали плотно работать с ExtJS.
Созданная страничка со всеми подключенными скриптами и стилями весит больше 5 Мб (около 200 файлов). Одно только сгенерированное DOM-дерево в коде HTML содержит более 500 000 байт. Работать с системой пользователь может начать не раньше, чем через 5 секунд после загрузки страницы (инициализация скриптов, ExtJS и т.п.).
Как оказалось, несмотря на наличие локальной сети у заказчика и частую работу с одними и теми же страницами (должно же быть встроенное кэширование в браузере), иногда с загрузкой страниц возникают проблемы. Поэтому было решено уменьшить количество запросов к серверу и поработать над общей производительностью ExtJS в IE8.
Для минификации скриптов сначала скачал Google Closure Compiler, как один из самых популярных, да и корпорация добра плохого не сделает…
Google Closure Compiler
Положил файлик compressor.jar в папку со скриптами. Чтобы его запускать, пришлось поставить java. Сделал bat-файлик запуска с двумя командами, последняя из которых всего лишь делает задержку в 10 секунд, чтобы можно было успеть увидеть возможные ошибки и самому закрыть окно командной строки. Вот таким вот образом слил все скрипты в один файл, вес уменьшился примерно в полтора раза (это содержимое bat-файла):
Все просто и элегантно, провозился минут пять. Команда cd %0\..\ в начале файла нужна для того, чтобы дальнейшее выполнение команд происходило внутри директории, в которой расположен сам .bat файл, а не с директории по умолчанию после запуска командной строки.
Но тут возникла идея минимизировать не только JS, но и CSS файлы, а Google Closure этого делать, увы, не умеет. Поэтому решил переделать все на YUI Compressor, о котором много отзывов, и он также сжимает CSS.
YUI Compressor
Для объединения всех файлов проекта был написан батник уже значительно большего объема, потому что этот YUI не умеет воспринимать в строке сразу несколько файлов — ему можно скармливать только по одному файлу. А значит, предварительно нам нужно слепить файлы в один временный файл командой copy, а уже потом его сжать юай компрессором.
Кстати, важное замечание — все объединяемые файлы javascript должны иметь в конце файла точку с запятой, а лучше с переносом на след.строку. Вообще любые операторы должны заканчиваться точкой с запятой, и решарпер люто негодует, когда видит наш javascript.
- Во-первых, нужно тщательно следить за использованием относительных путей к изображениям. Стили ExtJS и других библиотек основаны на относительных путях, а значит они сразу выпадают из нашего объединения (кстати, в большинстве своем они уже минифицированы).
- Во-вторых, в CSS файлах могут встречаться команды @import . Это ад.
- В третьих, можно же создавать минифицированные объединенные стили отдельно в каждой из папок, а потом включать в проект, но, как выяснилось, таких файлов у нас получается не так уж много и прирост производительности будет небольшой. Поэтому решили минификацию CSS пока отложить. (Можно было и на Google Closure Compiler остановиться в таком случае)
А теперь самое интересное — батник у нас есть, объединенные скрипты генерируются успешно, осталось их прописать в релизной версии проекта. Все вроде работает, нужно коммитить…. каждый раз запуская скрипт.
Автоматизация минификации при коммите в релиз
Дело в том, что у нас две ветки в SVN — рабочая (DEV) и релизная. Каждый раз перед выкладыванием версии на сервер мы выполняем merge всех (ну или нужной части) изменений, билдим и только потом (если все нормально) коммитим. И надо, во-первых, не забывать самому постоянно выполнять этот батник перед коммитом в релиз, а во-вторых, следить за всеми разработчиками, чтобы тоже не забывали это делать.
И тут нам на помощь приходят Hook Scripts в TortoiseSVN!
В настройках клиента SVN заходим на вкладку Hook Scripts и выбираем там папку нашего проекта и сам батник. В опциях Hook Type выбираем «Start-Commit Hook«, чтобы скрипт запускался перед тем, как отобразится окно коммита.
Настройка запуска минификации перед коммитом
Вуаля, все работает и не надо ни за кем следить!
Есть, конечно, куча встроенных в visual studio средств объединения и минификации, но их тоже надо устанавливать на каждой машине, а еще в них тоже много тонкостей. До этого у нас использовался встроенный метод Composite Scripts, но он не обладает достаточной функциональностью в сравнении с теми же YUI или Google closure Compiler.
Минификация (сокращение) объёма кода является одним из эффективных приёмов оптимизации скорости загрузки сайта, обеспечивающим снижение общего размера веб-страниц.
Что делает минификатор?
Все современные минификаторы работают следующим образом:
Разбирают JavaScript-код в синтаксическое дерево.
Также поступает любой интерпретатор JavaScript перед тем, как его выполнять. Но затем, вместо исполнения кода…
Бегают по этому дереву, анализируют и оптимизируют его.
Записывают из синтаксического дерева получившийся код.
Пример сокращения JS-кода
Удобочитаемый фрагмент JS-кода объёмом 328 B:
Сокращенный вариант фрагмента весит 172 B:
Как и в случае с HTML и CSS, уменьшение объёма происходит за счет удаления лишних элементов кода, не влияющих на его работоспособность.
Инструменты разработки
- yui.github.io : предоставляет возможность минимизировать JS файлы для веб-проектов.
Минификация JS онлайн
Сократить JavaScript онлайн можно с помощью рассмотренного на примере минификации HTML-кода сервиса HTML Compressor, который минифицирует JS-код не хуже прочих.
Для разнообразия предлагаем к рассмотрению другой узконаправленный онлайн-сервис JSCompress:
К плюсам сервиса можно отнести возможность отправлять код для минификации в файле, к минусам — отсутствие возможности редактировать сокращенный сервисом код в окне вывода.
Сокращение CSS-кода
Объём CSS-кода, как правило, составляет куда большую часть веса веб-страницы, чем HTML, поэтому не следует игнорировать замечание сервиса PageSpeed Insights «Сократите CSS» и пренебрегать возможностью использовать сокращенный код в CSS-файлах для ускорения загрузки веб-страниц сайта.
С чего начать?
Обратите внимание на флаг --charset для GCC. Без него русские буквы будут закодированы во что-то типа \u1234 .
Google Closure Compiler также содержит песочницу для тестирования сжатия и веб-сервис, на который код можно отправлять для сжатия. Но скачать файл обычно гораздо проще, поэтому его редко где используют.
- Убедиться, что стоит Node.js
- Поставить npm install -g uglify-js .
- Сжать файл my.js : uglifyjs my.js -o my.min.js
Минификация CSS
Онлайн
Инструменты разработки
Как выглядит дерево?
Посмотреть синтаксическое дерево можно, запустив компилятор со специальным флагом.
Для GCC есть даже способ вывести его:
Сначала сгенерируем дерево в формате DOT:
Здесь флаг --print_tree выводит дерево, а --use_only_custom_externs убирает лишнюю служебную информацию.
Файл в этом формате используется в различных программах для графопостроения.
Чтобы превратить его в обычную картинку, подойдёт утилита dot из пакета Graphviz:
Пример кода my.js :
Результат, получившееся из my.js дерево:
В узлах-эллипсах на иллюстрации выше стоит тип, например FUNCTION (функция) или NAME (имя переменной). Комментарии к ним на русском языке добавлены мной вручную.
Кроме него к каждому узлу привязаны конкретные данные. Сжиматель умеет ходить по этому дереву и менять его, как пожелает.
Обычно когда код превращается в дерево – из него естественным образом исчезают комментарии и пробелы. Они не имеют значения при выполнении, поэтому игнорируются.
Но Google Closure Compiler добавляет в дерево информацию из комментариев JSDoc, т.е. комментариев вида /** . */ , например:
Такие комментарии не создают новых узлов дерева, а добавляются в качестве информации к существующем. В данном случае – к переменной minIEVersion .
В них может содержаться информация о типе переменной ( number ) и другая, которая поможет сжимателю лучше оптимизировать код ( const – константа).
Сокращение кода сайтов на CMS
Для популярных CMS, таких как WordPress или Joomla, существует масса расширений, автоматически минифицирующих код HTML, CSS и JS. Иначе говоря, достаточно установить и настроить определённый плагин, и «танцы с бубном» вокруг несокращенного кода отпадают сами собой: расширение обеспечит минификацию кода перед отправкой клиенту, после чего этот код будет хранится в кэше сервера и отдаваться при запросах определённое в настройках время.
В частности для Joomla и WordPress применятся превосходный плагин JCH Optimize, способный не только автоматически сокращать весь код веб-страниц, но и оптимизировать его согласно всем рекомендациям сервиса от Google.
Минификация CSS , JS , HTML файлов (не путать со сжатием CSS ) включает в себя удаление любых ненужных символов из файла, чтобы уменьшить его размер и тем самым ускорить загрузку.
Ниже приведены примеры того, что удаляется во время минификации файла:
- Символы пробелов;
- Комментарии;
- Разрывы строк;
- Разделители блоков.
В большинстве случаев процесс минификации не влияет на файл, а оптимизирует его для загрузки. Особенно полезна минификация CSS , JS и HTML-файлов . Кроме этого Google при ранжировании учитывает быстродействие ресурса, а минификация помогает ускорить работу сайта.
Чтобы различать минифицированные файлы, в их имена добавляется расширение .min ( например: foobar.min.css ).
Минификация HTML
Существует множество инструментов для минификации файлов. Многие CMS также предлагают плагины и расширения для минификации CSS , JS и HTML - файлов.
Содержание
Пример сокращения HTML-кода
Удобочитаемый фрагмент HTML-кода размером 313 Б:
Минифицированный вариант представленного выше HTML-кода составляет 208 Б:
Объём кода значительно сократился за счет удаления:
- пробелов между тегами,
- переносов строк,
- комментариев в коде ( ),
- кавычек вокруг значений атрибутов тегов,
- лишних атрибутов (в частности type ).
Все перечисленные сокращения сохраняют соответствие кода стандарту HTML5.
WordPress плагины для минификации
- Better WordPress Minify ;
- Autoptimize .
Многие плагины кэширования также предлагают возможность минификации. Например, Cache Enabler поставляется с возможностью включения минификации HTML и JS . Использование этой функции позволяет уменьшить время загрузки веб-страниц, но в некоторых случаях это может привести к конфликту с другим плагином сжатия CSS WordPress .
Подводные камни
Описанные оптимизации, в целом, безопасны, но есть ряд подводных камней.
Пример минификации
В следующем примере показано, как CSS файл выглядит до и после минификации.
ДО CSS минификации:
ПОСЛЕ CSS минификации:
После минификации CSS-файл стало сложнее читать, поскольку отсутствуют переносы строк, разделители и т.д. Но оптимизированный вариант имеет меньший размер, что ускоряет его загрузку, как и сжатие CSS онлайн .
Читайте также: