{"id":10557,"title":"\u0412\u0441\u0451, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u043b\u0438 \u043e \u043b\u043e\u0433\u0438\u043d\u0430\u0445 \u0438 \u043f\u0430\u0440\u043e\u043b\u044f\u0445","url":"\/redirect?component=advertising&id=10557&url=https:\/\/vc.ru\/promo\/341444-istoriya-loginov-i-paroley&placeBit=1&hash=94017d4f91c29251d7b976c8b7d1d213142fee516a823204c0a9aa77fdbbb464","isPaidAndBannersEnabled":false}
SEO
Пиксель Тулс

Новый фактор ранжирования Google — Page Experience: как подготовиться и почему это важно делать уже сейчас

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

Обновление Google Page Experience направлено на оценку сайтов с учётом того, как пользователи взаимодействуют с ним. Часть факторов, которые сказываются на взаимодействии пользователей со страницей и влияют на внутрисайтовые поведенческие факторы, становятся подтвержденными сигналами ранжирования.

Список метрик:

  • Время отрисовки основного контента (LCP).
  • Задержка после первого ввода (FID).
  • Совокупное смещение макета при отрисовке (CLS).
  • Мобильная адаптация.
  • Наличие HTTPS и безопасность просмотра.
  • Отсутствие навязчивых и мешающих блоков.

В целом, всё это уже так или иначе работает в Google. Пожалуй, главное нововведение — CLS в составе блока Core Web Vitals (основные веб-показатели). Разберём их подробнее и рассмотрим рекомендуемые значения.

LCP (отрисовка основного контента)

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

Рекомендуемое значение: 2,5 секунды после начала загрузки страницы.

Какие элементы имеют значение?

  • Изображения <img>, в том числе внутри тега <svg>.
  • Превью видео <video>, то есть картинка, указанная в атрибуте poster в качестве превью.
  • Фоновые изображения, загружаемые с помощью url().
  • Блочные элементы HTML (текстовые фрагменты на странице).

Ниже пример первой отрисовки контента (FCP) и отрисовки основного контента (LCP).

FID (задержка после первого ввода)

Метрика отвечает за время между первым взаимодействием со страницей и ответом сервера. Взаимодействием, как правило, считается первый клик (на ссылку, кнопку, JS-элемент и прочее).

Рекомендуемое значение: менее 100 мс.

Показатель FID непосредственно связан со временем блокировки ввода (TBT) — это время между первой отрисовкой контента (FCP) и время для готовности для взаимодействия (TTI).

Измерить можно с помощью Lighthouse от Google, а уменьшить время загрузки поможет:

  • Сокращение количества сторонних скриптов на странице (от социальных сетей, систем аналитики и других).
  • Сокращение времени выполнения JavaScript-кода (кэширование, минимация и компрессия, удаление неиспользуемых скриптов).
  • Уменьшение нагрузки на основной поток — выполнение HTML, CSS и JS-кода браузером.

CLS (совокупное смещение макета)

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

Измеряется частота возникновения таких смещений (проверить можно также с помощью Lighthouse).

Рекомендуемое значение: менее 0,1 (относительная шкала).

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

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

Как избежать высоких значений CLS?

  • Задавать определенные размеры для изображений, видео и других элементов, чтобы браузер «зарезервировал» пространство под их возможное отображение.
  • Избегайте наложение контента одного на другой, только если этого не требует ответ на действия пользователя.
  • Там где возможно, для анимации старайтесь использовать CSS-свойства transform, а не JS.

Уже действующие факторы

Помимо обновленного блока с основными веб-показателями (Core Web Vitals), апдейт затронет уже знакомые нам параметры, влияющие на поведение пользователей:

  • Mobile-Friendly — то есть удобство использования сайта на мобильных устройствах. С приходом mobile-first здесь пока ничего нового, а для тех, кто пропустил стоит ознакомиться с базовыми советами по мобильной адаптации.
  • Безопасность просмотра — отсутствие на странице вредоносного ПО и контента, вводящего в заблуждение (социальный инжиниринг).
  • HTTPS — SSL-протокол, обеспечивающий соединенное соединение и безопасность использования на них персональных данных.
  • Отсутствие навязчивых блоков — на странице не должно быть рекламных и других элементов, затрудняющих доступ к основному контенту.

Почему важно начинать делать уже сейчас?

