CSS compression. Choosing the best online CSS compression service Compress css online

29.03.2020

Read also

Complete removal of superuser rights on Android

Instructions on how to flash the official firmware of the Nexus device (Video) Alternative firmware for lg nexus 5

Battery calibration on Android - how to do it right?

This is the process of removing unnecessary or redundant code in CSS files in order to reduce the file size in order to increase page loading speed.
We bring to your attention 10 CSS Optimization Tools who can help you organize and optimize your css code quickly and easily.

stylestats

The StyleStats service collects and analyzes CSS statistics for any site. Shows errors and gives advice on how to fix them.

Critical Path CSS Generator

Online tool for acceleration and optimization of site loading speed.
We've all experienced the problem of waiting for the page to render until all the plugins and styles have loaded. Sometimes on heavy sites it takes a long time to load all the files. By using the Critical Path CSS Generator service, you can get around this problem. It allows you to generate CSS code in such a way that when opening the page, the part was instantly loaded up to the so-called newspaper bend(first screen). This method has a positive effect on search engine optimization.

Helium

Helium is a scripted tool for unused CSS detection on website pages. It is powered by and runs in the browser.

CSS Ratiocinators

CSS Ratiocinator will automatically reshape your CSS and generate new table styles with more elegant and concise code, while cleaning up unnecessary properties that are inherited by child elements. The script generates new styles based on the element tree (DOM). The end result should be clean and optimized CSS code.

CSS Lint

CSS optimization service- CSS Lint indicates problems with your CSS code. His tasks include troubleshooting and signs of inefficiency.

Do I need to compress CSS code at all?

First of all, let's define why we need to compress css code? If our css files are small, then there is nothing to show off, but if you are developing a solid project, then this is a completely different story. So you're here to learn how to organize CSS compression. More to the point… CSS compression can be implemented in several ways. Below is a list of all CSS compression methods that I know of.

CSS compression methods

Notes: static compression, compresses up to - 80%-90%

Notes: dynamic compression, compresses up to -75%-95% (depends on you)

Notes: static compression, compresses up to - 50%

Just choose the css compression method you like and click on it, or read all the methods and draw your own conclusions, which I strongly recommend to you.

Compressing CSS with Online Compressors

Analyzing the work of css compressors, we can draw the following conclusions about the degree of css compression. The experiment was carried out on the basis of two css files with the following parameters:

first - 7372 bytes

the second is 62,609 bytes

The first css is short and readable, so it won't compress well.

CleanCSS Online Compressor

Address: www.cleancss.com

Pretty solid service, let's see the results of its css compression.

Result:

the first is compressed to 7,075 bytes (96%)

the second is compressed to 52,797 bytes (84.3%)

FormatCSS Online Compressor

Address: www.lonniebest.com/FormatCSS

This service is more for formatting css files than for compressing them. css text entered using copy/paste.

Result:

the first is compressed to 8,105 bytes (109.9%)

the second is compressed to 61,715 bytes (98.5%)

OnlinecompressorRobson CSS Compressor

Address: iceyboard.no-ip.org/projects/css_compressor

The service is flexible in terms of loading source code css. You can load css into it from a local directory, from the Internet, or copy/paste. Let's look at the results of compressing css files.

Result:

the first is compressed to 6,326 bytes (86.3%)

the second is compressed to 48,985 bytes (78.2%)

Onlinecsshtml compressor Tabifier

Address: tools.arantius.com/tabifier

Allows you to compress not only css, but also html code. But the result is not very impressive, draw your own conclusions.

Result:

the first is compressed to 7,876 bytes (106.8%)

the second is compressed to 60,706 bytes (96.9%)

Compressing CSS with PHP

Compress css with using PHP available in several ways, but I will give only one, the most interesting for my understanding. The advantage of css compression in php is the dynamism and flexibility in terms of compression settings, since you set them yourself using your php script. My script looks like this:

A very simple and convenient code that you insert into a css file, which must be included in the most familiar way. Peculiarity given php The script is using regular expressions that remove all comments and whitespace, thus compressing the css.

Compressing CSS with Base 62

The method is quite interesting and effective, but it is static, that is, every time you change your css file, you need to go through the css file compression procedure. This procedure is described step by step below.

1. Compressioncss with compressor

