Enough paranoia or why you do not shine 100 points in Page Speed
Yo-yo! Great SEO. No one knows what to do for sure, why the site is “not in the top” and why the online business is not working. And in search of the true reason, site owners become like 40-year-old aunts who believe in gypsies in the market. And taking the keyboard and typing a query in a search engine, they see “magic advice” - “100 points on google page speed and you will be happy.” There is nothing wrong with trying to speed up your site, only fl and all sorts of work are filled with requests like “optimize a site to 100 points per page speed”, and the site owners themselves do not understand how much this optimization can actually cost them.
Today I want to tell why it is almost impossible to reach the coveted value on some solutions, or it will be very expensive. I'll review some of the page speed tips and talk about them.
This tip says " For JPEG 2000, JPEG XR and WebP, more efficient compression is used, so they load faster and consume less traffic than PNG and JPEG images. " This advice, in my opinion, is the hardest to comply with for several reasons.
For verification, use caniuse to find out if the browser supports formats. On this site we learn that JPEG 2000 only safari is supported (except for the windows version), JPEG XR for IE. With WebP, everything is better, but guess who does not support it?) Right! Safari. Thus, we learn that there is no universal format, and if you want to use them in your own home, you will have to load at least 2 formats. This is at least time, and as a maximum you will pay in addition to the designer who makes banners for you.
')
Of course, to pay 500 rubles to the designer is not such a big problem, but to deal with the CMS is not such an easy task. At the moment I was able to check support for 3 CMS: Wordpress, Bitrix, Joomla. None of them support any of the listed formats from the “box”. There are several plugins on Wordpress that say they are doing webp, but in fact there are no free plugins for this. In addition, even in these cases, the webp cannot be loaded into the body of the article; when the post is saved, the link to the file of an unsupported format is deleted. In Bitrix even the module is not. You need to write yourself that for wordpress, that for bitrix. These are not simple improvements that require good knowledge and enough time.
Tip: " Optimized images load faster and consume less mobile data ." This is very good advice, but in reality it will always swear at the “big” images, even if you go through the “masks” pages through your images in wordpress with the “Winsite Image Optimizer” plugin that is referenced in Google Help (link to imageoptim. com ) then his dissatisfaction will remain.
What is left to do? It is best to keep the files in the minimum quality at the “photoshop stage” and do it best through import, and not through “save as”. The difference in size is enormous.
Council text: " Some resources prevent loading the content of the page. We recommend setting up the loading of the required JS / CSS resources first and postponing the loading of the remaining resources. "
This advice is extremely simple if you work with a samopisny site, if you know "what, where, when." But if we are talking about CMS and the use of plug-ins and modules, then this is difficult to do. For example, in Wordpress, everything depends on the plugins used. To solve this problem, you have to dig out the plug-in code and find how they connect their scripts (and jquery to boot). Next, using wp_deregister_script, we remove the connection of scripts from the plugin and load them in the right place where we want.
Another way is to compress scripts and / or styles in one file. This method really gives a lot of points on page speed, but in fact it can slow down the rendering of content, and some javascript will not work.
Having experimented with this method, I saw that page speed shows deterioration of the parameter “Approximate delay time for entering”, roughly speaking the site on mobiles starts to slow down. And the more you compress (merge into one file / merge into one file and minify) the files, the worse these parameters are. That is, the smartphone has to strain to read and execute it.
Simple, I think the advice, but not always depends on the web-programmer. Go through the profiler on your site and find the code that slows down. Sometimes it happens that the same code is called several times in the same file. Record the result of the performance in a variable and use it if appropriate. Use caching. I try to use memched, I pay my hosting provider for it from 30 to 120 rubles per month depending on the project. I think this will help you.
Test recommendations " To reduce the time before the start of interaction, we recommend using the lazy loading principle for hidden images after all important resources are loaded ."
I think that it is quite simple to do this and there are many examples on the Internet how to do this. For example, there is a good article on CSS-tricks . For the operation of its code, the main thing is to change the attributes of the image. It is quite simple. Lazy load is good, but +1 javascript file.
At the beginning of the article I talked about rather controversial advice, and by the end I turned to effective. Yes, of course, code optimization is good, but site owners are thinking about profits and that these transformations will lead to increased profits through SEO.
It should be understood that optimization of the site code is only the first step in promotion, and search promotion itself is effective only for those sites where there is a demand for a product.
Do not be paranoid, know that in order to promote your website for SEO, there must be a generated demand, satisfy the needs of your customers and then your website will be in the TOP.
Today I want to tell why it is almost impossible to reach the coveted value on some solutions, or it will be very expensive. I'll review some of the page speed tips and talk about them.
Use modern image formats
This tip says " For JPEG 2000, JPEG XR and WebP, more efficient compression is used, so they load faster and consume less traffic than PNG and JPEG images. " This advice, in my opinion, is the hardest to comply with for several reasons.
Browser support for JPEG 2000, JPEG XR and WebP formats
For verification, use caniuse to find out if the browser supports formats. On this site we learn that JPEG 2000 only safari is supported (except for the windows version), JPEG XR for IE. With WebP, everything is better, but guess who does not support it?) Right! Safari. Thus, we learn that there is no universal format, and if you want to use them in your own home, you will have to load at least 2 formats. This is at least time, and as a maximum you will pay in addition to the designer who makes banners for you.
')
CMS support
Of course, to pay 500 rubles to the designer is not such a big problem, but to deal with the CMS is not such an easy task. At the moment I was able to check support for 3 CMS: Wordpress, Bitrix, Joomla. None of them support any of the listed formats from the “box”. There are several plugins on Wordpress that say they are doing webp, but in fact there are no free plugins for this. In addition, even in these cases, the webp cannot be loaded into the body of the article; when the post is saved, the link to the file of an unsupported format is deleted. In Bitrix even the module is not. You need to write yourself that for wordpress, that for bitrix. These are not simple improvements that require good knowledge and enough time.
Configure efficient image encoding.
Tip: " Optimized images load faster and consume less mobile data ." This is very good advice, but in reality it will always swear at the “big” images, even if you go through the “masks” pages through your images in wordpress with the “Winsite Image Optimizer” plugin that is referenced in Google Help (link to imageoptim. com ) then his dissatisfaction will remain.
What is left to do? It is best to keep the files in the minimum quality at the “photoshop stage” and do it best through import, and not through “save as”. The difference in size is enormous.
Eliminate blocking resources
Council text: " Some resources prevent loading the content of the page. We recommend setting up the loading of the required JS / CSS resources first and postponing the loading of the remaining resources. "
This advice is extremely simple if you work with a samopisny site, if you know "what, where, when." But if we are talking about CMS and the use of plug-ins and modules, then this is difficult to do. For example, in Wordpress, everything depends on the plugins used. To solve this problem, you have to dig out the plug-in code and find how they connect their scripts (and jquery to boot). Next, using wp_deregister_script, we remove the connection of scripts from the plugin and load them in the right place where we want.
Another way is to compress scripts and / or styles in one file. This method really gives a lot of points on page speed, but in fact it can slow down the rendering of content, and some javascript will not work.
Having experimented with this method, I saw that page speed shows deterioration of the parameter “Approximate delay time for entering”, roughly speaking the site on mobiles starts to slow down. And the more you compress (merge into one file / merge into one file and minify) the files, the worse these parameters are. That is, the smartphone has to strain to read and execute it.
Reduce server response time
Simple, I think the advice, but not always depends on the web-programmer. Go through the profiler on your site and find the code that slows down. Sometimes it happens that the same code is called several times in the same file. Record the result of the performance in a variable and use it if appropriate. Use caching. I try to use memched, I pay my hosting provider for it from 30 to 120 rubles per month depending on the project. I think this will help you.
Postpone the loading of hidden images
Test recommendations " To reduce the time before the start of interaction, we recommend using the lazy loading principle for hidden images after all important resources are loaded ."
I think that it is quite simple to do this and there are many examples on the Internet how to do this. For example, there is a good article on CSS-tricks . For the operation of its code, the main thing is to change the attributes of the image. It is quite simple. Lazy load is good, but +1 javascript file.
At the beginning of the article I talked about rather controversial advice, and by the end I turned to effective. Yes, of course, code optimization is good, but site owners are thinking about profits and that these transformations will lead to increased profits through SEO.
It should be understood that optimization of the site code is only the first step in promotion, and search promotion itself is effective only for those sites where there is a demand for a product.
PS
Do not be paranoid, know that in order to promote your website for SEO, there must be a generated demand, satisfy the needs of your customers and then your website will be in the TOP.
Source: https://habr.com/ru/post/434964/
All Articles