Дмитрий Севальнев
евангелист «Пиксель Тулс»

Список факторов, которые войдут в состав монома «Page Experience» уже сейчас сказывается на качестве взаимодействия пользователей с вашим проектом и том, как успешно сайт решает задачу пользователя.

Это значит, что улучшив «Page Experience» и факторы, которые влияют на оценку, вы сможете поднять значения как внутрисайтовых поведенческих метрик, так и кликовых. К числу наиболее важных, на которые можно влиять с помощью «Page Experience» можно отнести:

  • возвраты на выдачу;
  • количество взаимодействий пользователя с сайтом (клики, формы, …);
  • долю «длинных» сессий (более минуты);
  • долю «глубоких» сессий (просмотр двух страниц и более);
  • среднее время на сайте за сессию.

Безусловно, важно заботиться об этих показателях и в текущих реалиях.

Полезные материалы и инструменты

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

Всем готовности к апдейту и высоких скоростей!

0
34 комментария
Популярные
По порядку
Написать комментарий...
Grigoriy Ryabtsev

Спасибо, полезная статья

Ответить
6
Развернуть ветку
Григорий Гимлер

Для владельцев площадок есть решение от смещений макета. Кто знает можно ли это реализовать самому, например, в CSS?

Ответить
6
Развернуть ветку
Санал Эрдни-Горяев

Информационных сайтов это тоже касается?

Ответить
2
Развернуть ветку
Дмитрий Севальнев

Как и сейчас: формулы для инфо и коммерческих проектов РАЗНЫЕ, то есть, факторы могут быть одни, а их значимость — чуть ли не противоположная. 

В реальности, разделение по формулам ещё более узкое.

Ответить
–2
Развернуть ветку
Kir Burkhanov

Причём тут Яндекс вообще?

Ответить
–1
Развернуть ветку
Дмитрий Севальнев

Смысл тот же, логика работы современных поисковых систем схожая

Ответить
0
Развернуть ветку
Алексей из LOADING.express

Это неправда. Касается это всех сайтов и всех запросов.
Любые другие факторы можно делить на инфо или коммерческие. Скорость загрузки не имеет этой привязки. И касается ранжирования только на мобильном поиске. Потому что довольно сложно сделать долгую загрузку на десктопе. Хотя до сих пор умельцы находятся.

Ответить
–1
Развернуть ветку
Nick Vengerenko

Всех вроде

Ответить
1
Развернуть ветку
Alex Barashkov

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

Ответить
1
Развернуть ветку
Алексей из LOADING.express

Та нет, всё не так плохо.
Картинок может быть сколько угодно. Сжимаете, откладываете загрузку и используете современные форматы и Гугл не ругается и не отнимает баллы. 

Минимальное количество JS? Ну да. А вам бандл на 10 мегабайт охота пропихнуть на сотку?)

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

Этот коммент звучит как:

"2020 год на дворе, а гугл нас заставляет делать качественные сайты, с соблюдением правил для высокой производительности! Вот гады блин!"

Ну-ну.

Ответить
2
Развернуть ветку
Alex Barashkov

Я говорю не про сайты разработанные в сферическом вакууме, специально для прохождения требований гугла. А про реальные проекты, где есть маркетинговые команды которые вас попросят как минимум иметь gtag подключенный + возможно какой-нибудь hotjar + intercom. И вот вы уже получаете на мобиле вместо 100, что-нибудь типо 60-70. Затем вы подключаете кастомный шрифт, очень маленький только нужного вам типа. Затем у вас есть по всему сайту приятные анимации, какой-то интерактив, контактная форма, GDPR баннер. Не сильно длинная страница, с хорошей версткой, где-то инлайновыми небольшими свг иконками, где-то фото галерея возможно(все с отложенной загрузкой как надо и с вебп), но вот вы получаете около 500 Dom елементов и гугл еще вычитает вам рейтинг.

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

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.algolia.com%2F&tab=mobile
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fsegment.com%2F&tab=mobile

Вот отличный пример - Trello получает мобильный рейтинг 65, страница пустая почти, вечит всего 1.1mb. 
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Ftrello.com%2F&tab=mobile

А теперь посмотрим на странице самого Google:
15 балл страница Pixel 
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fstore.google.com%2Fmagazine%2Fcompare_pixel
41 балл страница нового проекта Stadia
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fstadia.google.com%2F

