Kent frontend performance
По поводу документа
Методология ресерча: видео
Запрос:
Суть проблемы заключается в том, что последний проект, который мы запустили. Это Кент генерирует большое количество запросов при инициализации. C этого проекта пользователя, то есть вплоть до того, что э в момент запуска, когда зашло большое количество людей. Э, специалисты. Там вот Soft Games распознали. Это большое количество запросов, как видос. Ну хотя там видно, что это не видос, а просто там по 800 запросов. Э-э генерируется от одного пользователя в момент захода на сайт. Мы провели рельс. Э, и. Ну, видим, что на всех других проектах. Э, эта ситуация гораздо меньше этих запросов отправляются и хотели бы вас попросить э, посмотреть на этот rese. И возможно дать какие-то технические рекомендации с вашей стороны. То есть. Э, наверное, первое, что нас интересует Э на что это глобально может влиять? И второе - это э, Какие потенциально запросы, А можно убрать? Да грубо говоря, Или как это можно оптимизировать, чтобы мы дальше пошли уже к разработчикам с аутгеймс и поставлен не конкретную задачу, потому что вот так вот в прямом, и если поставим задачу. Мы в общем уверены, что они решат наши проблемы, поэтому хотели бы попросить вас. Э, предварительно. Э дать какую-то консультацию, э по вот этим запросам, которые отправляются, э, чтобы понять Вообще Что это за запрос? Э, как их можно там правильно было бы оптимизировать, потому что мы видим, что на каких-то проектах отправляются 100 запросов, вроде бы как раз Что ОК но на последнем там вплоть до 1.000. И Ну нам кажется, это довольно большая проблема.
Озвученные проблемы:
- при запуске продукта большое количество сработки в рейт лимит для новых пользователей. Подозрение на то что причина в большом количестве запросов на бекенд при загрузки сайта.
- в целом, что можно поправить на фронтенде чтобы было меньше запросов.
Инструменты
GTMetrix - весьма неплохой сервис для проведения тестов скорости загрузки. Он выдает весьма неплохую визуализацию происходящего в браузере.
| site | connection | geo | report |
|---|---|---|---|
| Kent | slow 4g | Canada | https://gtmetrix.com/reports/kent.casino/86iFZbpu/ |
| Daddy | 4g | Brazil | https://gtmetrix.com/reports/daddy.casino/R5lGTYkz/ |
Предложения
Что можно поправить легко:
- Запрос на большой кусок вероятно не используемых данных
Из отчетов к примеру бросается в глаза запрос на урл https://kent.casino/content//wp-json/wp/v2/posts?per_page=100&_fields=acf,id,date,slug,title,content,image,_embedded,_links&context=view&_embed=1&categories=2&lang=ru с фронтенда продукта Kent. Этот запрос является явно запросом к бекенду и скачивает 1 мб мусора в никуда при загрузке главной страницы сайта.
Более того эти данные запрашиваются трижды, причем выглядит так что это весьма тяжелый запрос и для бекенда.
- Время первого ответа сервера
Помимо этого продукт kent показал медленный начальный ответ сервера. Это может быть как проблема API, так и не включенный ARGO Routing со стороны cloudflare. Либо может быть что просто нужно серверу больше ресурсов выдать.
- Обработка полифилов
Так же видно, что запуск в браузере существенно тормозит обработка polyfills.
Возможно стоит либо пересмотреть список требуемых полифилов либо возможно загружать их опционально (есть сервисы https://polyfill.io/ или аналоги) либо подгружать более избирательно просто.
- Загрузка не существующих ассетов
На странице вызывается большое количество запросов к несуществующим ассетам
Это либо ошибки, либо просто ненужные запросы. В любом случае это необходимо исправить, т.к. это ошибки для бразуера.
- Не оптимизированные изображения
https://kent.casino/static/images/loyalty/1.png
https://kent.casino/static/images/loyalty/2.png и т.п. к примеру
Эта группа картинок сохранена в супер большом размере, их можно кратно ужать.
- Использование не оптимизированных форматов изображений
По логам загрузки важно что на сайте есть как jpg, так и png изображения загружаемые пользователю. Если ваша платформа не поддерживает оптимизацию изображений вы можете воспользоваться встроенным решением от CloudFlare.
CloudFlare Polish сервис, который может на уровне cloudflare подменить картинку в устаревшем формате на перекодированную в новый формат (только в случае если клиент поддерживает новый формат).
Данное расширение недорого стоит (25 баксов в месяц) и при этом не требует каких либо дополнительных настроек со стороны сервера.
Что можно поправить, но вероятно уже нужно подумать
- Множественная загрузка одних и тех же изображений
Картинка маленькая, но загружается 10 раз, вероятно хватило бы одного
https://kent.casino/static/images/currency/lp.svg
- Отложенная загрузка скриптов
Скрипты вроде curacao-licence check либо livechat от хелпдеска имеет смысл загружать после первого взаимодействия пользователя (скролл, клик и т.п.).
Можете посмотреть размер скрипта чата. Обычно имеет смысл подгружать подоные скрипты после того как все-все-все загрузилось. Если нужно я могу показать пример такой модификации к примеру для Chatwoot скрипта.
- Яндекс метрика
Стоит убрать. Я понимаю что вероятно к ней уже привыкли. Но на самом деле она тяжелая, прямо конкретно тяжелая. Мы ее выпилили после примерно недели поиска причины тормозов у некоторых пользователей. Исходя из прошлого негативного опыа рекомендую всем ее сносить.
- Запросы к несуществующим апи методам
Скорее всего этот функционал загружен и на клиенте, но на бекенде отсутствует на этом продукте. Из чего можно предположить что можно уменьшит размер подгружаемого банлда для клиента.
- Множественные запросы за одними и теми же данными
Запрос на получение списка джекпотов, так же как и последних победителей происходит каждую пару секунд. Но данные по списку джекпотов не меняются, приходит один и тот же список джекпотов. Возможно имеет смысл опрашивать обновленный список джекпотов и последних победителей с меньшей периодичностью.
Сложно, и вероятно не нужно
- Использование ngsw
На проекте используется ngsw. Это хорошо, но при некорректной его настройке часто можно получить кейс с загрузкой не нужных файлов в браузер посетителя. Этот инструмент позволяет легко выстрелить себе в ногу, поэтому я бы рекомендовал проверить корректность его использования. В прошлом у нас были проблемы с поиском проблем связанных с этим инструментом. Поэтому стоит очень внимательно проверять его настройки и конфигурацию.
- Дублирующиеся данные в АПИ
В части запросов есть повторяющиеся данные. К примеру запрос https://daddy.casino/api/v1/bootstrap содержит данные, которые потом так же отдельно запрашиваются специальными запросами отдельно, к примеру https://daddy.casino/api/v1/countries?lang=en
Можно перебрать и оптимизировать АПИ, но для этого необходимо, скорее всего, местами сломать обратную совместимость, что очень тяжело вероятно.
- Добавление SSR
В последних релизах angular провели большую оптимизацию для работы Angular Universal и связанных с ним инструментов. Можно исследовать возможность применения SSG для оптимизации рендера части страниц. Увы мы перестали использовать Angular для клиентских приложений давно и не имеем hands-on экспертизы с этим функционалом в последних версиях Angular, поэтому этот вопрос необходимо исследовать.
- Вшивание части данных в бандл
Многие данные приходят в апи, не только информация о футере, но и многое другое. Можно часть этих данных вшить напрямую в бандл тем самым ускорив первичный рендер. Наибольший эффект это даст в совокупности со следующим пунктом.
- Использование ленивой подгрузки модулей
В последних версиях angular подгрузка модулей реализованна так же, как и в svelte и других современных инструментах (долгое время ангулар отставал из-за ng-modules). Но сейчас это уже исправлено, и можно сделать подгрузку модулей по требованию, что позволяет еще более ускорить загрузку приложения.