Идеальная вёрстка 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 и время кэша
Дмитрий Лаврик

Дмитрий Лаврик

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

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

По всем показателям Google будет 100 из 100?
Разумеется, нет! Во-первых, в реальных проектах всегда есть вещи, снижающие оценку, например, Я.Метрика. Во-вторых, если вы научитесь набирать 95-98 performance, то будете сильно нравиться гугл-ботам.
Мы будем верстать макет с нуля?
Нет, это будет слишком медленно. Мы возьмём готовую вёрстку, содержащую классические ошибки, и аккуратно их исправим. Всем участникам будут доступны исходники примера этого статического сайта.
Исходники сайта монстра тоже будут?
Нет, это не открытый код, опубликовать его не могу. Суть этого примера - показать, что и как можно оптимизировать в нетривиальных условиях, а также продемонстрировать, что и ужасный сайт можно перевести ближе к 90-100 пунктам.
Домашние задания будут?
Нет, это интенсив, а не курс. Информации очень много, домашние работы не впишутся в наш темп. Для закрепления материала рекомендую применять полученные знания в ваших текущих проектах.
Видел людей, обещающих 100 из 100, это реально?
Обычно 100 из 100 набирают те, кто обманывает гугл-робота. Сервер анализируют Http User Agent и отдаёт лёгкую версию страницы, без метрик и скриптов. Ничем хорошим это не закончится.
А честно набрать 100 из 100 реально?
И да, и нет, при попытке честно достичь 100 из 100 появляются побочные эффекты. Например, лениво-загружаемые картинки стабильно индексируются чуть хуже обычных. Таких нюансов много, мы рассмотрим их на интенсиве.
А эти показатели точно влияют на SEO?
Думаю, они всегда влияли. Но с мая 2021 Google анонсировал официальный учёт значений метрик из Core Web Vitals для ранжирования сайтов.
Стоит ли идти, если уже был на потоках 2020-2021 ?
Изменилось далеко не всё, но новой информации будет прилично. Во-первых, прошло два года - есть нюансы в техническом стеке. Во-вторых, появились новые примеры вроде сайта-монстра.
ИП Лаврик Дмитрий Витальевич © 2024. Политика конфиденциальности.