Как иконка-гамбургер стоила 300 мс времени основного потока

161

У меня на сайте всегда была одна подозрительно долгая задача Layout, пишет Гарри Робертс.

Мои показатели Core Web Vitals и без того в зеленой зоне, но задача Layout длительностью 400–500 мс для такой простой страницы выглядела странно.

Пора было копнуть глубже.

По умолчанию Chrome не раскрывает подробностей того, что именно он делает в Layout, поэтому я включил опцию 'show all events' и обнаружил, что 230 мс уходит на задачу в FontCache::FallbackFontForCharacter.

Это означало, что где-то на странице был глиф, отсутствующий в текущем шрифте.

Я использую system-ui, который для меня — это San Francisco.

Chrome тратил много времени, просматривая мою систему в поисках подходящего шрифта для этого символа.

На сайте есть только одно место, где я, насколько я знаю, мудрю с глифами — иконка-гамбургер.

Проверка вычисленных стилей это подтвердила. Сама кнопка отрисовывалась шрифтом San Francisco, но для символа-гамбургера в качестве фолбэка использовался Apple Symbols.

Почему этот процесс настолько ресурсоемкий, я понятия не имею.

Это происходит синхронно, и Джейк Арчибальд уже создал по этому поводу тикет: https://issues.chromium.org/issues/362522334.

Я решил полностью убрать иконки. Они носят чисто декоративный характер, и раз уж они что-то замедляют — долой их.

Проблема решена.

Больше никакой суеты с поиском фолбэков за пределами моего стека font-family и никакого избыточного UI.

Мое собственное тестирование показало медианное улучшение в 316.51 мс.

Отмечу, что тесты проводились в Chrome с эмуляцией Galaxy S8+ и 6-кратным замедлением процессора, а данные получены в ходе моего собственного тестирования, а не взяты с тех конкретных скриншотов из DevTools, которыми я делился в сети.

Хотя я и подозревал иконку-гамбургер, я все равно отключил JS и повторно провел тесты, чтобы исключить влияние контента, подгружаемого скриптами.

Отключение JS — лучший инструмент отладки для специалиста по производительности.

И хотя добавление Apple Symbols в стек font-family решило бы проблему на устройствах Apple, мне пришлось бы знать правильный шрифт для каждой платформы, а это постоянно меняющаяся цель.

За скриншотами — сюда.

@MikeBlazerX