Как ускорить загрузку сайта

Ускорение сайта (оптимизация производительности) — комплексная задача. Чтобы добиться результата, нужно работать на нескольких уровнях: сервер, код, изображения и сеть.

Вот пошаговый чек-лист самых эффективных методов  как ускорить сайт:

1. Измерьте текущую скорость (без этого не начинайте)

Сначала поймите, что именно тормозит. Используйте:

• Google PageSpeed Insights — покажет баллы и конкретные рекомендации.

• GTmetrix — детальный разбор по водопаду загрузки.

• WebPageTest — глубокая диагностика.

2. Сервер и хостинг (основа)

• Используйте современный хостинг: Дешёвый общий хостинг (shared) — частая причина тормозов. Перейдите на VPS, Cloud (AWS, DigitalOcean) или хороший managed-хостинг с NVMe-дисками.

• Включите сжатие Gzip/Brotli: Это сжимает текст (HTML, CSS, JS) в 3-5 раз. На серверах Apache/Nginx делается через .htaccess или настройки.

• Держите версию PHP свежей: PHP 8.x в 2-3 раза быстрее PHP 7.x. Большинство CMS позволяют сменить версию в панели управления хостингом.

3. Кэширование (самый большой прирост)

• Браузерный кэш: Заставьте браузер запоминать файлы (картинки, CSS) локально, чтобы не качать их заново.

• Кэш на сервере: Используйте:

  • Для WordPress: плагины WP Rocket (платный), W3 Total Cache, LiteSpeed Cache.

  • Для других CMS: встроенные модули или Varnish Cache.

• Кэш страниц (Page Cache): Готовить HTML-версию страницы заранее, а не генерировать её заново при каждом посетителе.

4. Оптимизация изображений (более 60% веса сайта)

Это обычно даёт наибольший выигрыш.

• Сжимайте без потери качества: Используйте TinyPNG, Imagify или плагины (ShortPixel, Smush).

• Выберите современный формат: WebP или AVIF (тяжелее сжимать, но весят намного меньше JPEG/PNG). Google рекомендует WebP.

• Адаптивные картинки (srcset): Грузите маленькую картинку для телефона и большую для десктопа.

• Ленивая загрузка (Lazy Load): Картинки подгружаются только тогда, когда пользователь до них доскроллит.

5. Минификация и объединение ресурсов

Удалите из кода пробелы, комментарии, лишние символы.

• CSS: минифицируйте (Autoptimize, WP Rocket).

• JavaScript: минифицируйте и отложите загрузку. Неблокирующий JS грузится с атрибутами async или defer.

• HTML: минифицируйте на сервере.

Важно: Современный подход — не объединять всё в один большой файл (это вредит HTTP/2), а правильно расставить приоритеты загрузки.

6. Сеть и доставка контента (CDN)

• Используйте CDN (Content Delivery Network): Cloudflare (бесплатно), KeyCDN, Bunny.net. CDN хранит копию сайта на серверах по всему миру, и посетитель получает файлы из ближайшей к нему точки.

• Настройте DNS через Cloudflare: Даже бесплатный тариф ускоряет и защищает.

• Перенесите статику: CSS, JS, шрифты, иконки грузите через CDN.

7. Оптимизация кода и шрифтов

• Удалите неиспользуемый CSS и JS: Инструменты типа PurifyCSS (для статики) или плагины Asset CleanUp (для WP).

• Подключайте шрифты правильно: Используйте font-display: swap, чтобы текст показывался сразу системным шрифтом, пока грузится ваш кастомный.

• Используйте preload/preconnect: Подсказки браузеру о важных ресурсах:

  html

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preload" href="styles.css" as="style">

8. База данных (для CMS)

• Регулярно чистите бд: удаляйте старые ревизии, спам-комментарии, временные таблицы.

• Оптимизируйте таблицы (команда OPTIMIZE TABLE в phpMyAdmin или плагин WP-Optimize).

• Добавьте индексы на часто запрашиваемые столбцы.

9. Внешние скрипты

• Уберите тормозные виджеты: Счётчики (LiveInternet), кнопки соцсетей, рекламные сети, чаты. Каждый такой скрипт — сторонний DNS-запрос и дополнительная загрузка.

• Грузите их асинхронно или через частичную загрузку (например, подгружать метрику через 10 секунд после загрузки страницы).

10. Бонус: Протокол HTTP/2 или HTTP/3

• Современные сервера и CDN уже используют HTTP/2 (мультиплексирование, загрузка файлов параллельно по одному соединению). Убедитесь, что ваш хостинг не использует старый HTTP/1.1.