Как ускорить медленный сайт и пройти Core Web Vitals

Пошаговое руководство по ускорению сайта: от замеров до оптимизации

Этот гайд — выжимка из моей практики. Никакой теории, только действия, которые дают измеримый прирост в Google PageSpeed Insights (PSI) и Core Web Vitals.

Шаг 1: Диагностика и замеры

Прежде чем что-то крутить, фиксируем текущие показатели. Используем PageSpeed Insights.

  • LCP (Largest Contentful Paint): Цель < 2.5с. Обычно тормозит из-за тяжелых картинок или медленного ответа сервера.
  • CLS (Cumulative Layout Shift): Цель < 0.1. Причина — отсутствие размеров у изображений/блоков или подгрузка шрифтов.
  • INP (Interaction to Next Paint): Цель < 200мс. Главный враг — «тяжелый» JavaScript, блокирующий основной поток.

Команда для быстрого аудита консоли (Chrome DevTools): performance.getEntriesByType('navigation') — смотрим domInteractive и loadEventEnd.

Шаг 2: Снижение TTFB (Time to First Byte)

Если сервер «думает» дольше 300-500мс, оптимизация фронтенда не спасет.

  1. PHP OPcache: Убедитесь, что он включен. В php.ini: opcache.enable=1, opcache.memory_consumption=128.
  2. База данных: Очистка логов (ревизии постов, транзитные данные).
    • MySQL: DELETE FROM wp_options WHERE option_name LIKE '_transient_%';
    • Индекс: Проверьте медленные запросы через EXPLAIN SELECT.... Часто не хватает индексов на колонках, по которым идет фильтрация.
  3. Redis/Memcached: Перенос сессий и кэша объектов в оперативную память.

Шаг 3: Оптимизация изображений и AVIF

Забудьте про JPEG/PNG, если хотите идеальный LCP.

  1. Конвертация: Используйте cwebp или avifenc.
    • Команда для WebP: cwebp -q 75 input.jpg -o output.webp
    • Команда для AVIF: avifenc --min 20 --max 30 input.jpg output.avif
  2. Атрибуты: Всегда прописывайте width и height в теге <img>. Это убивает CLS.
  3. Lazy loading: Добавляйте loading="lazy" для всех изображений вне первого экрана.

Шаг 4: Critical CSS и отложенный JS

Браузер не начнет рендеринг, пока не скачает все CSS.

  1. Critical CSS: Вырезаем стили, нужные для отрисовки первого экрана, и вставляем их в <head> инлайново. Остальной CSS грузим асинхронно: <link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  2. Отложенный JS: Скрипты (аналитика, чаты, виджеты) переносим в конец страницы или используем defer/async.
    • Ошибка: Вешать async на jQuery-зависимые скрипты. Они сломаются.

Шаг 5: Кэширование и CDN

Кэширование — это фундамент.

  1. Browser Cache: Настройте заголовки в .htaccess или Nginx: nginx location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 30d; add_header Cache-Control "public, no-transform"; }
  2. CDN: Используйте Cloudflare. Он не только кэширует статику, но и дает бесплатный HTTP/3 (QUIC), что ускоряет загрузку в нестабильных сетях.

Чеклист для проверки

  • [ ] TTFB < 200мс.
  • [ ] Все картинки в WebP/AVIF.
  • [ ] У всех <img> есть width и height.
  • [ ] Critical CSS внедрен инлайново.
  • [ ] JS-файлы с атрибутом defer.
  • [ ] Gzip или Brotli сжатие включено на сервере.
  • [ ] Шрифты загружаются через font-display: swap.

Примеры До/После (реальные кейсы)

Показатель До (сайт на WP) После оптимизации
LCP 4.2с 1.1с
CLS 0.45 0.02
INP 650мс 110мс
Итоговый балл PSI 38 94

Что было сделано: 1. Переход на PHP 8.2 + OPcache. 2. Внедрение WebP для всех медиа. 3. Настройка Critical CSS (отсекли 80кб лишнего кода при первом рендере). 4. Удаление 3-х тяжелых плагинов, которые грузили JS в шапку.

