As a regular Wordpress site, dial 99/100 in PageSpeed Insights
It all started with the fact that Adsense once again lowered the assessment of the effectiveness of pages:
And we all know that the speed of the site is one of the ranking factors in the issuance of Google.
And if earlier it was possible to correct the situation by simple actions, turn on caching or compress JS, then now, it seems, the time has come to take on the site thoroughly.
Initially, there is a site with articles, of which there are millions on the Internet: CMS Wordpress 4.2, two dozen plug-ins, a theme laid out by a freelancer and shared hosting.
Let us examine the points that were corrected in this particular case. I am sure the article will be useful to everyone who uses WP.
')
The basis was taken by Alexey Klimanov's screencast “ How to increase the speed of the site’s loading ”, for which a special thanks to him. However, WP has its own characteristics, we will consider them in more detail.
Okay, Google, what's wrong with my site?
1. Remove from the top of the page the javascript and css blocking code
The most fascinating item. In short, you need to load CSS with scripts, transfer the scripts to the footer themselves and get rid of the standard Google Fonts connection.
1.1. On the usual WP-site, as a rule, there is a main style.css of the current theme and several files with plug-in styles, as well as various frameworks.
First of all, we transfer all the styles to the style.css file of the current theme, fix the URLs of the pictures, make sure everything works.
In order to disable the loading of styles of individual plug-ins, you need to do the following: we find where styles are connected in a plugin, usually the wp_enqueue_style () function is used for this. The first argument to this function is a CSS file identifier, a text string.
Copy the identifier and unregister this file with wp_deregister_style () in your functions.php. You need to hang the hook on the 'wp_print_styles' event, this is how it looks in full:
It happens that the author of the plugin does not particularly bother and just connects the styles like this:
In this case, if there is no need to constantly update this plugin, it may be worth making your edits and turning off the update for it.
Further, it is important to quickly give the user the first screen. All styles responsible for rendering the first screen are minimized and placed directly on the page in the head.
The remaining styles remain in style.css and are loaded by the script. For example, using such a line in the footer:
In order for users with JS turned off to see the correct page, we frame the standard output of styles in noscript, PageSpeed does not take into account this line:
1.2 All JS scripts are connected at the end of the page. This is done by adding a few lines of code to functions.php:
In this connection, the jQuery library also comes from the footer. But on a regular site, often inserts with jQuery code are displayed in different places on the page. To make this code work correctly, crinches from Colin Gourlay are used .
Add to head:
And in the footer, right after <? Php wp_footer (); ?>:
1.3 Yes, Pagespeed Insights believes that fonts that are downloaded from fonts.googleapis.com slow down the page display. To fix this let's use the recipe from the site css-live.ru
The essence of the method is as follows: we convert the fonts into woff, encode them in base64 and connect them with one CSS file, loading it into localStorage. Before the browser loads the font, the user sees Arial for example.
I will not copy-paste, the method is described in great detail by reference.
2. Use browser cache
For the solution, 2 actions were performed: the Hyper Cache plugin with default settings was installed and the code in .htaccess was added, which gives the 'Expires' headers by file type:
3. Shorten javascript
4. Shorten CSS:
There are plugins, but since the code is not edited every day, it does not make sense to compress it “on the fly” - an extra load on the server. Therefore, the code js and css is minified every time after editing, through online services.
5. Shorten HTML
The easiest item. For html compression, the plugin 'WP-HTML-Compression' was installed and activated.
6. Optimize images
It turned out that 2800 pictures can be downloaded from the server, run through the Tinygrab web interface, and downloaded back in just 4 hours. After that, the tinygrab plugin was installed, which presses all of the loaded PNG and JPEG images, up to 500 images per month for free.
Total:
If you test a random page of the site, we get the result of 95-99, sometimes Google says that third-party scripts and images slow down the work.
For a more objective assessment, a page was created without third-party scripts, i.e. no ads, counters and search forms. Its result varies from 99 to 100 from time to time:
And to be honest,% username%, I myself am a bit shocked.
And we all know that the speed of the site is one of the ranking factors in the issuance of Google.
And if earlier it was possible to correct the situation by simple actions, turn on caching or compress JS, then now, it seems, the time has come to take on the site thoroughly.
Initially, there is a site with articles, of which there are millions on the Internet: CMS Wordpress 4.2, two dozen plug-ins, a theme laid out by a freelancer and shared hosting.
Let us examine the points that were corrected in this particular case. I am sure the article will be useful to everyone who uses WP.
')
The basis was taken by Alexey Klimanov's screencast “ How to increase the speed of the site’s loading ”, for which a special thanks to him. However, WP has its own characteristics, we will consider them in more detail.
Okay, Google, what's wrong with my site?
1. Remove from the top of the page the javascript and css blocking code
The most fascinating item. In short, you need to load CSS with scripts, transfer the scripts to the footer themselves and get rid of the standard Google Fonts connection.
1.1. On the usual WP-site, as a rule, there is a main style.css of the current theme and several files with plug-in styles, as well as various frameworks.
First of all, we transfer all the styles to the style.css file of the current theme, fix the URLs of the pictures, make sure everything works.
In order to disable the loading of styles of individual plug-ins, you need to do the following: we find where styles are connected in a plugin, usually the wp_enqueue_style () function is used for this. The first argument to this function is a CSS file identifier, a text string.
// fancybox, css : wp_enqueue_style('fancybox', …blah-blah-blah…. ); Copy the identifier and unregister this file with wp_deregister_style () in your functions.php. You need to hang the hook on the 'wp_print_styles' event, this is how it looks in full:
function remove_styles () { wp_deregister_style ('fancybox'); wp_deregister_style ('contact-form-7'); wp_deregister_style ('etc'); } add_action ('wp_print_styles','remove_styles',100); It happens that the author of the plugin does not particularly bother and just connects the styles like this:
echo '<link rel="stylesheet" href="…… In this case, if there is no need to constantly update this plugin, it may be worth making your edits and turning off the update for it.
Further, it is important to quickly give the user the first screen. All styles responsible for rendering the first screen are minimized and placed directly on the page in the head.
The remaining styles remain in style.css and are loaded by the script. For example, using such a line in the footer:
<script> jQuery("head").append("<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?> " type="text/css" media="screen">"); </script> In order for users with JS turned off to see the correct page, we frame the standard output of styles in noscript, PageSpeed does not take into account this line:
<noscript><link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" /></noscript> 1.2 All JS scripts are connected at the end of the page. This is done by adding a few lines of code to functions.php:
function footer_enqueue_scripts(){ remove_action('wp_head','wp_print_scripts'); remove_action('wp_head','wp_print_head_scripts',9); remove_action('wp_head','wp_enqueue_scripts',1); add_action('wp_footer','wp_print_scripts',5); add_action('wp_footer','wp_enqueue_scripts',5); add_action('wp_footer','wp_print_head_scripts',5); } add_action('after_setup_theme','footer_enqueue_scripts'); In this connection, the jQuery library also comes from the footer. But on a regular site, often inserts with jQuery code are displayed in different places on the page. To make this code work correctly, crinches from Colin Gourlay are used .
Add to head:
<script>(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document)</script> And in the footer, right after <? Php wp_footer (); ?>:
<script>(function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document)</script> 1.3 Yes, Pagespeed Insights believes that fonts that are downloaded from fonts.googleapis.com slow down the page display. To fix this let's use the recipe from the site css-live.ru
The essence of the method is as follows: we convert the fonts into woff, encode them in base64 and connect them with one CSS file, loading it into localStorage. Before the browser loads the font, the user sees Arial for example.
I will not copy-paste, the method is described in great detail by reference.
2. Use browser cache
For the solution, 2 actions were performed: the Hyper Cache plugin with default settings was installed and the code in .htaccess was added, which gives the 'Expires' headers by file type:
<ifModule mod_expires.c> ExpiresActive On # Cache Images ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds" # Cache other content types (Flash, CSS, JS, HTML, XML) ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 2592000 seconds" ExpiresByType application/javascript "access plus 2592000 seconds" ExpiresByType application/x-javascript "access plus 2592000 seconds" ExpiresByType text/html "access plus 600 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule> 3. Shorten javascript
4. Shorten CSS:
There are plugins, but since the code is not edited every day, it does not make sense to compress it “on the fly” - an extra load on the server. Therefore, the code js and css is minified every time after editing, through online services.
5. Shorten HTML
The easiest item. For html compression, the plugin 'WP-HTML-Compression' was installed and activated.
6. Optimize images
It turned out that 2800 pictures can be downloaded from the server, run through the Tinygrab web interface, and downloaded back in just 4 hours. After that, the tinygrab plugin was installed, which presses all of the loaded PNG and JPEG images, up to 500 images per month for free.
Total:
If you test a random page of the site, we get the result of 95-99, sometimes Google says that third-party scripts and images slow down the work.
For a more objective assessment, a page was created without third-party scripts, i.e. no ads, counters and search forms. Its result varies from 99 to 100 from time to time:
And to be honest,% username%, I myself am a bit shocked.
Source: https://habr.com/ru/post/264033/
All Articles