79997296

Chrome 88 позволяет просматривать данные LCP, FIP и CLS. Недавно выпущенный Chrome 88 добавляет функции для разработчиков, которые с нетерпением ждут предстоящего обновления Page Experience. Которое добавляет относительно новые показатели веб-виталов к любым уже существующим сигналам ранжирования пользовательского опыта.

Веб-Виталы измеряют несколько вещей , которые затем объединяются в три сводные оценки в качестве основных веб-виталов: самая большая содержательная краска, первая задержка вводаи кумулятивный сдвиг макета. Каждый из них должен быть оптимизирован для достижения пороговых значений производительности (тайминги), чтобы избежать страданий от более эффективных коллег, которые могут появиться выше вас в рейтинге Google.

Две новые функции Примечания

Первая новая функция note для нас заключается в том, что Chrome 88 теперь поддерживает CSS-свойство под названием aspect-ratio. Правила соотношения сторон позволяют определить соотношения для элементов, которые при определенных обстоятельствах могут помочь оптимизировать совокупный сдвиг макета.

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

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

Web Vitals lane в Chrome 88 DevTools

Другая интересная новая функция заключается в том, что Web Vitals теперь получает свою собственную полосу отчетности в Chrome 88 DevTools. В то время как флаги timings lane для этих (и нескольких других) метрик были доступны в течение некоторого времени, есть много нового пространства, зарезервированного в новой веб-линии Vitals для еще более подробной отчетности.

Как бы то ни было, флаги в полосе Web Vitals имеют цветовую маркировку с зеленым цветом для проходного балла и красным цветом для неспособности достичь порога хорошей производительности. При наведении указателя мыши на определенный флаг отображается идентифицирующая аббревиатура имени метрики и записанное время в миллисекундах. Цвета для метрик в полосе таймингов не указывают на оценку.

Существует также новая область отчетов о длинных задачах, которая может использоваться для выравнивания с основными событиями потока, чтобы определить, какие сценарии оцениваются, так что вы можете устранить неполадки, можно ли оптимизировать или исключить код. Чтобы добавить новую полосу Web Vitals в DevTools, перейдите на вкладку Performance и установите соответствующий флажок.

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

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

Отчеты о производительности холодного пуска

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

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

Холодный старт с открытым процессом записи позволяет вам решить, когда начать сбор информации с помощью shift-refresh и когда обработать результат в окончательный отчет, когда вы нажмете кнопку, чтобы остановить процесс записи. У вас есть возможность выбора для сужения и увеличения проблемных областей на временной шкале отчетности после загрузки вашего отчета.

Chrome также хранит историю отчетов, которую вы можете очистить, когда придет время анализировать другую страницу. Как и во всех рейтинговых сигналах, ни один фактор не повысит ваш рейтинг до первого места по всем направлениям. Имейте в виду, что плохо работающие сайты все еще могут хорошо ранжироваться, когда контент индексируется и имеет качество, привлекающее поисковых пользователей.

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

Почему нас это должно волновать

Обновление Page Experience, которое появится через несколько месяцев, - это достаточная причина для того, чтобы мы заботились о наших основных показателях жизнедеятельности в Интернете.

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

"Вся Информация Размещенная В Блоге "Septem Plus" Несет Ознакомительно-Информационный Характер И Не Принуждает К Каким Либо Действиям Пользователей Блога. Блог "Septem Plus" Не Несет Ответственности За Действия Пользователей После Посещения Блога "Septem Plus"."

Так же прочитайте наши другие статьи: Какаую Функцию Запускает Google Search?!, а так же Как Сравнить Свой SEO с Конкурентами?! и 5 Лайфхаков Для SEO Продвижения! и получайте полезную информацию вместе с нами!)

Связь с Блогом: [email protected]