Содержание
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
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)
