Антон Епрев

Transcript

1. История одной метрики производительности в Booking.com Антон Епрев @eprev
2. Статья Jake Archibald о rel=noopener – goo.gl/kLUYba <a href="https://example.com" target="_blank"
 rel="noopener" > … </a>
4. A/B тестирование
5. <a href="…" target="_blank" > … </a> <a href="…" target="_blank"
 rel="noopener" > … </a> A B
6. Не измерив, не улучшить!
7. Как собирать фреймрейт метрику* 1. Собирайте релевантные данные 2. Сводите к минимуму эффект наблюдателя 3. Избегайте смещения выборки * И любую другую метрику производительности
8. «Time to Scroll»
9. Фреймрейт сервис let stopped = true; let timer; window.addEventListener("scroll", () => { if (stopped) { stopped = false; start(); } else { clearTimeout(timer); } timer = setTimeout(() => stopped = true, 200); });
10. Фреймрейт сервис (продолжение) function start() { let frames = 0; const ts = performance.now(); requestAnimationFrame(function raf() { frames++; if (stopped) { const fps = Math.round( frames * 1000 / (performance.now() - ts) ); } else { requestAnimationFrame(raf); } }); }
11. A/A тест: Средние значения фреймрейт 1 % 10 % 25 % 50 % 75 % 90 % 95 % 99 % 2 26 40 51 57 60 60 60
12. Тест rel=noopener: Средние значения фреймрейт 1 % 10 % 25 % 50 % 75 % 90 % 95 % 99 % 2 11 28 47 56 60 60 60 2 11 28 47 56 60 60 60
13. Jank тест (function jank() { var ts = Date.now(); while (Date.now() - ts < 30); setTimeout(jank, 100); }());
14. Jank тест: Средние значения фреймрейт 1 % 10 % 25 % 50 % 75 % 90 % 95 % 99 % 3 29 42 52 58 60 60 60 2 24 38 49 55 59 60 60
15. Кол-во сессий и средние значения фреймрейт (desktop)
16. Кол-во сессий и средние значения фреймрейт (mobile)
17. Конверсия и средние значения фреймрейт X 6X
18. IE9 jank тест: Средние значения фреймрейт 1 % 10 % 25 % 50 % 75 % 90 % 95 % 99 % 2 25 37 44 50 55 59 60 2 22 32 40 46 52 55 60
19. Резюме – Не пытайтесь улучшить то, чего не можете увидеть – Собирайте релевантные метрики – Избегайте необъективности – Что работает для нас, может не работать для вас
20. Спасибо! Антон Епрев @eprev