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

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

Сначала выясните, что именно медленное

Не ускоряйте всё подряд. Выберите три типовые страницы: главную, список объектов с фильтром и карточку объекта. Откройте их в браузере с вкладкой «Network» в инструментах разработчика, включите имитацию медленного соединения и очистите кэш. Дополнительно можно прогнать адреса через PageSpeed Insights или WebPageTest.

Смотрите на три вещи: общий вес страницы, число запросов и то, что грузится раньше всего. Часто выясняется, что основную долю веса занимают изображения, а задержку перед показом страницы создают скрипты сторонних сервисов или медленный ответ сервера. Эти причины лечатся по-разному.

Фотографии объектов: главный источник лишнего веса

Менеджеры загружают снимки прямо с фотоаппарата или телефона, и в карточке оказываются файлы в несколько мегабайт, которые показываются в окошке шириной 300 пикселей. Что сделать:

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

Для разных экранов подойдёт атрибут srcset: браузер сам выберет подходящий размер файла.

Карта, калькулятор и виджеты: не грузить, пока не нужны

Встроенная интерактивная карта подтягивает собственные скрипты и стили, даже если посетитель до неё не доскроллит. Вместо этого можно показать статичную картинку-заготовку с кнопкой «Показать на карте» и загрузить настоящую карту по клику или когда блок появится в зоне видимости.

То же относится к другим элементам:

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

Раз в полгода просматривайте список подключённых сервисов. Старые виджеты и забытые тестовые скрипты часто остаются на сайте.

Каталог на стороне сервера: фильтры, кэш, выдача

Если страница долго не начинает загружаться вообще, дело в сервере. Для каталога недвижимости типичны запросы к базе с несколькими условиями: район, цена, комнаты, тип дома. Попросите разработчика проверить, есть ли индексы по полям, которые участвуют в фильтрах, и сколько запросов выполняется при открытии списка.

Что обычно помогает:

• постраничный вывод списка вместо показа сотен объектов сразу;
• кэширование готовых страниц и результатов популярных фильтров с коротким временем жизни, чтобы цена или статус объекта не устаревали;
• сжатие текстовых файлов (HTML, CSS, JS) на сервере;
• заголовки кэширования для картинок, стилей и скриптов, чтобы повторные визиты шли быстрее;
• объединение и минификация CSS и JS, удаление неиспользуемых библиотек.

Если объекты загружаются из внешней выгрузки, импорт лучше выполнять по расписанию, а не при открытии страницы.

Условный пример: карточка в списке объектов

Допустим, в списке 24 карточки, и каждая подтягивает полноразмерное фото. Упрощённый фрагмент после доработки:

<img src="/img/obj/1542-480.jpg"
     srcset="/img/obj/1542-480.jpg 480w,
             /img/obj/1542-800.jpg 800w"
     sizes="(max-width: 600px) 100vw, 33vw"
     width="480" height="320"
     alt="2-комнатная квартира, ул. Садовая">

Первые шесть карточек, которые видны сразу, грузятся в таком виде. У остальных вместо src ставится data-src, и небольшой скрипт подставляет адрес, когда карточка приближается к экрану. Размеры и адрес здесь условные. Принцип такой: в списке только небольшие файлы, и только те, что нужны сейчас.

Чек-лист для обсуждения с подрядчиком

• Измерены главная, список и карточка объекта на медленном соединении.
• Фото при загрузке автоматически уменьшаются и сжимаются.
• В списке используются миниатюры, а не оригиналы.
• Изображения вне первого экрана подгружаются позже.
• Карта и консультант не блокируют показ страницы.
• Сторонние скрипты проверены, лишние удалены.
• Для полей фильтров есть индексы в базе.
• Включены кэш и сжатие, список объектов разбит на страницы.
• После правок замеры повторены и сравнены с первоначальными.

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

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