[최적화] 웹 성능 최적화 - (throttle)

성능 최적화란 무엇일까?

프론트엔드 에서의 성능 최적화는 웹 어플리케이션이나 웹사이트의 UX를 향상시키기 위해 렌더링 및 로딩 속도, 응답성 등을 향상시키는 과정을 말합니다.

이는 사용자가 웹 페이지를 더 빨리 로드하고, 더 빠른 상호작용을 할 수 있으며 원할한 탐색을 돕는 것을 목표로합니다.

성능 최적화가 왜 필요할까?

• UX 향상
  웹 페이지의 렌더링이 빨라지고 반응성이 좋을수록 사용자는 편리하게 정보를 얻고 원할한 서비스를 이용할 수 있게됩니다. 이는 사용자의 만족도를 높여 웹사이트의 재방문율을 높이는데 큰 기여를 합니다.

• SEO(검색 엔진 최적화)
  검색 엔진은 웹사이트의 속도를 고려하여 순위를 매길 수 있기때문에, 빠른 웹페이지는 검색엔진에서 높은 순위를 받으며 유기적인 트래픽을 유도할 수 있기에 서비스의 매출에 기여합니다.

• 비용절감
  페이지 로딩이 오래걸릴수록 서버 비용과 대역폭 사용이 늘어나게 된다. 최적화된 프론트엔드의 웹 서비스는 더 적은 서버 리소스를 사용해 비용이 절감되고, 더 많은 사용자에게 서비스를 제공할 수 있습니다.

성능 최적화 전략

• 파일 크기 최적화
• 리소스 캐싱
• 코드 스플리팅
• 이미지 Lazy Loading
• 렌더링 최적화
• 요청 횟수 최소화
  ....

이외에도 수많은 전략들이 존재합니다.

이글에서 다뤄볼 주제는

요청 횟수 최소화

에 대해 다뤄볼 예정입니다.

---

요청 횟수 최소화에도 여러가지 방법이 있지만, 이번에 진행하는 프로젝트에서는
lodash의 "throttle" 이라는 기능을 사용했습니다.

throttle??

throttle은 lodash 라이브러리에서 제공하는 기능으로, 네트워크 요청의 빈도를 제어하여 요청의 속도를 감소시키는 기능입니다. 이를 사용함으로써 무수히 많은 요청이 서버로 동시에 발생하지 않도록 제한함으로써 서버 및 클라이언트의 부하를 줄이고 성능을 최적화하는데 도움을 줍니다.

Throttle은 특정 이벤트나 함수 호출의 실행 빈도를 조절하는 것으로, 주로 스크롤, 리사이징, 입력 등 사용자 액션에 반응하는 함수들에 적용됩니다. 예를 들어, 사용자가 스크롤하거나 리사이즈를 할 때 많은 이벤트가 발생할 수 있지만, 이러한 이벤트에 대한 처리를 일정 시간 간격으로 제한함으로써 브라우저에 부하를 줄일 수 있습니다.

import "./App.css";

function App() {
  const handleInput = (event) => {
    console.log(event.target.value);
  };
  return (
    <div className="App">
      <input onChange={handleInput} type="text" style={{ marginTop: "20%" }} />
    </div>
  );
}

export default App;

위 예시는 간단한 input태그에 대한 입력값의 변동값을 감지해 console을 확인하는 코드입니다.

해당 입력칸에 실제로 입력해보면

이처럼 입력한값에 대한 모든 변화가 감지되어 console이 찍히는것을 확인할 수 있습니다.

위 코드에 throttle기능을 사용하면

import "./App.css";
import { throttle } from "lodash";

function App() {
  const handleInput = throttle((event) => {
    console.log(event.target.value);
  }, 1000); // 모든 입력값에 대해 1초에 한번만 실행시킴
  return (
    <div className="App">
      <input onChange={handleInput} type="text" style={{ marginTop: "20%" }} />
    </div>
  );
}

export default App;

아무리 입력하더라도 1초에 한번씩만 console에서 확인할 수 있는 것을 볼 수 있습니다.

이렇게 볼때는 작은 기능이지만,
많은 양의 json을 호출하는 api를 동시에 여러번 호출해야하는 상황이라면 throttle기능을 사용해 요청을 제어하여 성능 최적화를 할 수 있습니다.

저도 사내 프로젝트를 진행하면서 많은 양의 json을 호출하는 api를 동시에 여러번 호출해야 하는 상황이 있었는데, throttle 기능을 사용해서 제작하고 있는 서비스의 성능을 최적화 했습니다.

---

웹 개발을 하다보면 어떻게 해야 좋은 서비스를 만들까, 내 프로젝트에서 최적화를 하기 위해서는 어떤 기법을 적용해야할까와 같은 성능 최적화에 대해 끝없이 고민하게 되는 것 같다.

앞으로도 UX의 향상을 위해 끊임없이 노력해야겠다.