almasx / yandex-tooling

Yandex-Tooling Project Analysis

This document presents the analysis of the page https://www.gd.ru/articles/9039-finansovyy-kontrol using Chrome DevTools. The analysis covers the Performance, Network, and Coverage tabs of the DevTools.

Table of Contents

• 1. Network Tab Analysis
  • 1.1 HAR Archive
  • 1.2 Non-optimal Places
• 2. Performance Tab Analysis
  • 2.1 Page Loading Profile
  • 2.2 Performance Metrics
  • 2.3 LCP DOM Element
  • 2.4 Document Processing Stages
• 3. Coverage Tab Analysis
  • 3.1 Screenshot After Page Load
  • 3.2 Unused CSS
  • 3.3 Unused JS

Yandex-Tooling: Performance Analysis Tasks

1. Network Tab Analysis (Slow 3G & CPU 4x is ~ same)

1.1 HAR Archive

The resource loading profile when opening the page was written and saved to a HAR archive.

1.2 Non-Optimal Places

1.2.1 Resource Duplication

Interestingly, we notice that all button requests, as circled in the screenshots, are duplicated. It appears that there is an extra request in place as a fallback, meant to be used if the initial request fails. However, in this case, the first requests successfully receive the necessary information for these buttons. Therefore, the additional requests are unnecessary and could be optimized to reduce the load.

Duplicate resources

There is also several resources were found to be duplicated:

• cast_sender.js
• code.js
• openapi.js
• www.lcont.ru
• fontawesome-webfont.woff2

Screenshot 1

Screenshot 2

Screenshot 3

Screenshot 4

Screenshot 5

1.2.2 Extra Resource Size

One image (Just black Bg imageTop_1628667062.7856.j) was identified as having an extra resource size.

Screenshot 6

1.2.3 Slow Loading Resources

There are resources that took more than 1.0s to load.

Screenshot 7

1.2.4 Download Blocking Resources

Several resources were found to be blocking the download:

• actmarketingpixel.js
• openapi.js?116
• theme_gd_ru.js?cache=5a6fa72bdfc8007242bf089feb2ff92203bc8762
• HTMLHelper.js?cache=5a6fa72bdfc8007242bf089feb2ff92203bc8762
• btx.js?cache=5a6fa72bdfc8007242bf089feb2ff92203bc8762
• jquery.easie.min.js?cache=5a6fa72bdfc8007242bf089feb2ff92203bc8762
• AuthButtonWidget.js?cache=5a6fa72bdfc8007242bf089feb2ff92203bc8762
• strategies.js?cache=5a6fa72bdfc8007242bf089feb2ff92203bc8762
• jquery.validate.min.js?cache=5a6fa72bdfc8007242bf089feb2ff92203bc8762
• SearchFormWidget.js?cache=5a6fa72bdfc8007242bf089feb2ff92203bc8762
• DeliveryWidget.js?cache=5a6fa72bdfc8007242bf089feb2ff92203bc8762
• utmEventManager.js?cache=5a6fa72bdfc8007242bf089feb2ff92203bc8762

1.3 Screenshots of Non-Optimal Places

Screenshots of the non-optimal places found were taken and included in the corresponding sections of the report.

2. Performance Tab Analysis

2.1 Page Loading Profile

The page loading profile was written and saved to a file. Since file size is >25MB (~ 27MB), I uploaded zip file

2.2 Performance Metrics

Metrics	Original	Slow 3G & CPU 4x
First Paint	1707.5 ms	10374.1 ms
First Contentful Paint	1707.5 ms	10374.1 ms
DOMContentLoaded Event	2955.6 ms	38604.4 ms
Largest Contentful Paint	3090.6 ms	16640.8 ms
Onload Event	6050.5 ms	60533.0 ms

2.3 LCP DOM Element

The DOM element on which the LCP occurs is an image tag with the class "contentImage__image".

<img loading="lazy" itemprop="image" src="/images/finansovyy-kontrol.jpg" width="600" height="408" data-url="/images/finansovyy-kontrol.jpg" alt= "" title="" class="contentImage__image">

Screenshot

Slow 3G & CPU 4x The DOM element on which the LCP occurs is an image tag with the class "contentImage__image".

<h1 class="page__title" itemprop="headline name">Финансовый контроль: методы анализа и оценки эффективности</h1>
![image](https://github.com/Almasx/Yandex-Tooling/assets/58309601/605aed47-17bb-48d5-92c7-5bb3c2b55b55)

Screenshot

2.4 Document Processing Stages

The time spent in different stages of document processing was measured. Here is a detailed breakdown:

Here is for Slow 3G & CPU 4x

3. Coverage Tab Analysis

3.1 Screenshot After Page Load

Screenshot

Screenshot Slow 3G & CPU 4x

3.2 Unused CSS

During page load, 539 kB of CSS was unused out of a total of 762 kB.

Slow 3G & CPU 4x During page load, 556 kB of CSS was unused out of a total of 762 kB.

3.3 Unused JS

During page load, 2.3 MB of JS was unused out of a total of 3.8 MB.

Slow 3G & CPU 4x During page load, 2.3 MB of JS was unused out of a total of 3.8 MB

Resource Type	Used	Unused	Total
CSS	223 kB	539 kB	762 kB
JS	1.5 MB	2.3 MB	3.8 MB
CSS (Slow 3G & CPU 4x)	206 kB	556 kB	762 kB
JS (Slow 3G & CPU 4x)	1.4 MB	2.3 MB	3.8 MB