Частые ошибки (на чем теряют время)

  1. «Оптимизация всего подряд»: Не нужно сжимать иконки 16x16 до состояния «невидимости». Оптимизируйте только тяжелые баннеры и фото.
  2. Агрессивный Minify: Иногда минификация JS ломает функционал. Всегда тестируйте формы заказа и корзину после сжатия.
  3. Игнорирование шрифтов: Шрифты — главная причина «мигания» текста и высокого CLS. Используйте font-display: swap и прелоад основных начертаний.
  4. Попытка ускорить «кривой» хостинг: Если сервер на дешевом виртуальном хостинге с оверселлингом, никакие настройки не помогут. Иногда смена тарифа на VPS — самый быстрый путь к успеху.

Резюме

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

Нужно сделать под ключ? Я специализируюсь на глубокой технической оптимизации сайтов. Разгоняю проекты до «зеленой зоны» PageSpeed, исправляю ошибки Core Web Vitals и настраиваю серверную часть.

Закажите у меня на Freelancehunt: https://freelancehunt.com/freelancer/sspoisk

Originally posted at https://guardlabs.online/care/

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

Как обновить 40 000 товаров на OkayCMS за секунды и не потерять 120 тысяч рублей на заказах

Как обновить 40 000 товаров на OkayCMS за секунды и не потерять 120 тысяч рублей на заказах Это было в четверг, года три назад. У нашего клиента на OkayCMS было около 42 000 товаров — сантехника, насосы, фитинги. Курс евро тогда подпрыгнул на 8%, и нам нужно было срочно пересчитать розницу. Включили стандартный импорт. Скрипт поработал минуты три, словил 504 Gateway Timeout на сервере и тихо умер на середине файла. Знаете, что произошло дальше? Половина базы обновилась, а половина осталась со старыми ценами. Хуже того, из-за сбоя в сессии затерлись остатки по топовым немецким насосам. Они встали в статус «в наличии» по цене пятилетней давности. За три часа, пока менеджеры пили кофе и не замечали беды, на сайт пришло девять заказов. Убыток на ровном месте — 124 000 рублей. Из своего кармана мы их не платили, но седых волос у меня прибавилось знатно. Клиента мы тогда еле удержали. Этот факап заставил нас полностью переписать подход к тому, как делается синхронизация цен okaycms. Бо...
Далее...
You’ve done everything right. Your WordPress site is fast, mobile-friendly, and ranks well on Google. You’ve optimized your images, secured your login page, and your human visitors seem happy. So, you decide to run a new kind of test—an "AI Agent Audit"—and the results are a sea of red flags. Your site, for all its human-centric design, is nearly unreadable to the next generation of web users: AI agents. If this sounds like a problem for "the future," think again. That future is arriving much faster than you expect. Welcome to the new frontier of web optimization: Agent Readiness. What is "AI Agent Readiness," Anyway? In the simplest terms, AI Agent Readiness measures how easily an automated system, like the browsing modules in ChatGPT, Perplexity AI, or Google's AI Overviews, can access, understand, and accurately synthesize the content on your website. For two decades, we’ve optimized for search engine *crawlers* (like Googlebot) and human...
Далее...

Архитектура торговых систем: уроки инженера-строителя

Архитектура торговых систем: уроки инженера-строителя Меня зовут Станислав. Мне 58, и большую часть своей сознательной жизни я строил. В 80-х, будучи молодым инженером-схемотехником, я собирал свои первые «конструкции» на базе Z80 — это были клоны ZX Spectrum, мечта любого мальчишки того времени. А с 2004 по 2022 год я строил вещи куда более материальные: моя небольшая фирма в Харькове занималась ремонтом и остеклением балконов. Я знаю запах бетонной пыли, звук перфоратора, входящего в панельную стену, и то чувство ответственности, когда ты подписываешь акт выполненных работ. Ты даешь гарантию, что твой балкон выдержит и шкаф с консервацией, и детские игры, и порывы зимнего ветра. Ты отвечаешь за безопасность людей своей репутацией и деньгами. В 2022 году мой бизнес, как и тысячи других, был уничтожен войной. Пришлось начинать с нуля. Мой инженерный склад ума не позволял мне сидеть сложа руки или полагаться на удачу. Я вернулся к тому, с чего начинал — к системам и логике. Только вм...
Далее...