Разгар лета! Сезон отпусков, отдыха, солнечных ванн, купания и веселья. Всё это не помешало нам закончить работу над новой версией всей линейки продуктов Flynax!
В новой версии мы провели работу над ошибками, добавили несколько очень полезных фишек и сделали упор на быстродействие. Именно с этого и начнём!
Производительность и показатели Google PageSpeed Insights
Перенос скриптов в футер
Самым важным достижением всей работы по улучшению показателей быстродействия является перенос подключения тяжёлых JavaScript-библиотек из хедера в футер. Это позволило значительно улучшить показатели FCP и LCP, которые, в свою очередь, являются базовыми для формирования PageSpeed-рейтинга страницы.
Может показаться, что перенести подключения в футер очень просто, но, к сожалению, это не так. Данный процесс подразумевает оптимизацию всего JavaScript-кода – как самого скрипта, так и шаблонов и плагинов. И именно в этом кроется вся сложность. Мы шли к финальному этапу несколько лет. Логику и функции для адаптации JavaScript мы внедрили ещё несколько версий назад, после чего начали систематически адаптировать код скрипта, шаблонов и плагинов (а их у нас около 80) к переносу скриптов в футер. И вот сегодня финальный этап был реализован – ура!
Формат медиафайлов и показатель CLS
На показатели PageSpeed Insights влияет множество факторов, и ещё один немаловажный параметр – формат и размер картинок на странице.
Вы наверняка знаете, что конвертация картинок в формат WebP была интегрирована в скрипт уже давно, но, к сожалению, не все инструменты и плагины использовали конвертацию подгружаемых картинок в нужный формат.
Для главной страницы было важно конвертировать картинки слайдов в слайд-шоу (расположенное в хедере) и превью-изображения (thumbnails) к новостям. Так как часть картинок на главной странице генерируется плагинами «Полезависимые блоки» и «Иконки категорий», было также важно применить формат WebP в этих плагинах. Мы также добавили к картинкам атрибут alt, наличие которого вместе с существенно уменьшенным размером картинок и иконок на странице значительно увеличило показатели рейтинга.
В этой версии мы отказались от перемещения блоков с помощью JavaScript в пользу нативных HTML и CSS-стилей, что также положительно сказалось на показателях.
Дефолтные значения в базе данных и значение NULL по умолчанию
Теперь поговорим о быстродействии ядра. Вы наверняка знаете, что нашему движку уже почти 20 лет, и, конечно, некоторый код и решения устарели ввиду обновления и переосмысления технологий. Это и толкает нас на глобальные изменения в структуре скрипта – в данном случае, изменения в структуре базы данных.
В новых версиях баз данных наличие значений по умолчанию в полях стало необходимым. Поэтому мы начали работу в этом направлении. В этой версии мы сделали только часть, так как объём работ очень велик, и задача затрагивает не только ядро, но и практически все плагины. В следующих обновлениях данная работа будет завершена.
Также стало важным использовать NULL в пустых ячейках таблиц. Это особенно важно для полей типа date или datetime, тем более если эти поля участвуют в фильтрации или сортировке. Обновление именно таких полей было частью основных задач по быстродействию в этом обновлении.
Новые режимы пагинации и бесконечный скролл
Одним из способов оптимизации запросов к базе данных является отказ от использования модификатора CALC_FOUND_ROWS. Отказаться от него непросто, так как он позволяет посчитать, сколько всего данных (в нашем случае – объявлений) доступно в категории или при поисковом запросе. А без информации об общем количестве объявлений мы не можем посчитать общее количество страниц и построить полноценное меню пагинации.
Этот факт и толкает нас (и всех разработчиков) к переосмыслению интерфейсов. Двумя из общепринятых решений в нашем случае являются:
- Построение пагинации без возможности перехода на последнюю страницу – то есть в меню пагинации мы получаем только возможность перехода на следующую и предыдущую страницы без указания общего количества страниц и перехода на последнюю.
- Режим бесконечного скролла – когда мы не отображаем меню пагинации вовсе, а вместо него показываем индикатор загрузки и подгружаем следующий объём объявлений ниже на странице.
Оба новых способа уменьшают нагрузку на базу данных, а режим «Бесконечный скролл» к тому же является более удобным для пользователей и приоритетным для администратора сайта.
Другие улучшения производительности
Также из наиболее заметных работ по теме производительности можно отметить:
- Оптимизацию данных, хранящихся в системном кэше, что повысило скорость работы с кэшем
- Оптимизацию ряда системных событий
- Оптимизацию менеджера объявлений в панели администратора
Все эти нововведения, улучшения и оптимизации существенно повлияли на время загрузки страниц и показатели Google PageSpeed Insights.
Мы подготовим детальное сравнение новой и предыдущей по производительности и показателям PageSpeed Insigts в одном из следующих постов.
Нижнее меню в мобильной версии
Теперь давайте переключимся на интерфейс, и не просто на интерфейс, а на мобильный интерфейс, так как он является наиболее востребованным в наше время.
Многие наши клиенты просили добавить нижнее меню в версии сайта для мобильных устройств. Действительно, для современного сайта такое меню является неотъемлемой частью мобильного интерфейса. Мы с этим полностью согласны, поэтому просим любить и жаловать – нижнее меню!
Меню выполнено в общепринятом стиле: панель меню приклеена к нижней части страницы, содержит иконки и их названия. Клик по ним перенаправит пользователя на самые важные страницы сайта, предложит авторизацию, меню пользователя или начнёт процесс подачи объявления.
При скролле страницы вниз меню спрячется, чтобы не мешать просмотру контента, а при скролле вверх – появится, чтобы пользователь смог им воспользоваться. Данное поведение также является общепринятым. Несмотря на это, администратор может отключить данный эффект и закрепить меню на постоянной основе.
Помимо этой опции, администратор может:
- полностью отключить меню
- скрыть названия иконок
- скрыть или отобразить те или иные элементы меню
Фильтры и поиск в мобильной версии
Продолжаем говорить о мобильном интерфейсе. Как вы, возможно, знаете, в новом шаблоне Fusion на страницах с объявлениями мы перенесли поиск, фильтры и дерево категорий в попап, который открывается по нажатию на иконку «Фильтры», расположенную в меню навигации над списком объявлений.
Такая реализация облегчает доступ к объявлениям, экономит место на странице и делает использование фильтров удобным и привычным для пользователя.
Мы доработали данный инструмент, сделали его более удобным и продублировали во все шаблоны. Теперь он является достоянием ядра, а не только одной темы Fusion.
Две колонки объявлений в мобильной версии
Продолжаем раскулачивать тему Fusion. Ещё одной её особенностью было отображение объявлений в две колонки в мобильной версии. Такой способ отображения пришёлся по вкусу всем – как конечным пользователям, так и администраторам сайтов. Мы сразу подчеркнули этот факт и переделали отображение объявлений в две колонки во всех шаблонах.
Страницы аккаунтов
Мы также переделали списки отображения аккаунтов на страницах со списками автосалонов, агентств недвижимости и других типов аккаунтов. Мы упростили карточки аккаунтов в гридах, очистили их, оставив только нужную информацию, и сделали страницу проще и понятнее.
В мобильной версии карточки также располагаются в две колонки, дабы не отставать от моды и страниц с объявлениями.
Ограничение на регистрацию
Мы добавили ограничение на регистрацию для определённых типов пользователей. К примеру, администратору необходимо ограничить регистрацию автосалонов – то есть автосалоны могут быть зарегистрированы на сайте только самим администратором. Отметив данный тип пользователей (автосалоны) как «Только для администратора», администратор решает эту задачу. А все другие типы пользователей по-прежнему будут доступны всем посетителям на странице регистрации.
Перевод на китайский язык
Интерфейс на китайском языке – это всегда непросто. Во-первых, по причине иероглифов, их размера и начертания, которые значительно отличаются от других языков. Во-вторых, китайский язык имеет множество наречий. Для нашего языкового пакета мы выбрали традиционную версию, которая является наиболее распространённой в Китае.
Данный языковой пакет будет полезен тем, кто собирается расширять аудиторию своего сайта на страны Азии и непосредственно на сам Китай.
Багфиксы
На этом мы заканчиваем говорить о нововведениях и оптимизации и переходим к списку багфиксов. В этой версии он обширный, так как мы постарались решить большую часть присланных вами багрепортов:
- Решена проблема создания объявления при наличии только одного доступного пакета
- Исправлена ошибка при отображении цены у объявлений типа «Работа»
- Исправлена ошибка отображения пустого всплывающего окна при нажатии на иконку фильтров в шаблоне Fusion
- Решена проблема отображения опции уточнения критерия поиска по тексту при наличии нескольких поисковых форм на странице
- Решена ошибка отображения названия полей и их значений в краткой форме объявлений
- Решена ошибка сброса выбранной страны или флага в полях номеров телефонов
- Решена ошибка отображения названия используемой платёжной системы в списке транзакций на странице «История платежей»
- Исправлена ошибка отображения неверного уведомления для посетителей, которым недоступна опция создания объявлений
- Исправлена дата истечения плана подписки для безлимитного плана в письмах пользователю и администратору
- Исправлена ошибка доступности страниц неактивных пользователей
- Улучшено отображение аватарки пользователя в личном кабинете
- Улучшена транслитерация символов для ссылок и системных ключей
- Решена ошибка при смене родительской категории у объявления через панель администратора
- Решена ошибка при создании или редактировании администратора с безлимитным доступом
- Переработана система доступности контактирования посетителей сайта с продавцами
- Исправлена ошибка отображения неверной даты оплаты объявления в панели администратора
- Улучшено отображение галочек в полях на странице объявления
- Улучшена работа блока с категориями
- Исправлена ошибка при подсчёте количества объявлений в родительских категориях
- Исправлена ошибка при массовом обновлении картинок в панели администратора
- Исправлена ошибка при работе с мультиязычными полями в панели администратора
- Исправлена ошибка при работе cron-скрипта, если в формах объявлений есть поле типа «Дата»
- Решена ошибка при создании большого превью изображения
- Решена ошибка в поисковых формах при отключённом формате с валютами
- Решена ошибка при обновлении объявления с помощью бесплатного пакета
- Решена ошибка отображения иконки новых сообщений для незарегистрированных посетителей
- Исправлена ошибка при смене статуса объявления через панель администратора
- Исправлена ошибка отображения категории объявления в менеджере объявлений
- Исправлена ошибка отсутствия прокрутки в планах и пакетах
- Улучшена работа встроенного менеджера базы данных, добавлена проверка применения одного и того же патча при обновлениях ПО
- Исправлена ошибка обновления системного кэша при отключённых ценовых метках
- Добавлена возможность отображения блока с категориями только в нужных категориях
- Улучшено отображение новостей в блоке
Итоги
Версия 4.10.2 – это значительный шаг вперёд с точки зрения производительности, мобильного опыта и стабильности. Мы исправили множество ошибок, реализовали долгожданные функции, такие как нижнее меню и бесконечный скролл, а также существенно улучшили показатели PageSpeed Insights.
Надеемся, что вам понравится это обновление так же, как нам нравилось работать над ним. Как всегда, мы будем рады вашим отзывам и сообщениям об ошибках – они помогают нам делать Флайнекс лучше с каждым релизом.