Compress css online. Compressing CSS to Reduce Load Time

I continue, now I have one more point in front of me that Google suggested to me: Remove render-blocking JavaScript and CSS from the top of the page. Now I’ll try to figure out what is superfluous there and how to remove extra JavaScript and CSS?

Tests, I remind you, I produce this service: , where specific advice was given to me regarding JavaScript and CSS:

As you can see, this is my biggest problem, 8 scripts are loaded at once and because of this, the first screen does not load as quickly as we would like. There are also 10 css files that are also not optimized. Well, let's solve the problem!

On this issue, the claims are something like this:

Remove the JavaScript blocking the display:

https://prostolinux.ru/…-includes/js/jquery/jquery.js?ver=1.10.2
https://prostolinux.ru/...s/jquery/jquery-migrate.min.js?ver=1.2.1
https://prostolinux.ru/...query-ui-1.8.10.custom.min.js?ver=1.8.10
https://prostolinux.ru/...ial-textboxes/js/wstb.js.php?ver=3.10.60
https://prostolinux.ru/wp-includes/js/tw-sack.min.js?ver=1.6.1

I recently found an interesting solution: in function.php, you need to insert a code that will instruct the scripts we need to load not immediately:

function jquery_in_footer() ( wp_register_script('tie-tipsy', get_template_directory_uri() . '/js/jquery.tipsy.js', array('jquery')); wp_register_script('tie-easing', get_template_directory_uri() . '/ js/jquery.easing.1.3.js', array('jquery')) ; )

In the example, two scripts are added, but we add as many as we like, and those are the ones that slow down the page loading. I tried to apply this solution - it did not work for me, maybe I did something wrong?

Google itself advises to insert an attribute into the script async, which would make its loading asynchronous. But this solution is only suitable for external scripts, for example, this async attribute can be inserted into the Yandex Direct ad script if you have its ad displayed on the first screen. Yandex also has asynchronous code, but it caused problems for me - if one block has asynchronous loading, and the second does not, then only one of them will be displayed. But that's not about it now...

It is difficult to optimize plugins in this way, you need to go into the code of each plugin and prescribe this attribute, or its alternative, into it. I'm not a programmer and I won't do that. In addition, if you constantly update plugins, then all your work will be lost after the update.

To my surprise, I found another, very simple solution to this issue - I installed the plugin asynchronous javascript. After installing it, I got the following result:

As you can see, there is only one script left, and this is the script of the plugin itself. After installation, I personally had no problems with displaying the theme of the site, but if you have some kind of jamb, and you need some script to be loaded immediately, then you can add it to the exceptions in the plugin settings:

This is how the first point is solved, but as you can see, this is still not enough, you need to optimize css, how to do this?

How to optimize CSS performance?

Here is the list of claims:

Optimize CSS performance on the following resources:

https://prostolinux.ru/...wp-special-textboxes.css.php?ver=3.10.60
https://prostolinux.ru/...plugins/wp-ds-blog-map/wp-ds-blogmap.css
https://prostolinux.ru/...t/themes/rockwell_new/rockwell/style.css

Ideally, you need to do this: take all the data from these css files and move it to the main stile.css, and disable the request to them in the plugins themselves. But as you understand, this is a long and tedious business, fraught with many pitfalls. Maybe in the future I will do so, but so far I do not have so much time and experience.

You can solve the issue by installing a plugin that will combine all the styles into one file. I didn’t find a plugin that would only perform this function, so I’ll tell you about a plugin that does everything at once, removes scripts, and optimizes css.

How to optimize everything at once?

I decided to install the plugin myself Autoptimize, which optimizes both scripts and css at the same time. After installing the plugin, you just need to go to its settings and check the boxes in the right place:

After that, Google Page Speed gives the following:

No scripts are loaded, only two css files that include all styles, and all scripts are moved to the footer area. If you now look at the source code of the page, then there is an optimized porridge, which you can’t figure out without a bottle.

At first I thought that this plugin would not solve my problems completely, but as it turned out, it was because I did not fully configure it! After checking the boxes in the right place, I got a GREAT result! ALL PROBLEMS DISAPPEARED!

To do this, you need to click the button above Show advanced settings and then additional settings will appear. You need to check the boxes for:

Optimize HTML code?

Optimize JavaScript code?

Look for scripts only in ? (deprecated)

Optimize CSS code?

Inline all CSS?

Save aggregated script/css as static files

