Семантика и структура контента

Правильная структура веб-страницы начинается не с дизайна и не с кода. Она начинается с понимания того, что именно ищет пользователь. Семантика определяет, какие запросы должна покрывать страница, как распределить контент и какую логику построения выбрать. Если пропустить этот этап, даже технически идеальный сайт не будет ранжироваться.

Анализ поискового спроса

Анализ спроса – это основа всей SEO-архитектуры. Он позволяет понять, какие страницы нужно создавать, какие блоки должны быть на странице и какие ключевые фразы. должны быть интегрированы в заголовки и текст.

Сбор ключевых слов

На этом этапе формируется первоначальный список запросов. Источники:

• Google Search Console

• Google Keyword Planner

• Подсказки Google

• Анализ конкурентов

Собираются как высокочастотные запросы, так и средне- и низкочастотные. Важно фиксировать точные формулировки, поскольку даже незначительная разница в словах может означать другое намерение пользователя.

Кластеризация запросов

После сбора запросы группируются в кластеры. Кластер – это набор ключевых слов с одинаковым намерением и схожей выдачей в Google. Один кластер соответствует одной странице.

Например:

• «курс программирования»

• «курсы программирования онлайн»

• «обучение программированию»

Если в Google показывает одинаковые сайты для этих фраз, их нужно объединить в одну страницу. Если выдача разная – нужны отдельные страницы. Это предотвращает каннибализации.

Определение search intent

Search intent – ​​это намерение пользователя. Он может быть:

• Информационный – человек ищет ответ или объяснение

• Навигационный – ищет конкретный сайт или бренд

• Коммерческий – сравнивает варианты перед покупкой

• Транзакционный – готов купить или записаться

Структура страницы должна соответствовать намерению. Если информационный запрос, страница должна давать объяснения, примеры, структуру. Если коммерческий – нужны преимущества, цены, отзывы, кнопки действия.

Коммерческие vs информационные запросы

Это принципиальное разделение при построении структуры сайта.

Информационные страницы:

• ориентированы на трафик

• содержат глубокий контент

• формируют доверие

• усиливают экспертность

Коммерческие страницы:

• ориентированы на конверсию

• содержащие офер, выгоды, CTA

• оптимизируются под транзакционные запросы

Смешивать эти типы в пределах одной страницы не рекомендуется. Если страница одновременно пытается продавать и объяснять базовые вещи, она теряет четкость и может ухудшить показатели поведенческих факторов.

---

Правильный анализ поискового спроса позволяет:

• создать логическую структуру сайта

• избежать дублирования страниц

• повысить релевантность

• улучшить ранжирование

Любая разработка структуры веб страницы должна начинаться именно с этого этапа. Без него все последующие технические решения работают гораздо хуже.

Построение правильной иерархии страницы

Иерархия страницы определяет, как поисковая система и пользователь воспринимают контент. Неправильная структура снижает релевантность, усложняет индексацию и ухудшает поведенческие показатели Логика заголовков должна соответствовать семантическому кластеру, закрепленному за страницей.

Один H1

H1 – это главное заглавие страницы. Он должен:

• быть один

• содержит основной ключевой запрос

• четко отображать тему страницы

• отвечать search intent

Наличие нескольких H1 размывает фокус. Если страница оптимизируется под один кластер, она должна иметь один центр тяжести – один главный заголовок.

H1 не должен быть перегружен ключами. Достаточно естественное включение основной фразы без повторов.

Логическая вложенность H2–H3

Заголовки H2 формируют основные блоки страницы. H3 детализируют подразделения. Структура должна напоминать дерево:

• H1 – главная тема

• H2 – большие логические разделы

• H3 — уточнение и детализация

Нарушение вложенности создает хаос в структуре документа. Например, H3 не может появляться без соответствующего H2. Каждый заголовок должен логически продолжать предыдущий.

Для SEO это важно, поскольку поисковая система анализирует структуру документа как сигнал релевантности. Четкая иерархия повышает понятность страницы.

Распределение ключевых фраз по блокам

Каждое название соответствует отдельному микроинтенту внутри основного кластера. Ключевые слова нужно распределять в соответствии с логикой блоков:

• Основной ключ – в H1

• Вторичные ключи – в H2

• Длинные запросы и уточнения – в H3 и тексте

Не нужно концентрировать все ключи во введении или первом абзаце. Равномерное распределение улучшает тематическую глубину и уменьшает риск переоптимизации.

Контент каждого блока должен соответствовать заголовку. Если заголовок обещает ответ на конкретный вопрос, то текст под ним должен его полностью раскрывать.

Избегание keyword stuffing

Keyword stuffing – это чрезмерное повторение ключевых слов в тексте или заголовках. Это снижает качество контента и может негативно влиять на ранжирование.

Признаки переоптимизации:

• повторение одного и того же ключа в каждом абзаце

• неестественные формулировки

• перечисление фраз через запятую

• дублирование ключей в нескольких заголовках

Современные алгоритмы Google оценивают семантическую близость, а не механическую плотность ключевых слов. Поэтому важно использовать синонимы, вариации и тематически связанные термины.

---

Правильная иерархия страницы обеспечивает:

• понятную пользовательскую структуру

• лучшую индексацию

• высшая релевантность

• снижение риска переоптимизации

Структура заголовков – это не формальность. Это фундамент SEO-архитектуры страницы.

URL-структура

URL страницы является частью SEO-архитектуры. Он оказывает влияние на индексацию, релевантность и понятность структуры сайта. Неправильно построенные адреса создают дубликаты, усложняют навигацию и снижают эффективность ранжирования.

Человечественные URL

Человек понятный URL — это адрес, который отображает содержание страницы и читается без дополнительного объяснения.

Правильный пример:

site.com/kursy-programuvannya

Неверный пример:

site.com/page?id=1247&cat=98

Требования к SEO-дружественным URL:

• использование латиницы

• слова из-за дефиса

• отсутствие лишних параметров

• минимальная длина

• включение ключевого слова

URL должен соответствовать страницы H1. Если заголовок и адрес не согласованы, тематическая целостность снижается.

Вложенность категорий

Структура URL должна отображать логику сайта. Вложенность показывает иерархию разделов.

Пример правильной вложенности:

site.com/blog/seo/struktura-veb-storinky

Это означает:

• блог — раздел

• seo – категория

• конкретная статья

