How to increase WordPress loading speed. Google PageSpeed Insights service. Remove JavaScript and CSS from the top of the page as recommended by PageSpeed Insights Remove script loading from the top of the page
The message is Google's recommendations for speeding up your site. Such a wish for resource optimization can be found if you check your site for loading speed in PageSpeed Tools.
Remove the JavaScript and CSS blocking the display of the top of the page. What does this mean
On its resource, Google analyzes sites and issues basic recommendations - what a webmaster should do to reduce page load time, which means that the result of this will be an increase in the position of the site in search results.
If the rest of the recommendations, such as: optimize images, optimize the loading of visible content, and the like, will not be a problem, then "remove the JavaScript and CSS blocking the display of the top of the page", which is one of the most important actions, leaves site owners scratching their heads - how to fix it.
I will say right away - I am not strong in programming and on my WordPress blog I prefer scripts to manually changing the code of system files. Decided how to implement this recommendation and i found a way out.
The Autoptimize plugin fixes this issue
1) Install the Autoptimize plugin.
2) Set up exactly as I described in .
3) If PageSpeed Tools still shows an error, look at which scripts it reacts to and remove them from the line in the Autoptimize plugin settings (JavaScript options - Exclude scripts from Autoptimize). This means that they will be optimized.
4) Rejoice! PageSpeed Tools no longer swears.
I told you how to eliminate the recommendation remove the javascript and css blocking the display of the top of the page. Now the visible part of the pages began to load much faster, the site occupies higher positions in the search, there are more visitors.
By the way, here's a comparison of my site's score before I started optimizing (I was stupidly using the WIX builder back then) and after I switched to WordPress (I got a wide range of tools to improve my blog here). Today my score is 96%. And you?
Added on 05/17/2017:
Removed Webvisor from Yandex (since it greatly slows down the download speed) and changed the Metrica code on the site. Now I have 98%.
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?
Best Wordpress Theme: Video Review...
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
I continue the series of articles on the requirements of the PageSpeed Insights service, today we will analyze the grossest violation according to this resource, it sounds like this: “Remove the JavaScript and CSS code blocking the display from the top of the page”, then you will understand why it is one of the important ones. I continue to analyze the ruletov.net blog and here is a screenshot that confirms the errors.
Let's start with a little theory.
For optimization, such a thing as download speed is very important, I will not brag, but I have it 100%. And the most important of this requirement is the response of the site when entering it and the initial formation, or rather the time for which all this happens, and the smaller it is, the better. And now look, the quick response of the site is important to us, and how quickly it will respond if all sorts of js scripts, styles of all plugins and the like are loaded at the very beginning. I went into the code of the page and immediately saw, look at the picture (I only took two lines under them, even more).
As a result, at the beginning, we do not display the site itself, but its peripheral additions. Simply put, the site is not shown because various other elements come out instead of it, and then he himself. Of course, you do not need to delete them in any case, you just need to move them to another place.
This rule works if, in your section
Solution to the problem.
And I found the solution, sadly, in the Autoptimize plugin, I resisted for a very long time, but there was nothing to do. It is set as standard, I personally through the search in the administrative panel itself. I found out that many put it on so as not to worry, and there is almost no load from it. Having installed it, I was very surprised, everything began to work as it should, and PageSpeed does not swear. Now let's actually move on to the analysis of the plugin, because there may be problems in the settings. We go into the plugin settings and start parsing.
Before starting, turn on the advanced mode immediately by pressing the “Show Advanced Settings” button.
We must enable HTML parameters, and everything will be rebuilt, you won’t find anything in the theme itself, but when you go into the source code, you will see a “mess” there, it’s just that the plugin compresses the content to the maximum, removing extra spaces and hyphens. As for “Keep comments”, it’s up to you, it’s just that you will have all the notes in the code in the source code, I left it to be.
- Optimize JavaScript code? Here we put a tick. Let me explain a little, the optimization boils down to the fact that the plugin links js files together and sends them straight to the footer of the site.
- Force JavaScript in ? Controversial, if you have a lot of jquery, then when they are moved to the footer, they may stop working. But then I don’t quite understand, this is why Autoptimize is set to move everything down, but here it is, but anyway I don’t include, it makes no sense, especially jquery elements, I have only one.
- Look for scripts only in ? (deprecated). It is not recommended to translate how to search for scripts only in the head section, and in brackets, for some reason, is not recommended. Again, I don’t understand why it’s impossible, this is exactly what we need, so that everything goes out of our heads into the basement, in any case we note.
- Exclude scripts from Autoptimize. I really like this item, if something stopped working for you as a result of the work of this plugin, then just write the name of the script here, and it will not be affected, cool solution.
- Add try-catch wrapping? I did not put it here, it will add its own tag to non-working scripts, which will prevent their use, and interference for others. Firstly, I don’t have non-working ones, and secondly, I don’t need any tags in the body of the site, search engines may misunderstand. It is better to check the performance of everything on the blog yourself.
- Optimize CSS code? We turn on the check box unambiguously. The plugin will do everything itself, remove the extra lines in the style code, and place them in the right place.
- Generate data: URIs for images?, Look for styles only in ? (deprecated), Inline and Defer CSS?. We do not include all these things, they will only make things worse, I will not describe them.
- Inline all CSS? The screenshot shows that the checkbox is on, but so far it has been turned off. The point is that when it is active, almost the entire stylesheet is transferred to the page. On the one hand, styles are not loading, and on the other hand, the code becomes huge, which also gives a load. Decide for yourself, I can't make a final verdict yet.
- Exclude CSS from Autoptimize. The same as in the previous case, the list of excluded ones, only already css, which the plugin will not touch.
In the article, we will deal with such a concept and an item in pagespeed insights as “remove the javascript and css code blocking the display of the top of the page”. How to deal with it and change this item I will write below ( wordpress only way).
Installing the JS & CSS Script Optimizer Plugin
I have an article about the autoptimize plugin, famous and inimitable, but it began to lose ground, began to make a lot of files and requests, and it also turned out that it gives a security hole.
I was looking for a replacement, I found a cool one, it is installed by a standard search in the admin panel. 
- tab.
- Add new.
- Enter the JS & CSS Script Optimizer query.
- Install and activate.
We fix the problem, remove the javascript and css code blocking the display of the top of the page
The plugin does not weakly create files, but the dynamics are positive. In general, we go into the settings and look at the screenshot, how and what to do.
First section: enable wordpress plugin and hide scripts
In this section, we will enable the plugin completely and set up minification and hiding scripts in the footer.
- Turn on the module.
- Directories on the hosting where the cached style files and javascript will be located.
- Enable javascript compression and optimization module.
- I tested these two points, but I didn’t find any special differences, everything remains in its place, choose any one, or test.
- Ignore external scripts, do not check the box, otherwise they will not be optimized.
- The first checkbox is to combine all scripts into two files and separate them, the first ones will go to the header, the others to the footer, I don’t recommend setting it, because it’s not clear on what basis the location is determined. Combine the second one with one file and move it to the basement, check the box.
- Exclude, if one of the scripts stopped working, then write its name here.
Second section: how to fix styles
The plugin also answers the question of how to fix and compress the appearance files, let's look at the settings.
- Turn on the optimization module.
- When the checkbox is enabled, external ones will not be optimized.
- Merge, enable.
- Active by default.
- Here we prescribe the styles that began to argue. On one client site, I had to register.
- We save the changes.
This completes the setup, wait ten minutes for the plugin to do its job and enjoy the results.
Conclusion
JS & CSS Script Optimizer has many advantages over autoptimize.
- Less controversy.
- Ease of use.
- Removes not only WordPress and theme files from the top area, but also third-party resources.
- Safety.
There is one minus, it does not know how to minify HTML code, which is very bad, I am looking for a solution to the problem, I will write about the solution in the article. Now you know how to get rid of the paragraph in pagespeed insights: remove the javascript and css code blocking the display of the top of the page, good luck.
P.S. And in conclusion, a super video (for experienced ones).
Loading...