Мастер-класс по производительности

(пересказ Дениса Мишунова с

HolyJS Moscow 2017)

Что такое performance?

Объективные метрики: скорость и размер контента, стоимость сайта

  • Кабель: https://goo.gl/vRQXoa

  • 4G/LTE: https://goo.gl/kDbt5p

Субъективные метрики: фрустрация, концентрация, заинтересованность

  • Концентрация: http://goo.gl/kjTQZR

  • Фрустрация, заинтересованность: http://goo.gl/WPb3GU

Производительность:

Загрузка и Работа

Советы по измерению

  • Chrome Dev Tools наше все
  • ctrl+shift+p если не знаете где команда
  • Выключать кэш
  • Троттлить сеть и процессор (Moto G4, slow gprs)
  • Всегда мерять в инкогнито
  • Включать скриншоты
  • Смотреть на красные квадратики и треугольники
  • Смотреть, что вызывает layout/reflow тут: https://goo.gl/AGQuNH

Кроме DevTools

  • webpagetest.org
  • Google Lighthouse
  • pingdom
  • dareboost

Инструменты измерения из кода

  • window.onload/DOMContentLoaded
  • window.performance.now
  • window.performance.timing
  • window.performance.getEntries + PerformanceObservers

Performance Budget

Доклад Addy Osmani с Chome Dev Summit: https://goo.gl/ZmrtW2

5 секунд первая загрузка = 170КБ и 3.4с

Трюки с изображениями

Внезапно: есть формальные метрики

 

  • Прогрессивные изображения
  • Загрузить очень плохое изображение, подменить скриптом
  • Элемент picture + mediaQueries и object-fit: cover
  • 2 плана - резкий передний, размытый задний
  • Снизить контраст, наложить css-фильтром

IntersectionObserver вместо onScroll

  • Есть полифилл
  • Сложноватое апи
  • Асинхронный, умеет "проскакивать" пересечения

Шаманство с Resource Hints

Как работает в хроме: https://goo.gl/eMpKvR

Шаманство с Resource Hints

  • Всегда используйте async/defer на скриптах
  • можно поднимать приоритет изображений, при помощи preload as=image
  • выдрать ссылки из iframe, preconnect ко всем доменам к ним
  • stylesheet rel=preload as=style onload="this.rel=stylesheet"
  • preload обязательно делать с crossorigin="crossorigin"

Препарация CSS

Есть инструменты выдирания в рантайме!

 

  • Penthouse

  • criticalCSS

  • Critical

Выстрели себе в ногу: ServiceWorker

  • Только вторая загрузка! Первая будет замедлена
  • Большие приколы с обновлением, легко сломать

Материалы

  • Репозиторий с упражнениями: http://goo.gl/Nx1LKV
  • Презентация Дениса: https://disk.skbkontur.ru/index.php/s/432b6Z88a2ZtMUs
  • Мои заметки: http://bit.ly/2kLQuku
Made with Slides.com