- Сообщения
- 9,001
- Реакции
- 172

Автор: Дмитрий Лаврик
Название: Идеальная вёрстка (2023)
Описание:
Изучение методов верстки для максимальной оптимизации страниц в системах автоматической оценки Google - Chrome Lighthouse и Google PageSpeed Insights - является основным фокусом этого интенсива. Поскольку Google при ранжировании страниц учитывает показатели Core Web Vitals, понимание этих инструментов играет важную роль в оптимизации контента.
Этот интенсив ориентирован на:
- Людей, владеющих HTML и CSS на базовом уровне, но сталкивающихся с затруднениями при работе с инструментами Google.
- Тех, кто желает освоить верстку, соответствующую требованиям Google.
- Обзор инструментов:
- Знакомство с Lighthouse
- Знакомство с Page Speed Insights
- Определение целевых показателей
- Реалистичные ожидания от оценки результатов
- Влияние показателей на SEO:
- Основные требования Google, такие как быстрый ответ сервера, оптимальный размер DOM, структурирование стилей, минимизация размеров статических элементов, предотвращение скачков контента и другие.
- Оценка ключевых показателей:
- First Contentful Paint
- Largest Contentful Paint
- First Input Delay
- Cumulative Layout Shift
- Анализ веб-сайтов:
- Примеры хороших и недостаточно оптимизированных проектов
- Обсуждение проблем, выявленных участниками
- Последовательность действий для исправления проблем
- Оптимизация CSS:
- Ручное и автоматизированное разделение стилей
- Эксперименты с npm critical для улучшения загрузки CSS
- Использование ускоряющих тегов link
- Оптимизация изображений:
- Форматы изображений, их вывод и ленивая загрузка
- Работа с различными размерами изображений и srcset
- Работа с шрифтами:
- Использование современных форматов
- Эффективное управление шрифтами и их загрузкой
- Решение популярных проблем UI:
- Оптимизация элементов пользовательского интерфейса, включая инпуты, ссылки, кнопки, фреймы и другие
- Оптимизация серверной части:
- Сжатие Gzip, кэширование статики, минификация HTML-ответов, протокол HTTPS, HTTP/2
- Оптимизация сайта на примере Vue + Vuetify:
- Выявление и исправление ключевых проблем, ведущих к улучшению показателей
- Дополнительные темы:
- Использование Yandex.Metrica и Google Analytics
- Оптимизация сторонних фреймов, устранение неиспользуемого JavaScript, работа с серверами Nginx и Apache для улучшения времени кэша.