[Дмитрий Лаврик] Идеальная вёрстка (2023)
Идеальная вёрстка 2023. Для оценки в Chrome Lighthouse и Google PageSpeed Insights
На интенсиве изучаются приёмы вёрстки для достижения максимального результата в системах автоматической оценки страниц от Google. Ведь при ранжировании Google официально учитывает показатели Core Web Vitals
Интенсив предназначен для тех, кто:
Изучил HTML и CSS на более-менее нормальном уровне
Не понимает, почему инструменты Google ругают его вёрстку
Хочет освоить вёрстку, правильную с точки зрения Google
Темы интенсива:
Обзор инструментов
Знакомство с Lighthouse
Знакомство с Page Speed Insights
Выбор целевого уровня
Реальность получения 100 из 100
Влияние показателей на SEO
Базовые требования гугла
Быстрый ответ сервера
Адекватный размер DOM
Критические и обычные стили
Минимизация размеров статики
Отсутствие прыжков контента
Основные показатели
First Contentful Paint
Largest Contentful Paint
First Input Delay
Cumulative Layout Shift
Анализ сайтов
Примеры хороших и кривых проектов
Комментарии по кейсам учеников
Выявление важнейших проблем
Последовательность исправления
Работа с критическим CSS
Ручное разделение стилей
Автоматизация разделения кода
Эксперименты с npm critical
Эффективная настройка critical
Ускоряющие теги link
Preload и Prefetch
Preconnect
Асинхронный link stylesheet
Загрузка CSS из JS
Изображения
Webp, picture и source
Img и srcset
Указание размеров в html
Вывод разных размеров
Ленивая загрузка изображений
Шрифты
Современные форматы шрифтов
Link vs
@import
Обязательный link preload
Свойство font-display
Подбор стандартного шрифта
Популярные проблемы UI
Inputs & labels
Ссылки и кнопки без текста
Фреймы без title
Недостаточный контраст цвета
Серверная сторона
Gzip сжатие
Время кеша статики
Минификация html-ответа
Https, http2
Оптимизация монстра
Пример сайта на Vue + Vuetify
Стартовые показатели в красной зоне
Выявление ключевых проблем
Вывод в зелёную зону
Неизбежное зло
Y.Метрика и G.Аналитика
Фреймы сторонних сайтов
Неиспользуемый javascript
Nginx, Apache и время кэша
Идеальная вёрстка 2023. Для оценки в Chrome Lighthouse и Google PageSpeed Insights
На интенсиве изучаются приёмы вёрстки для достижения максимального результата в системах автоматической оценки страниц от Google. Ведь при ранжировании Google официально учитывает показатели Core Web Vitals
Интенсив предназначен для тех, кто:
Изучил HTML и CSS на более-менее нормальном уровне
Не понимает, почему инструменты Google ругают его вёрстку
Хочет освоить вёрстку, правильную с точки зрения Google
Темы интенсива:
Обзор инструментов
Знакомство с Lighthouse
Знакомство с Page Speed Insights
Выбор целевого уровня
Реальность получения 100 из 100
Влияние показателей на SEO
Базовые требования гугла
Быстрый ответ сервера
Адекватный размер DOM
Критические и обычные стили
Минимизация размеров статики
Отсутствие прыжков контента
Основные показатели
First Contentful Paint
Largest Contentful Paint
First Input Delay
Cumulative Layout Shift
Анализ сайтов
Примеры хороших и кривых проектов
Комментарии по кейсам учеников
Выявление важнейших проблем
Последовательность исправления
Работа с критическим CSS
Ручное разделение стилей
Автоматизация разделения кода
Эксперименты с npm critical
Эффективная настройка critical
Ускоряющие теги link
Preload и Prefetch
Preconnect
Асинхронный link stylesheet
Загрузка CSS из JS
Изображения
Webp, picture и source
Img и srcset
Указание размеров в html
Вывод разных размеров
Ленивая загрузка изображений
Шрифты
Современные форматы шрифтов
Link vs
@import
Обязательный link preload
Свойство font-display
Подбор стандартного шрифта
Популярные проблемы UI
Inputs & labels
Ссылки и кнопки без текста
Фреймы без title
Недостаточный контраст цвета
Серверная сторона
Gzip сжатие
Время кеша статики
Минификация html-ответа
Https, http2
Оптимизация монстра
Пример сайта на Vue + Vuetify
Стартовые показатели в красной зоне
Выявление ключевых проблем
Вывод в зелёную зону
Неизбежное зло
Y.Метрика и G.Аналитика
Фреймы сторонних сайтов
Неиспользуемый javascript
Nginx, Apache и время кэша
Скрытое содержимое могут видеть только пользователи групп(ы): VIP