Как QuintoAndar увеличил коэффициент конверсии и количество страниц за сеанс за счет повышения производительности страниц

Проект, направленный на оптимизацию Core Web Vitals и переход на Next.js, привел к увеличению коэффициента конверсии на 5 % и увеличению количества страниц за сеанс на 87 %.

Daniela Sayuri Yassuda

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

Проблемы

В нашем приложении есть центр контента для кондоминиумов с более чем 40 000 страниц, где пользователи могут получить информацию о своей недвижимости, проверить фотографии мест общего пользования, прочитать о районе и найти доступные объявления для аренды или продажи. Эти страницы очень важны для QuintoAndar:

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

Однако возникли проблемы с производительностью и удобством использования этих страниц:

• Их производительность, измеренная с помощью Core Web Vitals, не была оптимизирована, и были известные проблемы, связанные с медленной загрузкой страниц, медленным реагированием на ввод пользователя и нестабильностью макета.
• Их показатели отказов были высокими, даже если мы ожидали, что они будут выше, чем в других частях приложения.
• Обновление взаимодействия со страницами в Google Search , которое на тот момент еще не было выпущено, будет включать Core Web Vitals в алгоритм ранжирования, а это означало, что производительность страницы может повлиять на то, как будут отображаться результаты поиска.

В то же время мы определили некоторые возможности для получения опыта разработчиков, которые могут принести пользу другим проектам компании:

• Наша логика рендеринга на стороне сервера, которая отображает все страницы с высоким трафиком, включая страницы кондоминиумов, была создана собственными силами и стала слишком сложной для обслуживания и адаптации новых сотрудников.
• Важные функции для достижения хорошей производительности приложения, такие как разделение кода , также требовали индивидуальной настройки и ручной работы со стороны разработчиков.
• QuintoAndar имеет более 30 веб-приложений React . Доставка обновлений этих приложений и поддержание их в соответствии с лучшими практиками — трудная задача.

Подход

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

Переход на Next.js

Новая версия страницы кондоминиума была реализована с помощью Next.js. Будучи в значительной степени независимым от других частей приложения, центр контента кондоминиума показался хорошим кандидатом для опробования новой платформы. Мы сможем понять масштабы усилий по миграции и оценить, как ее функции могут помочь, не затрагивая другие приложения React в QuintoAndar.

Жестким требованием было обеспечение возможности сканирования страниц поисковыми системами. Next.js отвечает этому требованию, поддерживая готовый рендеринг на стороне сервера и устраняя необходимость в индивидуальной настройке. Документация значительно упрощает обмен знаниями о том, как выполнять такие задачи, как получение данных на сервере и привлечение новых разработчиков. Также известно, что рендеринг на стороне сервера улучшает показатели производительности , такие как First Contentful Paint (FCP).

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

Оптимизация ресурсов JavaScript

Первым шагом было удаление неиспользуемого кода . Мы просмотрели отчеты Webpack Bundle Analyser , в которых показано содержимое каждого JS-пакета, и тщательно просмотрели все сторонние скрипты. В результате нам удалось очистить некоторые библиотеки отслеживания, которые не использовались на этой конкретной странице.

Наша команда пошла дальше и оценила стоимость производительности существующих функций. Например, для работы кнопки «Мне нравится» требовалось довольно много JS. Однако на странице кондоминиума менее 0,5% пользователей взаимодействовали с кнопкой, которая доступна и используется чаще в других частях нашего приложения. После обсуждения, касающегося как разработки, так и продукта, мы решили удалить эту функцию.

Другие оптимизации JS уже были в наличии, например статическое сжатие с помощью Brotli , которое выполнялось во время сборки с использованием BrotliWebpackPlugin , а также применялось к другим типам статических ресурсов. Сначала мы полагались на сжатие, обеспечиваемое CDN, и Бротли уменьшил размер JS на 18 % по сравнению с gzip. Но затем мы перешли на сжатие Brotli во время сборки и смогли добиться сокращения на 24%.

Оптимизация ресурсов изображений

В мобильной версии большую часть площади над сгибом занимает главное изображение. Это также самая большая содержательная отрисовка (LCP) на странице.

Раньше все изображения уже имели атрибуты srcset и sizes для обслуживания адаптивных изображений . Мы также использовали Thumbor для изменения размера изображений по требованию и настроили нашу CDN для их эффективного кэширования.