Глубина вложенности должна быть умеренной. Чрезмерное количество уровней затрудняет индексацию и увеличивает длину URL. Рекомендуется не более 3-4 уровней.

Структура категорий должна соответствовать кластеризации ключевых запросов. Если семантика разделена правильно, URL-архитектура будет логична.

Канонические URL

Canonical – это тег, указывающий поисковой системе основную версию страницы.

Он необходим в таких случаях:

• наличия параметров в URL

• пагинации

• фильтры товаров

• дублирование контента

Если страница доступна по нескольким адресам, без canonical Google может индексировать все версии. Это создает внутреннюю конкуренцию и рассеивает вес.

Canonical должен:

• указывать на основную версию

• быть самопосыльным на канонической странице

• не конфликтовать с редиректами

---

Грамотная URL-структура обеспечивает:

• четкую логику сайта

• правильное распределение веса

• отсутствие дублирования

• понятную навигацию

URL — это не технический пустяк. Это часть общей SEO-стратегии и структурной модели сайта.

Техническое SEO

Техническое SEO отвечает за то, чтобы поисковики могли правильно находить, сканировать и индексировать страницы. Даже качественный контент не будет ранжироваться, если есть ошибки на уровне индексации Контроль доступа к страницам должен быть четким и логичным.

Индексация

Индексация – это процесс добавления страницы в базу поисковой системы. Если страница не индексируется, она не появится в выдаче.

Контроль индексации осуществляется через несколько механизмов.

robots.txt

robots.txt – это файл в корне сайта, регулирующий доступ поисковых ботов к определенным разделам.

Основные функции:

• запрет сканирования технических директорий

• ограничение доступа к служебным страницам

• указание пути к sitemap.xml

Важно понимать: robots.txt запрещает сканирование, но не гарантирует полное отсутствие страницы в индексе, если на нее есть внешние ссылки.

Типичные ошибки:

• случайная блокировка всего сайта

• запрет важных коммерческих страниц

• конфликт с canonical или meta robots

Файл должен быть минимальным и четким.

meta robots

Meta robots — это тег в head страницы, управляющий поведением ботов.

Основные директивы:

• index — разрешить индексацию

• noindex – запретить индексацию

• follow — разрешить передавать вес ссылкой

• nofollow – запретить передавать вес

Meta robots работает на уровне конкретной страницы. В отличие от robots.txt он контролирует именно индексацию, а не только сканирование.

Используется для:

• страниц фильтров

• технические страницы

• тестовых версий

• дублирующих материалов

sitemap.xml

Sitemap.xml – это карта сайта для поисковых систем. Она содержит список страниц, которые необходимо индексировать.

Функции:

• ускорение обнаружения новых страниц

• передача информации о дате обновления

• определение приоритетов

Sitemap не гарантирует индексацию, но помогает ботам быстрее находить контент.

Рекомендации:

• включать только канонические страницы

• не добавлять noindex-страницы

• регулярно обновлять файл

• размещать ссылки на sitemap в robots.txt

noindex / nofollow

noindex — полностью исключает страницу из индекса.
nofollow – запрещает передачу веса через ссылки.

Применение noindex:

• страницы сортировки

• результаты внутреннего поиска

• дубликовать

• страницы благодарности

Применение nofollow:

• партнерские ссылки

• технические переходы

• страницы без SEO-ценности

Ошибки использования этих директив могут привести к потере трафика или распылению веса.

---

Корректная индексация обеспечивает:

• полный контроль над видимостью страниц

• отсутствие дублирования

• правильное распределение ссылочного веса

• стабильное ранжирование

Техническое SEO – это контроль доступа. Если он настроен неправильно, все остальные SEO-действия теряют эффективность.

Canonical и борьба с дублями

Дублирование контента создает внутреннюю конкуренцию между страницами и рассеивает ссылочный вес. Если одинаковый или очень похожий контент доступен по нескольким URL, поисковая система вынуждена самостоятельно выбирать основную версию. Это может привести к потере трафика или индексации второстепенной страницы.

Контроль дублей осуществляется через canonical, правильную работу с параметрами URL и корректную реализацию пагинации.

Canonical tag

Canonical tag – это элемент в секции head, указывающий поисковой системе основную версию страницы.

Пример ситуации с дублями:

• site.com/kurs

• site.com/kurs/

• site.com/kurs?utm_source=google

Фактически это одна страница, но с разными адресами. Без canonical каждая из них может быть проиндексирована отдельно.

Правильная реализация:

• каждая страница имеет self-canonical, что указывает на собственный основной URL

• дубли указывают canonical на главную версию

• canonical не должен вести на страницу с noindex

• canonical не должен конфликтовать с 301 редиректом

Canonical не блокирует страницу, а лишь сигнализирует, какую версию следует считать основной для ранжирования.

Параметры URL

Настройки создают дубли автоматически. Самые частые источники:

• UTM-метки

• фильтры товаров

• сортировка

• погибание

• Параметры поиска

Пример:

site.com/catalog?color=black
site.com/catalog?color=white

Если контент существенно не отличается, такие страницы могут создавать тысячи вариаций с минимальной разницей.

Способы контроля:

• canonical на главную страницу

• использование noindex для фильтров

• запрет сканирования параметров через robots.txt

• Настройка параметров в Google Search Console

Решение зависит от типа сайта. Для интернет-магазинов фильтры могут быть полезны для SEO, но это должно быть управляемым процессом.

Pagination

Пагинация – это разбиение списка контента на несколько страниц:

• /blog?page=1

• /blog?page=2

Без правильной реализации возникают проблемы:

• дублирование мета-тегов

• неправильная передача веса

• индексация ненужных страниц

Основные принципы:

• каждая страница пагинации должна иметь self-canonical

• нельзя ставить canonical с page=2 на page=1, если контент разный

• важно обеспечить логическую внутреннюю перелинковку между страницами

Google больше не использует rel=»prev» и rel=»next» в качестве сигнала ранжирования, поэтому основной акцент — на логической структуре и уникальных мета-тегах.

---

Контроль дублей позволяет:

• сохранить ссылочный вес

• избежать внутренней конкуренции

• повысить стабильность ранжирования

• оптимизировать краулинговый бюджет

Борьба с дублями – это системная работа. Если его не контролировать, технические проблемы постепенно снижают эффективность всего сайта.

Микроразметка

