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

[serafim]

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

Продажник:

Войти или Зарегистрироваться чтобы увидеть скрытый текст.

Скачать:

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