After that, the truth is that the plugin that fixes the widget stopped working for me, but this is not a problem at all, the site loading speed is much more important. And even more important to please Uncle Google ...

I also want to mention one nuance: I have an adaptive template on this site, and if you use it, then the plugin, when displaying the mobile version, cannot completely eliminate all problems. When I enable the mobile version plugin, no errors remain. Once again I was convinced that it is better than adaptive design.

Another similar plugin is WP Minify Fix, he does the same thing, but I liked him less, or maybe I just didn’t fully understand him.

I understand that it’s ideal to do all this without plugins, manually, but it’s very long and dreary and it’s really not worth it, because even having achieved ratings 100, you will not bring the site to the top - site loading speed is only ONE of hundreds of ranking factors, a way and quite important. But do everything you can - you need to!

Removing Google PageSpeed JavaScript and CSS Code

Didn't find an answer? Use the site search

Optimizing HTML code and cascading style sheets (CSS) is necessary in order to speed up the loading process of the site and the content hosted on it. The savings in time and traffic, in general, after a long period of time after optimization, will turn out to be significant, even if the change in speed is not very noticeable externally.

HTML code optimization

In order for the HTML code to contribute to the fast loading of the site, it must meet several conditions:

Be simple and informative. After checking it for validity, you need to fix the errors so that it is easier for bots to analyze it. The code should clearly represent the structure of the page.
The main components of pages, such as headings, indexes, blocks of information should be easily and quickly identified.
Freeing the code from unnecessary information, putting it into separate files (for example, you can put CSS and JS) will increase the download speed, which also simplifies the work of bots.

Having achieved the fulfillment of these conditions, the site can be made faster, more convenient and the efficiency of its indexing by search engine bots can be increased.

Code reduction and CSS optimization

You can make the site code easier by reducing its volume. To do this, you need to perform several operations.

First of all, you should avoid flash technologies, JavaScript, frames, text represented by a picture. All elements, if possible, should be rendered in separate, external files (for example, CSS and JS, as noted above). Special plugins will help to optimize the code. For example, you can install the Autoptimize plugin, which automatically optimizes HTML, CSS, JS code (if you check the appropriate boxes). It is necessary to set up a competent and convenient site navigation, which will be understandable to users and correctly recognized by search engines. This will increase the speed, quality of loading and indexing of the site.

As for CSS optimization, you can do it yourself or entrust it to a special resource or program. Manual optimization is a time-consuming and time-consuming process, besides, you can miss some errors. A program or service for optimization will better eliminate deficiencies, but may disrupt some of the functions that worked on the site, and after checking the content may not be displayed correctly, so their work needs to be corrected.

Some ways to improve CSS structure manually:

Remove extra spaces and line breaks that overload the CSS file and make it difficult for robots to work;
Write generalizing properties instead of repeating similar commands several times;
Use concise, understandable descriptions in comments;
Write unusual fonts using styles, not images;
For images, create alt and title (different for each image) so that their content is recognized by search engine bots;
Apply H1 tools to headings - and so on, so that they are correctly recognized during indexing;
Prescribe in keywords only those keywords that are used on the page, minimize their number;
Use varied and concise meta tags.

CSS and HTML optimizers

You can conveniently and quickly optimize directly in the browser using special services, for example:

CleanCSS.com;
CSS Optimizer;
CSS Compressor
CYPR.com;
autoptimize plugin.

Experts in SEO and IT advise using CleanCSS.com, as it allows you to choose the compression level from low to high, or choose individual settings. After high and highest levels of optimization, the site code becomes almost unreadable, and it will be almost impossible to make changes to it. Therefore, to begin with, you should use the standard optimization. You can choose compression modes for specific content or optimize individual parameters: compression of fonts, images, removal of spaces.

CY-PR.com also has a similar optimization tool that lightens the CSS structure by 25-30%, but there is no way to generate a code file after the operation.

The rest of the services can radically change the code so that some functions on the site stop working. Therefore, with their help, it is better to make only local changes in specific site parameters.

After optimization, you should check the performance of the site, the correct display of the design, and the download speed. Normal is the situation when the pages and user options of the site are loaded no more than 3-5 seconds.

In order to check the degree of optimization and understand how efficiently the HTML code is now written, you can use services such as:

optimization.com;
Portal seo-checklist;
firebug plugin.

