Идеальная вёрстка 2023

Интенсив «Идеальная вёрстка 2023» — практический курс для разработчиков, которые хотят научиться создавать страницы, идеально соответствующие требованиям Google и демонстрирующие высокие показатели Core Web Vitals. Если ваши проекты постоянно «краснеют» в PageSpeed Insights или Lighthouse — этот курс поможет понять причины и исправить их системно.

Кому подходит этот интенсив

Программа разработана для тех, кто уже владеет HTML и CSS, но хочет вывести навыки на новый уровень и научиться верстать так, чтобы сайты работали быстро, стабильно и предсказуемо.

• Освоили HTML/CSS и готовы перейти к оптимизации.
• Не понимают, почему инструменты Google низко оценивают их проекты.
• Хотят разбираться в технических показателях, влияющих на SEO.

Что вы изучите на интенсиве

Инструменты разработчика для анализа производительности

Вы научитесь работать с основными сервисами, оценивающими скорость и качество вёрстки.

• Lighthouse
• PageSpeed Insights
• Выбор целевых метрик
• Что значит «100 из 100» и как реально этого добиться
• Как показатели влияют на SEO

Базовые требования Google к современным сайтам

Разбор ключевых правил, от которых зависит оценка любого проекта.

• Быстрый ответ сервера
• Оптимальный размер DOM
• Критические и обычные стили
• Минимизация размеров статики
• Устранение визуальных прыжков контента

Основные показатели Core Web Vitals

Подробно разберём метрики, которые Google считает критически важными.

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Анализ и разбор сайтов

Вы увидите реальные кейсы и научитесь определять слабые места проектов.

• Примеры хороших и плохих решений
• Разбор кейсов учеников
• Определение ключевых проблем производительности
• Последовательность исправления ошибок

Глубокая оптимизация фронтенда

Работа с критическим CSS

• Ручное выделение критичных стилей
• Автоматизация через инструменты
• Практика с npm critical
• Настройка эффективной генерации critical CSS

Ускорение загрузки через тег link

• Preload и Prefetch
• Preconnect
• Асинхронная загрузка стилей
• Подключение CSS через JS

Оптимизация изображений

• Использование WebP, picture и source
• Работа с img и srcset
• Указание размеров в HTML
• Генерация изображений разных размеров
• Ленивая загрузка (lazy-loading)

Шрифты без просадок в производительности

• Современные форматы
• Разница между link и @import
• Обязательное использование preload
• font-display и его влияние на рендеринг
• Подбор безопасных fallback-шрифтов

Исправление типичных проблем интерфейсов

Разберём распространённые ошибки, которые снижают UX и оценки Google.

• Корректная работа inputs и labels
• Кнопки и ссылки без текста
• Фреймы без атрибута title
• Недостаточный контраст интерфейса

Серверная оптимизация

Не только фронтенд влияет на итоговые показатели — сервер тоже вносит свой вклад.

• Gzip-сжатие
• Правильное кеширование статики
• Минификация HTML
• Переход на HTTPS и HTTP/2

Оптимизация тяжёлых проектов

Практический разбор крупного проекта на Vue+Vuetify.

• Анализ начальных показателей
• Поиск критичных проблем
• Переход из красной зоны в зелёную

Неизбежные проблемы и как с ними работать

• Интеграция Яндекс.Метрики и Google Analytics
• Фреймы сторонних сервисов
• Неиспользуемый JavaScript
• Настройка кэша в Nginx и Apache

После интенсива вы сможете уверенно работать с инструментами Google, понимать причины низких оценок производительности и создавать вёрстку, которая стабильно показывает высокие результаты Core Web Vitals.