Code Monkey home page Code Monkey logo

tooling's Introduction

1. Network

1.1 Профиль загрузки ресурсов

HAR

1.2 Неоптимальные места

1.2.1 Дублирование ресурсов

bootstrap

cast_and_code

Не уверен, являются ли нижние jquery дубликатами, или это какие-то плагины.

jquery

openapi

popper

bootstrap_again

fonts

1.2.2 Лишний размер ресурса

Очень много элементов, состоящих из текста, загружаются и рендерятся в виде растровых картинок(!).

Например:

  1. Лого сайта, полностью состоящее из текста, это PNG

logo_img

logo_load

  1. В шапке сайта есть целый список PNG ссылок с обычным текстом

head_img

head_load

В html остались комменты

html_comments

В jquery остались комменты

jquery_comments

Многие js файлы не минифицированны.

1.2.3 Медленно загружающиеся ресурсы

Если отсортировать ресурсы по времени загрузки, то можно заметить, что очень многие из них большинство времени провели в DNS lookup.

dns

dns_load

1.2.4 Ресурсы, блокирующие загрузку

async скрипты в head заблочат парсинг во время исполнения (но не во время загрузки), поэтому могут возникнуть задержки. async

1.2.5 Другое

Много зафейленных запросов

fail

Много редиректов

redirect

Картинка в начале статьи грузится лениво, хотя любой типичный посетитель до неё долистает. Из-за этого видно, как она рендерится во время чтения сайта.

lazy_img

lazy_dom


2. Perfomance

2.1 Профиль

JSON

2.2 Время до FP, FCP, LCP, DCL, Load

FP - 585.3 ms

fp

FCP - 585.3 ms

fcp

DCL - 1378.7 ms

dcl

LCP - 1602 ms

lcp

Load - 41739 ms

load

2.3 Элемент, на котором происходит LCP

Упомянутая выше лениво загружаемая картинка и есть LCP. Причем иногда она загрузится до DCL, иногда после, в зависимости от того, закрыт ли был по дефолту верхний баннер, и появилось ли модальное окно или нет.

2.4 Время на разные этапы обработки документа

  • Loading - 41 ms

  • Scripting - 1531 ms

  • Rendering - 566 ms

  • Painting - 38 ms

stats


3. Coverage

3.1 Профиль

JSON

Скриншот

3.2 Неиспользованный CSS

552 kB

3.3 Неиспользованный JS

2.3 MB


Всего из 4.3 MB не было использовано 2.7 MB. Используются всего 36% из загруженных ресурсов.


CPU 4x slowdown & Slow 3G

1. Network

HAR профиль

Грузятся всё те же ресурсы, но теперь это занимает просто неприличное количество времени. Зато теперь это время тратится на саму загрузку, а не на DNS lookup!

network

network_load

Можно с уверенностью сказать, что сайт не оптимизирован для медленного интернета.

2. Perfomance

JSON профиль

FP - 9270.2 ms

fp

FCP - 9270.2 ms

fcp

DCL - 37460.2 ms

dcl

LCP - 45870.6 ms

lcp

Load - 72058.4 ms

load

LCP это всё то же лениво загружаемое изображение.


Loading - 197 ms

Scripting - 6373 ms

Rendering - 4738 ms

Painting - 352 ms

stats

3. Coverage

То же самое, используем только 36% из загруженных ресурсов. What a waste.

JSON профиль

coverage

tooling's People

Contributors

eri412 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.