Сайт поставщика упаковки обычно тяжелее, чем кажется. В нём каталог из сотен позиций, фотографии коробок и пакетов в высоком разрешении, калькулятор тиража, прайс-листы. Закупщик открывает его с офисного компьютера или со смартфона и ждёт, пока появится нужный размер короба. Если страница грузится долго, он может закрыть вкладку и открыть сайт конкурента. Ниже о том, где теряется время и что с этим делать.
С чего начать: измерить, а не угадывать
Возьмите три типовые страницы: главную, категорию каталога («Гофрокороба») и карточку конкретного товара. Проверьте каждую в PageSpeed Insights и в WebPagetest. Затем откройте в браузере панель разработчика, вкладку «Network», и посмотрите, какие файлы самые крупные и что грузится дольше всего. Обычно картина быстро проясняется: либо избыток изображений, либо много скриптов, либо долгий ответ сервера. Лечить эти причины нужно по-разному, поэтому сначала диагноз.
Фотографии товаров: почему они тяжёлые и как их облегчить
В каталоге упаковки десятки однотипных снимков, и именно они чаще всего дают основной вес страницы. Типичная ошибка: менеджер загрузил фото с фотоаппарата, а в карточке оно показывается размером 250 пикселей по ширине. Браузер при этом скачивает весь исходный файл.
- Делайте для каждого снимка отдельные копии: миниатюра для списка, средний размер для карточки, крупный для увеличения по клику.
- Не уменьшайте картинку средствами вёрстки. Файл должен совпадать по размеру с тем, что видит посетитель.
- Сохраняйте фото в JPEG с умеренным сжатием, а схемы и логотипы с плоским фоном — в PNG. Проверьте глазами, что качество не пострадало заметно.
- Загружайте снимки ниже первого экрана по мере прокрутки. Для этого есть небольшие скрипты отложенной загрузки.
Длинный каталог и фильтры: не выводить всё сразу
Страница категории с 300 карточками весит много, даже если каждая карточка лёгкая. Разбейте список на страницы или подгружайте следующую порцию по кнопке. Фильтры по размеру, материалу и плотности лучше обрабатывать на сервере и выдавать уже готовый результат, а не скачивать весь каталог и прятать лишнее скриптом. Если страница каталога собирается из базы данных долго, попросите разработчика проверить запросы: часто помогает индекс по полям, по которым идёт фильтрация, и кэширование готовых списков.
Скрипты, шрифты и виджеты: что можно убрать или отложить
Слайдер на главной, онлайн-консультант, несколько счётчиков, карта с адресом склада, кнопки соцсетей — каждый элемент добавляет запросы и задерживает отображение страницы. Пройдитесь по списку и честно ответьте: пользуется ли этим кто-то? Остальное оптимизируйте:
- подключайте скрипты в конце страницы или с атрибутом async, чтобы они не блокировали показ содержимого;
- объединяйте и минифицируйте файлы CSS и JavaScript, чтобы запросов стало меньше;
- подключайте веб-шрифты только тех начертаний и наборов символов, которые реально используются;
- карту вставляйте только на странице контактов, а не в подвале каждой страницы.
Сервер и кэширование: повторные визиты должны быть быстрее
Включите сжатие текстовых файлов (gzip) и задайте срок хранения в кэше браузера для картинок, стилей и скриптов: логотип и оформление не нужно скачивать при каждом переходе. Если сайт работает на CMS, настройте кэширование страниц, чтобы каталог не собирался заново на каждый запрос. Проверьте время ответа сервера: если оно большое даже у простой страницы, причина может быть в перегруженном тарифе хостинга. Статические файлы можно вынести на сеть доставки контента (CDN). Новый протокол HTTP/2 уже утверждён, но поддерживается не всеми серверами и браузерами, поэтому не стоит строить на нём весь план ускорения.
Условный пример: страница категории «Гофрокороба»
Допустим, на странице 48 карточек. Каждое фото загружено в исходном размере 1600×1200, а показывается в окошке 240×180. Сверху слайдер из пяти больших баннеров, внизу виджет чата и две карты. Что можно сделать:
- создать миниатюры 240×180 и подставлять их в список;
- показывать 24 карточки, остальные открывать через пагинацию;
- оставить на первом экране один баннер вместо слайдера;
- подгружать чат после загрузки основного содержимого;
- убрать карты из подвала.
Точный выигрыш в секундах зависит от сайта, поэтому после правок измерьте те же страницы тем же способом, что и до них.
Проверочный список для владельца
- Измерены главная, категория и карточка товара до правок.
- Размеры фото соответствуют тому, что видит посетитель.
- В списке товаров не больше нескольких десятков позиций на страницу.
- Неиспользуемые виджеты и счётчики удалены.
- CSS и JavaScript объединены и сжаты, скрипты не блокируют показ страницы.
- Включены gzip и кэш браузера для статики.
- Проверена скорость ответа сервера на простой странице.
- Страницы проверены со смартфона по мобильному интернету, а не только с офисного компьютера.
