completoru Mar 31 2023 at 13:03

Как мы увеличили скорость работы сайта в 10 раз

6 min

22K

High performance*Website development*Designing and refactoring*VueJS*

Case

-8

Comments 20

diakin Mar 31 2023 at 13:14

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

Ну да, быстренько получается. Хотя скриптов и css на 11 метров.

completoru Mar 31 2023 at 13:32

Спасибо за комментарий
Не совсем 11: 5мб, сжатое 1.34 http://joxi.ru/82QXkB1U3ZQ3Vm.

Самые тяжеловесные скрипты https://share.cleanshot.com/wWk4wvw5 грузятся асинхронно, если их вычесть, то на сайт для рендеринга остается не так много и поэтому скорость ок.

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

asked2return Apr 2 2023 at 02:20

может он про ram

metter Mar 31 2023 at 13:39

Заметили какие-то изменения по позициям сайта в поисковых системах?

completoru Mar 31 2023 at 14:07

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

Starina_js Mar 31 2023 at 14:25

На беке битрикс с админкой оставили? Или новое написали?

completoru Mar 31 2023 at 14:40

Оставили «Битрикс» для управления контентом

PaulZi Mar 31 2023 at 21:40

Рендеринг на клиенте не быстрее чем рендеринг на сервере, т. к. вместо того, чтобы вашему браузеру сразу отобразить готовый html, ему приходится его собирать из данных и скриптов. Другое дело если у вас бэкенд (Битрикс) тормознуто его собирал, но это уже другая проблема.

paamayim Apr 3 2023 at 08:53

Ерунда. Фреймворк собирает html и скрипты одной или несколькими командами. Этим занимается сборщик пакетов, в котором в том числе настраивается минификация и прочие плюшки для оптимизации. Тоесть на релизе у тебя уже готовый html со всеми скриптами который размещается на веб сервере. Разница в том что это одностраничное приложение. И все грузится как правило сразу. Поэтому начальная загрузка может быть медленнее конечно но учитывая оптимизации разница не такая уж заметная. Так как точка входа по сути одна то ресурсы веб сервера себя чувствуют лучше при таком раскладе. Меньше одновременных подключений на сервер, меньше расход ресурсов так как каждая страница это отдельное соеденение. И переключение между экранами конечно в одностраничных придожениях намного быстрее так как нету взимодействия с сервером при этом.

Farmatique Apr 1 2023 at 02:11

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

ScorpAL Apr 1 2023 at 11:01

Ну и нагородили!

А на мобилке многие элементы по три раза тыркать приходится что бы попасть в них.

dagot32167 Apr 1 2023 at 15:17

После прочтения статьи я так и не понял, как вы ускорили сайт в 10 раз, зачем вы переходили на Nuxt, что в итоге изменилось?
поясню
Не хватает контекста, что именно пытались исправить. Если вы ускорили сайт:
- Или улучшили перформанс лайтхауса в 10 раз, то он раньше был 4? https://pagespeed.web.dev/analysis/https-www-alta-profil-ru/726ug8gc7y?form_factor=mobile - тут ща на мобилке (десктоп не смотрим, он ни на что не влияет) 43 балла.
- Или вы изменили метрики Web Vitals? но тогда какие они раньше были?
- Или метрики из RUM и ваш конечный пользователь смог быстрее навигироваться.
- Или какой нить пресловутый 95 перцентиль на GET запрос за HTML или данными из бековых систем.
Ради чего переход на Nuxt и с какой именно технологии? Почему именно Vue? ИМХО, личный опыт показывает, что на РУ рынке проще найти квалифицированного (мидла или сеньора) react разработчика, а вот vue сложнее.
Зачем было переходить на Vue и оставлять подключенный jquery?
Как изменился time-to-market при смене технологического стека, ведь по сути ради этого вообще весь "рефакторинг".
Сколько времени занял перевод со старого стека на новый, силами скольких разрабов? Сколько было изменено сопутствующих систем, пайпланов и тестов (я вижу на сайте товары с ценой в ноль рублей, могу их положить в корзину и даже оформить заказ. Проверь заказ №С-201687. вы конечно написали, что все что на сайте не публичная оферта, но такое)?
Как переход на новый стек изменил объем органического трафика и уникальных пользователей, конверсии в корзину?
Статья больше про куски Nuxt, но не про ускорение.

ZolotoArtem Apr 2 2023 at 12:46

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

"В техническом плане перед нами стояли 3 задачи:
Серверный рендеринг, чтобы не потерять позиции в SEO при переходе на Vue.js"

Так много вопросов и так мало ответов.

Реактивный фреймворк - это не про рендер на стороне пользователя и мгновенную загрузку. JS и jquery тоже могут рендерить на стороне пользователя. А мгновенной загрузки добиваются абсолютно другими методами. Вам просто нужно было продать vue и вы немного навешали лапши. При этом нет у вас никакого клиентского рендеринга, потому что вы сами сказали, что он серверный. Получается и тут обманули

AndreyVSmirnov Apr 2 2023 at 12:50

Хотел написать о нескольких найденных минусах. О плюсах написано в статье.
Для главной страницы Google PageSpeed Insights GPSI) говорит, что всё ОК. Но если запустить его для /catalog/, то результат будет заметно хуже. А для фотогалереи лучше и вовсе не запускать GPSI.
Видно, что в самом Битрикс познания не глубокие, т.к. в фильтре каталога допустимо выбрать цвет "Красный" и материал "Крашеный", а в результате получить "Ничего не найдено". Такой результат ещё допустим при использовании ползунка цены, но при выборе значений из списков... Т.н. "Умный фильтр" решает эту проблему.
Формы валидируются только на фронте.
Фотографии в разделе "Фотогалерея" не оптимизированы.
В отзывах фейковая пагинация. На страницу загружаются сразу все отзывы. В новостях, сертификатах аналогично. А если отзывов будет 10 000? Правда сами отзывы тоже фейковые. Так что можно сильно не беспокоиться, что их будет много, ОК.
На странице /catalog/promo/spc-napolnoe-pokrytie/ куда-то улетел футер. Если в последнем блоке сменить коллекцию, то вообще не понятно что происходит.
И т.д. На многих страницах можно найти довольно спорные решения.
Такой рефакторинг нужно будет снова рефакторить.

ppasolution Apr 3 2023 at 08:58

производительность на главной 44, на каталоге 15... :) прям забавно, как говорится себя не похвалишь никто не похвалит... загружать пустой html много ума не надо, нативного JS с ajax достаточно (так работает на виджетах яндекс.маркет используя при этом серверный рендер)... а вот разобраться чем PWA отличается от SPA многим любителям реактивности не хватает...