
Рендеринг в браузере под нагрузкой: что ломается первым
Скролл дёргается, анимация проседает до 20 fps, а профайлер показывает жёлтые полосы в главном потоке. Разбираем путь кадра от JS до пикселей и точки, где он рвётся раньше всего.

Скролл дёргается, анимация проседает до 20 fps, а профайлер показывает жёлтые полосы в главном потоке. Разбираем путь кадра от JS до пикселей и точки, где он рвётся раньше всего.

Разбор пути от изменения DOM до пикселей на экране: почему layout блокирует всё, где рвётся плавность прокрутки и что именно мерить, когда страница тормозит.

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

Спиннер по центру экрана — минимальный уровень. Скелетоны, оптимистичные обновления, обработка ошибок и защита от мигания дают ощутимо другое качество интерфейса. Разбираем по пунктам.

Браузер умеет проверять поля без единой строки JavaScript, но по умолчанию делает это некрасиво и не так, как нужно проекту. Разбираем, где заканчивается встроенная валидация и как аккуратно достроить свою.

Мигание белого экрана при загрузке, потеря выбора пользователя, серый текст на сером фоне — разбираем, почему тёмная тема ломается и как это чинить.

Модалка, которую нельзя закрыть с клавиатуры, кнопка-div без роли, фокус, улетающий в фон. Разбираем приёмы, которые чинят реальные проблемы доступности без переписывания вёрстки.

Один и тот же лендинг рисуется за 0,8 с и за 3,4 с в зависимости от того, как подключены стили и скрипты. Разбираем, чем платит каждый подход к ускорению First Contentful Paint.

Каталог из 400 карточек тянул 18 МБ картинок и на мобильном открывался семь секунд. Разбираем, как loading=lazy, IntersectionObserver и content-visibility снизили это до полутора секунд и где каждый способ ломается.

Картинки чаще всего тяжелее всего остального на странице. Разбираем, какие приёмы в HTML, CSS и JS реально снижают вес и сдвигают LCP, а какие тратят время впустую.

Шрифты решают, увидит ли пользователь текст сразу или пустое место на 3 секунды. Разбираем font-display, preload, Font Loading API и метрики fallback — что выбрать под конкретную задачу.

Анимация занавесилась дёргаными кадрами при скролле — знакомо. Разбираем, какие свойства анимировать дёшево, когда брать transform вместо top и почему requestAnimationFrame бьёт setInterval.