Медленный сайт — не всегда проблема хостинга
Когда сайт кажется медленным, первым делом хочется обвинить сервер или тариф хостинга. Но чаще всего реальная цена скрыта в самом фронтенд-коде — в JavaScript, шрифтах и изображениях, которые браузеру нужно обработать до того, как появится что-то полезное.
Ни одна из этих ошибок не экзотична. Это один и тот же небольшой набор паттернов, повторяющийся на множестве в остальном хорошо спроектированных сайтов.
Отгрузка JavaScript больше, чем нужно странице
Выбор даты подтягивает целую библиотеку календаря. Один карусель загружает целый фреймворк анимаций. Умножьте это на несколько компонентов — и браузер уже разбирает и выполняет мегабайты кода ещё до того, как посетитель сможет что-либо сделать.
Большая часть этого даже не используется на большинстве страниц — оно отдаётся везде, потому что никто его не разделил.
Шрифты и изображения, блокирующие первую отрисовку
Кастомный шрифт без предзагрузки задерживает появление каждого заголовка на странице. Изображение, сохранённое в исходном разрешении и сжатое через CSS, всё равно стоит то же время загрузки, что и полноразмерный файл.
Ни одна из этих ошибок не видна на скриншоте. Обе видны в отчёте Lighthouse — и в том, сколько реальному посетителю приходится ждать, пока страница не станет пригодной для использования.
Решает архитектура, а не старания
Ничего из этого не решается тем, что на следующей странице постараться сильнее. Это решается архитектурой, которая автоматически разбивает код на части: код загружается только там, где используется, изображения отдаются в нужном размере и формате, шрифты загружаются, ничего не блокируя.
Frontend-разработка на Next.js покрывает именно это: серверный рендеринг, автоматическое разбиение кода и оптимизация изображений, встроенные в стек, а не прикрученные потом.
Если сайт ощущается медленнее, чем должен, напишите нам, и мы найдём, откуда именно берётся лишний вес.