Оптимизация Nuxt SPA (Дмитрий Лаврик)

[ДональдТАК]

Ссылка на картинку

Компактный курс, на котором мы рассмотрим улучшение производительности приложения и его SEO-показателей.

Основные направления работы: выделение критических CSS-стилей и кеширование SSR. Помимо этого, будет разобрана масса мелочей, улучшающих наше SPA.

Курс предназначен для тех, кто

1. Прошёл курс по Nuxt либо самостоятельно освоил работу с ним
2. Не понимает, как улучшить систему с точки зрения SEO
3. Хочет освоить фишки, помогающие 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-размтека и т.п.
• Оптимизация изображений
• Изображения и адаптивка

Показать больше