FE 성능 개선을 위한 7가지 방법

1. 리소스 최소화하기, 압축하기

• Webpack과 같은 번들러를 통해 안쓰는 HTML, CSS, JS를 optimized 하고 compress 하기.
• Emotion과 같은 툴을 이용해 안쓰는 CSS 정리하기

 

2. 서버 요청 줄이기

• CSS Sprites 사용하기
• 무분별한 third-party-plugins 사용줄이기
• 서버사이드 렌더링 initial load 이용하기

 

3. 불필요한 폰트 없애기

• 커스텀 폰트의 경우 WOFF2와 같은 포맷으로 변경해 효율적인 형태 폰트로 변경하기
• 안쓰는 subset font 정리하기
• 페이지에서 사용될 폰트 preload 하기

 

4. 이미지 압축하기

• JPEG, PNG 보다 WebP(JPEG보다 25-35%, PNG보다 26% - 대부분 브라우저 지원), AVIF(JPEG보다 50%, WebP보다 20% - 크롬, 오페라 등 아직 일부만 지원) 작은 이미지 포맷 사용하기
• 올바른 크기 이미지 제공하기 (HTML5 srcset 혹은 picture도 사용하기)
• 이미지 압축하기
• Progressive JPEGs 사용하기
• 인터넷 속도가 느린경우 더 작은 사이즈 이미지 제공하기
• HTTP/1.1 말고 HTTP/2로 통신하기
• image-sets 사용하기

 

5. Lazy Loading 적용하기

<img src="image.jpg" alt="..." loading="lazy" />

 

6. 캐싱하기

• Cache server (CDN)
• Memory Cache (Javscript Variables, Recoil, React-Query)
• Browser Cache

 

7. Prefetch 하기

• DNS prefetch, prerendering

<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin /> // 가장 중요한 연결만 preconnect
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />

• Javascript, image link prefretch

<link rel="prefetch" href="/images/big.jpeg" />

• Next-Router 같은 경우 자주 방문하지 않는 페이지의 경우 prefetch={false}를 통해 리소스를 줄이기

<Link href="/pineapple-pizza" prefetch={false}>
<a>Pineapple pizza</a>
</Link>

https://blog.bitsrc.io/9-best-practices-for-optimizing-frontend-loading-time-763211621061

9 Best Practices for Optimizing Frontend Loading Time

https://web.dev/route-prefetching-in-nextjs/

Route prefetching in Next.js