Один и тот же лендинг рисуется за 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.
Почему макет разъезжается на телефоне, resize срабатывает 60 раз в секунду, а 100vh обрезает контент в Safari. Разбор частых ошибок адаптивной вёрстки и рабочие замены.
Как разбить интерфейс на компоненты без React: изоляция стилей, состояния, переиспользование. Разбираем BEM, кастомные свойства, Custom Elements и Shadow DOM — с ценой каждого подхода.
Скелетон-заглушка выглядит красиво в Storybook и разваливается на реальных данных: прыгает лейаут, крутится вечный спиннер, при ошибке пусто. Разбираем, что проверить до релиза.
Спиннер, скелетон, оптимистичный UI или ничего — четыре подхода к тому, что показать пользователю, пока грузятся данные. Разбираем цену каждого и когда какой выбирать.
Спиннер по центру экрана и layout shift на весь список — две самые частые ошибки в состояниях загрузки. Разбираем, когда скелетон помогает, когда мешает и как не сломать разметку при подмене плейсхолдера на данные.
Бесконечный скролл кажется современнее нумерованных страниц, но ломает возврат к товару, память браузера и SEO. Разбираем четыре подхода на конкретных задачах: каталог, лента новостей, поиск, админка.
Бесконечный скролл кажется современнее, но ломает возврат к товару, глубокую ссылку и SEO. Разбираем, какой подход к списку выбрать под конкретную задачу и чем платит каждый.