Next.js 웹사이트의 성능을 개선하는 방법은 무엇입니까?

이 게시물에서는 Next.js 웹사이트의 성능을 높이는 방법을 알려드리겠습니다. Lighthouse Chrome 애드온을 활용하여 성능을 측정하겠습니다(이제 기본적으로 사용 가능). 간단한 팁도 포함되어 있을 수 있습니다. 웹사이트 유형에 따라 항상 점수가 80 이상인지 확인하십시오. 저는 웹사이트 성능을 개선하기 위해 아래에 나열된 몇 가지 방법을 활용했습니다.

Repo(This is my personal portfolio website) :- https://github.com/Sumukha210/new-portfolio-website

1) Lighthouse는 항상 비공개 모드로 사용하세요.

기본 전략이지만 매우 성공적입니다. 등대를 운영할 때 크롬 확장 프로그램, 스크립트 등 외부 간섭으로 인해 성능이 저하될 수 있기 때문입니다. 또한 프로덕션 빌드를 실행 중인지 확인하십시오. 프로덕션 빌드를 실행하려면 yarn run build 를 사용하십시오.

2) 게으른 로딩.

코드펜 데모https://codepen.io/Irehan/pen/YgyozL를 복사하여 붙여넣어 웹 사이트에 연기 효과를 활용했습니다. 데스크톱에서는 훌륭하게 작동하지만 터치 장치에서는 제대로 작동하지 않습니다. 또한 WebGL을 사용하기 때문에 많은 코드가 있습니다. 이를 방지하기 위해 코드를 느리게 로드했습니다. 이와 유사

const lazyLoadSmokeEffect = async (canvas: any) => {
    const { smokeSimulation } = await import("./SmokeEffect");
    smokeSimulation(canvas); // This functions contains the code
  };

  useIsomorphicLayoutEffect(() => {
    if (canvasRef?.current && window.innerWidth >= 1200) {
      setTimeout(() => {
        lazyLoadSmokeEffect(canvasRef.current);
      }, 2000);
    }
  }, []);

3) 구성 요소를 느리게 로드하는 교차 관찰자.

내 사이트에는 연락처 양식이 있기 때문에 스팸을 피하기 위해 reCAPTCHA를 사용했지만(여기에서 Google reCAPTCHA를 구현하는 방법에 대한 내 기사 확인: ) Lighthouse 탭을 확인했을 때 무게가 약 143kb인 스크립트를 생성했습니다. 결과적으로 저는 Next.js 동적 가져오기를 사용했습니다. 또한 사용자가 특정 지점으로 스크롤할 때 구성 요소를 느리게 로드하는 useOnScreen 사용자 지정 반응 후크를 사용했습니다.

여기서는 연락처 섹션에 대한 Next.js 동적 가져오기를 구현했습니다.

import React, { useRef } from "react";
import About from "@/modules/about/About";
import Hero from "@/modules/hero/Hero";
import Layout from "@/modules/Layout";
import Skills from "@/modules/skills/Skills";
import dynamic from "next/dynamic";
import { useOnScreen } from "@/utils/useOnScreen";
import SEO from "@/utils/SEO";
import Project from "@/modules/projects/Project";

const DynamicContactUsComponent = dynamic(
  () => import("@/modules/contact/Contact"),
  {
    loading: () => (
      <p className="loadingText subtitle-4">
        Contact us Loading, please wait...
      </p>
    ),
  }
);

const MainPage = () => {
  const bodyHeight = 800;
  const ContactRef = useRef(null);
  const isContactIntersecting = useOnScreen(ContactRef, `${bodyHeight / 2}px`);

  return (
    <Layout>
      <SEO />
      <Hero />
      <About />
      <Skills />
      <Project />

      <div ref={ContactRef} id="contactSection">
        {isContactIntersecting && <DynamicContactUsComponent />}
      </div>
    </Layout>
  );
};

export default MainPage;

useOnScreen 사용자 정의 후크,

import { MutableRefObject, useState } from "react";
import useIsomorphicLayoutEffect from "./useIsomorphicEffect";

export const useOnScreen = (
  ref: MutableRefObject<null>,
  rootMargin: string = "0px"
): boolean => {
  const [isIntersecting, setIntersecting] = useState<boolean>(false);
  useIsomorphicLayoutEffect(() => {
    const observer = new IntersectionObserver(entries => {
      console.log("entries", entries);
      entries.forEach(
        entry => {
          if (entry.isIntersecting) {
            setIntersecting(true);
          }
        },
        { rootMargin }
      );
    });

    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => {
      ref.current && observer.unobserve(ref.current);
    };
  }, []);

  return isIntersecting;
};

Also, don't overdo it because using dynamic for more components increases the amount of requests browser sent to the server.

4) 스타일이 적용된 컴포넌트에 Babel 플러그인을 사용하여 스타일을 적용하는 동안 지연을 줄입니다.

.babelrc 파일에서,

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        [
            "styled-components"
        ]
    ]
}

_document.tsx에서

import Document, { DocumentContext, DocumentInitialProps } from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: [
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>,
        ],
      };
    } finally {
      sheet.seal();
    }
  }
}

다음은 성능을 향상시키는 데 도움이 되는 몇 가지 빠른 팁입니다.

이미지를 표시하려면 다음/이미지 구성 요소를 사용하십시오.

Next.js의 글꼴 최적화 기술 사용

// pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

제 글을 읽어주셔서 감사합니다. 성능 향상을 위한 기술이 있다면 댓글로 자유롭게 공유해주세요. ✌🖐👍