Interaction to Next Paint (INP)

123 4
I0
На сайте с 21.01.2010
Offline
106
#11
Пришло не все сайты где стоит виджет группы ВК, в коде вывода виджета нет асинхронной загрузки
K1
На сайте с 03.12.2010
Offline
109
#12
LEOnidUKG #:

Но, как всё это тестировать в реальном времени, нет инструмента. Всё отдано на то, что кодер JS знает как оптимизировать свой код. 

Да, сложный момент. Как вариант, чтобы немножко облегчить процесс, можно тестировать сайт на чем-нибудь медленном. Например, настроить таким образом виртуальную машину, чтобы она тормозила так, что можно замерять время реакции на клик. Возможно, какой-нибудь софт появится в конце концов

K1
На сайте с 03.12.2010
Offline
109
#13
ig0rw #:
Пришло не все сайты где стоит виджет группы ВК, в коде вывода виджета нет асинхронной загрузки

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

Shelton724
На сайте с 26.05.2011
Offline
234
#14
LEOnidUKG #:

Вы наверное говорите про TTFB. А INP это когда ВСЕ ваши JS и CSS загрузили полностью до конца и страница готовая к использованию. И всё это на мобилках с медленным 3G-4G тестируется.


Сейчас опять начнётся хайп про зелёные зоны и люди не понимаю, что есть разница в скорости открытия HTML и скорости когда JS наконец-то закончат свою работу. Сразу напишу пример:

Ваш сайт = коробка с вещами.

CDN, TTFB и "мой сайт быстрой открывается" и т.д. это всё про доставку коробки от сервера до вашего браузера.

Далее эту коробки браузеру надо распаковать и разложить по местам, попутно вытирая от пыли. А это уже:  FCP ,  LCP ,  TBT,  CLS и теперь ещё INP 

Ещё раз, это показатели НЕ касаются ни кэширования, ни gzip, ни CDN, ни первичной загрузки вашей страницы.

Ну если Вы правы - то это капец, как неприятно. На сайте чистый (не измененный) последний bootstrap (в котором наконец-то отказались от jquery) без cms + блоки adsense на неРФ.

I0
На сайте с 21.01.2010
Offline
106
#15
Kenguru111 #:

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

Подскажи пожалуйста как ты это реализовал?
K1
На сайте с 03.12.2010
Offline
109
#16
ig0rw #:
Подскажи пожалуйста как ты это реализовал?

Сгенерировал с помощью ChatGPT js:

document.addEventListener('DOMContentLoaded', (event) => {

let ok = false;

let observer = new IntersectionObserver((entries) => {

  entries.forEach(entry => {

      if (entry.isIntersecting && !ok) {

          ok = true;

          setTimeout(() => {

              let script = document.createElement('script');

              script.src = 'https://vk.com/js/api/openapi.js?16';

              document.getElementById('vk_comments').after(script);

              script.onload = function() {

                  VK.init({apiId: ПОМЕНЯТЬ НА СВОЙ ID, onlyWidgets: true});

                  VK.Widgets.Comments("vk_comments", {autoPublish: 1, limit: 5, width: "600", attach: "photo"});

              }

          }, 150)

      }

  });

}, { threshold: 1.0 });


let target = document.querySelector('#vk_comments'); // здесь id блока с комментариями

if(target) observer.observe(target);

});

Taras Petrenko
На сайте с 11.05.2023
Offline
6
#17
Отличное нововведение от Google 👍 ГСы в топку 😂
Лучшие облачные решения для разработчиков - https://bit.ly/best-cloud-service
V
На сайте с 18.05.2023
Offline
8
#18
В письме от Гугла была ссылка https://web.dev/inp/ и предлагается использовать CrUX. Что это за зверь доступен ли свободно и как его использовать?

Судя по описанию это время от нажатия до реакции. Можно тестировать в хроме в Performance. Странно конечно,  300ms это например плавное но довольно быстрое раскрытие списка (меню).  За это уже штрафовать будут? Или это с момента клика до начала раскрытия.

В performance есть возможность замедления CPU но это абстрактная штука с привязкой к конкретному процессору компа и ориентироваться на него нельзя. Счётчик от Гугла не установлен, значит реальные пользовательские данные не берутся, а делает это измерение робот. Хоть бы писали тогда какой элемент на странице даёт задержку и давали возможность оперативно повторить измерение.
G6
На сайте с 12.07.2007
Online
161
#19

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

Вчера смотрел один сайтик с предупреждением по этой метрике. На сайте из js только картинок парочка подгружается и счетчики, гугл прислал 210 показатель, исправьте. Можно убрать подгрузку картинок, но останутся счетчики. Можно отложить или по действию сделать загрузку счетчиков, но на выполнение скриптов это не скажется. Пока не появится критериев четких и инструмента вменяемого, нет смысла гадать и проверять.

htexture
На сайте с 29.05.2017
Offline
194
#20
Почти на все сайты где есть ДЛЕ пришло уведомление, на ВП тип все ок. Мда
123 4

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий