Minify css

CSS Minification with webpack #

Before jumping into the optimizations, take some time understanding how build process for the works:


By default, the resulting JS bundle that webpack produces would contain the content of the CSS files inlined. Since we want to maintain separate CSS files, we are using two complementary plugins:

  • mini-css-extract-plugin will extract each style sheet into its own file, as one of the steps of the build process.
  • webpack-fix-style-only-entries is used to correct an issue in wepback 4, to avoid generating an extra JS file for each CSS file listed in webpack-config.js.

You will now make some changes in the project:

  1. Open the Fav Kitties project in Glitch.
  2. To view the source, press View Source.
  3. Click Remix to Edit to make the project editable.
  4. Click Tools.
  5. Click Logs.
  6. Click Console.

To minify the resulting CSS, you’ll use the optimize-css-assets-webpack-plugin:

  1. In Glitch console, run .
  2. Run , so the changes are synchronized with the Glitch editor.

Next, go back to the Glitch editor, open the webpack.config.js file, and make the following modifications:

Load the module at the beginning of the file:

Then, pass an instance of the plugin to the plugins array:

After making the changes a rebuild of the project will be triggered. This is how the resulting webpack.config.js will look like:

Next, you’ll check the result of this optimization with performance tools.

Quick overview

Take a couple of minutes to explore what makes mini.css different from all those other CSS frameworks and UI toolkits.

Why should I use mini.css?

mini.css is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, mini.css blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in mini.css.

Not convinced yet? Maybe you should read these 5 reasons to try out mini.css.

What exactly does mini.css provide?

Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. mini.css provides a handful of very powerful modules that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:

  • Core — Basic reset and fix rules, based on Normalize.css v5.0.0, typography and common textual element styling
  • Grid — Powerful, responsive grid system based on the Flexible Layout Module (commonly known as flexbox)
  • Navigation — Common navigational elements such as headers, footers and navigation bars
  • Input Control — Form, input element, checkbox, radio button and button styling
  • Table — Modern table styling, horizontal and preset tables, table responsiveness for mobile devices
  • Card — Sleek, modern general-purpose content containers, media embedding
  • Tab — Modern, responsive tabs, accordions and collapses
  • Contextual — Content highlight element styling, elegant alerts and accessible tooltips
  • Progress — Modern progress bar styling and spinning progress indicators
  • Utility — Utilities, visibility helper classes, responsive sizing and breadcrumbs

While not strictly part of the framework, we have also created component libraries for React and Preact, which will make your development faster and easier, especially if you are developing progressive web apps. You can get started with one of our Javascript libraries here!

How do I customize mini.css?

mini.css allows you to easily customize your designs, using Flavors, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the customization section.

Why You nееd JavaScript Minifiеr

Minification has bеcomе standard practicе in thе world of wеb dеsign so it shouldn’t surprisе you to lеarn that thеrе is a wondеrful (and frее) tool availablе to do thе work for you.

Thеrе arе a numbеr of rеasons why comprеssing your JavaScript filеs is a good idеa: 

  • Quickеr download timеs for your usеrs.
  • Rеducеd bandwidth consumption of your wеbsitе.
  • Rеducеd numbеr of HTTP rеquеsts on your sеrvеr whеn combining many JavaScript filеs into onе comprеssеd filе,thus rеducing thе sеrvеr load and allowing morе visitors to accеss your wеbsitе.
  • Commеnts and whitеspacе arе not nееdеd for JavaScript еxеcution;Rеmoving thеm will rеducе filе sizе and spееd up script еxеcution timеs.

Online free tool javascript minify can definitely improve your web page performance by decreasing the size of your js and it will increase web page load time. Up to 40% website online visitors abandon a website that takes more than 3 seconds to load,1-second delay (or 3 seconds of waiting) decreases customer satisfaction by about 16%. So,you should be focus to work on speed up your web page load time.

May your website has to load a lot of static files like Javascript,HTML,CSS,Images,etc. You have not optimized these webpage elements,then web page size will increase. Website performance depends on the page size,increase in page size,increase page load time. So you must this code to be as clean and quick as possible.

How to minify javascript? Minifying Javascript takes the attractive,well-shaped JS code that you just have written and removed the unwanted spacing,indentation,newlines,and comments. Minify JS Online tool is the primary focus on removing javascript spaces. Many developers can maintain a ‘pretty’ version,and upon preparation of their project run their scripts through a minification program. They conjointly regularly mix their several script files into one file.

How to run from a command-line

Running it is simple:

