-
[Next.js] 웹성능 최적화하기 (Lighthouse 이용하기)카테고리 없음 2023. 12. 14. 01:21
최적화, 왜 해야 할까?
프론트엔드 개발자가 웹 성능을 최적화하는 것은 여러 이유로 중요하다
기업은 웹 페이지의 렌더링 속도를 최적화함으로써 서버 및 대역폭 리소스 사용을 줄일 수 있어서 서버 유지 보수 비용을 절감할 수 있다
사용자 측면에서 렌더링 속도가 느리면 사용자 경험이 저하되어 이는 웹사이트 이탈로 이어질 수 있다
프론트엔드 개발자는 코드 최적화, 이미지 최적화 등을 통해 렌더링 속도를 향상시키는 작업을 함으로써
사용자 경험을 향상시키기 위해 노력해야 한다
최적화, 무엇을 해야 할까?
성능 확인하기
크롬에서 확장자로 제공하는 Lighthouse를 통해 웹페이지의 성능을 확인할 수 있다
https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=koLighthouse
Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.
chrome.google.com
위 링크로 들어가 크롬에서 추가하기 클릭한 후 사용하면 된다
상단에 확장 프로그램 탭으로 들어가서 사용할 수도 있고
개발자 도구에서 사용할 수도 있다
설치하고 Generate Report를 클릭하면 결과가 나온다
LCP(Largest Contentful Paint)는 뷰포트에서 가장 큰 컨텐츠를 렌더링하기 까지 시간을 뜻하는데
무려 4.2초나 걸리는 모습이다
최적화, 어떻게 해야 할까?
1. 폰트 최적화
속도가 느린 이유를 확인했더니 css에 글꼴을 @font-face로 불러오기 때문이었다
@font-face로 웹폰트를 사용해야 하는 상황이라면
font-display 속성을 활용하여 렌더링 차단 처리 방식을 제어할 수 있다고 한다
Next js에서 기본으로 제공하는 구글폰트를 사용하면 렌더링 속도가 향상된다
필자는 구글에서 제공하는 기본 폰트로 변경하였다
(노토산스 최고)import { Noto_Sans_KR } from 'next/font/google';const noto = Noto_Sans_KR({ subsets: ['latin'] });export default async function RootLayout({ children }: { children: React.ReactNode }) {return (<><html lang="en"><body className={noto.className}></body></html></>);}
layout.tsx 에 위처럼 작성해주어 전역으로 적용하였다
3. Image 태그 최적화 작업
next/image를 사용하면 페이지 로딩 시 필요한 이미지만 불러오는 lazy loading이 가능하고
이미지 사이즈를 최적화할 수 있다
Next에서 제공하는 이미지 태그를 사용했음에도 메인배너 이미지가 큰 용량을 차지하고 있었기 때문에
이미지의 용량을 줄이는 방법을 찾았다
(1) 확장자 바꾸기
jpg 형식이 상대적으로 무겁기 때문에
webp, avif 형식으로 변환하면 이미지 용량이 줄어든다
변환 사이트에 가서 일일이 변환하는 것이 귀찮다고 생각하던 찰나
next js에서 기본적으로 변환하는 기능을 제공한다고 한다
(만세 \ 😝 / )
next.config.js 파일에images: {formats: ['image/avif', 'image/webp'],},위 코드만 추가하면 자동으로 변환된다
변환된 것은 개발자 도구 Network에서 확인할 수 있다
4. 번들 최적화
@next/bundle-analyzer 를 통해 번들 크기를 파악할 수 있다
이 과정에서 사용하지 않는 모듈을 제거하였고
chart.js 라이브러리가 꽤 큰 비중을 차지하서 이를 경량화하는 방법에 대해 찾아보게 되었다
애니메이션을 끄거나 필요한 차트만 호출하여 쓰면 번들의 크기를 줄일 수 있다고 하여
시도해보았는데 결과가 별로 달라진 것이 없어서
좀더 찾아보고 추후 포스팅하려 한다
결과물
LCP를 3.2초 줄이면서
성능은 24%가량 개선되었다!
접근성은 Image 태그 하나에 빠져있던 alt값 지정해주니 향상된 것 같다
과거에는 새로운 프로젝트 개발에 주력했지만
완성된 프로젝트를 검토하고 수정하는 과정을 통해 성능 향상의 중요성을 깨달았다
어떻게 보면 별거 없지만 매우 값진 경험이라고 생각한다..!!
그럼 끝!
참고한 글
https://velog.io/@baby_dev/%EA%B7%B9%ED%95%9C%EC%9D%98-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%84%B1%EB%8A%A5%EC%B5%9C%EC%A0%81%ED%99%94-1%ED%8E%B8-Nextjs-13
https://velog.io/@april_5/%EC%8B%A4%EC%8A%B5-%EC%9B%B9-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-%EC%8B%A4%EC%8A%B5%ED%95%98%EA%B8%B0
https://enjoydev.life/blog/nextjs/3-performance
