Вы случайно не PHP Middle?
Сервисы
Алексей
3476

Новый Google PageSpeed Insights: проверьте показатели вашего сайта

16 марта в Google Chrome анонсировали выход новой версии Lighthouse 6. На этом движке работает Google PageSpeed Insights. Грядет обновление, а вы пробуйте бета версию проверки уже сейчас.

В закладки

Я Алексей из Loading.express. Мы профессионально ускоряем сайты.

История такая. В ноябре 2019 на саммите разработчиков Chrome Developer Summit анонсировали обновление для PageSpeed Insights к январю 2020.

Новый логотип Lighthouse 6, сменили png на svg.

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

По ссылке ниже вы сможете проверить ваш сайт на новом движке:

Основные обновления в Lighthouse 6.0.0:

  • три новые метрики — TBT, LCP и CLS (ниже подробнее);
  • другое устройство для открытия сайта;
  • новые аудиты для JS (джаваскрипт);
  • новые аудиты в accessibility;
  • убрали FID, максимальная потенциальная задержка;
  • новый аудит в разделе PWA.

Три новых аудита в отчете PageSpeed (Lighthouse 6)

TBT — Total Blocking Time или Общее время блокировки. В этот период на сайте невозможно ничего делать. Он грузится, а вы ждёте. Попробуйте ввести с клавиатуры, кликнуть, тапнуть — ничего не выйдет, вы получите эффект зависания или притормаживания.

Ориентиры:

  • 0–300 мс — зеленое, быстро;
  • 300–600 мс — оранжевое, нормально;
  • больше 600 мс — красное, медленно.

LCP — Largest Contentful Paint или Отрисовка крупного контента. Это время, когда самый большой видимый «кусок» сайта отрисован на экране. Именно тогда посетитель понимает, что ваш сайт визуально готов для взаимодействия. Гугл работали над этим показателем совместно с группой Web Performance Working Group W3C, в составе которой представители компаний Facebook, Airbnb Inc, Intel Corporation, Mozilla Foundation и другие.

Здесь ориентиры:

  • 0-2 секунды — зеленое, быстро;
  • 2-4 секунды — оранжевое, нормально;
  • больше 4 секунд — красное, медленно.

CLS — Cumulative Layout Shift или Совокупный сдвиг макета. Тут сложно. Этот замер складывает баллы от любого сдвига на странице, который происходит во время загрузки. Тот самый момент, когда заходишь на страницу, начинаешь читать контент, а он вдруг куда-то улетел. Сверху прогрузилась реклама и сдвинула всё содержимое страницы вниз. Чем больше сдвиг, тем оценка будет выше и тем хуже показатель.

Ориентир:

  • 0-0.5 — зеленое, хорошо;
  • 0.6-1 — красное, плохо.

Сейчас в PageSpeed есть показатель FID — максимальная потенциальная задержка ввода. Этот показатель убрали в новой версии. Его функцию частично взял на себя TBT, LCP и отчеты по замерам JS.

Другое устройство для замеров: Moto G4

Ура! Nexus 5 из 2013 года заменили на Moto G4 из 2016. Тут изменился только размер экрана.

Что нового в аудитах Lighthouse 6

Техническое.

JS (джаваскрипт) — если при загрузке сайта есть выполнение лишнего джаваскрипта, то аудит сообщит об этом отдельным предупреждением.

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

Аудит кодировки символов — будет требовать объявить кодировку.

PWA maskable icon audit — новый аудит, который проверяет есть ли векторная иконка для маски. Если нет, то будет требовать векторный формат.

Заключение и выводы

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

Именно с 2018 года PageSpeed измеряет скорость загрузки. До этого он давал просто рекомендации для оптимизации параметров сайта, которые могли влиять на скорость загрузки.

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

И да. Важно. Если адаптивная версия сайта показывает хорошие результаты производительности, то и ПК версия в полном порядке.