If the output parameter is not set, it will place a file next to the original, with the suffix .

For example, will output , whereas will output .

A folder can also be targeted. When that is done, it will minify all css and js file in that folder.

In that case, does not make much sense, as all files will be minified to the same. If the name still requires a specific pattern such as a timestamp, is the option for you. Note that files named after a template will be left in the same folder as the original file.

There are various options available:

  • is the original filename.
  • is the extension.
  • is a sha-digest of the unminified file contents.
  • is a md5-digest of the unminified file contents.

For example, will make into something like .

To avoid the minification of previously minified files, there is a option, which will delete all files that match the output pattern.

This also means that any real files that match the pattern will be removed as well, so please be careful.

Плагин Better WordPress Minify и его особенности

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

Используете W3 Total Cache? В таком случае устанавливать дополнительный плагин или подключать библиотеку не требуется.

Раньше у меня был установлен плагин WP-Minify, однако он давно не обновлялся и более не поддерживается автором, пришлось удалить.

Better WordPress Minify работает аналогично, перехватывая на странице JS/CSS файлы, минимизирует их, а затем подключает объединенные скрипты и стили в заголовке WordPress. Основные особенности:

  • простая интеграция библиотеки Minify на блог;
  • минимизация JavaScript, CSS и HTML;
  • встроенные средства отладки для поиска неисправностей;
  • возможность подключения дополнительных JS и CSS файлов, требующих сжатия;
  • возможность исключения определенных JS и CSS файлов, не требующих сжатия;
  • оптимизированные файлы могут быть размещены там, где вы хотите;
  • поддержка сжатия внешних файлов с помощью кэширования;
  • заголовки Expire для JS и CSS файлов;
  • обнаружение и устранение повторяющихся файлов.

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

Неважно какой Вы выберите метод, будь то прямое подключение библиотеки Minify на сайт или установка плагина BWP-Minify — в любом случае подобная оптимизация положительно скажется на быстродействии сайта, ускорении загрузки страниц. Желаю успехов, до скорой встречи на Блоге Свободного Вебмастера!

Options Quick Reference

Most of the options are disabled by default.

Option Description Default
Treat attributes in case sensitive manner (useful for custom HTML tags)
Don’t leave any spaces between elements when collapsing. Must be used in conjunction with
Always collapse to 1 space (never remove it entirely). Must be used in conjunction with
Arrays of regex’es that allow to support custom attribute assign expressions (e.g. )
Regex that specifies custom attribute to strip newlines from (e.g. )
Arrays of regex’es that allow to support custom attribute surround expressions (e.g. )
Arrays of regex’es that allow to support custom event attributes for (e.g. )
Use direct Unicode characters whenever possible
Parse input according to HTML5 specifications
Array of regex’es that allow to ignore certain comments, when matched
Array of regex’es that allow to ignore certain fragments, when matched (e.g. , , etc.)
Insert tags generated by HTML parser
Keep the trailing slash on singleton elements
Specify a maximum line length. Compressed output will be split by newlines at valid HTML split-points
(could be , , )
(could be , , )
(could be , , )
Always collapse to 1 line break (never remove it entirely) when whitespace between tags include a line break. Must be used in conjunction with
Prevents the escaping of the values of attributes
Process contents of conditional comments through minifier
Array of strings corresponding to types of script elements to process through minifier (e.g. , , etc.)
Type of quote to use for attribute values (‘ or «)
(could be , )
Remove from tags. Other attribute values are left intact
Remove from and tags. Other attribute values are left intact
Remove space between attributes whenever possible. Note that this will result in invalid HTML!
Trim white space around .

Minifier options like and won’t impact the plain-text size of the output. However, they form long repetitive chains of characters that should improve compression ratio of gzip used in HTTP compression.

Подводные камни

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

Рассмотрим код:


Куда будет присвоено значение ?

Это неизвестно до момента выполнения: если свойство есть в – то туда, а если нет – то в локальную переменную.

Можно ли в такой ситуации заменить локальную переменную на более короткую? Очевидно, нет:

Такая же опасность для сжатия кроется в использованном . Ведь может обращаться к локальным переменным:

Получается, что при наличии мы не имеем права переименовывать локальные переменные. Причём (!), если функция является вложенной, то и во внешних функциях тоже.

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

Что делать? Разные минификаторы поступают по-разному.

  • UglifyJS – не будет переименовывать переменные. Так что наличие сильно повлияет на степень сжатие кода.
  • GCC – всё равно сожмёт локальные переменные. Это, конечно же, может привести к ошибкам, причём в сжатом коде, отлаживать который не очень-то удобно. Поэтому он выдаст предупреждение о наличии опасной конструкции.

