Топ-100
Сейчас ищут:

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

Admin

Администратор
Команда форума
Регистрация
30 Дек 2017
Сообщения
147,967
Симпатии
4,141




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

Пожалуйста Войдите или Зарегистрируйтесь для просмотра скрытого текста.



Скачать:

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

Если у Вас нет Премиум статуса:

Преимущества VIP-подписки

Оформить VIP-Подписку

 

Вложения

Похожие курсы:

Сверху