Javascript

JavaScript로 웹 페이지 속도 개선하기: 팁과 샘플 코드

지오준 2024. 10. 21. 10:00
반응형

웹 페이지의 로딩 속도는 사용자 경험(UX)과 SEO에 큰 영향을 미칩니다. 빠른 페이지는 이탈률을 줄이고, 검색 엔진 순위를 높이며, 방문자가 더 오래 머무르도록 유도합니다. 이번 글에서는 **JavaScript 코드로 웹 페이지의 성능을 최적화하는 방법**과 샘플 코드를 소개합니다.  

---

## 1. **비동기와 지연 로딩 사용하기 (Async, Defer)**

JavaScript가 실행되는 동안 HTML 렌더링이 차단될 수 있습니다. `async`와 `defer` 속성을 활용하면 스크립트 로딩 방식을 최적화할 수 있습니다.

### 비동기(`async`)와 지연(`defer`)의 차이점
- **async**: 스크립트가 다운로드된 즉시 실행됩니다.
- **defer**: HTML 파싱이 끝난 후 스크립트가 실행됩니다.

### 샘플 코드
```html
<!-- async: 다운로드 즉시 실행 -->
<script src="example1.js" async></script>

<!-- defer: HTML 파싱 완료 후 실행 -->
<script src="example2.js" defer></script>
```

**추천**: 일반적으로 `defer`를 사용하면 HTML이 모두 로드된 후 실행되므로, 렌더링이 차단되지 않습니다.

---

## 2. **필요한 곳에만 코드 실행하기 (Lazy Loading)**

특정 요소나 이미지가 화면에 보여질 때만 로드하는 **Lazy Loading**을 사용하면 불필요한 리소스 로딩을 피할 수 있습니다.

### 샘플 코드
```javascript
document.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('img.lazy');
  
  const lazyLoad = (img) => {
    const src = img.getAttribute('data-src');
    if (src) {
      img.src = src;
    }
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        lazyLoad(entry.target);
        observer.unobserve(entry.target);
      }
    });
  });

  images.forEach(img => observer.observe(img));
});
```

```html
<img class="lazy" data-src="example.jpg" alt="Lazy loaded image">
```

---

## 3. **중복 JavaScript 최소화 (Bundle & Minify)**

JavaScript 파일이 많아지면 요청 수가 늘어나 속도가 저하됩니다. **Bundling**(파일 병합)과 **Minifying**(압축)을 통해 파일 크기를 줄일 수 있습니다.

### 예: Webpack 설정 예시
```bash
npm install webpack webpack-cli --save-dev
```

```javascript
// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  mode: 'production', // 파일을 압축해서 최적화
};
```

이렇게 압축하면 네트워크 요청을 줄이고, 브라우저가 더 빠르게 코드를 해석할 수 있습니다.

---

## 4. **코드 분할 (Code Splitting)**

한 번에 모든 스크립트를 로딩하지 말고, 필요할 때만 로드하는 것이 좋습니다. 이는 **React**나 **Vue** 같은 프레임워크에서도 활용되는 기법입니다.

### 샘플 코드
```javascript
// 동적으로 모듈 로딩
document.getElementById('loadButton').addEventListener('click', async () => {
  const { hello } = await import('./hello.js');
  hello();
});
```

```javascript
// hello.js
export function hello() {
  console.log('Hello, world!');
}
```

---

## 5. **브라우저 캐시 활용하기**

자주 변경되지 않는 리소스는 브라우저에 캐시하면, 반복 방문 시 로딩 시간을 단축할 수 있습니다. 아래와 같은 **Cache-Control** 헤더를 설정합니다.

```http
Cache-Control: public, max-age=31536000
```

---

## 6. **DOM 조작 최소화하기**  

DOM 조작은 비용이 많이 드는 작업입니다. 여러 번의 DOM 접근을 피하고, **Document Fragment**를 사용해 한 번에 업데이트하세요.

### 샘플 코드
```javascript
const list = document.getElementById('list');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i + 1}`;
  fragment.appendChild(item);
}

list.appendChild(fragment); // 한 번에 DOM에 추가
```

---

## 결론  

JavaScript 최적화는 페이지의 로딩 속도를 높이고, 사용자 경험을 개선하는 핵심 요소입니다.  
- `async`와 `defer`로 스크립트 로딩 최적화  
- Lazy Loading으로 불필요한 로딩 방지  
- 번들링과 압축으로 파일 크기 감소  
- 동적 로딩으로 초기 로딩 시간 단축  
- 캐시를 활용해 네트워크 요청 최소화  

이와 같은 최적화 방법을 통해 더 빠르고 효율적인 웹 페이지를 만들어보세요.

반응형