You need to use one of the css compressors to remove all whitespace and align the css code to one line.

2. Creationjs file

You need to create a js file and put the following code in it:

Document.write("");

Instead of /*your style */ insert the resulting string in the first paragraph of the compression procedure.

3. Base 62 compression

As you can see, now you have a js file that you compress using the service Packer-http://dean.edwards.name/packer/

Paste the code of your js file into the top field and select the checkbox base62 encode, and then get the result in the bottom field.

This method allows you to compress a css file from 15kb to 8kb in size, that is, by almost 50%. The advantage of such an intricate procedure is that you insert the resulting code into the js file in which the rest of your js scripts are located and it's all loaded together.

I posted all my knowledge about compressioncss. If you have any ideas about more effective ways compressioncss, please write in the comments. Thank you for your attention!

Hello, dear readers of the blog site. Today I want to break the tradition (write evenly in all headings) and bring to your attention the second part of the article about.

The fact is that it is much easier to write, as they say, in hot pursuit, and not later remember: “how could I do this?”, Which can be quite difficult, especially after some time has passed.

Let's continue to try to increase the speed further with the help of a tool like Page Speed, which is installed as an add-on to Mazila or Chrome. In principle, probably in vain, I said in a previous article that this plugin itself cannot do anything to speed up your project, but only gives recommendations on what exactly you should pay attention to in the first place. It turns out that he himself can do something.

Optimizing and Compressing CSS in Page Speed

In the last article, we discussed in detail how to install the Page Speed plugin and how to optimally configure caching of static objects (images, scripts, styles) in user browsers.

After the settings we made Web servers, this plugin has already stopped swearing at a strong decrease in speed due to "Leverage browser caching":

In fact, Page Speed points out that almost all style files that are loaded into the visitor's browser along with web page my blog, can be significantly optimized (compressed) to reduce their weight.

If you click on the plus sign next to “Minify CSS”, a list of objects that it would be desirable to optimize (compress) will open:

But the most remarkable thing is that the plugin itself will do all the optimization (compression) work. Look carefully, at the end of the line with the name of each unoptimized style file in its window, you will be prompted to view the optimized (compressed) version, and if you wish, download the cascading style sheet file that is as free from garbage as possible, which will allow, albeit a little, but increase the download speed site.

Optimization is to remove all of them unnecessary spaces and comments, which do not affect the operation of your resource in any way, but with their, albeit small, but still additional weight, slow down its loading.

For example, my unoptimized style.css that comes with WordPress theme, consisted of almost 2000 lines, and after optimization took place, it was possible to reduce the number of lines in it to 400, and the file itself lost one fifth of its original weight. Yes and appearance After that, I like the properties prescribed in it much more.

Judge for yourself, this is how it looked before I managed to compress it in Page Speed:

And this is what it looks like after optimization:

So, for this you will only need to download the compressed version from the "Save as" link. Downloaded?

Now connect via FTP, go to the folder where you have the original stylesheet file (see the path in the Page Speed window) and replace the old uncompressed one with the new one (the one that was optimized for you), remembering to give it the same name as and the original, otherwise the cascading style sheets will not work. Mustache, enjoy those milliseconds by which the loading of your site has accelerated.

But in addition to the main CSS file that usually comes with the theme you use, in the Page Speed window you can also see those style files that are used by your installed plugins and extensions for WordPress (or any other engine you use). In principle, you can compress them in the same way, as discussed above.

How to merge external CSS into one common file

But the best option would be to combine all external CSS into one, and only then compress it using Page Speed. This would be the perfect option to gain a few more milliseconds in download speed. Actually, the plugin itself suggests just such an option in the “Combine external CSS” field:

Here he offers us to combine all the external files(External scripts can also be combined into one - "Combine external JavaScript"), loaded into the browser of visitors, into one common one, but it will be necessary to disable all unnecessary style files. The problem is that many of them create and include plugins or other extensions to your engine.

You can, of course, get into the plugin code and disable styles from there, but if you update this extension, you may have to dig into the internals of the plugin again to disable it again. For WordPress, there is a way to solve this problem centrally, through the known to you, which should be present in the folder with the theme you are using:

/wp-content/themes/WordPress theme name/functions.php

