Reducing css. Optimization (removal of code from the top of the page, merging, compression) of CSS and scripts, as well as setting up JQuery loading from Google CDN
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
nikitas@pentagon:~$ whois cssresizer.com
Whois Server Version 2.0
Domain names in the .com and .net domains can now be registered
with many different competing registrars. 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
except automated 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 fax; or (2) enable high volume, automated, electronic processes
that apply to VeriSign (or its computer systems). The compilation
repackaging, dissemination or other use of this Data is expressly
prohibited without 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
Registrar IANA 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 Fax Ext:
Registrant 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 Phone Ext:
Admin Fax: +7.4955801111
Admin Fax Ext:
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.mchost.ru
Name Server: ns2.mchost.ru
Name Server: ns3.mchost.ru
Name Server: ns4.mchost.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 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);
Let's look at which registers will allow us to disable loading of shCore.css and shThemeDefault.css styles. We copy their names (in my case it will be: syntaxhighlighter-theme-default and syntaxhighlighter-core) and add two additional lines to the 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 repeat this for each WordPress plugin for which you plan to disable loading styles. I hope that everything has become clear and understandable to you. If not, then try to re-read it again, because the topic is not too simple to understand, although I am trying not to unnecessarily complicate or burden the text (who needs details, because the simpler the better).
As a result of all the manipulations carried out, you will have a whole list of lines in functions.php with registers of plugins whose styles need to be disabled. And in one common CSS file, from the folder with the theme, 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 manner described above.
Good luck to you! See you soon on the pages of the blog site
You might 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 you can download them 
How to get a fast website - optimization (compression) of images and scripts, as well as reducing the number of Http requests 
How to find and remove unused style lines (extra selectors) in your site's CSS file 
Optimizing a WordPress theme (template) to reduce its load on the hosting server, the WP Tuner plugin and the number of requests to the database 
Creating CSS sprites in the Sprites Me online generator to reduce the number of requests to the server 
Themes for WordPress - what templates they consist of and how it all works 
Reducing memory consumption in WordPress when creating pages - WPLANG Lite plugin for replacing the localization file 
How to write articles in WordPress - visual and Html editors, headings and keyword highlighting 
Gzip compression to speed up site loading - how to enable it for Js, Html and Css using the .htaccess file
Good morning dear friends! It turned out that the week was devoted, to a greater extent, to optimizing and speeding up the loading of the landing page. Today we will continue to “maniac” in this area. Next up is CSS code optimization. I'll tell you about an online service for optimizing style sheets.
These services are quite simple and work on the principle:
“Inserted unoptimized code. I waited a few seconds. Copied the optimized code"
As you can see, it’s quite simple and inexpensive, but not everyone finds the time to do it. But in vain!
Online css optimizationThe first thing you should understand is that you don’t need to go to extremes. The fact is that, for example, spaces and line breaks increase the overall weight of the page. Once you know this, you can start deleting them all. As a result, you will have completely unreadable, but optimized CSS code.
This is only good if you are working alone and the style sheet will never be edited again, or almost never. Because if you work in a team, it will be very difficult for the person reading your code to understand it.
But even if you look at your style sheet yourself six months later, you are unlikely to be able to easily understand what is responsible for what in it.
Therefore, we optimize, but don’t go crazy - that’s the first thing.
The second thing is that when using services that offer CSS code optimization, it is important to understand what is happening there and what is being optimized. Now I will show you some examples.
For example, colors. Usually, we specify them in the RGB standard. The white background for an element is set as follows
Background: #ffffff;
But not everyone knows that if the first 3 values are repeated, then you can leave only them. For example, like this:
Background: #fff; background: #000; color: #123;
The next thing that comes to mind is padding and margin.
Padding: 10px 20px 10px 20px; /*instead of*/ padding: 10px 20px; margin: 15px 20px 15px 20px; /*instead of*/ margin: 15px 20px;
You can also optimize the CSS code by specifying shortened fonts:
Font: bold 18px Verdana, Arial, sans-serif;
Font-size: 18px; font-family: Verdana, Arial, sans-serif; font-weight: bold;
As you can see - one line versus three. And thus, sometimes it is possible to reduce the weight of the style sheet by 20 - 30%.
The third thing to remember is that always before any optimization, be it images or CSS, you need to make a backup copy (in case of an unexpected error or something else). Just make it a rule to always make a copy before editing.
That's it. Let's move on to the service.
Review of a service for online optimization of CSS code.Most people use these popular sites to optimize CSS code:
alexvaleev.ru/cssoptimizer
css-school.ru/optimise
The functionality is virtually the same, simple and straightforward. But after analyzing them, I found both pros and cons. Let's look at one of them - css-school.ru/optimiser
On the left is a window for inserting CSS code, and on the right is a window for setting optimization parameters. Let's look at the window in more detail.
Compression ratio.
In order for the text to remain readable, it is necessary to set a standard compression level, in which case each new property will be written on a new line. If you set it to “high” or “maximum”, the file size will be smaller, but everything will be written on one line. This is not very convenient for further edits, but if there are none, then you can safely set it to “maximum”.
Next is the window for specifying your optimization templates; we’ll skip it.
Next is a tab that allows you to select and combine selectors with the same properties. It all depends on the project and tasks. If you wrote CSS code strictly in a certain sequence and everything is strictly one after another, then you should not choose to combine selectors. This will make it easier for you to navigate the code.
Style optimization. Leave it as “safe”
Compressing colors and font properties is what I told you about. Although there is a problem with compression of font properties. It does not optimize the code, as I told you above.
The remaining settings do not raise any questions. In general, I noticed that all Russian-language services for online optimization of CSS code suffer from a “disease”. They don't optimize css3 code. Which made me completely abandon such optimizers.
For example, I entered the following code:
I specially wrote it with missing lines, everything in detail, etc. And I expected to see something like this:
H1 ( color: #fff; padding: 20px 25px; font: 700 18px Verdana, Arial, sans-serif )
But unfortunately it only turned out like this:
Seven lines instead of five. This didn't suit me. I wanted to find and tell you about better quality material. Because I understand that some people are not familiar with the abbreviated types of style entries.
And some of the functionality of the services seemed unnecessary to me, or, well, pseudo-functionality. In order to create the appearance of a “sophisticated” resource. Well, why do I need to check the box next to “reduce colors”. Of course, if I came to optimize my code, then I need a shorter description of everything that is possible! (My opinion)
So, I continued my search and found the very resource that satisfied my needs for optimizing css code. This is devilo.us
A truly amazing service that I can confidently recommend to you. The functionality is the same as previous sites. But this one coped with the task 100%. See:
As you may have noticed, the compression percentage is 43.3%, while on the previous site it was 25%. In bytes, it turned out to be 58 > 37. That's how boring I am. But when the CSS file has 3000 lines, then such optimization can reduce the weight of the document by half.
Of course, over time you will learn to write optimized CSS code right away, and you will need such services less and less, but it doesn’t hurt to test yourself. At least for the presence of extra spaces and skipped lines.
And that’s all for today. See you soon.