Микроразметка – это структурированные данные, помогающие поисковым системам точнее понимать содержание страницы. Она не является прямым фактором ранжирования, но влияет на расширенные результаты в выдаче и повышает CTR.

Реализируется через формат JSON-LD в разделе head или теле страницы. Главная задача – передать четкую структуру данных без ошибок и дублирования.

Schema.org

Schema.org – это стандарт структурированных данных, поддерживаемый основными поисковыми системами. Он определяет типы сущностей и их свойства.

Примеры типов:

• Article

• Product

• Course

• Organization

• FAQPage

Важно:

• использовать только те типы, которые реально соответствуют контенту

• не размечать скрытый текст

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

Несоответствие может привести к игнорированию структурированных данных.

FAQ schema

FAQ schema используется для страниц с вопросами и ответами. Позволяет показывать расширенные блоки в выдаче.

Условия применения:

• вопросы должны быть видны на странице

• ответы не должны быть скрыты для пользователя

• контент должен быть информационным, а не рекламным

FAQ schema подходит для:

• информационных статей

• справочных разделов

• страниц услуг с блоком частых вопросов

Чрезмерное использование или дублирование FAQ на разных страницах может снизить эффективность.

Breadcrumb schema

Breadcrumb schema описывает навигационную цепочку страницы.

Пример структуры:
Главная → Блог → SEO → Название статьи

Преимущества:

• улучшает понимание структуры сайта

• может отображаться в выдаче вместо полного URL

• усиливает внутреннюю иерархию

Breadcrumb должен соответствовать реальной структуре сайта. Неправильная иерархия создает логические конфликты.

Organization schema

Organization schema описывает компанию или бренд.

Основные свойства:

• название

• логотип

• контактные данные

• социальные профили

• адрес

Этот тип разметки используется для:

• главная страница

• страницы “О нас”

• Контактная страница

Он помогает поисковой системе увязать сайт с конкретной организацией и формировать знания о бренде.

---

Корректная микроразметка обеспечивает:

• лучшую интерпретацию контента

• расширенные сниппеты

• повышение CTR

• четкую структуризацию данных

Структурированные данные должны быть точными, актуальными и соответствовать реальному содержанию страницы. Иначе они не дают эффекта.

Core Web Vitals и ранжирование

Core Web Vitals – это набор метрик, оценивающих реальный опыт пользователя во время загрузки страницы. Они входят в сигналы Page Experience и влияют на конкурентные запросы, особенно когда контент у разных сайтов одинакового качества.

LCP — Великое Contentful Paint

LCP измеряет время загрузки наибольшего видимого элемента на экране пользователя. Обычно это:

• Главное изображение

• большой баннер

• H1 или текстовый блок

• hero-секция

Что измеряется

LCP фиксирует момент, когда основной контент становится видимым для пользователя.

Ориентировочное значение:

• до 2,5 секунды – хорошо

• 2,5–4 секунды – требует улучшения

• более 4 секунд – плохо

Метрика оценивается на реальных пользователях через Chrome User Experience Report и показывается в Google Search Console и PageSpeed ​​Insights.

Если главный контент появляется медленно, пользователь воспринимает страницу как медленную, даже если второстепенные элементы быстро загрузились.

Оптимизация главного контента

Основные причины плохого LCP:

• медленный сервер

• большие изображения

• блокирующий CSS

• тяжелый JavaScript

• отсутствие кэширования

Способы оптимизации:

• использование быстрого хостинга

• оптимизация изображений и формата WebP

• preload для hero-изображения

• минимизация CSS

• отложенная загрузка второстепенных скриптов

• использование CDN

Главный контент должен загружаться в первую очередь. Все второстепенное – после отображения основного блока.

Влияние на SEO

LCP является частью алгоритмов оценки Page Experience. Он не заменяет релевантность контента, но может влиять на конкурентную среду.

Плохой LCP приводит к:

• повышение bounce rate

• уменьшение времени на странице

• ухудшение поведенческих сигналов

Хороший LCP:

• улучшает восприятие скорости

• снижает отказы

• повышает стабильность ранжирования

Core Web Vitals не компенсируют слабый контент. Но при одинаковом качестве материала технически оптимизированная страница имеет преимущество.

LCP – это показатель того, насколько быстро пользователь видит главную ценность страницы. Если этот момент задерживается, все остальные SEO-элементы работают менее эффективно.

CLS — Cumulative Layout Shift

CLS измеряет суммарное смещение элементов страницы при загрузке. Если блоки изменяют положение после появления на экране, это фиксируется как смещение макета.

Метрика оценивает стабильность визуальной структуры. Она не измеряет скорость, а измеряет предсказуемость отображения.

Ориентировочное значение:

• до 0,1 – хорошо

• 0,1–0,25 – требует улучшения

• более 0,25 – плохо

Причины оползней

Самые распространенные причины:

• изображение без заданных width и height

• рекламные или динамические блоки без зарезервированного пространства

• загрузка шрифтов с заменой после рендера

• вставка элементов через JavaScript после первоначального отображения

• асинхронные виджеты

Классический пример – пользователь пытается нажать кнопку, но она смещается из-за загрузки баннера.

Оползни накапливаются в течение всего жизненного цикла страницы, не только во время первой загрузки.

Фиксация размеров медиа

Основной принцип оптимизации – резервирование пространства.

Решение:

• всегда указывать width и height для изображений

• использовать aspect-ratio

• создавать контейнер с фиксированной высотой для баннеров

• применять CSS для предварительного выделения места под динамические блоки

• загружать шрифты из font-display: swap или optional

Если пространство под элемент определено до загрузки, макет не смещается.

Влияние на UX

CLS оказывает непосредственное влияние на опыт пользователя.

Последствия высокого CLS:

• ошибочные клики

• потеря доверия

• рост показателя отказов

• Снижение конверсии

С точки зрения ранжирования CLS входит в Core Web Vitals и является частью Page Experience. Он не является основным фактором, но при равной релевантности страниц может влиять на позиции.

Стабильный интерфейс создает ощущение технического качества сайта. Если страница ведет себя непредсказуемо, пользователи быстро ее покидают.

CLS — это показатель того, насколько страница ведет себя контролируемо. Чем меньше оползней, тем выше доверие и лучше поведенческие сигналы.

INP — Interaction to Next Paint