These tools will help you check if everything has been done to reduce the amount of HTML code and improve its structure. On the SEO checklist resource, you can check the list of what has already been done for optimization, and what has not yet been done, and set a mark on completed deeds.

Validation

You can check the site code for errors using validation check services - validators. Efficient code validation is done with validator.w3c.org

If the system generates more than half a thousand errors during the first check, you should not be upset. After correcting a certain defect, you can run the check again and there will be much fewer errors, since one defect entails others, and when it is corrected, they will disappear.

A site with corrected and optimized code is more likely to rank high in the search results than a resource with overloaded HTML code that contains errors.

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 a new style sheet 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.

Hello, dear readers of the blog site. We continue to study in detail the possibilities of speeding up the site by following the recommendations, which gives real practical advice on correcting errors.

I already wrote about the implementation of image compression using this tool, now the next step is to optimize CSS and scripts (javascript), which can make a serious, very often even decisive, addition to increasing the speed of loading site pages.

In today's article, I will describe all the practical steps in relation to this aspect, and I will try to consider all the possible nuances that may arise in the step-by-step process of implementing such events.

Remove the CSS code and scripts from the top of the page and merge them into one file

So, in order to understand exactly what actions should include optimizing styles and scripts specifically for your site, the easiest way is to use the services of the well-known PageSpeed tool, which I mentioned at the beginning of the article.

Before proceeding, I would like to say the following. The vast majority of site owners use CMS for their projects (). Unfortunately, there is no universal instruction for carrying out the necessary actions regarding absolutely all CMS, since each of them has its own subtleties.

All we will analyze the practical nuances of optimizing CSS and scripts based on the WordPress blog(), since this form of a web resource is one of the most popular.

In order to systematize the check and save time, it would be wise to choose one of the most "loaded" pages, in relation to which most of the styles and scripts on the site are executed (if you eliminate the main errors in relation to it, then with a high degree of probability the rest will receive a high rating from Page Speed).

Since we are considering a WP blog (this web resource also belongs to this type of site), I will explain what type of pages for testing and an illustrative example I chose. It's no secret that on a standard blog, the main load falls on the posts (articles) pages, since they contain the largest amount of downloadable content (including images), user comments, and are also exposed to various extensions.

For example, on article pages, the site acts with its own styles and scripts. And in some posts, I often use the features of Syntaxhighlighter Evolved, thanks to which beautiful fragments of different codes are displayed with highlighting.

It is one of these pages that I will offer for testing and show the subsequent measures taken by me to eliminate the shortcomings. So, on the analysis page, enter the URL of the desired web page and in a few seconds you will get the result. Here are some styling and scripting errors that Page Speed found:

First, let's take a look at Paige Speed's first tip on scripting, which is: "Remove the JavaScript blocking the display":

//site/wp-includes/js/jquery/jquery.js?ver=1.12..min.js?ver=1.4..js?ver=4.8.2

As advised by Page Speed, JavaScript codes responsible for additional functions should be executed after the elements of the top area of the page are displayed, which will speed up the loading of the page.

The first two lines, concerning the output of the library, and the third, reflecting the action of the script of the Subscribe to Comments plugin mentioned above, are just necessary to provide such functionality. Therefore, it is desirable to place links to these resources at the bottom of the HTML code. But simple manual editing of templates () is not enough here.

I note that earlier Page Speed, based on the results of the analysis, often issued a separate recommendation for combining scripts and styles. If I understand correctly, now when evaluating a page, such advice is not directly available, but it is certainly implied.

The fact is that when testing with other tools to determine the loading time of web pages of a site, this particular direction of optimization is one of the most effective and mandatory, unless, of course, this will harm the functionality of the site.

Therefore, with regard to scripts and styles, we will perform the entire possible set of measures (including not only removing them from the head area, but then merging them into one common file). To do this, WordPress has several functions that perform the following tasks:

wp_deregister_script, wp_deregister_style- unregisters styles and CSS files, respectively;
wp_register_script, wp_register_style— registers scripts and style files;
wp_enqueue_script, wp_enqueue_style— connects scripts and CSS to work.

The use of these functions will make it possible to control all such resources, taking into account the dependence of one on the other, and eliminate their conflict with each other. On this basis, we will solve the problem set before us.

How to load jQuery library from Google CDN

To begin with, I’ll say that JQuery is a collection of scripts that contains a set of ready-made functions and helps developers write JavaScript code. At the present stage, many webmasters use this library, because it allows you to implement some "chips" on the site. Let's say on this blog, one of the elements executed with jQuery is above the header.