Не надо замерять её отдельно. Не равняйтесь на показатели ПК версии. Всё. 2020 год. Адаптивные сайты должны быть у каждого.

Измеряйте сайт в новой версии Lighthouse 6 уже сейчас по ссылке ниже:

Быстрых вам сайтов и высоких конверсий!

Еще статьи от автора:

{ "author_name": "Алексей", "author_type": "self", "tags": ["\u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u0441\u0430\u0439\u0442\u0430","pagespeed","lighthouse"], "comments": 17, "likes": 8, "favorites": 30, "is_advertisement": false, "subsite_label": "services", "id": 113373, "is_wide": false, "is_ugc": true, "date": "Sun, 22 Mar 2020 18:34:35 +0300", "is_special": false }
Объявление на vc.ru
0
17 комментариев
Популярные
По порядку
Написать комментарий...
2

26 для мобильных устройств. Нужно срочно ремонтировать мой сайт

Ответить
1

6/10 большие проблемы со временем ответа сервера

Ответить
1

Ответ сервера это типичная история для Битрикс, например.
Но вот что. Сегодня выпустили материал https://loading.express/blog/about-speed/kak-uznat-i-sokratit-vremja-otveta-servera/ 
Почитайте, посмотрите с разных сторон покрутите.

Ответить
1

Это не "типичная история для Битрикс", а типичная история для кривых рук разработчиков. Нормальные сайты на битрикс работают нормально, а кривые руки испортят сайт на любой системе.

Ответить
0

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

Ответить
0

Студии не менее криворуки.
Аспро - набабахали иконок svg по кругу - и в шапку и в подвал и в менюшки, затем скрывают их стилями, а поверх  показывают иконки в формате png. Шах и мат тебе, svg!
По два меню - для мобильных и декстопа. Может надо более тщательно верстать? Да зачем? Можно влепить два меню там, где можно одно. А еще и боковое меню для каталога. Итого четыре.
Будет владелец пользоваться гнусным сервисом колибри или не будет, нужен ему сервис битрикс24 или не не нужен - пофиг, пусть подключаемые скрипты про запас висят. Битрикс24 тянет целый вагон стилей, картинок и еще скриптов. Колибри тянет 4 внешних файла.
Гугл-шрифты - а давай подключим сразу все варианты шрифта и тонкий и нормальный и чуть жирнее и жирный, да еще и умножим на наклонное начертание. По факту там еще есть и между чуть жирнее и жирный. )) 600-й который.
Это студия с самыми продаваемыми шаблонами.
Ппц...

Ответить
2

Как всегда отлично 91 балл!

Ответить
0

На каком движке?

Ответить
0

Без движка.

Ответить
1

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

Ответить
1

Да, кеширует. Можете перепроверить через 15 минут или просто нажать анализировать несколько раз.

Ответить
1

Если отправить на перепроверку ту же, то вылазит еще одна смешная ситуация - на некоторых сайтах (битриксы со всеми включенными кешами) первая проверка дает 60-70 баллов, перепроверка 90-95 баллов) далее 90 баллов так и остаются, т.е. показывает реальную ситуацию. Т.е. первый раз гугл берет из какого-то своего древнего кеша что ли?
При этом неважно, открыл ли я страницу перед проверкой гуглом, чтобы сформировать свежий кеш или не открывал страницу.
А вот на вордпрессах наоборот - повторные перепроверки ничего не меняют.
Выглядит так, будто битрикс создает отдельные кеши для разных типов ботов.
куда мы катимся...

Ответить
1

На Битрикс мимо Кеша попасть может.
А может глючить. Недавно Гугл обновились до версии 6.1 и перепроверки начали давать разнобой по результатам.

Ответить
1

После нажатия подробнее страница не открывается, хотя вчера работало

Ответить
0

Можете подробнее написать где вы и что нажали?
У нас все ссылки рабочие, проверили. 
На web.dev могло что-то сломаться, факт.

Ответить
1

Спасибо за статью, очень полезно!

Ответить

Комментарии