We analyze Habrahabr using Google Page Speed
Google Pagespeed is a utility for analyzing the performance of the client part of a Web application. A rather extensive analysis will point out the things that should be optimized on the site, increasing the speed and convenience for the audience. The tool is useful and constantly updated with new features. Let's analyze Habr and look at the assessment and recommendations that Pagespeed will show us.
In order to carry out the analysis, it is enough just to go here and in the single input field specify the address of the page. After a few seconds, we’ll get a short summary:
As you can see, there are a number of points that are worth paying attention to and optimizing. They are listed in the Consider Fixing block. Let's walk on them:
We are recommended to minimize HTML. In practice, this is the removal of all unnecessary characters (extra spaces, tabs, line breaks) from HTML. As says Pagespeed, it can save 8% of page size for Habr. This is usually done in the application itself, for example in PHP .
')
We see a set of resources that are used on the page, but compression is not enabled for them. All resources are adriver scripts for loading ads. We could save on them almost 10 Kb in the general request. It would be interesting to know why adriver does not compress its scripts.
At Habr several JS scripts are not minimized. To do this, there are a number of tools, such as YUI compressor or Minify for PHP .
This item means that some of the elements visible on the first screen are under invisible (on the first screen). What does it mean? On the example of Habra, a sidebar, a part of which is visible on the first screen, is located in HTML under the entire post tape:
In idel, either sidebar must be removed or divided into two parts - above-the-fold and the rest. In practice, it is almost unreal. Therefore, they usually manage only to place the main content in HTML before navigation (as it was done on Habré).
This item tells us that on some external resources client caching is not enabled (HTTP Cache-control headers). Again we see only adriver and metric. There are no resources of Habr himself.
At this point, we see pictures that can be compressed by almost 40%. There are many compression tools that allow you to reduce the size of images without loss of quality. This is the most important point, because The relative size of the pictures on the page is usually quite large.
All CSS / JS resources that are declared before the start of the content block the display until they are loaded. Downloading Javascript is usually best moved down to the bottom or using the asynchronous version:
In the case of CSS, this is harder, Pagespeed recommends using a small number of styles embedded in
We start the analysis
In order to carry out the analysis, it is enough just to go here and in the single input field specify the address of the page. After a few seconds, we’ll get a short summary:
As you can see, there are a number of points that are worth paying attention to and optimizing. They are listed in the Consider Fixing block. Let's walk on them:
Minify HTML
We are recommended to minimize HTML. In practice, this is the removal of all unnecessary characters (extra spaces, tabs, line breaks) from HTML. As says Pagespeed, it can save 8% of page size for Habr. This is usually done in the application itself, for example in PHP .
')
Enable compression
- Compressing un1.adriver.ru/…6/0/script.js?vadriver_banner_1863387959 could save 2.9KiB ( 63% reduction)
- Compressing un1.adriver.ru/… 2/0/script.js?vadriver_banner_2100516578 could save 2.9KiB ( 63% reduction)
- ...
We see a set of resources that are used on the page, but compression is not enabled for them. All resources are adriver scripts for loading ads. We could save on them almost 10 Kb in the general request. It would be interesting to know why adriver does not compress its scripts.
Minify javascript
- Minifying habrahabr.ru/javascripts/1400770549/all.js could save 8KiB ( 15% reduction) after compression
- Minifying habrahabr.ru/...vascripts/1400770549/_parts/shortcuts.js could save 2KiB ( 62% reduction) after compression
- Minifying habrahabr.ru/javascripts/1400770549/posts/all.js could save 1.2KiB ( 35% reduction) after compression
- ...
At Habr several JS scripts are not minimized. To do this, there are a number of tools, such as YUI compressor or Minify for PHP .
Prioritize visible content
This item means that some of the elements visible on the first screen are under invisible (on the first screen). What does it mean? On the example of Habra, a sidebar, a part of which is visible on the first screen, is located in HTML under the entire post tape:
In idel, either sidebar must be removed or divided into two parts - above-the-fold and the rest. In practice, it is almost unreal. Therefore, they usually manage only to place the main content in HTML before navigation (as it was done on Habré).
Leverage browser caching
- content.adriver.ru/plugins/autoUpdate.adriver.js (expiration not specified)
- content.adriver.ru/plugins/checkFlash.adriver.js (expiration not specified)
- mc.yandex.ru/metrika/watch.js (60 minutes)
This item tells us that on some external resources client caching is not enabled (HTTP Cache-control headers). Again we see only adriver and metric. There are no resources of Habr himself.
Optimize images
- Losslessly compressing habrahabr.ru/…s/sidebar/bs_logo_for_block_alone_2x.png could save 2.7KiB ( 38% reduction)
- Losslessly compressing habrahabr.ru/images/footer.ourprojects.png?r=2 could save 2.6KiB ( 46% reduction)
- Losslessly compressing habrahabr.ru/images/footer.share.png could save 2.1KiB ( 31% reduction)
- ...
At this point, we see pictures that can be compressed by almost 40%. There are many compression tools that allow you to reduce the size of images without loss of quality. This is the most important point, because The relative size of the pictures on the page is usually quite large.
Eliminate render-blocking JavaScript and CSS in above-the-fold content
All CSS / JS resources that are declared before the start of the content block the display until they are loaded. Downloading Javascript is usually best moved down to the bottom or using the asynchronous version:
In the case of CSS, this is harder, Pagespeed recommends using a small number of styles embedded in
. , above-the-fold :
77% Pagespeed, . , Pagespeed - , 96 100 .
Pagespeed Nginx Apache
Pagespeed Web . , .
Pagespeed
Pagespeed API - . .
Pagespeed -. - , 100 100?. , above-the-fold :
77% Pagespeed, . , Pagespeed - , 96 100 .
Pagespeed Nginx Apache
Pagespeed Web . , .
Pagespeed
Pagespeed API - . .
Pagespeed -. - , 100 100?. , above-the-fold :
77% Pagespeed, . , Pagespeed - , 96 100 .
Pagespeed Nginx Apache
Pagespeed Web . , .
Pagespeed
Pagespeed API - . .
Pagespeed -. - , 100 100?
. , above-the-fold :
77% Pagespeed, . , Pagespeed - , 96 100 .
Pagespeed Nginx Apache
Pagespeed Web . , .
Pagespeed
Pagespeed API - . .
Pagespeed -. - , 100 100?
. , above-the-fold :
77% Pagespeed, . , Pagespeed - , 96 100 .
Pagespeed Nginx Apache
Pagespeed Web . , .
Pagespeed
Pagespeed API - . .
Pagespeed -. - , 100 100?. , above-the-fold :
77% Pagespeed, . , Pagespeed - , 96 100 .
Pagespeed Nginx Apache
Pagespeed Web . , .
Pagespeed
Pagespeed API - . .
Pagespeed -. - , 100 100?
. , above-the-fold :
77% Pagespeed, . , Pagespeed - , 96 100 .
Pagespeed Nginx Apache
Pagespeed Web . , .
Pagespeed
Pagespeed API - . .
Pagespeed -. - , 100 100?
. , above-the-fold :
77% Pagespeed, . , Pagespeed - , 96 100 .
Pagespeed Nginx Apache
Pagespeed Web . , .
Pagespeed
Pagespeed API - . .
Pagespeed -. - , 100 100?. , above-the-fold :
77% Pagespeed, . , Pagespeed - , 96 100 .
Pagespeed Nginx Apache
Pagespeed Web . , .
Pagespeed
Pagespeed API - . .
Pagespeed -. - , 100 100?
. , above-the-fold :
77% Pagespeed, . , Pagespeed - , 96 100 .
Pagespeed Nginx Apache
Pagespeed Web . , .
Pagespeed
Pagespeed API - . .
Pagespeed -. - , 100 100?
. , above-the-fold :
77% Pagespeed, . , Pagespeed - , 96 100 .
Pagespeed Nginx Apache
Pagespeed Web . , .
Pagespeed
Pagespeed API - . .
Pagespeed -. - , 100 100?Source: https://habr.com/ru/post/223817/
All Articles