웹 성능 최적화

프론트엔드 개발에서 중요한것은 무엇이 있을까? 

다양한 기술들이 필요하겠지만, 그중에서도 사용자 경험을 증가시키기 위해서

로딩속도를 개선하고, 성능 최적화를 위한 기술적 노력이 정말 중요할 것이다. 

 

안그래도 면접에서도 자주 나오곤 했는데, 이번 기회에 다시한번 정리해 보았다.

 

---

 

코드 최적화: 불필요한 코드를 줄이고, 코드를 압축하거나 최소화하여 파일 크기를 줄이는 등 코드 최적화를 수행한다.

이미지 최적화: 이미지 파일을 적절하게 압축하고, 필요 이상으로 큰 이미지를 사용하지 않도록 최적화한다.

레이지 로딩: 페이지가 로딩될 때 먼저 필요한 부분만 로딩하여 초기 로딩 속도를 개선하는 기술을 적용한다.

파일 번들링과 분할 로딩: 코드를 더 작은 블록으로 분할하여 필요한 부분만 불러오거나, 자주 변경되지 않는 라이브러리들을 별도의 파일로 번들링하여 캐싱 효율을 높인다.

브라우저 캐싱: 정적 자원들을 브라우저 캐시에 저장하여 반복적인 다운로드를 피하고 로딩 속도를 향상시킨다.

CDN 사용: 컨텐츠 전달 네트워크(CDN)를 사용하여 콘텐츠를 전 세계에 분산하여 더 빠르게 서비스할 수 있다.

서버 사이드 렌더링(SSR) 또는 정적 사이트 생성(SSG): SSR 또는 SSG를 통해 초기 페이지 로딩 속도를 개선하고 SEO에 유리한 환경을 제공할 수 있다.

데이터 최적화: 필요한 데이터 양을 최소화하고, 필요한 데이터만 로딩하여 네트워크 요청 횟수를 줄인다.

성능 모니터링: 웹 페이지 성능을 지속적으로 모니터링하고, 병목 현상을 식별하고 해결하는 경험을 가지고 있다.

캐싱 전략: 적절한 캐싱 전략을 사용하여 반복적인 요청을 최소화하고 성능을 향상시킨다.

자바스크립트 최적화: 자바스크립트 코드를 최적화하여 실행 속도를 향상시키고 메모리 누수를 방지한다.

서비스 워커 등 사용: 서비스 워커 등을 사용하여 오프라인 상태에서도 페이지를 캐싱하여 로딩 속도를 개선한다.

 

 

용어정리

---

SSG

: "정적 사이트 생성(Static Site Generation)은 프론트엔드 웹 페이지를 사전에 미리 생성하는 방식이다.

SSG에서는 웹 사이트의 모든 페이지가 사전에 렌더링되어 HTML, CSS, JavaScript 등의 정적 파일로 생성되며, 이러한 정적 파일들은 웹 서버에 미리 저장되어 사용자의 요청에 따라 바로 제공된다.

즉, 사용자가 페이지에 접속할 때마다 서버 측에서 페이지를 동적으로 생성하는 것이 아니라 이미 만들어진 정적 파일을 제공하는 방식입니다.

장점

1. 빠른 로딩 속도 : 이미 렌더링된 정적 파일들을 제공하기 때문에 웹 페이지의 로딩 속도가 매우 빠르다.

2. SEO(검색 엔진 최적화) 향상 : 정적 파일들을 미리 생성하여 웹 크롤러가 페이지를 쉽게 인덱싱할 수 있도록 도와 SEO를 향상시킨다.

3. 안정성과 보안 : 정적 사이트는 서버 사이드 로직이 없기 때문에 보안 취약점이 줄어들고, 서버 오류로 인한 사이트 다운이 발생하지 않는다.

4. 비용 절감 :  동적 서버를 사용하지 않고 정적 파일만 제공하므로 서버 운영 비용을 절감할 수 있다.

SSG를 사용하면 웹 개발자는 사전에 페이지를 렌더링하여 정적 파일로 저장한 후 이를 배포하는 것만으로 웹 페이지를 구축할 수 있고, 

이러한 방식은 웹 개발과 운영을 간소화하고 효율적으로 웹 사이트를 관리할 수 있도록 도와준다.

 

대표적인 정적 사이트 생성 도구로는 Next.js, Gatsby, Jekyll 등이 있다. 

 

 

그래서.. Next.js 의 필요성을 여기서도 한번 느꼈다..!