INP измеряет задержку между действием пользователя и визуальным ответом интерфейса. Это может быть клик, щелчок клавиши или взаимодействие с формой. Метрика фиксирует худшую задержку взаимодействия в течение сессии.

Ориентировочное значение:

• до 200 мс – хорошо

• 200–500 мс – требует улучшения

• более 500 мс – плохо

INP заменил FID как более точный показатель реальной интерактивности страницы.

Отзыв на взаимодействие

Пользователь ожидает мгновенную реакцию после действия. Если после клика ничего не происходит или интерфейс зависает, восприятие скорости резко ухудшается.

Проблемы возникают, когда:

• кнопка реагирует с задержкой

• форма долго обрабатывается

• Модальное окно открывается с задержкой

• прокрутка становится рывочной

INP оценивает полный цикл: обработка события, выполнение кода и обновление интерфейса.

Влияние JavaScript

Основная причина плохого INP – перегруженный JavaScript.

Типовые проблемы:

• длинные синхронные операции

• большие бандлы

• блокировка главного потока

• сложные вычисления в браузере

• чрезмерное количество обработчиков событий

Браузер имеет один главный поток для обработки взаимодействий. Если он занят выполнением тяжелого скрипта, новые действия пользователя ожидают завершения задачи.

Особенно критично это для SPA-приложений с большим количеством клиентской логики.

Уменьшение задержек

Основные подходы к оптимизации:

• разбиение больших задач на меньшие

• использование code splitting

• отложенная загрузка второстепенных модулей

• оптимизация обработчиков событий

• вынос тяжелых вычислений в Web Workers

• минимизация посторонних библиотек

Также важно уменьшать количество DOM-операций и избегать массовых перерендеров.

С точки зрения SEO, INP входит в Core Web Vitals и влияет на Page Experience. Он не заменяет качество контента, но может влиять на позиции в конкурентной нише.

Плохой INP приводит к:

• фрустрации пользователей

• Снижение конверсии

• ухудшение поведенческих метрик

INP показывает, насколько сайт технически готов к реальному взаимодействию. Если интерфейс реагирует медленно, даже быстрая загрузка страницы не компенсирует отрицательный опыт.

Page Experience и поведенческие сигналы

Page Experience – это совокупность технических и поведенческих факторов, формирующих реальный опыт пользователя. Кроме Core Web Vitals, сюда входит адаптивность и удобство использования сайта на мобильных устройствах.

Google использует mobile-first индексацию, поэтому мобильная версия страницы является основной для оценки и ранжирования.

Mobile-first индексация

Mobile-first означает, что поисковая система анализирует именно мобильную версию сайта, даже если пользователь заходит с рабочего стола. Если мобильная версия неполная или упрощенная, это негативно влияет на индексацию.

Сайт должен иметь одинаковый контент и структурные элементы на всех устройствах.

Адаптивность

Адаптивный дизайн обеспечивает корректное отображение страницы на разных размерах экранов.

Основные требования:

• использование responsive layout

• корректные media queries

• отсутствие горизонтальной прокрутки

• масштабирование без потери функциональности

• одинаковые мета-теги и структурированные данные на мобильной и десктопной версии

Не рекомендуется создавать отдельную мобильную версию с другим контентом. Это усложняет поддержку и может создать проблемы с индексацией.

Mobile usability

Mobile usability оценивает удобство взаимодействия на смартфоне.

Типовые проблемы:

• Слишком мелкий текст

• элементы, расположенные слишком близко друг к другу

• кнопки без достаточного размера

• блоки, выходящие за пределы экрана

• поп-апы, перекрывающие контент

Плохое мобильное удобство приводит к:

• рост показателя отказов

• Сокращение времени на странице

• Снижение конверсии

Google оценивает эти сигналы по реальным данным пользователей. Если мобильный опыт слаб, даже качественный контент может терять позиции.

---

Mobile-first индексация означает, что мобильная версия является базовой. Если она медленная, неполная или неудобная, это оказывает непосредственное влияние на видимость сайта.

Адаптивность и удобство – это не дизайнерское решение, а техническое требование для стабильного ранжирования.

Скорость загрузки

Скорость загрузки влияет на поведенческие сигналы и конкурентоспособность в выдаче. Оценка осуществляется через набор технических метрик, отображающих разные этапы рендеринга страницы.

First Contentful Paint

First Contentful Paint показывает момент, когда пользователь впервые видит любое содержимое страницы — текст, изображение или SVG.

Это не полная загрузка, а первый визуальный сигнал, который страница начала отображаться.

Ориентировочное значение:

• до 1,8 секунды – хорошо

• 1,8–3 секунды – требует улучшения

• более 3 секунд – плохо

Проблемы, влияющие на FCP:

• медленный ответ сервера

• блокирующий CSS

• большие шрифты

• отсутствие кэширования

FCP формирует первое впечатление. Если пользователь долго видит пустой экран, увеличивается вероятность отказа.

Time to Interactive

Time to Interactive определяет момент, когда страница становится полностью интерактивной. То есть пользователь может нажимать кнопки, вводить текст и получать мгновенную реакцию.

Даже если страница визуально загружена, она может оставаться неинтерактивной из-за выполнения JavaScript.

Причины высокого TTI:

• большие JS-банды

• длинные синхронные задачи

• большое количество посторонних скриптов

• сложные клиентские вычисления

TTI критичен для коммерческих страниц, где быстрое взаимодействие влияет на конверсию.

Total Blocking Time

Total Blocking Time измеряет суммарное время, в течение которого главный поток браузера был заблокирован длинными задачами.

Длинная задача – это операция, которая длится более 50 мс. Если таких задач много, страница ощущается медленной даже при быстром интернете.

Основные причины:

• перегруженный JavaScript

• сложные рендеры в SPA

• сторонние библиотеки большого размера

• синхронные API-вызовы

TBT является лабораторной метрикой, которая коррелирует с INP в реальном использовании.

---

Скорость загрузки влияет на:

• показатель отказов

• глубина просмотра

• конверсию

• стабильность позиций

Оптимизация FCP, TTI и TBT уменьшает технические задержки и улучшает восприятие сайта. Даже при одинаковом контенте более быстрый сайт имеет преимущество в конкурентном. среде.

Внутренняя SEO-архитектура

Внутренняя SEO-архитектура определяет, как страницы связаны между собой, как передается ссылочный вес и насколько легко поисковые боты могут обходить сайт. Если структура хаотична, даже качественный контент теряет эффективность.