Современные мобильные устройства имеют дисплеи с очень высокой плотностью пикселей, что означает, что браузер будет отображать 3- или 4-кратные версии изображения, если они доступны. По мере увеличения разрешения человеческому глазу становится сложнее воспринимать различия, но размеры файлов все равно увеличиваются. Ограничение максимального разрешения изображения улучшило размер изображения без ущерба для удобства пользователя. Мы ограничили изображение героя так, чтобы оно отображало не более 2-кратной версии, что примерно на 35 % меньше, чем 3-кратная версия, и на 50 % меньше, чем 4-кратная.

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

<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">

Встроенный компонент изображения Next.js включает в себя многие из этих оптимизаций, таких как быстрое изменение размера и приоритетная загрузка. В ходе этого проекта мы не переносили существующие образы для использования этого компонента, но планируем внедрить его в новые функции.

Уменьшение смещения макета

На странице кондоминиума было несколько проблем с накопительным сдвигом макета (CLS). Элементы, ответственные за изменения макета, отображались только на клиенте — например, разметка на стороне сервера с компонентами, отображаемыми клиентом, или изображения без определенных атрибутов width и height .

Чтобы решить эти проблемы, мы устанавливаем точные размеры для этих элементов, когда это возможно, или предполагаемые значения с min-height . Есть и другие варианты, например использование CSS-свойства aspect-ratio . Мы также создали заполнители, чтобы динамически отображаемые компоненты не вызывали смещения макета.

Постепенное внедрение изменений

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

1. На первом этапе новая версия была опубликована для нескольких тщательно отобранных URL-адресов, поэтому их могли видеть только несколько сотен пользователей в день;
2. На втором этапе он был опубликован для большего количества страниц, что составило несколько тысяч пользователей в день;
3. На третьем и последнем этапе он был опубликован для всех страниц, и внедрение было завершено для всех пользователей.

В течение этого периода команда инженеров постоянно измеряла производительность страниц в рабочей среде и продолжала работать над улучшениями. Кроме того, команда сравнила бизнес-показатели новой и предыдущей версий. Результаты этого периода проверки были многообещающими.

Результаты

Команда использовала SpeedCurve для непрерывного проведения лабораторных тестов на странице кондоминиума. Вот результаты для мобильной версии:

Мы также хотели проверить влияние на наших реальных пользователей. Используя полевые данные, собранные с помощью Instana Website Monitoring , мы изучили месячный период до и после внедрения. Сравнивая 75-й процентиль для мобильных пользователей, мы обнаружили, что LCP снизился на 26%, а FID снизился на 72%.

PageSpeed ​​Insights предоставляет отчет с полевыми данными за последние 28 дней. Только на самой посещаемой странице кондоминиума было достаточно данных для создания отчета для мобильных пользователей. По состоянию на ноябрь 2021 года все основные веб-показатели находятся в категории «хорошие».

В ходе постепенного внедрения мы заметили снижение показателей отказов. К моменту завершения выпуска всех страниц Google Analytics показал снижение показателя отказов на 46 %, увеличение количества страниц за сеанс на 87 % и увеличение средней продолжительности сеанса на 49 %. Снижение показателя отказов было еще большим для платных поисковых запросов, достигнув 59%, что является положительным знаком, когда речь идет об инвестициях в рекламу с оплатой за клик (PPC).

Что касается влияния на бизнес-показатели, мы проанализировали коэффициенты конверсии для таких транзакций, как планирование тура и подача заявки на аренду или покупку недвижимости. Пока улучшения все еще внедрялись, наша команда сравнила конверсию между предыдущей и новой версиями. На той же неделе группа страниц с новой версией показала рост конверсии на 5%, в то время как остальные страницы имели небольшое снижение того же показателя.

Заключение

Этот проект является первой частью долгосрочного перехода от React без фреймворка к Next.js. Команды, которые с тех пор работали над страницей кондоминиума, дали положительные отзывы об улучшении опыта разработчиков. Другие команды, которым приходилось создавать новые веб-приложения, уже сделали это с помощью Next.js. Мы считаем, что Next.js упростит обслуживание и создаст общую основу для различных приложений.

В целом, центр контента кондоминиумов постоянно растет с точки зрения абсолютного количества пользователей и транзакций. В долгосрочном анализе этому способствует множество факторов, таких как расширение деятельности QuintoAndar и инициативы в области SEO, такие как улучшение индексации страниц. В ходе этого проекта мы увидели, что производительность страницы также является одним из факторов с большим потенциалом положительного влияния на конверсию.

Особая благодарность Педро Кармо , менеджеру по продукту команды SEO, за погружение в пользовательские данные и создание всего анализа конверсий, показанного в этом тематическом исследовании.