Ответить
2
Развернуть ветку
Алексей из LOADING.express

Ну окей. Вот посмотрите наш проект: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Floading.express

Есть и хотджар. И Метрика и гуглтэгменеджер. И в нем пиксели и всё, что надо для крутого маркетолога.
Зеленая зона.

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

Если у вас есть конкретные проблемы со своим проектом - присылайте, дадим рекомендации.

Ответить
–1
Развернуть ветку
Alex Barashkov

Алексей, у вас типичный российский бизнес расчитаный на тупых клиентов. Все бы было хорошо если бы вы не написали.
Но видите в чем дело, hotjar, gtag используют не удовлетворительную cache политику, на которую ругается Google page speed, но у вас он почему-то не ругается :) Что и сразу же подтвердило мою теорию и выше сказанное, так как чтобы это обойти вы специально не подгружаете эти скрипты, когда вы видите что запрос идет от Lighthouse или page speed. 

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

- Заходим Chrome Inspector
- Вводим network conditions
- Назначаем Custom user agent
- Вводим "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3694.0 Mobile Safari/537.36 Chrome-Lighthouse"
- И смотрим какие-же у нас скрипты начинают
- И ой как странно, куда-то пропал и хотжар и ga, ой да и вообще все js скрипты. 

Ответить
4
Развернуть ветку
Алексей из LOADING.express

Ой разоблачил... Ой детектиииив...

И правда, они не подгружаются для лайтхаус. А кто вам мешает сделать тоже самое?

При этом, наш сайт полностью работает для лайтхаус и JS внутренний выполняется и не скрыт для ЛХ.

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

Ответить
–2
Развернуть ветку
Alex Barashkov

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

А вы конечно разводить можете и дальше своих клиентов.

Ответить
2
Развернуть ветку
Александр ысыыфс

Чувак, весь "seo бизнес" в СНГ это шарлатаны. Им бесполезно что-то доказывать, они на этом деньги делают.

Ответить
0
Развернуть ветку
Алексей из LOADING.express

Молодец!

Ответить
0
Развернуть ветку
Evklead
Ответить
0
Развернуть ветку
Алексей из LOADING.express

Годно! Спасибо, что написали про это!
Мы уже про Web Vitals писали ранее.

https://vc.ru/seo/125935-v-google-zapustili-web-vitals-vazhnye-pokazateli-zdorovya-vashego-sayta

И тут логичное продолжение.
Вообще, Гугл давно уже не ранжиру медленные страницы в мобильном поиске. Так и работает улучшение SEO при ускорении сайта, о котором все нас спрашивают. Просто медленные страницы Гугл пропускает и "не успевает" проранжировать качественно.

Ответить
1
Развернуть ветку
Denis Step

CLS (совокупное смещение макета), наверное, подсмотрели у хитрожопых маркетологов Яндекс.Почты.

Ответить
0
Развернуть ветку
Дмитрий Севальнев

А они юзают это при антиспами или наоборот в своих коммерческих целях? 

Ответить
0
Развернуть ветку
Denis Step

В коммерческих. Они подставляют блок РСЯ на место ссылки на первое входящее письмо через небольшой временной интервал. На vc был разбор на эту тему. Вы, Дмитрий, наверное, больше Gmail используете?

Ответить
1
Развернуть ветку
Denis Step
Ответить
1
Развернуть ветку
Evgeny Shiryaev

Ааа! Они ещё и на почте это используют?! Какая низость, фу!

Я с этим постоянно сталкиваюсь на их картах. Были догадки, что сделано специально, но надеялся, что нет. Оказывается это система и так они разводят своих рекламодателей!!!

Ответить
0
Развернуть ветку
Дмитрий Севальнев

Почтовыми клиентам + отключение рекламы в веб-интерфейсе почты

Ответить
0
Развернуть ветку
Denis Step

Если не осуществляется массовая рассылка, для чего почтовые клиенты? Отключение рекламы возможно только на 30 дней - затем снова-здорова.
Но это всё равно не о том - тут сам факт того, что сие есть в Яндекс.Почте.

Ответить
0
Развернуть ветку
Дмитрий Севальнев

У меня какой-то старый аккаунт, так не показывается реклама вообще при настройках -)

Ответить
0
Развернуть ветку
Evklead

h

Ответить
0
Развернуть ветку
Алексей из LOADING.express

