[Дмитрий Лаврик] Идеальная вёрстка (2023)

[serafim]

[Дмитрий Лаврик] Идеальная вёрстка (2023)

Идеальная вёрстка 2023. Для оценки в Chrome Lighthouse и Google PageSpeed Insights
На интенсиве изучаются приёмы вёрстки для достижения максимального результата в системах автоматической оценки страниц от Google. Ведь при ранжировании Google официально учитывает показатели Core Web Vitals https://*********.com/styles/default/xenforo/smilies/smile.png

Интенсив предназначен для тех, кто:
Изучил 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 и время кэша

Продажник:
Идеальная вёрстка под Google - интенсив от Дмитрия Лаврика
Скачать:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.