Конференция прошла. Ждем вас на FrontendConf Moscow 2018 в октябре! Подать доклад

CSS code coverage: идентификация неиспользуемого CSS кода.Качество

Доклад принят в программу конференции
Антон Холкин
Booking.com

Окончил Институт Математики и Компьютерных Наук ДВФУ во Владивостоке. С тех пор на протяжении 10 лет участвовал в разработке в крупных государственных и коммерческих компаниях, работая как с бэкендом, так и с фронтендом. Важнее всего для Антона та часть работы, которая "смотрит" на пользователя, поэтому основной приоритет он всегда отдавал и отдает фронтенду и пользовательскому опыту.
На текущий момент работает фронтенд-разработчиком в Booking.com.

Тезисы

Удаление неиспользуемого CSS-кода – одна из задач Frontend-оптимизации на сайте Booking.com. Суммарно по всем пользовательским сценариям и их вариациям – на сайте более 50K различных CSS-селекторов. Определить, какие из них актуальные, просто проанализировав кодовую базу – невозможно. А ввиду большого количества сценариев/вариаций (более 2000) с возможными динамическими изменениями страницы невозможен и вариант ручного тестирования.

Мы получили code coverage CSS-кода, используя crowd source-подход. Я расскажу, на чем основан выбор такого подхода, и как при его использовании мы минимизировали негативное воздействие на пользовательский опыт (а в некоторых случаях и избежали).

В докладе также будет описано, как на основе полученного code coverage, мы проводим валидацию этих данных. Расскажу, какая стратегия выбрана для самой процедуры удаления ненужного CSS-кода и о том, как, работая в не маленькой команде, можно максимально учесть интересы каждого и минимизировать нежелательные удаления.

В качестве результата от такой работы можно видеть улучшение времени на Critical Rendering Path. А также повышение velocity нашей команды разработчиков.

JavaScript
,
Браузеры
,
CSS модули и веб компоненты
,
Совместная работа дизайнеров и верстальщиков
,
Производительность и мониторинг фронтенда

Другие доклады секции Качество