Ни тот ни другой вариант нас, по большому счёту, не устраивают.

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

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

В IE10- поддерживалось условное выполнение JavaScript.

Синтаксис: .

Такой код выполнится в IE10-, например:

Можно хитро сделать, чтобы комментарий остался, например так:

…Однако, с учётом того, что в современных IE11+ эта компиляция не работает в любом случае, лучше избавиться от неё вообще.

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

Running from a node-script

It is also possible to run the minifier from within another node script:

As with the command-line variant, the input should be a path to either a javascript file, a css file or a folder.

The options-dictionary takes the same parameters as the command-line variant:

  • output: A path-string that tells where to put the output.
  • template: A string template for how to build the outputted filenames.
  • clean: A bool for whether other files with names similar to the template should be deleted before minifying the contents of a folder.
  • cleanOnly: A bool for whether to run with option and then exiting before minifying any files.

The method for building the output name from the template is exposed for convenience:

If the input-path includes any folders, they will also be added to the output.

If is eschewed, the and digests cannot be calculated.

But there is an option for turning them into either or compatible syntax: Simply add or to the options array:

will return a string for passing to a function, whereas will return a instance for manual comparison.

Setup & usage

mini.css is published in npm, yarn and bower, so you can easily download it, using your preferred package manager:

npm install mini.css
yarn add mini.css
bower install mini.css

After downloading mini.css, pick a Flavor and use it for your project.

Alternatively, you can use either GitCDN or RawGit to import the default flavor of mini.css. Simply add one of the following references inside your HTML page’s tag:

<link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css">

Finally, you can find mini.css on cdnjs, which you can use to include it in your projects.

How to Minify HTML, CSS and JavaScript in WordPress Using Plugins

The easiest way to minify your HTML, CSS and JavaScript in WordPress is to use a plugin. This allows you to optimize your WordPress site files for decreased page load times automatically with a few clicks of a button.

There are a lot of plugins out there that will do the job but I will briefly mention a few standouts.

Autoptimize (FREE)

To use Autoptimize, you can download, install and activate the plugin from the WordPress Dashboard under Plugin > Add New.

Once the plugin is activated, navigate to Settings > Autoptimize. Then under the main settings tab, check the code you wish to optimize (HTML, CSS, and/or JavaScript) and click Save Changes.

You can also click the Show Advanced Settings button at the top of the page to further customize how you want your code to be optimized.


That’s about it! Pretty simple and powerful.

Fast Velocity Minify (FREE)

Fast Velocity Minify is another popular, free and powerful WordPress plugin that does more than just minify. It minifies and combines your CSS and Javascript to reduce HTTP requests to your server, thus living up to its name to give you fast velocity page load times. There are addition optimization options available but the default settings work beautifully for most sites.

To use the plugin, first install and activate if from your WordPress Dashboard by navigating to Plugins > Add New. Then search for “fast velocity minify” and once it popups up in the search results, click to install and activate it.

Once the plugin is activated, your files will automatically become minified and optimized for best performance. That was easy!

Jump over to the plugin settings page (Settings > Fast Velocity Minify) to see all the options available. Under the Status tab, you can see a helpful list of your JavaScript and CSS files that have been processed.

Under the Settings tab, you can customize the way your files are being optimized. Since minification of HTML, CSS and JavaScript are already active, you can use these settings to adjust the default options or disable minification for certain code types. There is even options for optimizing Google Fonts and Font Awesome.

That’s it!

WP Fastest Cache (FREE)

Once the plugin has been installed, simply click the WP Fastest Cache tab in the WordPress Dashboard sidebar (the one with the amazing cheetah icon). Under the settings tab, you will find options to combine and minify HTML and CSS files. Although minifying JavaScript is only available in the pro version.

What A CSS Minifiеr/Comprеssor is

CSS Minifier is a tool to minify CSS.

Minification is thе procеss of minimizing codе and markup in your CSS filеs е.g. rеmoving unusеd codе.

This tool hеlps in rеmoving unnеcеssary or rеdundant data in your CSS codе without affеcting how thе rеsourcе is procеssеd by thе browsеr — е.g. codе commеnts and formatting.

