KapDEV 
Тендеры и лиды
Информация
В этой статье на примере нашего сайта покажем как нужно оптимизировать Next.js приложения для достижения высоких показателей в Google PageSpeed Insights. Мы смогли добиться 80+ очков производительности на мобильной версии и 100 на десктопе для нашей главной страницы.
У нас в команде принцип: как можно меньше нагружать front-end. Если работу можно выполнить на back-end, то лучше это сделать там. По крайней мере это касается рендеринга.
В современном мире веб разработки есть большая проблема - раздутый (bloated) front-end. После того как Next.js добавил app router, у нас появилась возможность взаимодействия с сайтами быстрее и приятнее, были добавлены Server и Client Components.
К, сожалению, не каждый проект после миграции смог полностью принять новую философию разработки, часть не захотела тратить время на это, а часть сделала это неправильно. Делимся нашими фишками, чтобы делать правильно.
В качестве примере возьмём блок с приветственным шортсом на нашем сайте. Ради этого даже откроем часть исходного кода.
В данном примере мы, конечно, сэкономили не очень много, у нас есть более удачные примеры, также можно было бы добавить children в Overlay и, например, выводить Typography из родителя, но в демонстрационных целях этого вполне достаточно.
В React можно динамически подгружать необходимые компоненты, то есть JavaScript код будет подгружаться с сервера только тогда, когда "ленивые" компоненты будут вызваны.
В Next.js это реализовано через функцию "dynamic", которая под капотом работает со стандартной React.lazy и Suspense. В коде выше уже показано как мы динамически импортируем компонент сторисов:
И ниже у нас есть следующая конструкция:
Обратите внимание, что для того, чтобы это работало как нужно, мы не просто визуально скрываем компонент "Stories" при помощи "display: none;" или "opacity: 0;" , а именно не вызываем его в принципе. Иначе компонент бы подгружался сразу после первого рендера. В нашем случае он подгружается только после открытия диалога.
P.S. для тех, кто тоже пользуется Material UI: по сути TransitionProps должно быть достаточно, но подстраховки от изменения API и багов стороннего ПО много не бывает, поэтому ещё добавили "show &&" :)
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13202 тендера
проведено за восемь лет работы нашего сайта.
Также не забывайте использовать lazy loading для функций в асинхронных контекстах через import:
Посмотрите, вероятно, вы установили целый npm пакет из 100 различных функций ради одной? Вероятно, вам будет проще написать свою реализацию этой фичи и установить часть зависимости как, например, мы сделали с lodash:
Если какое-то из ваших изображений было определено как "Largest Contentful Paint", то передайте ему prop priority. Так вы отключите "ленивую" загрузку изображения и сможете улучшить LCP в Google PageSpeed Insights.
Важно: не нужно ставить priority={true} на все ихображения. Это может значительно ухудшить производительность. Если ваши изображения спрятаны внутри других компонентов, то используйте "Props Drilling" и передайте priority={true} в тех местах, где это нужно.
Это были все Next.js/React специфичные фишки для оптимизации ваших сервисов. Мы не стали включать банальные фишки для любых систем, о которых есть много материалов в интернете, а сфокусировались на наших профильных технологиях - React/Next.js.
Несмотря на то, что важно обращать внимание на показатели Google PageSpeed Insights, не стоит их переоценивать. Низкая оценка от сервиса Гугла ещё не означает, что сайт медленный или имеет плохой юзабилити.
Иногда бывает, что вы уже выжали максимум из своего стэка и упираетесь в текущие технологические ограничения. Например, мы так и не смогли в должной мере побороть "Minimize main thread work" и "Remove unused JavaScript". Но мы не бросили эти попытки и сейчас изучаем возможность миграции на Preact, что в теории может решить эту проблему.
Как бы мы не старались минимизировать клиентскую часть проекта, мы всё равно не смогли достичь зелёной отметки по этим показателям. Несмотря на это, субъективно сайт открывает крайне быстро с любого устройства и использовать его приятно.
Как улучшить показатели Google PageSpeed Insights у Next.js проекта?
