Спустя 4 года стал тормозить сайт на мобильных. Как разобраться?
Сразу дисклейм, я не профессионал разработки, это не моя специальность.
4-5 лет назад сделал сайт. Он самописный на jQuery. Адаптивный. На тот момент (2016 год) он был протестирован и нормально работал в браузерах, на десктопе и на смартфоне, всё было хорошо и шустро.
Но сейчас обнаружил, что на смартфонах сайт тормозит, причём не по трафику, а похоже, JS. В какой момент это началось, не знаю (редко заглядываю сам). С момента создания и отладки ничего с сайтом не делал, никакой код не менял, даже контент главной страницы остался тем же. Из изменений: разве что SSL-сертификат поставил. Вопросы:
1. С чем могут быть связаны тормоза, которых не было? Причём десктопная версия работает как и прежде хорошо.
2. Как профилировать работу сайта на смартфоне (на декстопе я знаю как), чтобы разобраться в проблеме?
(Если кому не лень, гляньте fasadel.com, может быть для профи проблема на поверхности.)
Да Google PageSpeed Insights говорит что на телефонах печальная скорость, но не сильно.
Есть неиспользуемый javascript код, удалите его. Желательно сжать изображения.
Скрипты с шапки перенести в подвал. Может стоит подключить более свежую версию jquery, только аккуратно может чето сломать. Пол секунды отжирают yandex cdn, хотя по идее он должен ускорять загрузку. Конечно половина из этого отчета больше нужна для сео, ну а зависания всего скорее вызывают скрипты. Смотрите их время выполнения.
Николай Чуприк, вы можете подключить телефон к компьютеру и отлаживать через devtools телефон. Только если это iphone с safari то только через macos вроде.
Одиночка Айс, Есть подозрение что это не от того что проблема с телефоном, сколько какие-то скрипты работают неправильно именно в этом разрешении. По этому первое что надо сделать - проверить есть ли эта проблема на других телефонах и десктопном эмуляторе. Кроме того - можно проверить в этом ли дело переключив мобильный браузер в режим "Версия для ПК".
У вас для мобильной версии используются изображения с шириной в 1920px, в чем нет необходимости. Например это - https://fasadel.com/img/54447.jpg
Для мобильных устройств можно графику обработать отдельно.
