Оптимизация модальных окон для улучшения INP с помощью нативного <dialog>
Ключевые факты
- 1 Традиционные модальные окна вызывают тяжелые пересчеты стилей и влияют на INP.
- 2 Размытие всего вьюпорта добавляет нагрузку на основной поток.
- 3 Нативный HTML-элемент <dialog> предлагает более производительное решение.
- 4 `dialog.showModal()` использует верхний слой рендеринга, ограничивая его только диалогом.
- 5 `::backdrop` обрабатывает оверлей и поддерживает `backdrop-filter` без ущерба для производительности.
Многие крупные веб-сайты используют устаревший паттерн для реализации модальных окон, который негативно сказывается на производительности. При клике на фильтр открывается модальное окно, что приводит к добавлению вспомогательного класса в <html> для блокировки скролла и наложению полупрозрачного слоя с размытием поверх страницы. Этот подход вызывает тяжелый пересчет стилей (Style Recalculation) внутри обработчика клика, что напрямую влияет на метрику INP (Interaction to Next Paint), поскольку она измеряет время от клика до следующей отрисовки. Дополнительно, размытие всего вьюпорта с помощью фильтра добавляет десятки миллисекунд работы основному потоку при каждом открытии и закрытии модального окна. Более быстрый и эффективный способ реализации модальных окон — использование нативного HTML-элемента <dialog>. Метод `dialog.showModal()` поднимает элемент на самый верхний слой (top layer) рендеринга, ограничивая его только самим диалогом. Оверлей обрабатывается псевдоэлементом `::backdrop`, который также поддерживает `backdrop-filter` для размытия, если это необходимо. Такой подход исключает необходимость добавления классов к <html>, инвалидацию поддерева HTML и применение фильтров ко всему вьюпорту, что делает его чистым и быстрым решением для улучшения веб-производительности и метрик Core Web Vitals.