С чего всё началось
К нам обратился владелец интернет-магазина с простой жалобой: "Реклама работает, люди переходят, но почти никто не покупает". Мы открыли сайт и... подождали. И ещё подождали. 8.2 секунды - столько грузилась главная страница.
Для понимания: средний пользователь ждёт максимум 3 секунды. После этого - закрывает вкладку. То есть клиент платил за рекламу, люди переходили, смотрели на белый экран 8 секунд и уходили. Деньги буквально улетали в пустоту.
Мы взялись за работу и за 2 недели ускорили сайт до 1.8 секунды. Вот пошаговая история, как мы это сделали.
Шаг 1: Диагностика - ищем виновных
Прежде чем что-то чинить, нужно понять, что именно сломано. Мы использовали несколько инструментов:
// Инструменты для диагностики скорости сайта:
// 1. Google PageSpeed Insights (бесплатно)
// https://pagespeed.web.dev/
// Показывает оценку от 0 до 100 и конкретные проблемы
// У клиента было: 23 из 100 (мобильная версия)
// 2. Chrome DevTools - вкладка Network
// Открываем сайт с открытыми DevTools (F12)
// Видим каждый файл, который загружается, и его размер
// У клиента: 147 запросов, 12.4 МБ данных
// 3. Chrome DevTools - вкладка Lighthouse
// Встроенный аудит прямо в браузере
// Показывает: производительность, доступность, SEO
// 4. WebPageTest.org (бесплатно)
// Тестирует из разных стран и на разных скоростях
// Показывает "водопад загрузки" - что грузится и когдаВот что мы нашли:
Проблема 1: Картинки весом с грузовик
Главный виновник - картинки. 87 изображений на главной странице, суммарно 9.6 МБ. Это как скачать песню для каждого посетителя.
Причина: дизайнер загрузил фотографии прямо с фотоаппарата. Каждая - 4000x3000 пикселей, формат PNG. А на сайте они отображаются в окошке 400x300. То есть браузер скачивает огромное фото и сжимает его в 10 раз. Зачем? Хороший вопрос.
// ДО оптимизации:
// photo-product-1.png - 2.4 МБ, 4000x3000px
// photo-product-2.png - 3.1 МБ, 4500x3400px
// ... и так 87 картинок
// ПОСЛЕ оптимизации:
// photo-product-1.webp - 45 КБ, 800x600px
// photo-product-2.webp - 52 КБ, 800x600px
// Что мы сделали:
// 1. Уменьшили размер до реально нужного (800x600)
// 2. Конвертировали PNG в WebP (современный формат, меньше в 5-10 раз)
// 3. Сжали с качеством 85% (разницу глазом не видно)
// Результат: с 9.6 МБ до 890 КБ (в 10 раз меньше!)Проблема 2: Всё грузится сразу
Все 87 картинок грузились одновременно при открытии страницы. Даже те, которые внизу - за 5 экранов прокрутки. Пользователь их не видит, но браузер честно скачивает каждую.
// ДО: все картинки грузятся сразу
// <img src="product-1.webp" alt="Товар 1" />
// ПОСЛЕ: ленивая загрузка (lazy loading)
// <img src="product-1.webp" alt="Товар 1" loading="lazy" />
// loading="lazy" говорит браузеру:
// "Не грузи эту картинку, пока пользователь до неё не доскроллит"
// Одна строка кода - и экономия мегабайт трафика!Проблема 3: JavaScript-салат
На сайте было подключено 23 JavaScript-файла. jQuery, jQuery UI, три разных слайдера (зачем?!), анимационная библиотека, которая нигде не использовалась, виджет погоды (на сайте интернет-магазина!), скрипт аналитики от сервиса, который закрылся 2 года назад.
// ДО: 23 скрипта, суммарно 1.8 МБ
// - jquery.min.js (87 КБ)
// - jquery-ui.min.js (250 КБ) - используется 1 функция!
// - slick.js (45 КБ) - слайдер на главной
// - swiper.js (140 КБ) - другой слайдер (не используется)
// - owl.carousel.js (52 КБ) - ТРЕТИЙ слайдер (не используется!)
// - animate.css (78 КБ) - нигде не используется
// - weather-widget.js (34 КБ) - виджет погоды... на магазине обуви
// - analytics-old.js (15 КБ) - сервис закрылся в 2023
// ... и ещё 15 скриптов
// ПОСЛЕ: 3 файла, суммарно 120 КБ
// - app.js (85 КБ) - весь наш код, собранный и сжатый
// - analytics.js (28 КБ) - только Яндекс.Метрика
// - chat-widget.js (7 КБ) - виджет чатаПроблема 4: Шрифты - невидимый враг
На сайте было 7 шрифтов (14 файлов - обычные + жирные). Каждый весил 100-300 КБ. Суммарно - 2.1 МБ только на шрифты. И пока они грузились, текст на сайте не отображался вообще.
/* ДО: 7 шрифтов, 14 файлов, 2.1 МБ */
/* ПОСЛЕ: 2 шрифта, 4 файла, 180 КБ */
/* Оставили только 2 шрифта (заголовки + текст) */
/* Формат WOFF2 (самый компактный) */
/* font-display: swap - текст виден СРАЗУ системным шрифтом */
@font-face {
font-family: "MainFont";
src: url("/fonts/main.woff2") format("woff2");
font-display: swap; /* ВАЖНО! Текст не пропадает при загрузке */
}Проблема 5: Сервер без кеширования
Каждый раз, когда пользователь открывал сайт, браузер скачивал ВСЕ файлы заново. Логотип, который не менялся 3 года - скачивался каждый раз.
# Nginx: настройка кеширования статических файлов
# Картинки, шрифты - кешируем на год
location ~* \.(jpg|jpeg|png|webp|gif|ico|woff2|woff)$ {
expires 365d;
add_header Cache-Control "public, immutable";
}
# CSS и JavaScript - кешируем на месяц
location ~* \.(css|js)$ {
expires 30d;
add_header Cache-Control "public";
}
# Gzip-сжатие - уменьшает размер файлов при передаче
gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1024;
# Результат: повторные визиты загружаются за 0.3 секундыПроблема 6: CSS-простыня
Один CSS-файл на 18,000 строк. Большая часть - стили для страниц, которые пользователь даже не открывает. Стили для админки загружались на публичном сайте.
// Решение: удалили неиспользуемые стили с помощью PurgeCSS
// Было: 18,000 строк (420 КБ)
// Стало: 3,200 строк (68 КБ)
// Также: критический CSS вставили прямо в HTML (inline)
// Это 2-3 КБ стилей, которые нужны для первого экрана
// Остальное - загружается асинхронноРезультаты: до и после
| Метрика | До | После | Улучшение |
|---|---|---|---|
| Время загрузки | 8.2 сек | 1.8 сек | в 4.5 раза |
| Размер страницы | 12.4 МБ | 890 КБ | в 14 раз |
| Количество запросов | 147 | 23 | в 6 раз |
| PageSpeed (мобильный) | 23/100 | 91/100 | +68 пунктов |
| PageSpeed (десктоп) | 45/100 | 97/100 | +52 пункта |
| First Contentful Paint | 4.1 сек | 0.8 сек | в 5 раз |
А что с продажами?
Через месяц после оптимизации клиент прислал статистику:
- Конверсия выросла на 34% - больше людей стали покупать
- Показатель отказов упал на 28% - меньше людей уходят сразу
- Среднее время на сайте выросло на 45% - люди стали дольше смотреть товары
- SEO-позиции улучшились - Google любит быстрые сайты
Клиент посчитал, что оптимизация окупилась за 2 недели.
Хотите такие же результаты? Мы в ENOT.SOFTWARE делаем аудит производительности и оптимизацию сайтов. Напишите нам - проведём бесплатный экспресс-аудит вашего сайта за 15 минут.
Чек-лист: что можно сделать самостоятельно
- Проверить сайт на PageSpeed Insights
- Сжать все картинки (Squoosh.app - бесплатный инструмент)
- Добавить loading="lazy" к картинкам ниже первого экрана
- Удалить неиспользуемые скрипты и стили
- Настроить кеширование на сервере
- Включить gzip-сжатие
- Оптимизировать шрифты (формат WOFF2 + font-display: swap)
Даже если вы сделаете только первые 3 пункта - уже увидите заметное улучшение. А если хотите выжать максимум - вы знаете, к кому обратиться.