Глубина вложенности

Глубина вложенности – это количество кликов от главной страницы до конкретной страницы.

Чем глубже страница, тем:

• сложнее найти ее пользователю

• меньше внутреннего веса она получает

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

Оптимальная структура должна минимизировать лишние уровни.

Правило 3 кликов

Правило 3 кликов означает, что пользователь должен иметь возможность добраться до любой важной страницы максимум в трех переходах от главной.

Это не жесткое техническое ограничение, а ориентир для построения логики сайта.

Преимущества:

• лучшая индексация

• эффективнее распределения ссылочного веса

• Удобство навигации

• уменьшение потери пользователей

Если коммерческая страница находится на 5–6 уровне вложенности, она получает меньше внутреннего усиления.

Логика категорий

Категории должны формироваться на основе семантической кластеризации, а не случайно.

Принципы:

• одна категория – одна тематика

• отсутствие пересечения между разделами

• четкая иерархия: раздел → подраздел → страница

• минимизация дублирования

Неправильная логика категорий приводит к:

• канибализации запросов

• дублирование URL

• хаотической внутренней перелинковки

Хорошо построенная архитектура позволяет:

• масштабировать сайт без потери структуры

• быстро добавлять новые страницы

• сохранять логическую навигацию

• усилить коммерческие разделы через внутренние ссылки

Внутренняя SEO-архитектура – ​​это фундамент. Если он построен правильно, сайт легче продвигать и поддерживать в долгосрочной перспективе.

Оптимизация HTML структуры

HTML-структура формирует основу страницы. От нее зависит корректность индексации, скорость рендеринга и доступность. Семантическая разметка помогает поисковым системам и технологиям доступности правильно интерпретировать контент.

Семантическая разметка

Семантические элементы HTML описывают роль блока, а не его визуальный вид. Они заменяют чрезмерное использование универсальных контейнеров div.

Основные элементы:

• header — вводный блок страницы или раздела

• nav – навигационное меню

• main – основной уникальный контент страницы

• section – тематический блок

• article — самостоятельный материал

• footer — завершающий блок

Правильное использование:

• один main на страницу

• логическое вложение section внутри main

• article для отдельных материалов, новостей или статей

• nav только для навигации

Семантика улучшает понимание структуры документа и упрощает поддержку кода.

Accessibility

Accessibility – это доступность сайта для людей с ограниченными возможностями, а также для вспомогательных технологий.

Основные принципы:

• логическая структура заголовков

• достаточный контраст текста

• возможность навигации с клавиатуры

• альтернативный текст для изображений

• корректные метки для форм

Доступность влияет на UX и может косвенно влиять на поведенческие сигналы.

атрибуты ARIA

ARIA (Accessible Rich Internet Applications) – это набор атрибутов, уточняющих роль и состояние элементов интерфейса.

Используются в случаях, когда стандартная семантика недостаточна (что является достаточно нераспространенным случаем).

Примеры:

• aria-label — текстовое описание элемента

• aria-hidden — скрытие элемента от скринридера

• aria-expanded — состояние раскрытого блока

• role="button" — определение роли для нестандартных элементов

ARIA не должна заменять семантические метки. Сначала используется правильный HTML, и только при необходимости прилагаются ARIA-атрибуты.

---

Семантическая HTML-структура обеспечивает:

• корректную индексацию

• лучшая доступность

• удобство поддержки

• прогнозируемое поведение интерфейса

HTML-архитектура должна быть логичной и минималистичной. Избыточные вложения и универсальные блоки без семантики усложняют как SEO, так и дальнейшее развитие проекта.

Минимизация DOM

DOM – это структура объектов, которую браузер формирует на основе HTML. Чем больше и сложнее DOM, тем больше ресурсов требуется для рендеринга, пересчета стилей и отделки взаимодействий.

Чрезмерное количество элементов увеличивает время загрузки и ухудшает показатели Core Web Vitals.

Ограничение вложенности

Глубокая вложенность создает дополнительную нагрузку во время рендеринга и обновления стилей.

Проблемы глубокой структуры:

• медленные пересчеты layout

• сложность поддержки

• трудность в отслеживании ошибок

Рекомендации:

• избегать лишних уровней вложенности

• упрощать структуру блоков

• не вкладывать элементы без реальной необходимости

• использовать CSS Grid или Flexbox вместо дополнительных контейнеров

Чем проще дерево DOM, тем быстрее работает браузер.

Избегание лишних wrapper-элементов

Wrapper-элементы часто добавляются для стилизации, но не несут семантической или функциональной роли.

Чрезмерные div-контейнеры:

• увеличивают размер DOM

• усложняют поддержку

• создают дополнительные точки для стилей

Оптимизация:

• использовать семантические элементы вместо универсальных контейнеров

• применять псевдоэлементы CSS вместо дополнительных блоков

• группировать стили без создания отдельных оберток

Цель — минимизировать количество узлов без потери структуры.

Lazy loading изображений

Lazy loading позволяет откладывать загрузку изображений, находящихся вне видимого экрана, до моментов их приближения к пользователю.

Преимущества:

• уменьшение начальной нагрузки

• улучшение LCP

• экономия трафика

Реализация происходит с использованием сторонних js библиотек. В частности существуют библиотеки, которые советует та или иная поисковая система.

Нельзя применять lazy loading к элементам, влияющим на LCP.

---

Минимизация DOM обеспечивает:

• быстрее рендеринг

• стабильный INP

• уменьшение Total Blocking Time

• простую поддержку кода

Оптимизация структуры не всегда заметна пользователю напрямую, но она формирует техническую основу производительности сайта.

Оптимизация медиа

Медиаэлементы являются одной из главных причин медленной загрузки страницы. В большинстве случаев именно изображения формируют наибольшую часть передаваемых данных. Если их не оптимизировать, это оказывает непосредственное влияние на LCP, FCP и общую скорость сайта. Оптимизация медиа должна учитывать формат, размер файла и способ отображения на разных устройствах.

WebP

WebP — это современный формат изображений, обеспечивающий значительно меньший размер файла при сохранении качества по сравнению с JPEG или PNG. Основное преимущество заключается в лучшем алгоритме сжатия.

Использование WebP позволяет:

• уменьшить вес страницы

• сократить время загрузки