If you don’t find functions.php, you can simply create it, for example, in the Notepad++ editor and upload it to the WordPress theme folder. But, for sure, he will still be there. In it you will need to add a small piece of PHP code like this:

Add_action("wp_print_styles", "my_deregister_styles", 100); function my_deregister_styles() ( wp_deregister_style("google-ajax-translation"); wp_deregister_style("syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core"); wp_deregister_style("wp-pagenavi"); wp_deregister_style("cfq" ); )

By doing so, we are deregistering the styles of some plugins in WordPress. As a result, individual CSS files of these plugins will not be loaded into visitors' browsers.

And even if you update any of them, nothing will change and you will not need to re-dig into their code. Well, since they are updated quite often, then in such a cunning way to turn off we will greatly save our time and nerves.

Everything seems to be simple - they turned it off and that's it, you can forget about it. Yes, not so. Beforehand, you still need to find in the code of each WP plugin (in which we disable the loading of styles) the register that is responsible for connecting them.

If you take a closer look at the above code, you will notice the lines where these very registers are listed:

wp_deregister_style("google-ajax-translation"); wp_deregister_style("syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core"); wp_deregister_style("wp-pagenavi"); wp_deregister_style("cfq");

That is, for example, for a wonderful WordPress Plugin the register will be named "wp-pagenavi" and for the Comment Form Quicktags plugin it will be "cfq". If you use the same extensions as I do, then you can not climb into their PHP code, but borrow registers from the code above.

But with disabling for all plugins that have their own files styling, you need to remember to copy all the contents of these most disabled CSS to be combined into a common file from the folder with the design theme (I call it style.css). Understandable, right?

You probably know what in question. Such CSS property could, for example, look like this:

Translate_links .translate_flag(background:url(flags.png) no-repeat;border:0;margin:0;padding:0;)

The url(flags.png) entry means that the image called flags.png will need to be looked for in the same folder as the cascading style sheet file itself. But the fact is that when you copy the contents of all plugin styles, then they will probably use such relative paths to images.

And this will lead to the fact that WordPress will not be able to find the desired images in the specified relative path. After all, they still remained in the folders with plugins. Therefore, when combining CSS, it is imperative to replace relative paths to background images into absolute ones, which look something like this:

After you do this, all background images used by plugins that you have disabled their own styles will return to their original positions. Yes, I think you can handle it.

By the way, after you have all the style code in one common file, do not forget it again compress via Page Speed, finding in its window a line called Minify CSS and clicking on the plus sign next to this inscription, and then copying the optimized "Save as" file. Next, replace the original file in the folder with your WordPress theme with it.

Disabling external CSS to speed up the site with an example

Let's now on specific example I will try to show where to look for the name of the WordPress plugin register that allows you to disable the loading of its styling. Actually, to find the right register, we will need a file with the PHP extension from the folder with this plugin. In general, they all live in the same folder:

/wp-content/plugins

Therefore, this is where you should look for the desired directory. Let's take SyntaxHighlighter Evolved as an example, because it has the rather unusual situation of using multiple stylesheets depending on which styling options you have selected in the plugin's settings.

As you can see, I have selected the view that was in the second version of the plugin, and the SyntaxHighlighter color scheme is used by default. Now I will need to go to his folder by connecting to the blog via FTP:

/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/styles

copy the contents of the two CSS files that we plan to disable: shCore.css and shThemeDefault.css , because it is on them that Page Speed points to us with a finger (well, in the settings I have chosen the default theme, for which, quite logically, we need CSS with the appropriate name).

After that, open for editing:

/wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php

Then search and read. Look for something containing "CSS". In syntaxhighlighter.php this would be the code snippet:

// Register theme stylesheets wp_register_style("syntaxhighlighter-core", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shCore.css"), array(), $this->agshver); wp_register_style("syntaxhighlighter-theme-default", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeDefault.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-django", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeDjango.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-eclipse", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeEclipse.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-emacs", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeEmacs.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-fadetogrey", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeFadeToGrey.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-midnight", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeMidnight.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-rdark", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeRDark.css"), array("syntaxhighlighter-core"), $this->agshver);

We look at which registers will allow us to disable the loading of shCore.css and shThemeDefault.css styles. We copy their names (in my case, they will be: syntaxhighlighter-theme-default and syntaxhighlighter-core) and add two additional lines to functions.php (from the folder with your theme) to the piece of code described just above:

wp_deregister_style("syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core");

And you repeat this for each WordPress plugin for which you plan to disable style loading. I hope that everything became clear and understandable to you. If not, then try re-reading it again, because the topic is not too easy to understand, although I try not to unnecessarily complicate or make the text heavier (who needs details, because the simpler the better).

As a result of all the manipulations, you will have a whole list of lines with plugin registers in functions.php, whose styles need to be disabled. And in one common CSS file, from the theme folder, it will contain all the style code of your site. Let me remind you once again - do not forget to compress or, in other words, optimize style.css through Page Speed in the way described above.

Good luck to you! See you soon on the blog pages site

You may be interested

The functions.php file from the WordPress theme folder and real examples of its use
How to maximize website loading speed and optimize server load Free themes and templates for WordPress - where to download them
How to get a fast site - optimization (compression) of images and scripts, as well as reducing the number http requests
How to find and remove unused style strings (extra selectors) in your site's CSS file
WordPress theme (template) optimization to reduce its load on the hosting server, WP Tuner plugin and the number of database requests
Creating CSS Sprites online generator Sprites Me to reduce server requests
Themes for WordPress - what templates they consist of and how it all works
Reducing the memory consumption in WordPress when creating pages - WPLANG Lite plugin to replace the localization file
How to Write Articles in WordPress - Visual and Html editors, headings and highlighting keywords
Gzip compression to speed up site loading - how to enable it for Js, Html and Css using .htaccess file

Ladies and gentlemen, let's turn on the paranoia:

However, if we consider the average result, then 2 tools stand out with a fairly large margin:
1. cssresizer.com (84.13%);

whois spoiler

[email protected]:~$ whois cssresizer.com

Whois Server Version 2.0

Domain names in the .com and .net domains can now be registered
with many different competing registers. Go to http://www.internic.net
for detailed information.

Domain Name: CSSRESIZER.COM
Registrar: REGISTRAR OF DOMAIN NAMES REG.RU LLC
Sponsoring Registrar IANA ID: 1606
Whois Server: whois.reg.com
Referral URL: http://www.reg.ru
Name Server: NS1.MCHOST.RU
Name Server: NS2.MCHOST.RU
Name Server: NS3.MCHOST.RU
Name Server: NS4.MCHOST.RU
Status: clientTransferProhibited https://icann.org/epp#clientTransferProhibited
Updated Date: 21-apr-2016
Creation Date: 08-apr-2016
Expiration Date: 08-apr-2017

For more information on Whois status codes, please visit https://icann.org/epp

NOTICE: The expiration date displayed in this record is the date the
registrar "s sponsorship of the domain name registration in the registry is
currently set to expire. This date does not necessarily reflect the expiration
date of the domain name registrant"s agreement with the sponsoring
registrar. Users may consult the sponsoring registrar's Whois database to
view the registrar"s reported date of expiration for this registration.

TERMS OF USE: You are not authorized to access or query our Whois
database through the use of electronic processes that are high-volume and
automated except as reasonably necessary to register domain names or
modify existing registrations; the Data in VeriSign Global Registry
Services" ("VeriSign") Whois database is provided by VeriSign for
information purposes only, and to assist persons in obtaining information
about or related to a domain name registration record. VeriSign does not
guarantee its accuracy. By submitting a Whois query, you agree to abide
by the following terms of use: You agree that you may use this Data only
for lawful purposes and that under no circumstances will you use this Data
to: (1) allow, enable, or otherwise support the transmission of mass
unsolicited, commercial advertising or solicitations via e-mail, telephone,
or facsimile; or (2) enable high volume, automated, electronic processes
that apply to VeriSign (or its computer systems). compilation,
repackaging, dissemination or other use of this Data is expressly
without prohibited the prior written consent of VeriSign. You agree not to
use electronic processes that are automated and high-volume to access or
query the Whois database except as reasonably necessary to register
domain names or modify existing registrations. VeriSign reserves the right
to restrict your access to the Whois database in its sole discretion to ensure
operational stability. VeriSign may restrict or terminate your access to the
Whois database for failure to abide by these terms of use. VeriSign
reserves the right to modify these terms at any time.

The Registry database contains ONLY .COM, .NET, .EDU domains and
Registrars.

