У книжного магазина сайт тяжёлый по своей природе: сотни картинок-обложек, длинные списки товаров, фильтры по автору, издательству и жанру, поиск по названию и ISBN. Медленная страница здесь чаще всего складывается из нескольких понятных причин, и каждую можно проверить отдельно.
Что именно тормозит: сервер или браузер
Сначала разделите две задачи. Первая: как быстро сервер отдаёт саму HTML-страницу. Вторая: сколько времени уходит на картинки, стили и скрипты. Откройте страницу каталога во вкладке «Сеть» (Network) в Chrome или в Firebug и посмотрите на первую строку списка. Если HTML приходит несколько секунд, проблема в коде и базе данных. Если HTML быстрый, а страница достраивается долго, виноваты ресурсы. Дополнительно запустите Google PageSpeed или YSlow: они покажут типовые нарушения, но порядок работ определяйте по своим замерам.
Обложки: почему список книг весит как архив
Частая ошибка: в список выводится исходный файл обложки, а размер задан атрибутами width и height. Посетитель видит маленькую картинку, но скачивает большой файл. Сравните условные варианты:
<!-- плохо: файл большой, уменьшен только на экране -->
<img src="/upload/58213_original.jpg" width="120" height="180" alt="Обложка книги">
<!-- лучше: отдельная миниатюра нужного размера -->
<img src="/covers/s/58213.jpg" width="120" height="180" alt="Обложка книги">Если на странице 40 книг, а каждая обложка по условию весит 150 КБ вместо 8, разница составит около шести мегабайт против трёхсот килобайт. Подставьте реальные размеры своих файлов. Делайте миниатюры при загрузке товара, а не на лету при каждом запросе. Для фотографий подбирайте умеренное JPEG-сжатие, а для плоской графики вроде логотипов и значков подойдёт PNG. Всегда указывайте width и height, чтобы текст не прыгал, пока грузятся картинки.
Обложки ниже первого экрана можно подгружать при прокрутке с помощью небольшого скрипта. Но первые обложки и товар на странице книги должны загружаться сразу, а у картинок нужно оставить осмысленный alt.
Сколько запросов делает страница и что в них лишнее
Каждый файл — отдельный запрос. Типичная картина: десять CSS и JS файлов, несколько копий jQuery от разных плагинов, слайдер на главной, кнопки «Мне нравится» от соцсетей, счётчики, виджет онлайн-консультанта. Что можно сделать:
- объединить и сжать свои CSS и JS, убрать дубли библиотек;
- мелкие значки (корзина, рейтинг, «в наличии») собрать в один CSS-спрайт;
- скрипты, не нужные для первого отображения, подключать в конце страницы или асинхронно;
- виджеты соцсетей показывать только на карточке книги и только если вы реально их используете;
- слайдер на главной ограничить несколькими баннерами нужного размера.
Сторонние виджеты особенно опасны: их скорость от вас не зависит, а зависшая внешняя загрузка может задерживать вашу страницу.
Каталог, фильтры и поиск: медленные запросы к базе
Если HTML приходит долго, смотрите запросы к базе данных. В книжном магазине типичные причины такие:
- нет индексов по полям, по которым идёт выборка и сортировка: автор, издательство, жанр, цена, ISBN;
- подсчёт общего числа товаров для каждой комбинации фильтров выполняется при каждом открытии страницы;
- поиск по названию ведётся через LIKE по всей таблице;
- на странице списка для каждой книги выполняется отдельный запрос за автором и ценой, вместо одного общего;
- наличие и цены обновляются из учётной системы прямо во время показа страницы.
Попросите разработчика выписать запросы одной страницы каталога и время каждого. Часто помогают индексы, один запрос вместо сотни и кэширование готовых списков на несколько минут. Для остатков и цен заранее решите, какая задержка допустима, и обновляйте кэш при загрузке данных, а не при каждом заходе.
Кэш браузера и сжатие: чтобы повторный визит был быстрым
Покупатель книг обычно заходит на сайт не один раз и просматривает много страниц. Если стили, скрипты, логотип и значки не меняются, разрешите браузеру хранить их: настройте заголовки Expires или Cache-Control и меняйте имя файла при обновлении. Включите gzip-сжатие для HTML, CSS и JS. Картинки уже сжаты, и повторно сжимать их не нужно. Для статических файлов подумайте об отдельном домене или CDN, если у вас много посетителей из разных регионов.
Проверочный список перед запуском правок
- Замерено время ответа HTML на главной, в каталоге, на карточке книги и в поиске.
- В списках используются миниатюры, а не исходные обложки.
- У всех картинок заданы width, height и alt.
- Число CSS и JS файлов сокращено, дубли библиотек удалены.
- Скрипты, не нужные сразу, подключаются в конце страницы или асинхронно.
- Для полей фильтров и поиска есть индексы, тяжёлые запросы найдены.
- Списки каталога и счётчики кэшируются, порядок обновления цен и остатков определён.
- Включены gzip и долгое хранение статических файлов.
- Страницы проверены после изменений: корзина, фильтры и оформление заказа работают.
Меняйте по одному пункту и замеряйте результат. Так будет видно, что действительно ускорило сайт, а что только усложнило его.
