Идеальная вёрстка 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.Аналитика
• Фреймы сторонних сайтов
• Неиспользуемый jаvascript
• Nginx, Apache и время кэша

Об авторе:

Дмитрий Лаврик
Опыт работы в сфере разработки сайтов более 10 лет. Ориентируется во всех вопросах создания сайтов, от вёрстки до backend-а.

Начиная с 2011 года, под его руководством тысячи учеников прошли путь от новичков до успешных веб-программистов. Если вы ещё не знакомы с Дмитрием, рекомендуем заглянуть на его youtube-канал, где вы найдете много полезных видео и сможете узнать стиль преподавания Дмитрия.