109: Chrome с DEV Tools как проверить скорость сайта из браузера

Этот эфир был техническим. Мы старались как могли, рассказать про 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/