1

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

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

Интенсив предназначен для тех, кто:

Изучил HTML и CSS на более-менее нормальном уровне.
Не понимает, почему инструменты Google ругают его вёрстку.
Хочет освоить вёрстку, правильную с точки зрения Google.

Обзор инструментов

  • Знакомство с Lighthouse

  • Знакомство с Page Speed Insights

  • Выбор целевого уровня

  • Реальность получения 100 из 100

  • Влияние показателей на SEO

Базовые требования гугла

  • Быстрый ответ сервера

  • Адекватный размер DOM

  • Критические и обычные стили

  • Минимизация размеров статики

  • Отсутствие прыжков контента

Основные показатели

  • First Contentful Paint

  • Largest Contentful Paint

  • First Input Delay

  • Cumulative Layout Shift

Ускоряющие теги 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 и время кеша

СКАЧАТЬ:

Вы должны зайти под своим именем, чтобы увидеть скрытый контент.