Новое учебное пособие от Google может помочь вам обнаружить и решить проблемы взаимодействия с последующим рисованием (INP).

  • Google выпустил видеоинструкцию по обнаружению проблем с взаимодействием со следующим рисованием (INP) с помощью Chrome DevTools.
  • INP недавно заменил задержку первого ввода (FID) как основной жизненно важный веб-сервер.
  • Выполните шаги, описанные в руководстве, чтобы оценить и оптимизировать показатель INP вашего веб-сайта.

Google опубликовал видеоинструкцию по обнаружению и решению проблем взаимодействия с последующим рисованием (INP) на веб-сайтах.

Руководство является своевременным, поскольку INP недавно заменил задержку первого ввода (FID) как основной веб-важный фактор, сигнализируя об изменениях в том, как Google оценивает взаимодействие с пользователем.

Оценка & Оптимизация производительности INP

В учебнике предлагается оценить текущую эффективность INP вашего веб-сайта с помощью таких инструментов, как PageSpeed ​​Insights и отчет о взаимодействии с пользователем Chrome.

Стремление к “добрая” пороговое значение, представляющее производительность на 75-м процентили загрузок страницы, было бы наилучшим.

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

Учебное пособие

Видео рассказывает зрителям об использовании Chrome DevTools для определения проблем INP.

Вот детальная разбивка шагов, рассмотренных в руководстве:

<ол>

  • Откройте Chrome DevTools: начните с открытия панели Chrome DevTools в своем браузере. Вы можете сделать это, щелкнув правой кнопкой мыши на странице и выбрав “Проверить” или с помощью комбинации клавиш Ctrl+Shift+I (Windows) или Cmd+Option+I (Mac).
  • Имитация более медленного мобильного устройства: на панели DevTools щелкните “Переключатель устройств” значок (похожий на телефон и планшет), чтобы включить эмуляцию мобильного дисплея. <ол>
  • Потом нажмите “Сеть” и выберите “Мобильные устройства среднего уровня” из нисходящего меню дросселирования, чтобы имитировать медленнее мобильное соединение.
  • Запись взаимодействия пользователя: перейдите к разделу “Производительность” вкладку DevTools и нажмите “Запись” (сплошной черный круг). <ол>
  • Взаимодействуйте с веб-сайтом, как пользователь, нажимая кнопки или ссылки, которые вызывают действия.
  • По завершении взаимодействия нажмите “Остановить” кнопку (сплошной красный круг), чтобы завершить запись.
  • Анализ производительности: После остановки записи вы увидите график производительности. Нажмите “Взаимодействие” трек, чтобы расширить его. Эта дорожка обозначает время от момента, когда вы щелкнули, до появления ответа на экране. <ол>
  • Выровнять взаимодействие с “Главным” активность потока для обнаружения длинных задач, вызывающих медленное взаимодействие.
  • Определите проблемный код: в “Резюме” вы найдете ссылку на источник страницы. Нажав эту ссылку, вы перейдете к коду, отвечающему за медленное взаимодействие. Отсюда вы можете начать диагностику и решение проблемы.
  • Последствия для SEO-профессионалов

    Время для этого учебника актуально, поскольку принятие INP’ как Core Web Vital имеет последствия для SEO.

    Решение Google’выпустить это руководство подчеркивает важность адаптации к переходу INP.

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

    Итог

    Новое учебное пособие Google по выявлению проблем INP является ценным для профессионалов по поисковой оптимизации и веб-разработчиков, которые хотят сориентироваться в этом переходе и создавать оптимизированные веб-сайты.

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

    FAQ

    Какие распространенные причины плохих показателей INP и как их можно решить?

    Плохое взаимодействие со следующей краской (INP) может быть результатом различных технических проблем на веб-сайте. Среди распространенных причин и способов их решения:

    • Длинные задачи JavaScript: Разбейте длинные задания на меньшие, асинхронные, чтобы избежать блокировки основного потока.
    • <сильный>Чрезмерная активность основного потока: Оптимизируйте элементы страницы, которые требуют значительной мощности обработки, например сложные сценарии или анимации.
    • Чрезмерно сложные структуры DOM: Упростите HTML, объедините похожие селекторы CSS и уменьшите глубину дерева DOM, где это возможно.

    Профессионалы по поисковой поисковой системе и веб-разработчики могут улучшить рейтинг INP сайта, обратившись к этим факторам.

    Какие практические шаги должны предпринять издатели, чтобы гарантировать, что их веб-сайты соответствуют “хорошим” Порог INP?

    Профессионалы по поисковой оптимизации, которые стремятся достичь или превзойти “хороший” пороговое значение баллов INP – ndash; что отражает производительность на 75-м процентили загрузок страницы – должно выполнить следующие действия:

    • Используйте такие инструменты, как PageSpeed ​​Insights и Chrome User Experience Report, чтобы оценить текущую производительность INP.
    • Следуйте руководству Google по обнаружению проблем INP с помощью Chrome DevTools для детального анализа.
    • Ввести прописанные исправления, такие как оптимизация выполнения JavaScript и уменьшение нагрузки основного потока.