110: Lighthouse 6.3 — что важно знать про новую версию

27 августа в 6 утра было выпущено обновление Lighthouse, который уже входит в состав PageSpeed Insights.

Наша команда во главе с Антоном Белогородцевым оперативно обновила версию Лайтхауса на lh.loading.express.

Мы изучили новые аудиты и обсудили их для вас

Временные метки для видео:

0:00 – Начало

2:05 – Срочные новости! Команда Google Chrome обновила Lighthouse до версии 6.3, изменения в: СLS (Cumulative Layout Shift), Axe version, Image size и другие

4:26 – Испытайте наш УЖЕ обновленный сервис Lighthouse 6.3 с новым функционалом для замера скорости загрузки сайта https://lh.loading.express, показываем на примере – 10:44

5:13 – В корне разбираем, что такое Lighthouse 6.3 и как его использовать правильно

9:30 – Как работает системная часть Lighthouse 6.3

10:44 – Замер сайта на новом движке и разбор обновленных показателей:

• FCP (First Contentful Paint – первая отрисовка контента),
• LCP (Largest Contentful Paint – отрисовка большей части контента),
• TTI (TimeTo Interactive – время до интерактивного взаимодействия),
• TBT (Total Blocking Time – время блокировки основного основой потока)
• запись видео визуальной загрузки сайта, подробнее 13:10

13:13 – Как визуально распознать время отрисовки контента и время наступления интерактива, подробнее о загрузке сайта с хорошим TTI и долгой FCP – 14:20

15:04 – Сайты на конструкторе Tilda загружаются быстро? При условии оптимизации CSS/JS. О том, как оптимизировать код CSS для сайтов на Tilda

16:54 – Обновился PWA (Progressive Web App – сайт работающий в автономном режиме) до версии 6.3, где можно проверить соответствие вашего сайта под стандарты PWA

18:47 – В новом Lighthouse 6.3 обновили: CLS, версию Axe (измерение специальных возможностей) – 19:11, неявно заданные размеры изображения – 19:55, LCP – 21:08, CLS (смещение основного контента) – 31:03. Подробности о не изменившихся параметрах с версии Lighthouse 6.1 – 6.2 доступно тут https://www.youtube.com/watch?v=Kx8ZE7Tet9U

23:15 – это же Google PageSpeed Insights улучшили в новой версии: подключение к доменам, предварительная загрузка ключевых запросов — Preload, HTTP/2 — 24:30, цепочка критических запросов – 29:28

25:40 – Как выявить повторяющиеся модули из пакетов JavaScript. Выявить устаревший код – 27:00

29:45 – Время выполнения кода JavaScript с новым триггером «Показать сторонние ресурсы». Увеличилась детализация использования стороннего кода – 30:36

31:56 – Новый аудит. Что говорит нам Lighthouse 6.3 о не композиционной анимации (avoid non-composited animations)

32:26 – Как заменить объемные библиотеки JavaScript менее весомыми

33:08 – Лайфхак: как найти человека для внедрения рекомендаций от Lighthouse 6.3 по JavaScript коду

36:04 – Что нового в разделе «Рекомендации»: использование source map, атрибут autocomplete (автозаполнения) — 37:37, параметр unload – 39:34, application cache — 40:11

40:26 – Что нового показывают в параметрах «Обнаруженные библиотеки JavaScript» и «Устаревшие API», «Уязвимость в клиентских библиотеках JavaScript» — 41:16

42:19 – В раздел SEO (поисковая оптимизация) добавили: оптимизация шрифтов. Как шрифты влияют на восприятие контента и на что ориентироваться при дизайне текста

44:41 – Маскирующий значок – обновление в PWA раздел

46:16 – Вопрос из зала: «Для того чтобы скрипты не тормозили загрузку, есть async или defer. Почему это не решает проблему и приходится откладывать выполнение и т.д.?»

49:13 – Комментарий зрителя: «​Сейчас к сожалению, во многих нишах топ занимают сайты где еле 15 баллы набирают, а вылизанные и экспертные в конце»

50:43 – Скорость загрузки сайта – это единица в комплексе по оптимизации SEO. Как улучшить конверсию сайта подскажем тут