Domain name: cssresizer.com
Domain idn name: cssresizer.com
Status: clientTransferProhibited http://www.icann.org/epp#clientTransferProhibited
Registry Domain ID:
Registrar WHOIS Server: whois.reg.com
Registrar URL: https://www.reg.com/
Registrar URL: https://www.reg.ru/
Registrar URL: https://www.reg.ua/
updated date:
Creation Date: 2016-04-08T14:01:10Z
Registrar Registration Expiration Date: 2017-04-08
Registrar: Registrar of domain names REG.RU LLC
IANA Registrar ID: 1606
Registrar Abuse Contact Email: [email protected]
Registrar Abuse Contact Phone: +7.4955801111
Registry Registrant ID:
Registrant ID:
Registrant Name: Protection of Private Person
Registrant Street: PO box 87, REG.RU Protection Service
Registrant City: Moscow
Registrant State/Province:
Registrant Postal Code: 123007
Registrant Country: RU
Registrant Phone: +7.4955801111
Registrant Phone Ext:
Registrant Fax: +7.4955801111
Registrant FaxExt:
Registered Email: [email protected]
Admin ID:
Admin Name: Protection of Private Person
Admin Street: PO box 87, REG.RU Protection Service
Admin City: Moscow
Admin State/Province:
Admin Postal Code: 123007
Admin Country: RU
Admin Phone: +7.4955801111
Admin PhoneExt:
Admin Fax: +7.4955801111
Admin FaxExt:
Admin Email: [email protected]
Tech ID:
Tech Name: Protection of Private Person
Tech Street: PO box 87, REG.RU Protection Service
Tech City: Moscow
Tech State/Province:
Tech Postal Code: 123007
Tech Country: RU
Tech Phone: +7.4955801111
Tech Phone Ext:
Tech Fax: +7.4955801111
Tech Fax Ext:
tech email: [email protected]
Name Server: ns1.mhost.ru
Name Server: ns2.mhost.ru
Name Server: ns3.mhost.ru
Name Server: ns4.mhost.ru
DNSSEC: Unsigned
URL of the ICANN WHOIS Data Problem Reporting System: http://wdprs.internic.net/
>>> Last update of WHOIS database: 2016-07-27T00:49:39Z<<<

For more information on Whois status codes, please visit
https://www.icann.org/resources/pages/epp-status-codes-2014-06-16-en.

% By submitting a query to REG.RU Whois Service
% you agree to abide by the following terms of use:
% http://www.reg.ru/whois/servpol (in Russian)
% http://www.reg.com/whois/servpol (in English)

And again:

with a fairly large margin, 2 instruments stand out

I almost forgot

Optimizing or compressing css styles will speed up the loading of the site page, speed up parsing and reduce the amount of data transferred. At the same time, the site will not lose a bit of its beauty, because css-style compression takes place without harm to the performance of its code. For these purposes, I suggest you use a special online tool located on the following page http://www.cssdrive.com/index.php/main/csscompressor/ which will be able to adequately compress your CSS file.

How is CSS compression done?

Compression of CSS styles occurs by using several available actions:

Removing empty lines.
Removing extra spaces.
Removing indents.
Removing comments.
Use of compressed color codes where possible.
Removing unnecessary characters.

To see all the actions that happen to CSS styles during compression, click the button advanced mode on the site above. As you can see, none of the above CSS styling optimizations will harm the functionality of CSS . Approximately the same actions are available for

How to optimize css?

The interface of the site I have given for compressing CSS files is quite simple:

In the first paragraph, you need to select the compression level of the style. I suggest choosing a compression ratio Normal, because it strikes a balance between compression and code health. Using the same level of compression Super Compact can lead to bugs in the code.

The second paragraph is for deleting comments. This setting is displayed on the main form because the webmaster may need comments in the future. Therefore, erasing them to zero without warning is a bad idea. The first checkbox in this paragraph will not delete comments, the second one will delete all comments. But the third point will delete comments, the length of which is not less than the value you have chosen.

Also, you can always go to Advanced mode compress CSS styles and select only the compression paths you need.

Push button Compress-it You run a squeeze css-file and get the long-awaited result in the form of an optimized style file. Now it remains only to replace the contents of the original css file with the optimized code.