Всем привет!

Я @Andre_487 (Андрей по-простому) – разработчик, аналитик, менеджер. Занимаюсь тем, что делаю веб-сер… twitter.com/i/web/status/1…

Работаю я в Яндексе, основной объект приложения моих усилий – Поиск. Вместе с командой из 7 человек делаем его быст… twitter.com/i/web/status/1…

Раз будем говорить о скорости, пожалуй, следует начать с методик измерения. Так уж у нас заведено – не измерил, зна… twitter.com/i/web/status/1…

В классической модели скорости мы смотрели вот на что:

* FCP – время первой отрисовки контента
* FMP – время о… twitter.com/i/web/status/1…

FCP – время первой отрисовки. Оно должно быть минимальным. Но для всех ли проектов и для любых ли переходов? Пользо… twitter.com/i/web/status/1…

FMP – время отрисовки значимого контента. Очень показательная метрика, для которой нет стандартного способа измерен… twitter.com/i/web/status/1…

JS inited в первой своей версии был прост – время, когда фреймворк закончил развешивать обработчики после DOMConten… twitter.com/i/web/status/1…

Как выбрать значимый контент для измерения FMP? Очень индивидуально для проекта. Google пробовали разработать униве… twitter.com/i/web/status/1…

Для ЯндексПоиска FMP – это отрисовка выдачи. И это можно вычислить приблизительно.

Отрисовку контента можно оценит… twitter.com/i/web/status/1…

Однажды мы научились исследовать UX в разрезе скорости с помощью краудсорсинговой платформе Толока. И вот оказалось… twitter.com/i/web/status/1…

В данный момент работаем над метрикой FMPv2, которая будет учитывать также и время отрисовки (или загрузки) видимых… twitter.com/i/web/status/1…

Кто любит, когда в процессе загрузки блоки на странице прыгают, появляются и исчезают?

Я знал только одного такого… twitter.com/i/web/status/1…

Largest Contentful Paint (LCP, web.dev/lcp/) – интересная метрика, но есть проблема – на неё влияют не т… twitter.com/i/web/status/1…

Солнце зашло, а значит, просыпается мафия – и коммитит в репозиторий медленный код.

Скорость в большом проекте – н… twitter.com/i/web/status/1…

Последняя метрика перед сном – Time To Interactive (TTI): web.dev/tti/

Время от старта запроса до момен… twitter.com/i/web/status/1…

«Фиалки в саду.
Одуванчики вдоль дороги.
Неизбежное время сна.
Жидкость стекает из порезанного запястья»

Это значи… twitter.com/i/web/status/1…

В одном из тредов был спор, что TTI должен быть единственной метрикой. Это не так, но единую метрику построить можн… twitter.com/i/web/status/1…

Один из возможных пререквизитов к комбинированию метрик – переход от классических агрегаций (средняя, процентили),… twitter.com/i/web/status/1…

Мы выбрали такие пороги:

FCP, FMP:

Когда мы имеем оценку, насколько пользователю было хорошо по всем параметрам (FCP, FMP, JS inited, TTI), мы можем с… twitter.com/i/web/status/1…

Ещё способ комбинировать метрики – голосование.

Можно реализовать алгоритм голосования вроде такого:… twitter.com/i/web/status/1…

И ещё способ – Apdex: en.wikipedia.org/wiki/Apdex

Но в нём нет штрафа за "плохие" показатели.

У замедлений есть опасное отличие от поведенческих метрик. Пример: мы вырастили клики на 10%, а замедлились всего н… twitter.com/i/web/status/1…

А сегодня перед сном будет не метрика, а утверждение.

Фуллстек существует! Всем спокойной ночи.

Начнём день с обмена опытом. В тред призывается @_jin_nin_ для рассказа про свою оригинальную методику оценки скорости веба

Ожидание в предыдущем твите затягивается, поэтому завершим про метрики.

Их нельзя рассматривать как истину и по од… twitter.com/i/web/status/1…

Как мы вчера выяснили, фуллстек существует.

Разработчик решает задачи бизнеса, и есть такие задачи, где нужен один… twitter.com/i/web/status/1…

