Рубрики
Live

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

Этот эфир был техническим. Мы старались как могли, рассказать про Dev tools в Chrome, простым языком.

Объясняли куда надо смотреть для того, чтобы увидеть ту самую блокировку основного потока сайта. Рассказали, что с ней делать.

Вы узнаете, как не будучи программистом, найти причину тормознутости сайта и дать ТЗ программисту, чтобы разобраться с причиной медленного сайта.

Проверьте скорость сайта из Минска сейчас:

109: DEV Tools, как проверить скорость сайта из браузера Chrome
Watch this video on YouTube.
Стремительный и необратимый прямой эфир

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

  • 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 – Вопрос из зала: «Почему метрика не грузит ваш сайт? На многих сайтах метрика показывает несколько десятков миллисекунд»
  • 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:12:00 – Вопрос от пользователя: «Как посмотреть, какие стили css не используются?», показываем на примере CSS Overview
  • 1:16:50 – Вопрос от зрителя: «Неиспользуемый css показывает в More tools — Coverage — нет? Это не стоит использовать при чистке неиспользуемых стилей?»
  • 1:20:22 – Как со стороны пользователя наблюдается блокировка основного потока
  • 1:21:47 – Обобщенно о сложности при работе с вкладкой Performance на Dev Tools

Автор: Алексей

Маркетолог в ax.digital и в loading.express. Трехкратный отец.