It is no coincidence that in the latest versions of WordPress, developers have added the ability to connect and load the library from the bins of the engine itself. This is evidenced by the appearance of the URLs found as a result of the analysis by the Page Speed tool:

//site/wp-includes/js/jquery/jquery.js?ver=1.12..min.js?ver=1.4.1

In this case, "ver=1.12.4" means the version. The second link is interesting, which, as you probably guessed, is also related to the library. This is a script ("jquery-migrate.min.js") that is specifically used to migrate from legacy versions and resolve incompatibility issues.

That is, if you have an old plugin running on your site that requires one of the previous versions, then jquery-migrate.min will contribute to the correct operation of the code for this extension in conjunction with the new modification of the library.

Out of habit, I try to get rid of plug-ins that have not been updated for a long time and apply the appropriate codes, the contents of which satisfy the latest version of the library. Therefore, I decided to disable this additional script, which I will discuss below.

If you remember, based on the results of the PageSpeed analysis, you need to remove the scripts from the head area of the HTML code of the page. To do this, WP has a suitable function that will help you move the link to the footer. By the way, at the same time I decided to reconfigure the library loading in such a way that it was loaded not from the WP folder, but from the Google CDN network itself.

I remind you that for security reasons, when changing any site files, it is advisable to make backup copies of them, as well as use specialized software, for example, the NotePad ++ editor, which allows you to go back as many steps as you like.

This decision was based on the fact that use of CDN (Content Delivery Network or Content Distribution Network- content delivery network) provides a number of advantages, namely:

will ensure that JQuery is transferred from the server closest (geographically) to your computer, which will speed up the download;
there is a high probability that the library is present in the user's browser cache if he has previously visited your site;
the file is given in a compressed form, which reduces its weight;
the library will be loaded in a separate thread.

To carry out output latest jQuery CDN Google in accordance with the above intentions, you need to unregister the library in WP (remember that we are analyzing the optimization in relation to this CMS), and then re-register it using the following function, which must be written in the magic functions.php file:

Function my_scripts_method() ( wp_deregister_script("jquery"); wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", false, null, true); wp_enqueue_script ("jquery"); ) add_action("wp_enqueue_scripts", "my_scripts_method");

This is the design I used when following the recommendations of Paige Speed. By disabling JQuery registration, we automatically unbind jquery-migrate to it, after which only one link to the library will appear at the very bottom of the HTML code of the page:

The movement of this resource to the basement is due to the last argument "true" in the script registration line:

Wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", false, null, true);

It must be borne in mind here that the library script will appear at the bottom of the page only if such a position does not interfere with interaction with plugins, the correct operation of which depends on it. Otherwise, the "true" argument won't work and the jQuery will be placed in the head area.

It is possible that the latest modification of the library will not work with some scripts on your site, then try using this option with the correct version(of course, 1.8.3 can be replaced with any other):

Function my_scripts_method() ( // unregister jQuery wp_deregister_script("jquery"); wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver= 1.8.3", false, null, true); wp_enqueue_script("jquery"); ) add_action("wp_enqueue_scripts", "my_scripts_method");

Even if the structure of your website and the set of existing scripts does not allow you to place the output code at the bottom of HTML pages despite the presence of the "true" attribute, you will still achieve a positive result in increasing the speed of the site due to the fact that the library will be loaded from the Google CDN network.

Disable registration of styles and scripts to merge them

The JQery library, which we unregistered and then re-registered, we just tried to move to the footer so that it does not slow down the loading of the elements at the top of the pages. And here are other scripts, as well as CSS style files, after deactivation in the form of unregistering them, we will merge into one common file.

To minimize the loading time of the pages of a WordPress site, it is recommended to place all scripts in a specially created file with the .js extension in the theme directory, and add individual CSS styles to the existing style.css style file of the same theme.

For this web resource, I also created such a file (codes.js) for JavaScript, the path to which I registered in the footer.php template before the closing body tag (you can peep it in the HTML code at the very bottom of any blog page by clicking on):

It is in it that I insert not only all registered plugin scripts after unregistration, but also JavaScript that I add manually (codes of social buttons, counters, etc.). Therefore, in the results of the check, PageSpeed indicated only the script of the Subscribe to Comments plugin, which I have not had time to properly optimize yet.

So as a first step create a unifying JavaScript file with .js extension. You can place it directly in the WordPress theme directory (/your_theme/codes.js), for some reason I also placed it in the “js” subfolder (/tiny-forge/js/codes.js).,

Then connect the created file by inserting the construction indicated just above into the footer.php template before

. Naturally, in the path to the file, do not forget to replace “site” with your domain, and also insert the name of your theme instead of “tiny-forge”. Watch the video about merging scripts in addition:

");">

After that it is necessary unregister scripts of all plugins pointed out by Page Speed. But, unlike the JQuery library, which cannot be placed in a common file, we will not register these scripts according to the new rules, since we will simply combine them later. For these purposes, you need to add a small function to the same functions.php:

Function my_deregister_javascript() ( wp_deregister_script("ID-1"); wp_deregister_script("ID-2"); wp_deregister_script("ID-3"); ) add_action("wp_print_scripts", "my_deregister_javascript", 100);

But how to find these same IDs (register names) for each of the extensions? I'll demonstrate this by using the SyntaxHighlighter as an example. This example will be the most versatile, since this plugin has a complex file structure and several active scripts, the location of which can be found from the paths displayed in the HTML code of the page:

//site/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/shCore..js //site/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/shBrushCss.js

Despite the fact that these resources do not slow down the loading of the main content (because they are loaded at the bottom of the page) according to Page Speed, their combination is very desirable, as, indeed, any other scripts. Using the URLs above, you can determine all the folders belonging to the SyntaxHighlighter plugin in which they are located.

The files of any WP plugin usually contain the registration (wp_deregister_script) of the included script and its inclusion (wp_enqueue_script). It is with the help of these lines that you can search for the names of the registers in the folders included in the plugin directory using, for example, NotePad++ ():

Thus, for the tested page, three SyntaxHighlighter scripts should be disabled for subsequent copying and pasting of their content into the union file we have already created:

Function my_deregister_javascript() ( wp_deregister_script("syntaxhighlighter-core"); wp_deregister_script("syntaxhighlighter-brush-php"); wp_deregister_script("syntaxhighlighter-brush-css"); ) add_action("wp_print_scripts", "my_deregister_javascript", 100);

However, SyntaxHighlighter has a complex structure, so after pasting their copied content into a shared file, syntax highlighting on the page stops working. Of course, you can turn off the scripts, and then use to select the color of the code displayed on the page, but the shade in this case will be uniform.

On the Internet, I met several options for solving this problem, but all of them do not allow you to save full functionality, and therefore are unacceptable to me. Therefore, for the time being, I left everything in the "original form" regarding this plugin, especially since PageSpeed only suggested compressing one of its scripts, which we can implement. But more on that below when we get to the next optimization step.

As for Reloaded, I had to be smart, as a result of which I determined the ID of this plugin (at least I managed to disable it, which was required). Accordingly, the unregistration function, which again should be placed in the functions.php of the WP theme, in my case looks like this (you can completely copy and use this code if your Google PageSpeed indicated the need to optimize this script):

Function my_deregister_javascript() ( wp_deregister_script("stcr-plugin-js"); ) add_action("wp_print_scripts", "my_deregister_javascript", 100);

So, after disabling all scripts to be optimized ( the location of the files is determined by the path specified in the results of the Page Speed check), copy their content and paste it into a pre-created shared file. I draw your attention to the fact that you need to insert script codes in their pure form, while omitting the tags And otherwise none of them will work.

After that, include the merge file using the code provided at the very beginning of this section. As a result, JavaScript should no longer block the loading of the main content elements at the top of the page.

We figured out the scripts, now let's look at what CSS resources Paige Speed scolds:

The steps for optimizing CSS styles are broadly similar to those I described for JavaScript. Is it true, the main style.css file of the theme will act as a unifying file, where we will add the copied content of the rest of the style files. Moreover, it makes no sense to include style.css in the footer, otherwise the correct display of the page may be violated. It turns out that CSS optimization will consist only in combining styles.

For the tested page of my blog, recommendations are indicated, again concerning the StCR plugin, which has its own style file (stcr-plugin-style.css), as well as font libraries, one of which is registered and included in the same Subscribe to Comments Reloaded, and the other two were activated in the WP theme itself. I don’t need them for this blog, the standard set is enough, so I decided to just turn them off.

Now I would like to touch on the SyntaxHighlighter plugin already mentioned in this article, the scripts of which I decided to leave in their original form, but here its styles are present in the test results section "Shorten your CSS code", which is identical to the compression procedure:

In principle, we can compress these resources separately, but for maximum optimization, as I said, it is better to copy their content and paste them into the theme's base style.css file, which will be compressed after pasting all the CSS styles that need optimization. But first, they should be added to the list of 4 resources already available for deactivation, excluding the main style.css file (see the second screenshot from here up).

For disable style registration use the same function by which we deactivated scripts using the method described above:

Function my_deregister_styles() ( wp_deregister_style("stcr-plugin-style"); wp_deregister_style("stcr-font-awesome"); wp_deregister_style("tinyforge-fonts"); wp_deregister_style("elusive-iconfont-style"); wp_deregister_style(" syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core"); ) add_action("wp_print_styles", "my_deregister_styles", 100);

By the way, registered style IDs can also be found in NotePad++ search using the phrases "wp_register_style" and "wp_enqueue_style", but unlike JavaScript, this is much easier to do. At least I quickly found all the necessary register names.

As I said, the fonts ("stcr-font-awesome", "tinyforge-fonts", "elusive-iconfont-style"), I just disabled, but the content of the plugin CSS files ("stcr-plugin-style", " syntaxhighlighter-theme-default", "syntaxhighlighter-core") copied and pasted into style.css. Let me remind you that the location of all style files to be optimized are indicated in the results of the Page Speed analysis.

But there is a very important nuance here. Before you transfer the style rules of any extension to style.css, be sure to check if there are background or background-image properties, the parameter of which can be a url with a path to the image used, which is displayed using it as a design element (their search can be done using the same Notpad ++):

Background-image: url(images/image-1.png)

If there are such properties, then all relative urls should be converted to absolute (full) ones according to this pattern:

Background-image:url(http://your_domain/wp-content/plugins/plugin-1/images/image-1.png)

That is, in this example, you need to specify , which will lead to the folder with the plugin images, where the desired graphic file is located. Otherwise, WordPress will not be able to find the image, and therefore it will not be displayed.

We compress CSS and JavaScript files online

Before the final optimization step, we summarize in some way the steps we have taken, this will bring some clarity to the process, in the description of which we had to make transitions in order to emphasize the various scenarios initiated by non-standard situations:

as a result of the activities described above, a common JS file was created, where we placed the copied content of all scripts disabled by the “wp_deregister_script” function;
disabled registration of styles that slow down the loading of the page by activating "wp_deregister_style", the contents of some of them (necessary) were copied and added to the main style file of the theme style.css;

Before continuing, let me remind you that with regard to the SyntaxHighlighter plugin, I decided to make a choice in favor of keeping the full functionality and not combining its scripts, since they do not work as part of a common file. However, Page Speed pointed out the urgent need to shorten (compress) one of the scripts responsible for syntax highlighting CSS code:

But it will be possible to compress it along with the common JavaScript file and style.css. To do this, you need to test this page again in PageSpeed:

In passing, I want to note that the measures taken to remove scripts and styles from the head area of the page code, as well as efforts to merge files, did not go unnoticed.

The score for optimization has seriously grown and reached 82 points out of 100 for mobile phones, but for PC it turned out to be in the green zone (90), which characterizes the implementation of almost all the main recommendations that Google presented.

Of the 8 resources (3 scripts and 5 CSS documents), only one remains, and that is the main style.css file, the path to which must be left at the top of the web page to ensure that the browser correctly displays its constituent elements.

In principle, this is already a worthy result, although it can be improved if desired. Worth only download resources already optimized by Google(in the screenshot above, links to them are at the very bottom), among which are CSS and JavaScript documents packed in a ZIP archive.

For the analyzed page, on the basis of the test of which I performed optimization, among the compressed ones were style.css, a common JavaScript file and the chBrushCss.js I mentioned, which I did not combine with other scripts for the reasons voiced above.

You, for sure, will have a different composition of files that have undergone reduction, however, I think the idea and procedure necessary in such a situation are clear. After downloading to your computer, you should unpack the archive and replace the contents of the originals on the server with compressed versions.

It is important to pay attention to the following. Page Speed limits the ability to get truncated files. If the total weight of the optimized documents exceeds 10 MB (this is rare, but it happens), then some of the resources will not be compressed, however, information about them and their location (URL) will be presented in special file Manifest, which is also packed in a ZIP archive:

Based on this information, you can compress scripts and CSS files yourself using online services, of which there are many on the network. By the way, do not confuse the reduction of styles and JavaScript, which involves the elimination of comments, spaces, line breaks, block separation, with , during which other algorithms are applied.

Minify CSS online possible with the help of specialized services. For example, in order to reduce the style.css of one of the projects, I chose this tool, as it allows you to choose from three compression levels (“Light” - light, “Normal” - standard and “Super Compact” - maximum) you need:

From the point of view of productivity and effectiveness of influence, the latter seems to be the most preferable. However, keep in mind that when using Super Compact, the optimized CSS code will be folded into one line without any spaces, which will clearly worsen its readability, and, therefore, will make editing more difficult in the future.

In this case, since I regularly change the current and add new CSS properties, in order to provide convenience when making adjustments to the styling of the site, I chose my favorite "sweet spot" in the form of the Normal level.

I was personally satisfied with the standard compression conditions. I just checked the "Strip All comments" option to completely remove the comments. But you may need to do some fine-tuning before running the code reduction operation. Then open additional options, which can be accessed via the link "Advanced Mode".

After you decide on the settings, copy the style code to be shortened, paste it into the field located just below the settings and press the “compress-it” button (see screenshot above). Get your updated code in seconds:

After the compression is completed (as a result of which, for example, the content of the source file for my site "lost" by 29%), you can select the resulting code using the "Highlight code" button and copy and then paste it instead of the original using Notepad ++.

Just don't forget to check the correctness of the display of the elements of the pages of the site after the online CSS compression is completed and the styles are updated. Moreover, you need to check in all popular browsers ().

In order to make it clearer to you, due to what this or that CSS file is compressed, using the following picture below, I will give a view of the original version:

And here is what it looked like after compression:

This sample was originally just the styles included in the main style.css file of a WordPress theme without being combined with other styles, including plugins. Once you've combined all the CSS properties, the compression gain can be much greater.

For JS files, I decided to use the maximum compression (reduction), since I myself do not edit them because there is no need for it (it is extremely rare to change the content of scripts, in any case, it is easier to replace the entire code).

Minify JS files you can also use online services, one of the most reliable among which is Online YUI Compressor:

Everything here is similar to the CSS shorthand. After pressing the "Compress" button, copy the result and replace it with the contents of the source file. At the end of all the activities described in this article, we will once again test the test page in Page Speed:

What is the first thing that catches your eye? Of course, the fact that the score went up a few more points and ended up in the green zone (for both PC and mobile devices). The "Shorten JavaScript" advice has disappeared from the list of recommendations (if you remember, it was associated with one of the scripts of the SyntaxHighlighter plugin).

Despite the fact that there are still suggestions for improving this and other similar pages ( , removing code from the top area, ), their full implementation is not possible for the simple reason that such steps will be associated with disabling part of the site's functionality, which for me , for example, is unacceptable.

In addition, finding the score in the green zone suggests that further actions will not lead to any significant progress in speeding up the site, but they will take a lot of precious time. So, if you managed to achieve a score of 85-90 points, then the operations related to Page Speed recommendations can be completed at this point.

Moreover, there are additional ways to increase the speed of loading pages, which you can learn about in a timely manner if you subscribe to blog updates by e-mail. Watch 2 more videos that talk about optimizing WordPress scripts and styles using the WP Fastest Cache caching plugin bundle and the Autoptimize extension: Denis

All health. INDICATORS IN GOOGLE SPEED OF MY SITE 100/100 http://sibvaleogroup.ru
Been testing for a long time. What methods and techniques I didn’t use, long trials and errors and a pleasant result in the form of a bonus;). The theme of the site is in great demand: How to start a business? And Prevention and treatment of diseases! Natural ECO product!
Welcome to View Metrics! If anything, please contact me, I can help, just keep in mind, I'm just an amateur with a lot of experience! Respect to all!

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 Web server settings we made, 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 my blog web page 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 came with my WordPress theme was almost 2,000 lines, and after optimization, I managed to reduce the number of lines in it to 400, and the file itself lost one-fifth of its original weight. And after that I like the appearance of 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 he found (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 called “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 the disabling of all plugins that have their own style files, you need to remember to copy all the contents of these most disabled CSS to merge into a common file from the theme folder (I call it style.css). Understandable, right?

You probably have an idea of what is at stake. Such a CSS property might, 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 use a specific example to show where you need to look for the name of the WordPress plugin register, which 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