#12-Правка текста главы

'#6. Тексты : texts';

'Library_ChapterController_actionUpdateHtml';

'#layouts_templates_updateHtml';

Правка кода HTML в тексте

<div class="alert alert-info mb-4"><strong>Важно!</strong> Core Web Vitals &ndash; это не просто технические метрики, а реальные показатели качества пользовательского опыта, которые напрямую влияют на ранжирование вашего сайта в Google.</div>
<h2 class="h3 text-secondary mt-5 mb-3">Что такое Core Web Vitals</h2>
<p class="lead">Core Web Vitals (Основные веб-показатели) &ndash; это набор ключевых метрик, разработанных Google для оценки качества пользовательского опыта на веб-сайтах. Эти показатели измеряют три критически важных аспекта взаимодействия пользователя с веб-страницей: скорость загрузки, интерактивность и визуальную стабильность.</p>
<p>Введение Core Web Vitals в 2020 году стало революционным шагом в мире веб-оптимизации. Google официально включил эти метрики в алгоритм ранжирования, что сделало их обязательными для рассмотрения при SEO-оптимизации любого сайта.</p>
<div class="row my-4">
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title text-success">Для чего нужны Core Web Vitals</h5>
<ul class="list-unstyled">
<li><em class="text-success">✓</em> Улучшение пользовательского опыта</li>
<li><em class="text-success">✓</em> Повышение позиций в поисковой выдаче</li>
<li><em class="text-success">✓</em> Увеличение конверсий</li>
<li><em class="text-success">✓</em> Снижение показателя отказов</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title text-warning">Последствия игнорирования</h5>
<ul class="list-unstyled">
<li><em class="text-danger">✗</em> Падение позиций в Google</li>
<li><em class="text-danger">✗</em> Потеря пользователей</li>
<li><em class="text-danger">✗</em> Снижение доходов</li>
<li><em class="text-danger">✗</em> Ухудшение репутации сайта</li>
</ul>
</div>
</div>
</div>
</div>
<h2 class="h3 text-secondary mt-5 mb-3">Три основных метрики Core Web Vitals</h2>
<div id="metricsAccordion" class="accordion">
<div class="accordion-item">
<h2 id="headingLCP" class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLCP" aria-expanded="true" aria-controls="collapseLCP"> <strong>Largest Contentful Paint (LCP) &ndash; Скорость загрузки</strong> </button></h2>
<div id="collapseLCP" class="accordion-collapse collapse show" aria-labelledby="headingLCP" data-bs-parent="#metricsAccordion">
<div class="accordion-body">
<div class="row">
<div class="col-md-8">
<p><strong>LCP измеряет время загрузки самого большого элемента контента</strong> на странице, видимого пользователю без прокрутки. Это может быть изображение, видео или блок текста.</p>
<h5 class="mt-3">Пороговые значения LCP:</h5>
<div class="progress mb-2" style="height: 20px;">
<div class="progress-bar bg-success" style="width: 40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">Отлично (&lt;2.5с)</div>
<div class="progress-bar bg-warning" style="width: 30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">Требует улучшения (2.5-4с)</div>
<div class="progress-bar bg-danger" style="width: 30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">Плохо (&gt;4с)</div>
</div>
<p class="mt-3">Хороший показатель LCP должен составлять менее 2,5 секунд. Если время превышает этот порог, пользователи начинают испытывать дискомфорт и могут покинуть сайт.</p>
</div>
<div class="col-md-4">
<div class="card bg-light">
<div class="card-body">
<h6 class="card-title">Что влияет на LCP:</h6>
<ul class="small">
<li>Размер изображений</li>
<li>Время отклика сервера</li>
<li>Блокирующие CSS и JavaScript</li>
<li>Рендеринг на стороне клиента</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 id="headingFID" class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFID" aria-expanded="false" aria-controls="collapseFID"> <strong>First Input Delay (FID) &ndash; Интерактивность</strong> </button></h2>
<div id="collapseFID" class="accordion-collapse collapse" aria-labelledby="headingFID" data-bs-parent="#metricsAccordion">
<div class="accordion-body">
<div class="row">
<div class="col-md-8">
<p><strong>FID измеряет время от первого взаимодействия пользователя</strong> с сайтом (клик, тап, нажатие клавиши) до момента, когда браузер может начать обработку этого взаимодействия.</p>
<div class="alert alert-warning"><strong>Важное обновление!</strong> С марта 2024 года FID заменяется на Interaction to Next Paint (INP), который более точно отражает общую отзывчивость страницы.</div>
<h5 class="mt-3">Пороговые значения FID:</h5>
<div class="progress mb-2" style="height: 20px;">
<div class="progress-bar bg-success" style="width: 50%;" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Отлично (&lt;100мс)</div>
<div class="progress-bar bg-warning" style="width: 25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Требует улучшения (100-300мс)</div>
<div class="progress-bar bg-danger" style="width: 25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Плохо (&gt;300мс)</div>
</div>
<p class="mt-3">Хороший показатель FID должен быть менее 100 миллисекунд. Высокие значения FID делают сайт неотзывчивым и раздражают пользователей.</p>
</div>
<div class="col-md-4">
<div class="card bg-light">
<div class="card-body">
<h6 class="card-title">Причины высокого FID:</h6>
<ul class="small">
<li>Тяжелые JavaScript-файлы</li>
<li>Блокирующие сценарии</li>
<li>Большое время выполнения задач</li>
<li>Неоптимизированные события</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 id="headingCLS" class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCLS" aria-expanded="false" aria-controls="collapseCLS"> <strong>Cumulative Layout Shift (CLS) &ndash; Визуальная стабильность</strong> </button></h2>
<div id="collapseCLS" class="accordion-collapse collapse" aria-labelledby="headingCLS" data-bs-parent="#metricsAccordion">
<div class="accordion-body">
<div class="row">
<div class="col-md-8">
<p><strong>CLS измеряет визуальную стабильность страницы</strong>, оценивая насколько сильно элементы смещаются во время загрузки. Неожиданные смещения могут привести к случайным кликам и плохому пользовательскому опыту.</p>
<h5 class="mt-3">Пороговые значения CLS:</h5>
<div class="progress mb-2" style="height: 20px;">
<div class="progress-bar bg-success" style="width: 40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">Отлично (&lt;0.1)</div>
<div class="progress-bar bg-warning" style="width: 35%;" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">Требует улучшения (0.1-0.25)</div>
<div class="progress-bar bg-danger" style="width: 25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Плохо (&gt;0.25)</div>
</div>
<p class="mt-3">Хороший показатель CLS должен быть менее 0,1. Высокие значения CLS особенно критичны для мобильных устройств.</p>
</div>
<div class="col-md-4">
<div class="card bg-light">
<div class="card-body">
<h6 class="card-title">Причины высокого CLS:</h6>
<ul class="small">
<li>Изображения без размеров</li>
<li>Динамический контент</li>
<li>Веб-шрифты</li>
<li>Рекламные блоки</li>
<li>Встроенные элементы</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h2 class="h3 text-secondary mt-5 mb-3">Влияние Core Web Vitals на SEO</h2>
<p>Google официально включил Core Web Vitals в алгоритм ранжирования в рамках обновления "Page Experience Update" в 2021 году. Это означает, что сайты с лучшими показателями Core Web Vitals получают преимущество в поисковой выдаче.</p>
<div class="row my-4">
<div class="col-md-6">
<div class="card border-success">
<div class="card-header bg-success text-white">
<h5 class="mb-0">Положительное влияние хороших метрик</h5>
</div>
<div class="card-body">
<p class="card-text">Сайты с хорошими показателями Core Web Vitals демонстрируют:</p>
<ul>
<li>Повышение позиций в органической выдаче</li>
<li>Увеличение органического трафика на 15-20%</li>
<li>Рост конверсий на 10-15%</li>
<li>Снижение показателя отказов на 20-30%</li>
<li>Увеличение времени на сайте</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-danger">
<div class="card-header bg-danger text-white">
<h5 class="mb-0">Негативное влияние плохих метрик</h5>
</div>
<div class="card-body">
<p class="card-text">Сайты с плохими показателями Core Web Vitals страдают от:</p>
<ul>
<li>Падения позиций в поисковой выдаче</li>
<li>Потери до 30% органического трафика</li>
<li>Снижения конверсий на 20-40%</li>
<li>Увеличения показателя отказов</li>
<li>Ухудшения пользовательского опыта</li>
</ul>
</div>
</div>
</div>
</div>
<h2 class="h3 text-secondary mt-5 mb-3">Инструменты для измерения Core Web Vitals</h2>
<div class="row">
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-header">
<h5 class="card-title">Google PageSpeed Insights</h5>
</div>
<div class="card-body">
<p class="card-text">Основной инструмент Google для анализа производительности веб-страниц. Предоставляет данные как из лаборатории, так и от реальных пользователей.</p>
<div class="mt-3"><strong>Преимущества:</strong>
<ul class="small">
<li>Бесплатный и простой в использовании</li>
<li>Реальные данные пользователей (CrUX)</li>
<li>Конкретные рекомендации по улучшению</li>
<li>Анализ как десктопной, так и мобильной версии</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-header">
<h5 class="card-title">Google Search Console</h5>
</div>
<div class="card-body">
<p class="card-text">Раздел "Core Web Vitals" в Search Console показывает, как Google видит производительность вашего сайта в реальных условиях.</p>
<div class="mt-3"><strong>Преимущества:</strong>
<ul class="small">
<li>Данные по всему сайту</li>
<li>Группировка страниц по проблемам</li>
<li>Исторические данные</li>
<li>Интеграция с другими отчетами GSC</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-header">
<h5 class="card-title">Lighthouse</h5>
</div>
<div class="card-body">
<p class="card-text">Инструмент аудита веб-страниц, встроенный в Chrome DevTools. Предоставляет детальный анализ производительности, доступности и SEO.</p>
<div class="mt-3"><strong>Преимущества:</strong>
<ul class="small">
<li>Встроен в браузер Chrome</li>
<li>Детальные рекомендации</li>
<li>Возможность тестирования в разных условиях</li>
<li>Автоматизация через CI/CD</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-header">
<h5 class="card-title">Web Vitals Extension</h5>
</div>
<div class="card-body">
<p class="card-text">Расширение для Chrome, которое показывает Core Web Vitals в реальном времени для любой посещаемой страницы.</p>
<div class="mt-3"><strong>Преимущества:</strong>
<ul class="small">
<li>Мониторинг в реальном времени</li>
<li>Простота использования</li>
<li>Быстрая проверка конкурентов</li>
<li>Визуальные индикаторы</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<h2 class="h3 text-secondary mt-5 mb-3">Стратегия оптимизации Core Web Vitals</h2>
<div class="alert alert-primary">
<h5 class="alert-heading">Пошаговый план оптимизации</h5>
<p class="mb-0">Следуйте этому плану для систематического улучшения Core Web Vitals вашего сайта:</p>
</div>
<div class="row">
<div class="col-md-4">
<div class="card mb-4">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">Этап 1: Анализ</h5>
</div>
<div class="card-body">
<ol>
<li>Измерьте текущие показатели</li>
<li>Определите проблемные страницы</li>
<li>Приоритизируйте по важности</li>
<li>Установите целевые значения</li>
</ol>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-header bg-success text-white">
<h5 class="mb-0">Этап 2: Оптимизация</h5>
</div>
<div class="card-body">
<ol>
<li>Оптимизируйте изображения</li>
<li>Минимизируйте CSS/JS</li>
<li>Настройте кэширование</li>
<li>Улучшите серверный отклик</li>
</ol>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-header bg-info text-white">
<h5 class="mb-0">Этап 3: Мониторинг</h5>
</div>
<div class="card-body">
<ol>
<li>Настройте автоматический мониторинг</li>
<li>Проверяйте метрики регулярно</li>
<li>Отслеживайте изменения в трафике</li>
<li>Корректируйте стратегию</li>
</ol>
</div>
</div>
</div>
</div>
<h2 class="h3 text-secondary mt-5 mb-3">Детальные рекомендации по оптимизации</h2>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h5>Оптимизация LCP (Largest Contentful Paint)</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<h6 class="text-success">Оптимизация изображений</h6>
<ul>
<li><strong>Используйте современные форматы:</strong> WebP, AVIF вместо JPEG/PNG</li>
<li><strong>Адаптивные изображения:</strong> реализуйте srcset для разных экранов</li>
<li><strong>Сжатие:</strong> используйте TinyPNG, ImageOptim или аналогичные инструменты</li>
<li><strong>Lazy loading:</strong> загружайте изображения по мере необходимости</li>
</ul>
<h6 class="text-success mt-3">Оптимизация сервера</h6>
<ul>
<li><strong>CDN:</strong> используйте Cloudflare, AWS CloudFront или аналогичные</li>
<li><strong>Кэширование:</strong> настройте правильные HTTP-заголовки</li>
<li><strong>Сжатие:</strong> включите Gzip или Brotli</li>
<li><strong>HTTP/2:</strong> используйте современный протокол</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-success">Оптимизация кода</h6>
<ul>
<li><strong>Минификация:</strong> уменьшите размер CSS и JavaScript</li>
<li><strong>Критический CSS:</strong> встраивайте критичные стили</li>
<li><strong>Асинхронная загрузка:</strong> используйте async/defer для скриптов</li>
<li><strong>Удаление неиспользуемого кода:</strong> очистите CSS/JS от лишнего</li>
</ul>
<div class="alert alert-info mt-3"><strong>Совет:</strong> Используйте инструменты типа Webpack, Vite или Parcel для автоматизации оптимизации.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h5>Оптимизация FID/INP (First Input Delay / Interaction to Next Paint)</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<h6 class="text-warning">Оптимизация JavaScript</h6>
<ul>
<li><strong>Code splitting:</strong> разделяйте код на небольшие чанки</li>
<li><strong>Tree shaking:</strong> удаляйте неиспользуемый код</li>
<li><strong>Web Workers:</strong> выносите тяжелые вычисления в фоновые потоки</li>
<li><strong>Debouncing:</strong> оптимизируйте обработку событий</li>
</ul>
<h6 class="text-warning mt-3">Загрузка ресурсов</h6>
<ul>
<li><strong>Preloading:</strong> предзагружайте критичные ресурсы</li>
<li><strong>Prefetching:</strong> предзагружайте ресурсы для следующих страниц</li>
<li><strong>Resource hints:</strong> используйте dns-prefetch, preconnect</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-warning">Оптимизация выполнения</h6>
<ul>
<li><strong>Избегайте длинных задач:</strong> разбивайте задачи свыше 50мс</li>
<li><strong>Используйте requestAnimationFrame:</strong> для анимаций</li>
<li><strong>Оптимизируйте DOM:</strong> минимизируйте манипуляции с DOM</li>
<li><strong>Виртуализация:</strong> для больших списков данных</li>
</ul>
<div class="alert alert-warning mt-3"><strong>Важно:</strong> FID заменяется на INP с марта 2024 года. INP учитывает все взаимодействия, а не только первое.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h5>Оптимизация CLS (Cumulative Layout Shift)</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<h6 class="text-danger">Стабилизация изображений</h6>
<ul>
<li><strong>Указывайте размеры:</strong> всегда задавайте width и height</li>
<li><strong>Aspect ratio:</strong> используйте CSS aspect-ratio</li>
<li><strong>Placeholder:</strong> показывайте заглушки во время загрузки</li>
<li><strong>Responsive images:</strong> правильно настраивайте srcset</li>
</ul>
<h6 class="text-danger mt-3">Управление шрифтами</h6>
<ul>
<li><strong>font-display: swap:</strong> для быстрого отображения текста</li>
<li><strong>Preload fonts:</strong> предзагружайте критичные шрифты</li>
<li><strong>Fallback fonts:</strong> используйте системные шрифты как fallback</li>
</ul>
</div>
<div class="col-md-6">
<h6 class="text-danger">Динамический контент</h6>
<ul>
<li><strong>Резервируйте место:</strong> для динамически загружаемого контента</li>
<li><strong>Skeleton screens:</strong> используйте скелетонные экраны</li>
<li><strong>Избегайте вставки:</strong> не вставляйте контент выше существующего</li>
<li><strong>Анимации:</strong> используйте transform вместо изменения размеров</li>
</ul>
<div class="alert alert-danger mt-3"><strong>Критично:</strong> CLS особенно важен для мобильных устройств, где случайные клики более вероятны.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h2 class="h3 text-secondary mt-5 mb-3">Практические инструменты и техники</h2>
<div class="row">
<div class="col-md-6">
<div class="card border-primary">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">Инструменты разработчика</h5>
</div>
<div class="card-body">
<h6>Автоматизация оптимизации:</h6>
<ul class="small">
<li><strong>Webpack:</strong> для сборки и оптимизации</li>
<li><strong>Vite:</strong> быстрая сборка для современных проектов</li>
<li><strong>Parcel:</strong> zero-config сборщик</li>
<li><strong>Gulp:</strong> для автоматизации задач</li>
</ul>
<h6 class="mt-3">Мониторинг производительности:</h6>
<ul class="small">
<li><strong>Lighthouse CI:</strong> автоматическое тестирование</li>
<li><strong>WebPageTest:</strong> детальное тестирование</li>
</ul>
</div>
</div>
</div>
</div>

Краткое название: CWB / Core Web Vitals

Полное название Core Web Vitals / Основные веб-показатели

Активен Редактировать название и описание

Название

Стандартный редактор Смотреть

Полное название и описание

Полное название (Заголовок)

Описание

Как правило описание должно иметь около 150 знаков. Оно используется для заполнения мета-тега Description веб-страницы.
Сейчас используется - 0 символов

Описание скопировано!

Описание вставлено!