• улучшить показатели Core Web Vitals

Однако важно не просто изменить формат, а убедиться, что сервер правильно отдает файлы и настроенные заголовки кэширования. Также необходимо сохранять баланс между качеством и степенью сжатия. Чрезмерное снижение качества может ухудшить восприятие сайта.

Компрессия

Компрессия изображений уменьшает их размер без заметной потери качества. Есть два типа сжатия:

• с потерями качества

• без потерь качества

Для Интернета обычно применяется сжатие с потерями, поскольку оно дает значительно меньший размер файла. Критически важно оптимизировать изображение перед загрузкой на сервер, а не полагаться только на браузер.

Если страница содержит несколько больших изображений без компрессии, это приводит к:

• медленного LCP

• увеличение времени до полной интерактивности

• повышение показателя отказов

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

Адаптивные изображения

Адаптивные изображения позволяют браузеру загружать версию файла в соответствии с размером экрана и плотностью пикселей.

Это реализуется через атрибуты srcset и sizes. Благодаря этому мобильное устройство не загружает изображение, предназначенное для большого монитора.

Если адаптивность не настроена, пользователь смартфона получает слишком большой файл. Это увеличивает время загрузки и потребления трафика.

Правильная реализация означает:

• Создание нескольких версий одного изображения

• определение условий загрузки

• сохранение четкости на экранах с высокой плотностью

---

Оптимизация медиа оказывает непосредственное влияние на скорость и опыт пользователя. Если формат, компрессия и адаптивность настроены правильно, страница загружается быстрее. более стабильно отображается и демонстрирует лучшие показатели Page Experience. Если эти аспекты игнорируются, даже хорошо структурированный сайт будет медленным.

Оптимизация JavaScript

JavaScript оказывает непосредственное влияние на скорость рендеринга, интерактивность и показатели Core Web Vitals. Даже если HTML и медиа оптимизированы, перегружен или неправильно организованный JS может блокировать главный поток браузера, задерживать отклик на взаимодействие и ухудшать INP и TTI. Поэтому оптимизация JavaScript должна быть системной, а не ситуативной.

Минимизация и бандлинг

Современные проекты состоят из десятков или сотен модулей. Если их подключать без оптимизации, браузер будет загружать лишний код, не используемый на на конкретной странице. Минимизация и бандлинг позволяют уменьшить объем передаваемых данных и ускорить выполнение скриптов.

Минимизация предполагает удаление комментариев, лишних пробелов, сокращение переменных имен и другие технические оптимизации, не влияющие на логику работы. Это уменьшает размер файла, но не решает проблему излишнего функционала.

Бандлинг объединяет модули в оптимизированные пакеты. Однако важно не просто объединить все в один обширный файл, а правильно управлять тем, какой код и когда загружается.

Tree shaking

Tree shaking – это механизм удаления неиспользованного кода из финального бандла. Если импортируемая библиотека содержит много функций, но используется только часть, сборщик удаляет лишние модули.

Без tree shaking в бандл попадает весь код библиотеки, даже если большинство функций не используется. Это увеличивает размер файла и загрузку на браузер.

Для эффективной работы tree shaking нужно:

• использовать модульную систему ES Modules

• избегать глобальных импортов крупных библиотек

• правильно настроить сборщик

Это позволяет снизить вес JavaScript без изменения функционала.

Code splitting

Code splitting – это разделение JavaScript на несколько частей, которые загружаются отдельно. Вместо одного большого файла пользователь получает только тот код, который необходим конкретной страницы или действия.

Например, если на странице нет сложного редактора, нет необходимости загружать его логику сразу.

Преимущество подхода в том, что исходный объем JS уменьшается, а страница скорее становится интерактивной. Это оказывает положительное влияние на TTI и INP.

Если код splitting не используется, даже небольшое взаимодействие может сопровождаться загрузкой большого количества ненужного кода.

Динамический импорт

Динамический импорт позволяет загружать модули только в момент, когда они действительно нужны. Это реализуется через механизм асинхронного подключения.

Например, модальное окно с дополнительным функционалом может подгружаться только после клика пользователя, а не во время начального рендеринга.

Такой подход:

• уменьшает исходный бандл

• сокращает время до первой интерактивности

• снижает нагрузку на главный поток

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

---

Оптимизация JavaScript – это баланс между функциональностью и производительностью. Если код не структурирован и загружается полностью независимо от контекста, страница становится медленной даже при быстром сервере. Грамотное использование минимизации, tree shaking, code splitting и динамического импорта позволяет снизить вес проекта и обеспечить стабильную интерактивность.

Уменьшение блокировки рендеринга

При загрузке страницы браузер последовательно строит DOM, загружает CSS, выполняет JavaScript и формирует визуальный макет. Если определенные ресурсы блокируют этот процесс, пользователь дольше видит пустой экран или отчасти сформированную страницу. Блокировка рендеринга оказывает непосредственное влияние на FCP, LCP и TTI.

Задача оптимизации — сделать так, чтобы критический контент отображался как можно скорее, а второстепенные ресурсы не мешали этому процессу.

defer и async

По умолчанию браузер останавливает построение страницы, когда встречается тег script. Он загружает файл и выполняет его перед продолжением рендеринга. Если скрипт велик или их много, это существенно задерживает отображение контента.

Атрибут async позволяет загружать скрипт параллельно рендерингу. После загрузки он выполняется сразу, независимо от порядка. Это подходит для независимых посторонних скриптов, например аналитики.

Атрибут defer также загружает файл параллельно, но выполняет его только после полного формирования HTML. При этом сохраняется порядок подключения. Это оптимальный вариант для большинства собственных скриптов.

Неправильное использование async для зависимых скриптов может вызвать ошибки из-за нарушения порядка выполнения и повлиять на DOM-структуру и ее построение, применение стилей. Вы должны быть уверены, что скрепы, которые вы обозначаете async/defer, не влияют на важные сегменты страницы или сайта

Critical CSS

CSS также может блокировать рендеринг. Пока не загружены стили, браузер не может корректно отобразить страницу.

Critical CSS – это минимальный набор стилей, необходимый для отображения первого экрана. Он встраивается непосредственно в HTML, чтобы отобразить основной контент без ожидание полного CSS-файла.

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

Такой подход:

• улучшает FCP

• ускоряет LCP

• уменьшает ощущение медленной загрузки