Вот тут скоро будет онлайн конференция от Гугла https://web.dev/live/ со многими подробностями про предстоящие нововведения. 

Ответить
0
Развернуть ветку
Алексей из LOADING.express

Кстати, замеры часто разные из пейджспид и из России если замерять скорость сайта.

Например.

Гугл замеряет из Европы и ваш сайт хостится в Германии. И скорость ответа сервера может быть неадекватной. То есть, показывать хороший показатель или не сильно критичный, а пока ответ сервера добирается до России, прибавляется еще уже критичные миллисекунды.

Из России замеряют скорость https://sitespeed.ru или https://loading.express. Остальные товарищи делают замеры через европейские гугловские сервера по апишке. pr-cy и прочие.

Ответить
0
Развернуть ветку
Синди Катсс

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

Ответить
0
Развернуть ветку
Полный блик

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

Ответить
–1
Развернуть ветку
Дмитрий Севальнев

Нуу, не факт, там сейчас оценивается и играет роль вообще отрисовка только первого (!) экрана и только для mobile

Ответить
0
Развернуть ветку
Anatoliy Dubenchak

Годный материал, в закладки!

Ответить
–3
Развернуть ветку
Читать все 34 комментария
«Неправильно выбрали инвесторов»: сооснователь Viber Игорь Магазинник о продаже Juno и «стартап-чуде» в Израиле Статьи редакции

Главное из интервью сооснователя Viber и Juno проекту «Русские норм».

Как пандемия изменила рынок онлайн-страхования

Выяснили и рассказываем, как изменился онлайн-спрос на услуги страхования с начала пандемии.

«Мог стать знаменитым танцовщиком, но поднимаю с земли какашки»: как устроена миллиардная индустрия выгула собак в США Статьи редакции

Новички получают по $20 за полчаса с собакой, а опытные выгуливают сразу по восемь псов и за год выручают сотни тысяч долларов. Так ли легко гулять с питомцами и с какими причудами ленивых собачников приходится мириться — в конспекте материала The Hustle.

Стюарт с питомцами. Источник: Grow from Acorns
Банкомат Тинькофф потерял деньги

28.12.2021 пополнял карту в банкомате Тинькофф, положить нужно было 60 тысяч. Выбрал на банкомате "Пополнить", положил в лоток 12 купюр по 5 тысяч, банкомат начал шуршать, через какое-то время на экране появилось сообщение типа "Заберите нераспознанные купюры", открылся лоток, в нем 5 купюр(25 тысяч), деньги забрал, на экране появилась сумма…

На метле и в ступе: как менялся образ Бабы-яги в российском кино

Третья часть «Последнего богатыря» — «Посланник тьмы» — собрала в прокате почти 2 млрд рублей. Секрет успеха картины не в последнюю очередь связан с персонажами, чьи трактовки сильно отличаются от традиционных. Такой Бабы-яги зрители точно еще не видели.

12 млн проданных консолей и более сотни миллионов картриджей за первые шесть лет: почему была популярна Atari 2600 Статьи редакции

До её создания в 1977 году приставки выпускали только с одной предустановленной видеоигрой. Atari же придумала устройство, которое поддерживало cразу несколько игр. О производстве, первых играх компании и её конкурентах — в пересказе IEEE Spectrum.

Консоль Atari 2600
Специфика поиска работы на сайте hh

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

Чтобы я посоветовал себе как предприниматель, если бы встретил себя 10 лет назад

До стартапа Event Link у меня уже был опыт, в том числе в качестве предпринимателя. Были как успешные бизнесы и стартапы, так и с факапами на 45 млн. руб.. Вот такие советы я бы дал себе, если бы встретил себя 10 лет назад

«Холакратия, любимые мемчики и прозрачность»: программист о работе в Точке, моделинге и запуске треков на Spotify

Точка — это про людей. Про сотрудников, которые создают удобный банк для бизнеса. Мы запускаем серию интервью с нашей командой, чтобы рассказать, как у нас всё устроено.

Как я адаптировал популярную игру и за неделю привлёк 100 тысяч пользователей

За 6 часов сделал первую версию игры и ворвался в тренды Твиттера с одного твита. Привлек 100 000 пользователей за неделю, а также попал в более 50 СМИ страны. Как это было и что я для этого сделал можно узнать в статье.

«Инновации — это поле для сражений»

Как фуд-ритейл внедряет новые технологии.

null