Web browsers do not have a problem with the readability of code when it comes to creating a page or running a script. Minification shreds a code file of all the unnecessary and unwanted data that are present in them in order for the file to be executed. Minified files do not require decompression before they can be read,modified or executed,but this is a different case when related to traditional compression techniques. The process of minification is usually done after the code for a web application has been written,but before the application is been launched. The minified version of a webpage is what is sent whenever an internet user requests for it in order to bring about quick responses and low bandwidth costs.

I am sure that by now we will all be familiar with the term minifications or minifier;anyway,it refers to the process of erasing unnecessary or irrelevant data without having an effect on how the browser processes the resource. These data include;code comments and formatting,removing unused code,using shorter variable and function names,and so on. Minifying the CSS decreases the amount of code that is transferred over the web. The characters that are eliminated during this process are usually not necessary for the code to be executed properly,although it helps to improve readability. It will reduce the page load time and provide a better experience for all users.

Usage

Note that almost all options are disabled by default. For command line usage please see for a list of available options. Experiment and find what works best for you and your project.

Sample command line: html-minifier —collapse-whitespace —remove-comments —remove-optional-tags —remove-redundant-attributes —remove-script-type-attributes —remove-tag-whitespace —use-short-doctype —minify-css true —minify-js true

var minify =require('html-minifier').minify;var result =minify('<p title="blah" id="moo">foo</p>',{  removeAttributeQuotestrue});result;

Оптимизации

Сжиматель бегает по дереву, ищет «паттерны» – известные ему структуры, которые он знает, как оптимизировать, и обновляет дерево.

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

Объединение и сжатие констант

До оптимизации:

После:

  • → .
  • → (научная форма числа, для краткости).
  • → .
  • → без изменений, т.к. результат зависит от .
Укорачивание локальных переменных

До оптимизации:

После оптимизации:

  • Локальная переменная заведомо доступна только внутри функции, поэтому обычно её переименование безопасно (необычные случаи рассмотрим далее).
  • Также переименовываются локальные функции.
  • Вложенные функции обрабатываются корректно.
Объединение и удаление локальных переменных

До оптимизации:

После оптимизации GCC:

  • Локальные переменные были переименованы.
  • Лишние переменные убраны. Для этого сжиматель создаёт вспомогательную внутреннюю структуру данных, в которой хранятся сведения о «пути использования» каждой переменной. Если одна переменная заканчивает свой путь и начинает другая, то вполне можно дать им одно имя.
  • Кроме того, операции и объединены, но это уже другая оптимизация.
Уничтожение недостижимого кода, разворачивание -веток

До оптимизации:

После оптимизации:

  • Если переменная присваивается, но не используется, она может быть удалена. В примере выше эта оптимизация была применена к переменной , а затем и к параметру .

  • Заведомо ложная ветка убрана, заведомо истинная – оставлена.

    То же самое будет с условиями в других конструкциях, например превратится в .

  • Код после удалён как недостижимый.

Переписывание синтаксических конструкций

До оптимизации:


После оптимизации:

  • Конструкция переписана в .
  • Конструкция переписана в .
  • Конструкция была переписана в .
Инлайнинг функций

Инлайнинг функции – приём оптимизации, при котором функция заменяется на своё тело.

До оптимизации:

После оптимизации (переводы строк также будут убраны):

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

Переменные заменяются на значение, если оно заведомо известно.

До оптимизации:

После оптимизации:

  • Переменная заменена на , после чего стало возможным убрать.

  • Переменная заменена на строку.

    Казалось бы – зачем менять на строку? Ведь код стал ощутимо длиннее!

    …Но всё дело в том, что минификатор знает, что дальше код будет сжиматься при помощи gzip. Во всяком случае, все правильно настроенные сервера так делают.

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

Если вынести строку обратно в переменную, то получится как раз частный случай такого сжатия – взяли и заменили на идентификатор . Но gzip справляется с этим лучше, поэтому эффективнее будет оставить именно строку. Gzip сам найдёт дубликаты и сожмёт их.

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

Разные мелкие оптимизации
Кроме основных оптимизаций, описанных выше, есть ещё много мелких:

Убираются лишние кавычки у ключей

Упрощаются простые вызовы Array/Object

…И ещё некоторые другие мелкие изменения кода…

Приватизация свойств объекта

Существуют различные способы объявления объектов. Один из них — , когда для создания не используется оператор .

Общая схема фабрики объектов:

function object() {
  var private = 1  // приватная переменная для будущего объекта

  return {   // создаем объект прямым объявлением в виде { ... }
    increment: function(arg) {  // открытое свойство объекта
        arg += private // доступ к приватной переменной
        return arg
    }
  }
}
// вызов не new object(), а просто
var obj = object()

Прелесть тут состоит в том, что приватные переменные являются локальными, и поэтому могут быть сжаты. Кроме того, убираются лишние .

function SpaceShip(fuel) {
    var doc = document

    var createElement = function(str) {
        return doc.createElement(str)
    }
    var appendChild = function(elem) {
        doc.body.appendChild(elem)
    }
    
    var inflight = false    
    
    var showWarning = function(message) {
        var warningBox = createElement('div')
        warningBox.innerHTML = message
        warningBox.className = 'warningBox'        
        appendChild(warningBox)        
    }
    
    var showInfo = function(message) {
        var messageBox = createElement('div')
        messageBox.innerHTML = message
        appendChild(messageBox)        
    }
    
    return {
        fly: function(distance) {
            if (distance<this.fuel) {
                showWarning("Мало топлива!")
            } else {            
                inflight = true
                showInfo("Взлетаем")
            }
        }
    }
    
}

function flyToMoon() {
    var spaceShip = SpaceShip()
    spaceShip.fly(1000)
}
function SpaceShip(_1){
var _2=document;
var _3=function(_4){
return _2.createElement(_4);
};
var _5=function(_6){
_2.body.appendChild(_6);
};
var _7=false;
var _8=function(_9){
var _a=_3("div");
_a.innerHTML=_9;
_a.className="warningBox";
_5(_a);
};
var _b=function(_c){
var _d=_3("div");
_d.innerHTML=_c;
_5(_d);
};
return {fly:function(_e){
if(_e<this.fuel){
_8("Мало топлива!");
}else{
_7=true;
_b("Взлетаем");
}
}};
};
function flyToMoon(){
var _f=SpaceShip();
_f.fly(1000);
};
flyToMoon();

How to Minify Your Minify your HTML, CSS and JavaScript Using an Online Tool

Many of these online tools have a similar process which involve the following steps:

Paste in your source code or upload the source code file. Optimize the settings for a specific output (if options are available) Click a button to minify or compress the code. Copy the minified code output or download the minified code file.

For this example, I’m going to use the minify tools from minifycode.com.

First, locate the css file (commonly named style.css) in your site files and open the file using a page editor. Then copy the entire css code to your clipboard.

Go to minifycode.com and click the CSS minifier tab. Then paste the CSS code into the input box and click the Minify CSS button.

After the new minified code is generated, copy the code.

Then go back to the css file of your website and replace the code with the new minified version.

That’s it!

Repeat the same process to minify your site’s JavaScript and Html file(s) as well.

More About HTML Compressor

HTML Minification is the process of removing unnecessary spaces,formatting,and comments from the HTML files. Generally,the file types of HTML,HTML,and JS should be minified in order to improve the page loading speed. As search engines like Google,Bing etc penalize slow loading pages,it is necessary to optimize these resource files. In addition,all images on a site should be optimized for search engines so that the page can load faster and provide an excellent user experience.

Your website has to load a lot of static files like HTML,CSS,JavaScript,Images. These elements are not optimized,the web page size will increase. A website’s performance depends on the page size,so you need this code to be as clean and fast as possible. If the file size is large,longer is the time it takes to load,thereby impacting the overall website speed. When you minify HTML using this tool,you can reduce the of the HTML code including your internal CSS and javascript. The HTML Minify tool is the well-written javascript library for efficiently compress HTML page size. This will increase the overall performance of the web page. The speed performance will help you to get a higher rank on the Google search result.

The average time for loading a webpage is 2 to 3 seconds. According to Kissmetrics,47 percent of visitors expect a website to load in less than 2 seconds,and 40 percent of visitors of the website will leave the page if the loading process takes more than 3 seconds. The HTML page size test is very important for loading your web pages faster. The size of your web page’s HTML including internal CSS and javascript is 26.76 Kb and is under the average webpage’s HTML size of 33 Kb. Faster loading websites result in better visitors experience,higher conversion rates,and generally excellent search engine rankings. This Minify HTML or HTML Compressor tool will help you to reduce your web page size.

The importance of minifying your HTML,CSS and JAVASCRIPT file is to improve SEO of your webpage? Is minify HTML,CSS,and JavaScript important for the success and growth of your small online business? Of course,because more users are navigating websites,looking for something to buy,using their smart devices,and Google making Mobile device speed as an important ranking factor,your online business has to load within 2 seconds,or less — If you want to keep you would-be shoppers and not have them leave your site and go to your competitor’s because of your slow website.


С этим читают