Если весь CSS подключается одним большим файлом без оптимизации, страница отображается с задержкой.

Lazy hydration

В современных фреймворках страница часто сначала рендерится как статический HTML, а затем «оживает» благодаря JavaScript. Гидратация — это процесс привязки логики к уже отображенных элементов.

Lazy hydration означает отложенную гидратацию второстепенных компонентов. Интерактивность активируется только тогда, когда пользователь взаимодействует с элементом или когда он появляется в видимой области.

Это позволяет:

• уменьшить нагрузку на главный поток

• улучшить INP

• сократить первоначальный объем исполняемого JS

Без такого подхода браузер пытается гидратировать все компоненты сразу, что может привести к длительным блокировкам и ухудшению интерактивности.

---

Уменьшение блокировки рендеринга направлено на то, чтобы пользователь как можно скорее увидел и смог использовать основной контент. Если CSS и JavaScript выполняются без контроля, они задерживают отражение и взаимодействие. Грамотное использование defer, async, критических стилей и отложенной гидратации позволяет сделать страницу технически быстрой без потери функциональности.

Выбор библиотек

Библиотеки и фреймворки оказывают непосредственное влияние на производительность, масштабируемость и SEO. Часто технические проблемы возникают не из-за сложности функционала, а из-за неоправданно тяжелые зависимости. Перед подключением любой библиотеки следует оценить ее влияние на финальный бандл и интерактивность страницы.

Самая распространенная ошибка — подключение большой библиотеки для реализации незначительной функции. В результате пользователь загружает десятки или сотни килобайт кода используется частично или однократно.

Оценка размера пакета

Каждая библиотека увеличивает вес JavaScript. Это влияет на:

• время загрузки

• Time to Interactive

• INP

• Total Blocking Time

Перед интеграцией следует оценить:

• размер пакета после бандлинга

• наличие поддержки tree shaking

• зависимости библиотеки

• частота обновлений

Библиотека может быть небольшая сама по себе, но подключать значительное количество дополнительных модулей.

Если функционал можно реализовать нативными средствами браузера или небольшим кастомным решением, предпочтительнее выбрать этот вариант.

Lighthouse аудит

Lighthouse позволяет оценить влияние библиотек на производительность. Инструмент показывает:

• объем неиспользованного JavaScript

• время блокировки главного потока

• воздействие посторонних скриптов

• проблемы с интерактивностью

Аудит помогает определить, какие именно ресурсы создают наибольшую нагрузку.

Регулярная проверка после подключения новых зависимостей позволяет избежать постепенного накопления технического долга.

Сравнение SPA и SSR

Архитектурное решение также определяет поведение JavaScript.

SPA сразу загружает основную логику и формирует страницу на клиенте. Это обеспечивает быстрые переходы между разделами после первой загрузки, но может создавать большой начальный бандл и задержка интерактивности.

SSR генерирует HTML на сервере и передает готовую страницу пользователю. Это улучшает первоначальный рендеринг и может оказывать положительное влияние на LCP и SEO.

При выборе необходимо учитывать:

• тип проекта

• объем динамического контента

• требования к SEO

• Сложность логики на клиенте

SPA подходит для сложных веб-приложений с большим количеством интерактивных сценариев. SSR лучше работает для контентных и коммерческих сайтов, где важна скорость первичного отображения и индексации.

---

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

Выбор фреймворков и архитектуры

Архитектурное решение определяет, как именно страница формируется и отображается пользователю. От этого зависит скорость первичного рендеринга, объем JavaScript, индексация и стабильность работы сайта Ошибка на этом этапе создает системные проблемы, которые сложно устранить позже.

SPA vs SSR vs SSG

SPA, SSR и SSG отличаются способом генерации HTML и моментом выполнения логики.

SPA генерирует контент на клиенте. Сервер отдает базовый HTML-шаблон и большой JavaScript-бандл, после чего браузер формирует страницу.

SSR формирует HTML на сервере при каждом запросе. Пользователь получает готовую страницу, которая затем гидратируется JavaScript-логикой.

SSG генерирует статические HTML-файлы во время сборки. Они отдаются без вычислений на сервере при каждом запросе.

SEO последствия

Для SEO ключевой вопрос – получает ли поисковый бот полностью сформированный HTML.

В SPA бот должен выполнять JavaScript для получения контента. Хотя современные поисковые системы могут рендерить JS, это создает задержку индексации и зависимость от правильности выполнения скриптов.

SSR и SSG отдают полностью сформированный HTML сразу. Это уменьшает риск проблем с рендерингом и обеспечивает стабильную индексацию.

Для контентных и коммерческих сайтов SSR или SSG обычно более предсказуемы с точки зрения SEO.

Скорость

SPA часто имеет более медленный начальный рендер из-за большого JavaScript-банда. После первой загрузки переходы между страницами быстры, поскольку контент обновляется без полной перезагрузки.

SSR улучшает показатели первого отображения, поскольку основной HTML уже готов. Однако нагрузка на сервер увеличивается.

SSG обеспечивает лучшую скорость первичного рендеринга, поскольку страницы отдаются как статические файлы без дополнительных вычислений.

Выбор зависит от типа проекта. Если большинство страниц часто не меняется, SSG обеспечивает максимальную производительность. Если нужна динамичность в реальном времени, SSR или SPA могут быть оправданы.

Индексация

SPA может создавать проблемы с индексацией, если:

• контент загружается асинхронно

• используются сложные клиентские маршруты

• есть задержки рендеринга

SSR и SSG снижают эти риски, поскольку страница доступна в полном виде сразу.

Важно также учитывать, что большое количество JavaScript в SPA может влиять на краулинговый бюджет. Если бот тратит больше ресурсов на рендеринг, частота сканирование может снижаться.

---

Выбор архитектуры – это стратегическое решение. SPA обеспечивает упругость и сложную интерактивность. SSR улучшает первоначальный рендер и стабильность SEO. SSG обеспечивает максимальная скорость и минимальные технические риски для контентных страниц.

Архитектура должна соответствовать типу сайта, а не популярности технологии. Если приоритетом является видимость в поиске и скорость загрузки, предпочтение следует отдавать решениям, отдающим готовый HTML без зависимости от клиентского рендеринга.

Хостинг и серверная оптимизация

