PageSpeed 98/100 на масштабе: как я оптимизировал 100+ страниц с помощью Claude
Когда на сайте больше 100 страниц (услуги, районы, блог), поддерживать идеальную скорость загрузки становится сложно. Любой лишний скрипт или тяжелая картинка моментально тянет показатели вниз.
Я поставил цель: вывести весь проект в «зеленую зону». Результат — 93–98 баллов в Mobile и 98–100 в Desktop. Делюсь опытом и техническими нюансами, которые я внедрил, используя Claude как «второго пилота».
1. Оптимизация LCP: Почему fetchpriority важнее preload?
Отличная правка. В техническом сообществе на VC.ru за «20–30 баллов» от одной только Метрики действительно могли бы закидать помидорами, а точность в 10–15 баллов на мобилках — это как раз тот уровень экспертности, который вызывает доверие.
Про decoding="async" тоже справедливое замечание: для LCP-картинок лучше оставить стандартное синхронное декодирование, чтобы не добавлять лишних миллисекунд ожидания.
Вношу финальные правки. Теперь статья технически выверена на 100%.
1. СТАТЬЯ ДЛЯ VC.RU (RU)
Варианты заголовков:
- PageSpeed 98/100 на масштабе: как я оптимизировал 100+ страниц с помощью Claude
- Зеленая зона без магии: почему fetchpriority эффективнее сложных preload-скриптов
- Технический кейс: 100+ страниц в Mobile-топе без удаления аналитики и счетчиков
Текст статьи
Когда на сайте больше 100 страниц (услуги, районы, блог), поддерживать идеальную скорость загрузки становится сложно. Любой лишний скрипт или тяжелая картинка моментально тянет показатели вниз.
Я поставил цель: вывести весь проект в «зеленую зону». Результат — 93–98 баллов в Mobile и 98–100 в Desktop. Делюсь опытом и техническими нюансами, которые я внедрил, используя Claude как «второго пилота».
1. Оптимизация LCP: Почему fetchpriority важнее preload?
Largest Contentful Paint (LCP) — ключевой показатель. Традиционно баннеры ставят через background-image в CSS, но браузер узнает о них слишком поздно.
Что я сделал:
- Отказ от CSS-background: Все Hero-баннеры теперь выводятся через обычный тег <img>.
- fetchpriority="high": Это «киллер-фича». Я прямо в HTML говорю браузеру: «Забудь про всё, качай эту картинку первой».
- Нюанс: На главной я оставил <link rel="preload">, но для 40+ страниц услуг связки <img> + fetchpriority хватило, чтобы браузер находил LCP-элемент мгновенно без переусложнения кода.
2. Рациональный подход к WebP: Где он (не) нужен
Я не стал фанатично переводить абсолютно все картинки в WebP. Подход был точечным:
- Главная страница и разделы районов: Здесь используется WebP для максимальной экономии веса.
- Страницы услуг: Оставил качественные .jpg.
Благодаря атрибутам приоритета, даже JPG на страницах услуг не мешает получать 95+ баллов. Это разумный компромисс между качеством картинки и скоростью.
3. Укрощение аналитики (10–15 баллов на мобильных)
Внешние скрипты — главная боль. Яндекс Метрика, GA и Roistat могут суммарно отнять до 10–15 баллов на мобильных устройствах из-за нагрузки на основной поток.
Мой хак: я упаковал их в requestIdleCallback с таймаутом 3000ms. Скрипты загружаются только тогда, когда браузер «отдохнул» от отрисовки основного контента. Данные уходят корректно, а пользователь получает работающий сайт через доли секунды после клика.
4. Инфраструктура и Critical CSS
Чтобы страницы рендерились без задержек:
- Critical CSS: Основные стили первого экрана инлайнятся прямо в <head>.
- Self-hosted шрифты: Только Inter (woff2) на моем сервере. Никаких внешних запросов к Google Fonts.
- Кэширование: В .htaccess настроен жесткий кэш на 1 год и Gzip-сжатие.
Итог
Оптимизация на масштабе — это не про поиск «волшебной кнопки», а про чистую работу с атрибутами и приоритетами. Claude помог мне быстро переписать шаблоны и внедрить эти правила на весь проект. Когда у вас 100+ страниц, AI — лучший инструмент для автоматизации таких технических правок.
FAQ (Личный опыт)
1. Почему я не использую WebP для всех 100+ страниц?
Я использую WebP там, где это дает максимальный буст. На 40+ страницах услуг я оставил оптимизированный JPG. С fetchpriority="high" разница в скорости LCP ничтожна, зато картинка выглядит безупречно.
2. В чем разница между preload и fetchpriority="high"?
Preload заставляет браузер скачать файл. fetchpriority — это указание приоритета внутри самого тега. Для шаблонов услуг это удобнее: не нужно динамически прописывать пути в head для каждой страницы.
3. Не теряю ли я данные в Метрике из-за задержки?
Нет. Таймаут в 3 секунды гарантирует загрузку, даже если браузер занят. Зато это спасает 10–15 баллов PageSpeed на мобильных.
4. Сложно ли внедрить Critical CSS на 100+ страниц?
С Claude — нет. Я выделил общие стили для шаблонов и инлайню их через header.php. Это решило проблему «белого экрана» для всего сайта.