브라우저 렌더링 최적화 방법

요약

1. CSS 최적화: CSS 파일을 최적화하여 크기를 줄이고, 불필요한 주석과 공백을 제거하며, CSS 스타일 시트를 HTML 문서의 head 태그 안에 위치시켜 초기 렌더링을 개선합니다.

2. 자바스크립트 최적화: 자바스크립트 파일의 크기를 줄이고, 불필요한 주석과 공백을 제거하며, 자바스크립트 코드를 최적화합니다.

3. 이미지 최적화: 이미지 최적화를 위해 Lazy Loading을 사용하고, WebP와 같은 압축률이 좋은 이미지 포맷을 활용합니다. 또한 이미지 리소스를 필요한 크기로 자르고, HTTP 요청 수를 최소화합니다.

4. 코드 분할 (Code Splitting): 코드 분할을 통해 필요한 코드만 로드하여 초기 페이지 로딩 속도를 향상시킵니다.

5. 리소스 프리로드 (Resource Preloading): 미리 필요한 리소스를 로드하여 페이지 탐색 시 로딩 시간을 단축시킵니다.

6. Lazy Component: 필요한 컴포넌트만 동적으로 로드하여 초기 페이지 로딩을 최적화합니다.

7. Browser Caching: 브라우저 캐싱을 활용하여 이미 로드한 자원을 재사용하여 페이지 로딩 시간을 단축합니다.

8. Reflow와 Repaint 최소화: 불필요한 Reflow와 Repaint를 줄이기 위해 최적화 작업을 수행합니다. 이에는 노드의 display: none, 애니메이션 속성 조정, 인라인 스타일 지양 등이 포함됩니다.

브라우저 렌더링 최적화

브라우저 렌더링 최적화를 해야하는 이유

최적화 방법

1. CSS 최적화
• CSS 파일의 크기 줄이기, 불필요한 주석과 공백 제거 작업
• CSS 스타일 시트의 위치 변경, CSS 스타일 시트를 HTML 문서의 head 태그 안에 위치시키면 브라우저가 HTML 문서 파싱을 중단하지 않고 CSS 파일을 빠르게 다운로드할 수 있습니다
• CSS 선택자 최적화, CSS 선택자는 브라우저 렌더링 성능에 큰 영향을 미칩니다. 따라서, CSS 선택자를 최적화하여 브라우저 렌더링 속도를 향상시킬 수 있습니다.

2. 자바스크립트 최적화
• 자바스크립트 파일의 크기 줄이기, 불필요한 주석과 공백을 제거 작업
• 자바스크립트 코드의 최적화

3. 이미지 최적화
• Image Lazy Loading(이미지 최적화 방법)
• 화면에 실제로 이미지가 보여져야 할 때 이미지를 다운로드하여, CSS, JS를 더 앞서 다운로드하게 함

<img loading="lazy" src="..." />

• WebP
• 압축율이 좋은 이미지 포맷을 사용하여 파일 용량 압축

<img src="some-image.webp" onerror="this.src='some-image.png'" />

• 이미지 리소스를 필요한 크기로 자르고, CSS 스프라이트나 아이콘 폰트를 활용하여 HTTP 요청 수를 최소화합니다.

4. 코드 분할(Code Splitting)
• 코드 분할을 통해 웹 애플리케이션의 코드를 작은 청크로 나누어 필요한 시점에만 로드합니다.
• 초기 페이지 로딩 시간을 단축하고, 사용자가 다른 섹션으로 이동할 때 필요한 코드만 로드됩니다.
• 주로 JavaScript 프레임워크와 함께 사용되며, Webpack, Parcel, 또는 프레임워크 자체에서 지원하는 기능을 활용합니다.

5. 리소스 프리로드(Resource Preloading)
• 미리 필요한 리소스를 로드하는 것으로, 사용자가 페이지를 탐색할 때 필요한 리소스를 미리 다운로드할 수 있습니다.

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">

6. Lazy Component
• Lazy component는 필요한 시점에만 로드되며, 초기 페이지 로딩을 가볍게 합니다.
• 사용자가 특정 기능을 요청할 때만 해당 컴포넌트가 동적으로 로드되어 불필요한 자원 낭비를 방지합니다.
• 리액트(React)와 같은 프레임워크에서 React,lazy() 함수를 사용하여 Lazy component를 구현할 수 있습니다.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

7. Browser Caching
• 브라우저는 웹 페이지의 자원(이미지, 스타일 시트, 스크립트)을 로컬 캐시에 저장하고, 이후 동일한 페이지를 방문할 때 해당 자원을 재사용합니다.
• 캐시를 적용하면 사용자의 반복적인 방문 시 웹페이지 로딩 시간이 크게 단축됩니다.

8. Reflow, Repaint 줄이기
• 불필요한 노드는 display:none
• Reflow 속성 사용 줄이기
• 애니메이션은 position:fixed, absolute
• 프레임 줄이기
• 인라인 스타일 지양하기
• CSS 하위 선택자 줄이기
Reflow, Repaint

참고 사이트