Производительность сайта начинается не с кода, а с ответа сервера. Когда пользователь открывает страницу, первый этап — это установка соединения и получение исходного HTML. Если сервер медленный или нестабильный, ни одна фронтенд оптимизация не сможет полностью компенсировать задержку. Время ответа сервера влияет на FCP, LCP и общее восприятие скорости. Поэтому выбор типа хостинга является стратегическим техническим решением.

Тип хостинга

Различные типы хостинга отличаются способом распределения ресурсов, уровнем контроля и масштабируемостью. Это оказывает непосредственное влияние на стабильность, скорость и способность выдерживать нагрузку.

Shared

Shared-хостинг подразумевает размещение многих сайтов на одном физическом сервере. Все они используют общие ресурсы – процессор, оперативную память, диск. Это бюджетное решение, подходящее для небольших проектов с низким трафиком.

Проблема заключается в том, что производительность вашего сайта зависит не только от вас. Если другой сайт на том же сервере создает пиковую нагрузку, скорость падает для всех. В часы высокой активности это может приводить к медленному ответу сервера, что негативно влияет на Core Web Vitals.

Для тестовых или небольших информационных ресурсов это допустимый вариант. Для коммерческих проектов с трафиком и SEO-целями – это ограничительная среда.

VPS

VPS предоставляет изолированную виртуальную среду внутри физического сервера. Ресурсы распределяются более прогнозируемо, и вы получаете контроль над конфигурацией.

Это позволяет:

• настроить кэширование

• выбрать версию серверного ПО

• оптимизировать обработку запросов

• контролировать нагрузку

VPS обеспечивает более стабильное время ответа и лучшую предсказуемость работы. Однако он нуждается в технической компетенции или администраторе. Если сервер настроен неправильно, даже VPS не гарантирует высокой производительности.

Для проектов со средним трафиком или растущей аудиторией это рациональный компромисс между ценой и контролем.

Cloud

Cloud-инфраструктура базируется на распределенных ресурсах. В отличие от одного физического сервера, вычислительные мощности могут масштабироваться в зависимости от нагрузки.

Это означает, что при резком росте трафика система автоматически выделяет дополнительные ресурсы. Такой подход обеспечивает высокую отказоустойчивость и стабильность работы. даже в пиковые периоды.

Для SEO это важно, поскольку:

• снижается риск медленного ответа сервера

• страницы остаются доступными при погрузке

• уменьшается количество технических сбоев

Cloud-решения являются более гибкими, но более сложными в настройке. Их целесообразно использовать для масштабируемых проектов или сайтов с непредсказуемыми скачками. трафика.

---

Выбор типа хостинга должен соответствовать реальной нагрузке и целям сайта. Если серверная инфраструктура не справляется с запросами, это сразу отображается на скорости, поведенческим сигналам и стабильности индексации. Оптимизация кода имеет только тогда, когда базовая инфраструктура не создает системных ограничений.

CDN

CDN — это сеть распределенных серверов, хранящих копии статических ресурсов сайта и отдающих их пользователю из ближайшей географической точки. Если сайт обслуживается только с одного дата-центра, пользователи из других регионов получают более высокую задержку из-за физического расстояния. CDN уменьшает этот эффект, приближая контент к аудитории.

Для современных сайтов это не дополнительный инструмент, а базовый элемент инфраструктуры, особенно если трафик распределен по разным странам.

Географическая оптимизация

Каждый HTTP-запрос требует времени для подключения и передачи данных. Чем больше расстояние между сервером и пользователем, тем выше задержка. Это влияет на FCP и LCP, особенно для больших изображений, CSS и JavaScript.

CDN размещает копии ресурсов в разных регионах. Когда пользователь открывает страницу, система автоматически определяет ближайший узел и отдает оттуда файлы. В результате:

• сокращается время ответа

• уменьшается задержка передачи данных

• стабилизируется скорость в разных странах

Для проектов с международной аудиторией CDN критически влияет на восприятие скорости.

Кэширование

CDN не только распределяет контент, но и уменьшает нагрузку на основной сервер через кэширование. Статические файлы хранятся на периферийных узлах и не нуждаются повторной генерации.

Кэширование позволяет:

• уменьшить количество запросов на основной сервер

• ускорить повторные посещения

• снизить нагрузку при пиковом трафике

Правильная стратегия кэширования предполагает настройку заголовков Cache-Control и определение срока хранения файлов. Если кэш настроен некорректно, пользователь может получать устаревшую версию контента или, напротив, сервер будет перегружен лишними запросами.

---

CDN влияет на скорость, стабильность и масштабируемость. Без него сайт с глобальной аудиторией всегда будет иметь разную скорость в разных регионах. При правильном настройка CDN сокращает задержки, улучшает Core Web Vitals и уменьшает риск перегрузки инфраструктуры.

Серверные настройки

Серверная конфигурация определяет, как быстро обрабатываются запросы, как передаются ресурсы и эффективно ли используется инфраструктура. Даже на качественном хостинге неправильные настройки могут создавать задержки. Один из ключевых механизмов оптимизации – кэширование.

Кэширование

Кэширование позволяет сохранять уже сгенерированный ответ сервера и повторно отдавать его без повторных вычислений. Это уменьшает нагрузку на процессор, базу данных и сокращает время ответа.

Существует несколько уровней кэширования.

Кэширование на уровне браузера позволяет сохранять статические файлы на стороне пользователя. При повторном посещении изображения, CSS и JavaScript не загружаются повторно, если не изменился срок их актуальности. Это уменьшает количество запросов HTTP и ускоряет повторный доступ к странице.

Серверное кэширование сохраняет уже сгенерированный HTML или результат запроса в базу данных. Если страница не меняется для каждого пользователя, нет смысла формировать ее заново при каждом запросе. Кэш позволяет отдать готовый результат гораздо быстрее.

Также применяется кэширование объектов и запросов в базу данных, что особенно важно для крупных сайтов с динамическим контентом. Без этого сервер может перегружаться при увеличении трафика.

Неправильно настроенное кэширование создает другую проблему — пользователь может видеть устаревший контент. Поэтому необходимо контролировать:

• срок хранения файлов

• правила обновления кэша

• очистка кэша после изменений

Корректная стратегия кэширования уменьшает время ответа сервера, улучшает FCP и LCP и стабилизирует работу сайта при высокой нагрузке. Это одна из базовых технических оптимизации, которая влияет на скорость больше, чем большинство изменений во фронтенде.