Идеальная вёрстка

для оценки в Chrome Lighthouse и Google PageSpeed Insights.

На интенсиве изучаются приёмы вёрстки для достижения максимального результата в системах автоматической оценки страниц от Google.

Ведь с мая 2021 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
  • Ручное разделение стилей
  • Автоматизация разделения кода
  • Gulp + модуль 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
  • Недостаточный контраст цвета
Неизбежное зло
  • Y.Метрика и G.Аналитика
  • Фреймы сторонних сайтов
  • Неиспользуемый javascript
  • Nginx, Apache и время кеша
Дмитрий Лаврик

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

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

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

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