Как сократить время загрузки страниц на сайте сервиса аренды автомобилей

Арендовать автомобиль часто приходится в спешке: на вокзале, в аэропорту, с телефона и по нестабильному мобильному интернету. Если форма поиска появляется через несколько секунд, человек вернётся к выдаче и откроет другой сайт. Ниже описано, где на сайтах проката обычно теряется время и как это проверить.

Что измерить до начала правок

Одной главной страницы для замеров мало. Возьмите четыре типа страниц: главную с формой поиска, каталог или результаты поиска, карточку автомобиля и шаги бронирования. Для замеров подойдут PageSpeed Insights (он даёт подсказки), WebPageTest (можно выбрать медленное мобильное соединение и увидеть последовательность загрузки файлов) и вкладка Network в Chrome DevTools с ограничением скорости.

Запишите вес страницы, число запросов и время, через которое форма поиска видна и с ней можно работать. Без этих цифр «до» вы не поймёте, помогла ли правка.

Фотографии автомобилей: самая тяжёлая часть каталога

Условный пример: в каталоге 24 карточки. Каждая загружает исходный снимок шириной 2000 px, а на экране показывает его в блоке шириной 280 px. Браузер скачивает намного больше данных, чем нужно. Решение такое:

• готовить каждое фото в двух-трёх размерах и подбирать нужный через srcset;
• сжимать JPEG с разумным качеством: на фото кузова разница почти незаметна, а вес заметно меньше;
• указывать width и height, чтобы блоки не «прыгали» при подгрузке;
• снимки ниже первого экрана подгружать отложенно, когда пользователь приблизился к ним при прокрутке.

<img src='/img/cars/octavia-480.jpg'
  srcset='/img/cars/octavia-480.jpg 480w, /img/cars/octavia-800.jpg 800w'
  sizes='(max-width: 600px) 100vw, 280px'
  width='280' height='187'
  alt='Škoda Octavia, автомат, бензин'>

В шапке главной лучше показывать один подходящий по размеру кадр, а не слайдер из пяти. Слайдер с автопрокруткой часто загружает все кадры сразу, хотя виден только первый.

Форма поиска и календарь: не заставляйте ждать лишние скрипты

Форма с датами и пунктом выдачи — главный вход на сайт. Часто ради календаря, подсказок городов и маски телефона подключают целую библиотеку интерфейса, хотя используется малая её часть. Выясните, какие скрипты нужны для первого действия, и оставьте только их.

Остальное подключайте с атрибутами async или defer, ближе к концу страницы. Список пунктов выдачи отдавайте одним небольшим файлом. Подсказки по адресу запрашивайте только после ввода нескольких символов. Форма должна уходить обычным GET-запросом и без скриптов: тогда сбой в календаре не заблокирует поиск.

Расчёт цены и наличие: ускоряем серверную часть

Если выдача строится медленно, дело обычно не во внешней части сайта, а в ответе сервера. Проверьте следующее:

• что можно кешировать. Описания моделей, список филиалов и справочник опций меняются редко, и считать их при каждом запросе незачем. Наличие на даты нужно получать свежим, но отдельно от справочников;
• число обращений к базе или системе учёта. Один запрос на весь список машин быстрее, чем отдельный запрос на каждую карточку. Для выборок по датам и классу автомобиля проверьте индексы в базе;
• сжатие и кеширование файлов. Включите gzip для HTML, CSS и JS, а для картинок, стилей и скриптов задайте срок хранения в браузере, добавляя версию в имя файла;
• протокол. Если сайт работает по HTTPS, уточните у хостинга, доступен ли HTTP/2: с ним множество мелких файлов загружается эффективнее.

Сторонние виджеты: чат, карты и счётчики

Онлайн-консультант, интерактивная карта офисов, кнопки соцсетей, несколько счётчиков и рекламные коды загружают скрипты с чужих серверов, скорость которых от вас не зависит. Составьте список всего, что подключено, и для каждого пункта ответьте, кому он нужен и что случится без него.

Чат можно запускать после загрузки основного содержимого. На странице контактов вместо тяжёлой карты покажите статичное изображение и подключайте интерактивную карту по клику. Дублирующиеся и забытые счётчики стоит убрать.

Проверочный список для страниц проката

• Замерены главная, каталог, карточка авто и бронирование, результаты записаны.
• Фото в каталоге не больше реального размера блока (с учётом экранов высокой плотности) и сжаты.
• У изображений заданы width и height.
• Картинки ниже первого экрана загружаются отложенно.
• Форма поиска работает до загрузки второстепенных скриптов.
• Календарь и подсказки не тянут неиспользуемые библиотеки.
• Справочники кешируются, наличие запрашивается одним обращением на список.
• Включены сжатие и кеширование статических файлов.
• Каждый сторонний виджет оправдан и не блокирует показ страницы.
• После правок замеры повторены на медленном мобильном соединении.

Начните с фотографий и скриптов формы поиска: эти правки обычно проще всего внести и проверить. Затем переходите к серверной части и сторонним виджетам, каждый раз сравнивая результат с первоначальными замерами.

Все статьи блога