Компактный курс, на котором мы рассмотрим улучшение производительности приложения и его SEO-показателей.
Основные направления работы: выделение критических CSS-стилей и кеширование SSR. Помимо этого, будет разобрана масса мелочей, улучшающих наше SPA.
Курс предназначен для тех, кто
- Прошёл курс по Nuxt либо самостоятельно освоил работу с ним
- Не понимает, как улучшить систему с точки зрения SEO
- Хочет освоить фишки, помогающие SEO и скорости работы сайта
Основные темы курса
Базовые требования гугла
- Core Web Vitals ( FCP, LCP, FID / INP )
- Скорость ответа сервера и размер DOM
- Критические и асинхронные стили
- Минимизация размеров статики
- Отсутствие прыжков контента
Обзор проблем текущей SPA
- Тяжёлые критические стили
- Потенциально тяжёлый JSON in HTML
- Долгий ответ при SSR без кеша
- Отсутствие оптимизации статических ресурсов
- Отсутствие ряда SEO-тегов и т.п.
Работа с критическим CSS
- Ручное / автоматическое разделение стилей
- Эксперименты с npm critical
- Персональные стили страниц
- Генерация стилей после build
- Nitro-плагин внедрения стилей
SSR и кеширование
- Замеры скорости рендеринга
- Выбор стратегии кеша: memory / redis
- Поиск готовых решений
- Создание своего плагина
- Варианты инвалидации кеша
Backend for frontend
- Нестыковки backend api и frontend
- Примеры разрастания JSON
- Примеры неудачных api-решений
- Создание промежуточного backend
- Идеи кеширования данных
Классическое SEO
- Сайты для проверки мелочей SEO
- Размер DOM при увеличении страниц SPA
- Canonical, description, og-размтека и т.п.
- Оптимизация изображений
- Изображения и адаптивка