52:50 – Вопрос из зала: «Почему PageSpeed не обновил версию Lighthouse до 6.3?». Зато замер скорости сайта с обновленной версией доступен у нас https://lh.loading.express

54:16 – Вопрос зрителя: «Пассивные прослушиватели событий Jquery 3.5.1 ошибка, как ее решить?»

55:44 – Замечания из зала: «​Видел некоторые сайты, которые без ссылок с хорошей скоростью, были в топе». Ввиду каких факторов старые медленные сайты могут занимать первые места в результатах поиска, подробнее 1:00:26

58:34 – Внимание, SEO-специалисты! Мы открыты к коллаборации! Ищем партнеров для кейсов

59:18 – Вопрос из зала: «Eсли сайт попадает под YMYL, то рано или поздно сайту капец. Ни скорость, ни ссылки, ни поведенческие не спасут». Какие типы сайтов чаще попадают под YMYL, подробнее 1:02:04

1:01:15 – https://live.loading.express/ по последнему эфиру предоставляет удобный интерфейс для получения полезных ссылок и наработок от LOADING.express.

1:03:40 – Тестируем работу Lighthouse 6.3 на примере медленного сайта. Разбираем результаты замера по новым параметрам в обновленной версии – 1:06:06

1:09:47 – Замена не столь важных библиотек JavaScript, отрисовка крупного контента – 1:10:07, смещение контента – 1:10:20, уязвимости JavaScript библиотек – 1:11:11, ошибки консоли – 1:12:35

1:14:11 – Делаем выводы и завершаем эфир о новой версии Lighthouse 6.3

1:16:20 – Немного о предстоящем выпуске

1:18:50 – Проверяйте и ускоряйте вместе с LOADING.express. До следующих встреч!

Аудиты очень классные и полезные. Касаются JavaScript’а и более точных проверок отдельных показателей, в том числе CLS.

Проверяйте скорость сайта из Москвы:

Еще про Lighthouse 6.3

Новую версию Lighthouse планируют внедрить с 87 версии Google Chrome c 18 сентября в тестах, а в ноябре в стабильной версии. С 1 декабря в Chrome OS.

Новые аудиты в Lighthouse 6.3:

• новый preload-fonts аудит (#11255) (про preload)
• добавили large-javascript-libraries аудит (#11096)
• добавлен valid-source-maps аудит (#11236)
• добавлен autocomplete в experimental config (#11186)

Остальное можно перевести, но лучше читать по-английски:

Core

• global-listeners: dedupe duplicate events in GlobalListener gatherer (#11303)
• module-duplication: ignore smaller modules (#11277)
• non-composited-animations: add unsupported css properties (#11246)
• non-composited-animations: add more actionable failure reasons (#11268)
• non-composited-animations: update the «learn more» link (#11258)
• renderer: improve the unknown timezone checks in util.js (#9822)
• response-time: add time spent to details (#11307)
• trace-elements: do not break on unresolvable node id (#11298)
• font-size: remove deprecated DOM.getFlattenedDocument (#11248)

Report

• third-party-summary: show resources for entity (#11219)
• handle invalid urls for source location items (#11299)
• show axe version in runtime settings (#10729)
• use dash gauge for categories with entirely n/a audits (#11024)

Deps

• update lighthouse-plugin-publisher-ads to 1.2.0 (#11301)

I18n

• import (#11324)
• translate remaining strings in font-size (#11327)
• make double dollar validation less strict (#10299)

Docs

• add Code of Conduct to project (#11212)
• add audit naming guide (#11308)
• throttling: replace comcast with throttle and add more windows options (#11143)
• readme: add related projects: site-audit-seo (#11305, #11250)
• readme: align headings with table of contents (#11288)

Tests

• run chromium webtests for devtools integration (#11176, #11328)

Misc

• benchmark: update BenchmarkIndex for m86 changes (#11304)
• add benchmark script with octane and speedometer (#11247)
• add gcp fleet creation scripts (#11257, #11233)
• rephrase comments to be more inclusive (#11228)
• fix types in duplicated-javascript (#11278)
• fix typo in method name (#11239)
• move doc link (#11300)