​Как определить ресурсы, блокирующие рендеринг?

​Как определить ресурсы, блокирующие рендеринг?

При отладке ресурсов, блокирующих парсинг/рендер, можно придерживаться следующего процесса:

1. Возьмите URL и проведите анализ производительности на соответствующей вкладке в инструментах разработчика Chrome.

2. Посмотрите на полосу рендеринга из теста: есть ли в начале большой пустой промежуток?

Если да, то, скорее всего, ресурсы, блокирующие рендеринг, замедляют загрузку страницы, так как они загружаются по частям — смотрите прикрепленный скриншот.

3. Наведите курсор на ресурс в сетевой ленте ниже и посмотрите, выделяет ли тест блокирующие рендеринг ресурсы красным цветом.

Вы можете кликнуть на него, чтобы углубиться в технические характеристики, такие как время подключения к инициатору, время загрузки и так далее.

4. Возьмите URL ресурса, блокирующего рендеринг, и отправьте его в Lighthouse, чтобы зафиксировать URL-адреса рендер-блокеров.

5. Получив URL-адреса, откройте Chrome dev tools > Network resources block > установите флажок Blocked Resources > перезагрузите страницу и посмотрите, изменится ли пользовательский интерфейс или нет.

Если в пользовательском интерфейсе над сгибом ничего не изменилось, значит, блокирующие рендеринг ресурсы, скорее всего, не критичны.

Возможно, вам стоит сильно сократить их количество или даже полностью исключить.

Если пользовательский интерфейс меняется выше сгиба, то эти блокирующие рендеринг ресурсы, скорее всего, критичн

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

@MikeBlazerX

Источник новости https://t.me/mikeblazerx/3903...