Теперь давайте серьёзно обмениваться опытом. Скорость в том числе предоставляется как консалтинговый сервис. Вот… twitter.com/i/web/status/1…

Официальное заявление по итогам тредов: если у вас проблемы со скоростью сервисов Яндекса – пишите на andre487@yand… twitter.com/i/web/status/1…

Среда – это маленькая пятница, поэтому финальный твит в 1:27.

Чтобы не выгорать (о чём позже), нужно иногда добавл… twitter.com/i/web/status/1…

Метрики – безусловно очень интересная штука, но не в них цель скорости. Цель скорости – в скорости, как бы странно… twitter.com/i/web/status/1…

Первая крутая оптимизация – отдача страницы чанками. Поиск занимает несколько сотен миллисекунд, но у страницы есть… twitter.com/i/web/status/1…

Пример отдачи страницы чанками: gist.github.com/andre487/cb299…

Можно даже показать какую-то часть страницы пользователю,… twitter.com/i/web/status/1…

Применяем подход Critical CSS.

Вообще говоря, CSS мы инлайним для ускорения отрисовки. Помощь кеша браузера не та… twitter.com/i/web/status/1…

Также мы используем Progressive CSS – наиболее общие стили приезжают в первом чанке и парсятся, пока ожидается осно… twitter.com/i/web/status/1…

Ну и твит на позднюю ночь.

SDCH – крутой, но сложный способ сжатия: en.wikipedia.org/wiki/SDCH

Его выпилили из Chrom… twitter.com/i/web/status/1…

Интересный способ оптимизации – унести все сервисы на единый домен. Вместо images.yandex.ru делаем… twitter.com/i/web/status/1…

Мы показываем лёгкую версию выдачи на медленных соединениях. Это совсем другая вёрстка и урезанные фичи.

Медленное… twitter.com/i/web/status/1…

А теперь шок. Перезагрузить целую (ну или большой кусок) страницу через AJAX – медленнее с точки зрения FCP и FMP,… twitter.com/i/web/status/1…

На своём поле (Яндекс.Браузер, приложение Яндекс) мы используем ML для предсказания финального запроса пользователя… twitter.com/i/web/status/1…

Ну что, снова про фуллстек? Я вижу ошибку в наличии "стек". Очень редок специалист, знающий все уровни, на которых… twitter.com/i/web/status/1…

Быть узким специалистом – хороший выбор для work-life balance в сторону life. Но если хочется расти как крутой реша… twitter.com/i/web/status/1…

Правильный подход к скорости – эксперименты и измерения.

У нас несколько уровней проверок нового кода на всех этапах его жизни

Pull Request

Измерение скорости SSR и размера ответа как часть CI. Если мы видим деградацию – pr нельзя влить.

По… twitter.com/i/web/status/1…

Релиз – все те же проверки, что и в pr, только базой для сравнения является не текущий master, а предыдущий релиз.… twitter.com/i/web/status/1…

Эксперимент

Все нужные скоростные метрики реализованы в А/Б, есть механизмы предупреждения экспериментатора о проб… twitter.com/i/web/status/1…

Разработчики команды скорости сами разрабатывают метрики, пишут инструменты, оптимизируют код. Это разные области з… twitter.com/i/web/status/1…

Некоторое время назад было принято решение использовать React на Поиске. Это большой челлендж для сохранения скорос… twitter.com/i/web/status/1…

Страница выдачи очень вариативная, многие запросы задаются первый и последний раз в жизни.

Поэтому JS бандлов, кот… twitter.com/i/web/status/1…

Опрос на ночь. Из серии тем про выгорание, life-work balance и прочее такое.

Как вы оцениваете свой запас сил во в… twitter.com/i/web/status/1…

Синдром хронической усталости, выгорание, депрессия – всё это я испытывал, но больше не хочу.

Порой нахожусь где-т… twitter.com/i/web/status/1…

Что ж, вот и закончилась наша неделя. Я не заходил в Твиттер с 2018 года, а тут зашёл и прямо понравилось.

Продол… twitter.com/i/web/status/1…