Как ускорить сайт в 3 раза: практическое руководство
Скорость загрузки влияет на позиции в поиске и конверсию. Каждая секунда задержки — минус 7% к конверсии. Вот как ускорить сайт в 3 раза.
1. Оптимизация изображений
- Все растровые картинки — в WebP (на 25–40% меньше JPEG)
- Правильные размеры: не 2000×2000 для превью 200×200
loading="lazy"для картинок за пределами первого экрана- SVG для иконок и логотипов
2. Кеширование на стороне браузера
Заголовок Cache-Control: max-age=31536000 для статики — браузер не перезагружает файл год.
3. Минификация CSS и JS
Удаление пробелов, комментариев, переносов — экономия 15–30% размера. У нас это делает php tools/build_css.php --minify.
4. Gzip / Brotli сжатие
На сервере — mod_deflate (Apache) или gzip (nginx). Даёт 5–10× сжатие текстовых файлов.
5. Критический CSS
Стили для первого экрана — inline в <head>, остальные — отложенно. Ускоряет First Contentful Paint.
6. Шрифты
font-display: swap — текст виден сразу, шрифт загружается в фоне. Или использовать системные шрифты (быстрее всего).
7. Кеш HTML на сервере
Если контент не меняется каждую секунду — отдавать статически. У нас для этого есть PHP-обёртки, которые можно закешировать на 5–10 минут.
8. CDN
Раздача статики через серверы по всему миру. Клиент из Владивостока получает файл с сервера в Новосибирске за 30 мс, а не из Москвы за 300 мс.
9. HTTP/2 или HTTP/3
Мультиплексирование запросов, приоритеты, server push. Если хостинг поддерживает — включайте.
10. Мониторинг
Lighthouse в Chrome DevTools, PageSpeed Insights, WebPageTest. Меряйте «до» и «после» — не угадывайте.
Результат
Комбинация этих приёмов даёт ускорение в 3–5 раз и рост позиций в поиске.