Как я оптимизировал myhelper.by

С чего начал: диагностика, а не правки вслепую

Прежде чем что-то менять, смотрел на данные, а не на ощущения. Источников три: сам отчёт PageSpeed Insights (какие ресурсы тормозят загрузку), Google Search Console и Яндекс.Вебмастер (какие страницы вообще получают трафик и есть ли у них проблемы с индексацией), Яндекс.Метрика (разница в поведении между мобильными и десктопными посетителями). Это важно: оптимизировать стоит в первую очередь то, что реально влияет на посетителей и позиции, а не всё подряд по списку рекомендаций.

Шрифты: свой хостинг вместо Google Fonts

Изначально шрифты (Onest — для заголовков, Inter — для основного текста) подключались напрямую с серверов Google Fonts. Это отдельное DNS-соединение, отдельный запрос до стороннего домена и задержка на критичном пути отрисовки текста. Перевёл оба шрифта на самостоятельный хостинг: файлы .woff2 лежат в /fonts/, подключены через @font-face с font-display: swap и разбиты по нужным для русского интерфейса подмножествам (кириллица + латиница — не грузятся греческие, вьетнамские и другие неиспользуемые подмножества). Все четыре файла предзагружаются через <link rel="preload"> в <head>, чтобы браузер начал их скачивать сразу, не дожидаясь, пока дойдёт до CSS-правила, которое их запрашивает.

LCP-изображение: preload и приоритет загрузки

На каждой странице сайта самый крупный видимый элемент — это героическое изображение вверху (товарный скриншот на страницах инструментов, иллюстрация на главной). Раньше оно грузилось наравне со всеми остальными ресурсами страницы. Добавил fetchpriority="high" на сам тег <img> и отдельный <link rel="preload" as="image"> в <head>, чтобы браузер узнавал об этом файле как можно раньше при разборе HTML, а не только когда дойдёт до соответствующего места в разметке. Для картинки с srcset на главной preload дублирует imagesrcset/imagesizes — иначе браузер мог бы предзагрузить не тот вариант картинки, что реально отрисуется.

width/height у изображений — против «прыгающей» вёрстки

Часть скриншотов в инструкциях (например, «как разблокировать скачанный файл») не имела явных атрибутов width/height — только width: 100% в CSS. Из-за этого браузер не мог заранее зарезервировать место под картинку и вёрстка сдвигалась в момент её подгрузки — это напрямую бьёт по CLS. Добавил реальные пиксельные размеры каждого изображения как HTML-атрибуты и height: auto в CSS, чтобы сохранить адаптивность, но при этом дать браузеру верное соотношение сторон заранее.

Внутренняя перелинковка: не только скорость

Оптимизация — это не только миллисекунды. Часть трафика концентрировалась на паре самых заметных статей базы знаний, а остальные материалы того же кластера (например, все статьи про конверты или про путевые листы) почти не получали переходов изнутри сайта. Разобрал, какие статьи кластера уже ссылаются на сильные страницы, а куда сильные страницы не ссылаются в ответ — и добавил недостающие переходы в блоке «Что дальше» в конце статей. Это не про PageSpeed, но напрямую влияет на то, как распределяется трафик и вес страниц внутри сайта.

Техническая база: разметка, sitemap, без лишнего

Остальное — то, что обычно называют технической гигиеной: структурированные данные Schema.org (Organization, WebSite, TechArticle, FAQPage, BreadcrumbList — в зависимости от типа страницы) на каждой странице; один файл стилей main.css с версионированием через filemtime(), чтобы браузер не отдавал посетителям устаревшую версию после правок; корректные canonical-адреса, включая обработку пустой строки запроса на главной; и разбор sitemap.xml/robots.txt по рекомендациям Яндекс.Вебмастера.

Результат

Ниже — актуальный отчёт PageSpeed Insights по этому же сайту. Проверить в любой момент можно самостоятельно на pagespeed.web.dev, указав адрес myhelper.by.