Этот эфир был техническим. Мы старались как могли, рассказать про Dev tools в Chrome, простым языком.
Объясняли куда надо смотреть для того, чтобы увидеть ту самую блокировку основного потока сайта. Рассказали, что с ней делать.
Вы узнаете, как не будучи программистом, найти причину тормознутости сайта и дать ТЗ программисту, чтобы разобраться с причиной медленного сайта.
Проверьте скорость сайта из Минска сейчас:
Временные метки для видео:
- 0:00 – Обратный отсчет
- 4:30 – Начинаем эфир!
- 4:55 – Сегодня о том, как измерить скорость сайта обычным браузером, на примере Google Chrome
- 7:50 – Почему именно Google Chrome, его плюсы и минусы
- 9:00 – Как Dev Tools помог выявить блокировку основного потока сайта банка Тинькофф
- 13:47 – Начинаем демонстрацию работы с Dev Tools: Lighthouse, Performance, Network
- 14:39 – О вкладке Network, где видим сетевые запросы и время ожидания ответа. Анализ данных с диаграммы Waterfall, продолжение – 17:55
- 17:16 – Вопрос из зала: «Как называть скролл слева от адресной строки здесь, и в firefox?»
- 18:00 – Рассматриваем значения DOMContentLoaded Time (параметр оценки времени полной загрузки страницы)/Workbox Core (логика модулей)
- 20:35 – Disable cache (не использовать кэш загрузку)/Preserve log (сохранять данные с предыдущей страницы)
- 21:13 – Настройка сети Use large request rows (отображение запросов)/Group by name (группировать запросы)/capture screenshots (создавать скриншоты)
- 21:57 – Online (скорость соединения вашего компьютера)/Fast 3G (быстрый 3G)/Offline – таким образом можно менять скорость передачи данных
- 25:20 – О вкладке Lighthouse. Про настройки: Simulated throttling (включить троттлинг – пропуск тактов)/Mobile (мобильная версия)/Desktop. Демонстрация мобильной загрузки – 25:40
- 25:55 – Вас ожидает долгий замер загрузки сайта на эмуляторе мобильной версии. Результаты теста ввиду слабого сетевого соединения – 30:00
- 31:50 – Подробный разбор параметров Lighthouse доступен в 107 эфире о трех проверенных сервисах для измерения скорости загрузки сайта в 2020 году https://www.youtube.com/watch?v=xCt_A6a87Eg
- 32:20 – О вкладке Performance, где производится комплексный анализ сайта, включая данные из Network
- 36:13 – Как вызвать Dev Tools (CMD + alt + I / F12)
- 44:21 – Получили результаты замера сайта на Performance
- 45:37 – Делаем обзор на Task (задача). Дерево вызова (Call Tree) показывает: событие, вызов функции и сам метод. Выявляем самые время-пожирающие задачи, блокирующие основной поток
- 48:30 – На визуализации основанного потока Желтые зоны – зоны блокировки потока кодом JavaScript/Фиолетовые зоны – зоны отрисовки HTML
- 51:26 – Как выявлять причины долгой загрузки через исследование Task
- 54:33 – Вопрос из зала: «Почему метрика не грузит ваш сайт? На многих сайтах метрика показывает несколько десятков миллисекунд»
- 55:40 – Яндекс.Метрика не причина долгой загрузки. Также подробно раскрываем тему в эфире 93 https://www.youtube.com/watch?v=_3c0aPSkNdc 57:00 – Немного о Яндекс.Вебвизор vs Hotjar (https://metrika.yandex.ru/promo/webvisor vs https://www.hotjar.com/)
- 1:01:01 – О параметрах FP (first paint)/FCP (first contetntful paint)/LCP (largest contentful paint) на временной линии
- 1:02:50 – Как важно тестировать скорость загрузки сайта на разных устройствах с разными техническими характеристиками
- 1:04:20 – Пройдемся по главным вкладкам Dev Tools: Elements (элементы DOM), Console (Консоль ошибок и предупреждений) – 1:04:48, Sources (исходники, загруженные после подключения к доменам) – 1:07:20, Memory (расход памяти) – 1:07:40, Application (все, что сайт использует для работы) – 1:09:00
- 1:11:00 – PWA позволяет использовать сайт без сети соединения с интернетом, подробнее в 107-ом эфире https://www.youtube.com/watch?v=xCt_A6a87Eg&t=1s
- 1:12:00 – Вопрос от пользователя: «Как посмотреть, какие стили css не используются?», показываем на примере CSS Overview
- 1:16:50 – Вопрос от зрителя: «Неиспользуемый css показывает в More tools — Coverage — нет? Это не стоит использовать при чистке неиспользуемых стилей?»
- 1:20:22 – Как со стороны пользователя наблюдается блокировка основного потока
- 1:21:47 – Обобщенно о сложности при работе с вкладкой Performance на Dev Tools
- 1:24:00 – Про WebPageTest из 108-ого эфира https://www.youtube.com/watch?v=cp3axDx32vA
- 1:28:30 – Не пропустите следующий эфир на https://live.loading.express/