Оптимизация пакета NextJS для повышения производительности
В этой статье мы узнаем о различных способах повышения производительности пакета NextJS, что приводит к повышению производительности приложений NextJS в Google PageSpeed Insights или Lighthouse.
Согласно документации , NextJS — это платформа React, которая дает вам строительные блоки для создания веб-приложений.
Строительные блоки означают различные необходимые вещи, необходимые для создания веб-приложений, такие как маршрутизация, пользовательский интерфейс, выборка данных, рендеринг и многое другое.
В NextJS, когда мы запускаем команду npm run build, NextJS создает оптимизированную версию вашего приложения для производства. Вывод создается внутри папки « .next» . Все пакеты в папке «.next» компилируются, минимизируются и готовы к работе в браузере для достижения наилучшей производительности во всех браузерах.
Иногда мы не следуем лучшим практикам, что влияет на нашу производительность. Ниже приведены способы повышения производительности вашего приложения:
1. Динамический импорт:
Next.JS поддерживает ленивую загрузку посредством динамического импорта. Компоненты, невидимые во время начальной загрузки приложения, не должны нормально загружаться. Они должны быть загружены с использованием динамического импорта, который обеспечивает ленивую загрузку, и, следовательно, этот компонент будет отправлен в браузер, когда это необходимо.
import dynamic from "next/dynamic";
//Normal Import
import Starworld from "./components/Starworld";
//Dynamic Import
const Startworld= dynamic(()=>import("./components/Starworld"))2. Выберите правильный формат изображения:
Использование изображения правильного формата поможет уменьшить размер пакета приложения Next.JS. Если вы можете попытаться удалить изображение во время начальной загрузки, это будет лучшей стратегией оптимизации, но иногда изображения в правильном месте действительно сообщают больше, чем тысяча слов.
Изображения бывают двух типов:
- Векторные изображения (SVG) использовали линии, точки и многоугольники для представления изображений.
- Растровые изображения (JPEG, PNG, Webp) представляют изображение путем кодирования отдельных значений каждого пикселя в прямоугольной сетке.
Изображения являются частью LCP (Large Contentful Paint), что означает, что размер изображения влияет на время загрузки приложения. Векторные изображения идеально подходят для геометрических фигур, таких как логотипы, значки и т. д., поскольку они обеспечивают четкие результаты на экранах с более высоким разрешением. Растровые изображения обычно предпочтительнее там, где есть сложные цветовые сочетания или цифровые фотографии.
В растровых изображениях предпочтение отдается изображениям в формате Webp, а не JPEG или PNG. Обычно изображения webP (на 25%-75%) меньше, чем изображения JPEG или PNG. Следовательно, повышение производительности и уменьшение размера пакета.
- Youtube улучшил производительность первой загрузки на 10 % за счет использования изображений WebP.
- Facebook заметил уменьшение размера файлов JPEG и PNG при переходе на формат WebP.
3. Оптимизируйте большие содержательные краски:
Large Contentful Paint (LCP) — одна из трех основных веб-метрик. Это мера того, сколько времени требуется вашей странице для отображения самого большого содержимого на экране. LCP должно быть менее 2,5 секунд, чтобы обеспечить хорошее взаимодействие с пользователем. Оптимизация содержимого LCP является одной из сложных задач, поскольку она зависит от различных факторов, что приводит к ухудшению времени LCP. Ниже приведены различные моменты, которые влияют на LCP и могут быть оптимизированы следующими способами:
- Никогда не лениво загружайте образ LCP, так как это повлияет на производительность начальной загрузки.
- Предварительно загрузите содержимое LCP, чтобы его можно было загрузить как можно раньше.
<head>
<title>Page Title</title>
<link rel="preload"
fetchpriority="high"
as="image"
href="/path/to/Firstimage.webp"
type="image/webp">
</head>- Разбейте свою таблицу стилей на различные стили и загружайте только те стили, которые необходимы для первоначальной загрузки.
- Используйте CDN (доставка по сети контента), чтобы сократить время загрузки ресурса, расположив сервер географически близко к пользователю.
- Если ваша LCP представляет собой шрифт, попробуйте уменьшить размер шрифта, что повысит производительность приложения.
4. Ленивая загрузка изображений для Интернета:
Изображения, которые используются в более поздней части приложения, должны загружаться отложенно.
- Для Next.JS используйте встроенный компонент изображения (next/image) , который оптимизирует изображение и, следовательно, повышает производительность.
- Отложенная загрузка на уровне браузера также предоставляет способ отложенной загрузки закадровых изображений. Вы можете использовать атрибут «загрузка» в теге <img>, чтобы отложить загрузку закадровых изображений.
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
5. Используйте Intersection Observer API:
Мы можем использовать Intersection Observer API для загрузки компонентов за кадром на домашней странице. Это значительно повышает производительность приложения. Через обозреватель Intersection можно наблюдать за компонентом, если он находится во вьюпорте, мы можем загрузить его асинхронно, иначе нам не нужно загружать компонент, когда он не нужен.
import { useState, useRef } from "react";
export default function Home(){
const [toggler, setToggler]= useState(false);
const [viewPortValue, setViewPortValue]= useState("");
const ref=useRef();
const InterSectionObserverComponent= (ref)=>{
let isViewPort= false;
const observer= new IntersectionObserver(([entry])=>{
isViewPort= entry.isIntersecting;
setViewPortValue(isViewPort);
});
if(ref.current){
observer.observe(ref.current);
}
}
}Вышеупомянутая функция используется для наблюдения за компонентом.
{
<div ref={ref}>
{viewPortValue && <Startworld />}
</div>
}Приведенный выше код загрузит компонент Starworld, когда ViewPortValue станет истинным, т.е. компонент будет виден внутри области просмотра.
6. Конкретный импорт:
Когда мы просто хотим импортировать определенную функцию в библиотеку, вместо того, чтобы импортировать всю библиотеку, мы можем импортировать определенную функцию. Таким образом, уменьшение размера пакета влияет на производительность приложения.
//old way import _remove from "lodash"; //new way import _remove from "lodash/remove";
7. Используйте атрибут Prefetch как false в следующем/ссылочном компоненте:
Когда мы используем компонент next/link в нашем приложении Next.JS. По умолчанию он выполняет предварительную выборку страниц, ссылки на которые находятся в области просмотра. Например, у нас есть ссылки « /career» и « /testimonial» в заголовке домашней страницы. Даже если пользователь находится на главной странице, он предварительно загрузит эти компоненты карьеры и отзыва во время сборки.
Сохраняйте Prefetch={false} , чтобы избежать предварительной выборки страницы, что приводит к уменьшению размера пакета. Добавляя этот атрибут, он будет выполнять предварительную загрузку компонента при наведении курсора на ссылку вместо предварительной загрузки страниц во время загрузки.
<Link href="/career" prefetch={false}>
<a>Career</a>
</Link>8. Используйте Bundle Analyzer для анализа сборки:
Установите библиотеку @next/bundle-analyzer для анализа сборки приложения. С помощью анализатора пакетов мы поймем размеры библиотек, используемых в нашем приложении.
С помощью анализатора мы можем выполнять следующие действия:
- Мы можем заменить большие библиотеки их меньшими альтернативами.
- Мы можем удалить ненужную библиотеку, которая используется в приложении.
- Мы можем перенести большие библиотечные задачи на сервер и через API получить доступ к функциональности.
Реализуя вышеуказанные пункты, мы можем оптимизировать наше приложение NextJS и, следовательно, повысить производительность приложения Next.JS.