[온라인 쇼핑몰 속도 최적화] 메인스레드 작업 최소화

 

목차

 

💡  메인 스레드란?

💡  메인 스레드 작업을 최소화하면 페이지 성능에 어떤 영향을 줍니까?

💡  메인 스레드 작업을 최소화하는 방법은 무엇입니까?

 

 

---

 

 

 

 

 

웹 페이지가 로딩되는 동안 브라우저의 메인 스레드는 페이지를 렌더링하고 상호작용을 처리합니다.
"Minimize main-thread work"는 사이트 성능의 관점에서 높은 영향을 주는 감사입니다. 이 메인 스레드에서 수행되는 작업을 최소화하여 페이지가 빠르게 로딩되고 사용자가 페이지와 상호작용하는 동안 지연이 발생하지 않도록 하는 것을 목표로 합니다.
이를 위해 불필요한 JavaScript 실행, CSS 레이아웃 계산, DOM 조작 등을 최소화하고, 효율적인 코드 및 리소스 관리를 통해 웹 페이지의 성능을 향상시킵니다.

 

---

 

💡  메인 스레드란?

 

웹 브라우저의 메인 스레드는 사용자 인터페이스(UI)를 처리하는 스레드입니다. 따라서 메인 스레드의 작업이 많을수록 웹 페이지의
응답성이 떨어지고, 사용자 경험에 부정적인 영향을 미칠 수 있습니다.

사용자가 웹 브라우저에서 웹 페이지를 열면 다음과 같은 일이 발생합니다

1. HTML Parsing (HTML 구문 분석)
브라우저는 웹 페이지의 HTML 코드를 읽고 파싱하여 페이지의 구조를 이해합니다.
2. CSS Parsing (CSS 구문 분석)
CSS 파일도 파싱되어 스타일 정보가 추출됩니다.
3. DOM Construction (DOM 생성)
파싱된 HTML을 기반으로 Document Object Model (DOM)이 생성됩니다. 이 DOM은 웹 페이지의 구조를 표현하며, JavaScript로 조작할 수 있는 프로그래밍 인터페이스를 제공합니다.
4. CSSOM Construction (CSS 객체 모델 생성)
CSS 파일을 기반으로 CSS Object Model (CSSOM)이 생성됩니다. 이 CSSOM은 웹 페이지의 스타일 정보를 나타냅니다.
5. Layout (레이아웃 계산)
DOM과 CSSOM을 기반으로 웹 페이지의 레이아웃이 계산됩니다. 이 레이아웃은 화면에 어떻게 요소가 배치 되는지와 관련이 있습니다.
6. Painting (화면 그리기)
실제 화면에 내용을 그리는 단계로, 웹 페이지의 컨텐츠가 사용자에게 표시됩니다.

 

 

이러한 작업 중 "main-thread"는 HTML 파싱, CSS 파싱, DOM 생성, 레이아웃 계산, 그리기와 같은 주요 작업을 처리합니다.  만약 이 스레드에서 많은 작업이 실행되거나 블록되면 페이지의 렌더링이 느려지거나 응답성이 저하될 수 있습니다. 따라서 "main-thread"의 최적화는 웹 페이지의 성능 개선에 중요한 역할을 합니다.

 

예를 들면,
메인 스레드를 공항의 항공기 터미널 직원과 같이 생각해보세요. 항공기 터미널 직원은 탑승 승객들의 수속을 처리하고 탑승권을 발급하며 탑승구로 안내하는 등의 작업을 해야 합니다.
만약 항공기 터미널 직원이 특정 승객의 수속 처리에 오랜 시간이 걸리는 등의 단일 작업에 치우쳐져 다른 작업을 처리하지 못한다면 문제가 발생합니다. 이는 병목 현상을 일으키며 항공기 터미널의 성능에 영향을 미칩니다.
따라서 항공기 터미널은 다양한 작업을 동시에 처리할 수 있는 능력이 필요합니다. 예를 들어, 추가적인 직원을 고용하거나 자동화된 시스템을 도입하여 작업을 효율적으로 처리할 수 있습니다. 또한, 승객들의 수속 절차를 간소화하고 정보를 미리 알려주는 등의 방법을 통해 대기 시간을 최소화할 수 있습니다.

 

 

---

 

💡  메인 스레드 작업을 최소화하면 페이지 성능에 어떤 영향을 줍니까?

메인 스레드 작업을 최소화하면 웹 페이지의 로딩 속도와 응답성이 개선됩니다. 작업이 더 효율적으로 분산되기 때문에 페이지가 더 빠르게 렌더링되고, 사용자의 입력에 더 빠르게 응답할 수 있습니다.

메인 스레드 작업을 최소화하면 웹 페이지의 성능에 다음과 같은 긍정적인 영향을 미칩니다

 

1. 빠른 로딩 속도

메인 스레드 작업을 최소화하면 웹 페이지가 더 빨리 로드됩니다. 사용자는 웹 페이지를 더 빨리 볼 수 있고, 웹 페이지가 빠르게 나타나는 것처럼 느낍니다.
2. 부드러운 상호작용

웹 페이지가 메인 스레드 작업으로 인해 블록되지 않으면 사용자와 상호작용할 때 웹 페이지가 더 부드럽게 반응합니다. 클릭, 스크롤, 입력 등의 상호작용이 지연 없이 이루어집니다.
3. 낮은 대역폭 요구

메인 스레드 작업을 최적화하면 불필요한 데이터 전송이 감소하므로, 사용자와 웹 서버 간의 데이터 통신에 필요한 대역폭을 줄일 수 있습니다. 특히 모바일 기기나 느린 인터넷 연결을 사용하는 경우 이점이 큽니다.
4. SEO 개선

빠른 로딩 속도는 검색 엔진 최적화 (SEO)에도 긍정적인 영향을 미칩니다. 검색 엔진은 빠른 웹 페이지를 선호하며, 이로 인해 웹 페이지가 검색 결과에서 높은 순위를 얻을 가능성이 높아집니다.
5. 에너지 효율성

메인 스레드 작업을 최소화하면 모바일 기기의 배터리 수명을 더 오래 유지할 수 있습니다. 에너지 소비가 감소하므로 사용자 경험과 배터리 수명을 모두 향상시킵니다.

요약하면, 메인 스레드 작업을 최소화하면 웹 페이지의 성능이 개선되어 로딩 속도가 빨라지고 사용자 상호작용이 부드럽게 이루어지며 대역폭과 에너지 효율성도 향상됩니다.
HTML/CSS 파싱, JavaScript 실행 등과 같은 이벤트는 메인 스레드가 다른 작업이나 사용자 상호작용을 처리하지 못하도록 막습니다.
JavaScript 실행은 일반적으로 메인 스레드 혼잡의 주요 원인입니다. 이는 사이트가 JavaScript로 많이 구성되어 있거나 (즉, 실행 시간이 길고 크기가 크거나/또는 스크립트가 너무 많은 경우)일 수 있습니다.
일반적으로 페이지에 포함된 JavaScript가 많을수록 파싱/컴파일 프로세스가 길어지므로, 사용자들이 컨텐츠를 보고 페이지와 상호작용하는 데 더 오랜 시간이 걸립니다.

< 오래 실행되는 JavaScript(위의 A,B,E)는 메인 스레드를 오랫동안 차단하여 브라우저가 페이지의 첫 번째 페인트에 필요한 다른 작업을 실행하지 못하게 할 수 있습니다. >

여기에서 JavaScript 실행 시간을 줄이는 방법에 대해 자세히 알아보세요.

 

 

---

 

💡  메인 스레드 작업을 최소화하는 방법은 무엇입니까?

 

메인 스레드 작업을 최소화하기 위해 다음과 같은 방법을 고려할 수 있습니다.

● JavaScript 코드를 최적화하고, 불필요한 작업을 제거합니다.
● 렌더링 성능을 향상시키기 위해 CSS를 최적화하고, 애니메이션을 GPU 가속으로 처리합니다.
● 웹 워커(Web Worker)를 사용하여 백그라운드 스레드에서 작업을 처리합니다.
● 이미지와 같은 리소스를 지연 로딩하거나, 필요한 경우에만 로드합니다.

아래에 좀더 자세하게 몇 가지 방법들을 설명합니다.

 

1) JavaScript 실행 시간 줄이기
코드 분할(Code Splitting)을 구현하여 페이지에 필요한 JavaScript 코드만 로드하고 나머지는 필요할 때 로드하도록 합니다.
▶ JavaScript 코드를 축소(minify)하고 압축(compress)하여 파일 크기를 최소화하여 다운로드 시간을 단축합니다.
▶ 사용되지 않는 코드를 정리하고 제거하여 필요한 코드만 유지합니다.
▶ PRPL(Preload, Render, Pre-cache, Lazy-load) 패턴을 따라 필요한 JavaScript 페이로드를 최소화하여 초기 페이지 로딩 속도를 개선합니다.
JavaScript 실행 시간을 줄이는 방법에 대해 자세히 알아보려면 여기를 클릭하십시오.
　
2) 타사(Thrid-party) JavaScript 최적화
▶ 웹 페이지에 있는 타사(제3자) JavaScript 코드를 검토하고, 웹사이트에 가치를 더하지 않는 코드를 삭제합니다.
▶ 중요하지 않은 타사 스크립트를 연기하여 초기 페이지 로딩을 빠르게 합니다.
▶ 중요한 타사 도메인에 대한 미리 연결(preconnect) 을 설정하여 로딩 시간을 단축합니다.
▶ 타사 호스팅 콘텐츠를 지연 로딩하여 초기 페이지 로딩을 가볍게 유지합니다.
▶ 타사 호스팅을 최적화하여 리소스를 효율적으로 가져옵니다.
▶ 타사 스크립트 파일을 압축하여 파일 크기를 줄여 로딩 속도를 향상시킵니다
타사 JavaScript 최적화에 대해 자세히 알아보려면 여기를 클릭하십시오.

3) 입력 핸들러를 디바운싱하기
이것은 입력 이벤트(예: 클릭, 키보드 입력, 스크롤)를 처리하는 JavaScript 함수가 오랜 시간 동안 반복해서 실행되지 않도록 제어하는 기술입니다. 

디바운싱을 통해 해결할 수 있는 주요 문제는 다음과 같습니다.
▶ 스크롤 성능 개선 : 스크롤 이벤트 핸들러가 디바운싱되면 스크롤 중에 반복해서 실행되는 것을 방지할 수 있어 웹 페이지의 스크롤 성능이 개선됩니다. 사용자가 부드럽게 스크롤할 수 있습니다.
▶ 스타일 변경 최적화 : 디바운싱을 사용하면 입력 핸들러에서 스타일 변경을 제어할 수 있습니다. 이렇게 하면 불필요한 화면 재그리기를 방지하고 페이지 성능을 향상시킬 수 있습니다.
자세한 내용은 이 문서를 읽어보세요.

4) 웹 워커 사용하기
웹 워커는 JavaScript 코드를 주요 스레드(main-thread)에서 분리하여 웹 페이지의 성능을 향상시키는 데 사용됩니다. 웹 워커는 백그라운드 스레드에서 실행되며, 주요 스레드를 차단하지 않고 병렬로 작업을 수행할 수 있게 해줍니다. 이를 통해 웹 페이지가 더 빠르게 로드되고 사용자 경험이 향상됩니다.

웹 워커를 사용하여 얻을 수 있는 이점은 다음과 같습니다.
▶ 주요 스레드 해방 : 웹 워커를 사용하면 메인 스레드(main-thread)가 다른 작업에 집중할 수 있으므로 웹 페이지의 반응성이 향상됩니다. 사용자는 웹 페이지를 부드럽게 탐색할 수 있습니다.
▶ 복잡한 작업 분리 : 웹 워커를 활용하여 복잡한 계산, 데이터 처리 또는 네트워크 요청을 백그라운드에서 처리할 수 있습니다. 이는 웹 페이지의 메인 스레드를 차단하지 않고 비동기 작업을 수행할 수 있게 합니다.
▶ 빠른 웹 애플리케이션 로딩 : 웹 워커를 사용하여 초기 로딩 시에 필요한 데이터를 백그라운드에서 미리 다운로드하고 캐시할 수 있습니다. 이로 인해 웹 애플리케이션의 시작 시간이 단축되고 사용자 경험이 향상됩니다.
자세한 내용은 이 문서를 읽어보세요 .

5) 렌더링을 위한 경량 CSS 사용
페이지의 스타일링을 위한 CSS를 최적화하고 필요한 최소한의 스타일만 로드합니다. 예를 들어, 페이지 전체에 적용되는 스타일은 별도의 CSS 클래스를 사용하여 최소한으로 유지하고, 페이지 특정 요소에만 스타일을 적용합니다.

 

6) 합성자 속성만 사용하기
이벤트 처리를 주요 스레드(main-thread)에서 분리하여 페이지의 로딩 성능을 향상시킬 수 있습니다. 합성자 속성을 활용하면 웹 페이지의 애니메이션과 그래픽 처리가 주요 스레드에서 분리되어 별도의 합성자 스레드(compositor thread)에서 실행됩니다.

이를 통해 얻을 수 있는 이점은 다음과 같습니다.
▶ 주요 스레드 해방 : 합성자 속성을 사용하면 주요 스레드에서 애니메이션 및 그래픽 처리를 별도의 스레드에서 처리할 수 있으므로, 주요 스레드가 다른 중요한 작업에 집중할 수 있습니다. 이로써 웹 페이지의 반응성이 향상됩니다.
▶ 부드러운 애니메이션 : 합성자 속성을 사용하면 브라우저는 하드웨어 가속을 활용하여 애니메이션을 부드럽게 렌더링할 수 있습니다. 이로 인해 웹 페이지의 애니메이션은 끊김 없이 실행됩니다.
▶ 로딩 성능 향상 : 합성자 속성을 사용하면 페이지 로딩 시에도 웹 페이지의 성능이 향상됩니다. 특히 그래픽 요소나 애니메이션을 효율적으로 처리할 수 있어 초기 로딩 시에도 사용자 경험이 개선됩니다.
이 최적화에 대해 자세히 알아보려면 여기를 클릭하십시오.


7) Lazy Loading 사용
이미지, 비디오, 스크립트 등의 리소스를 지연 로딩하여 페이지 초기 로딩을 가볍게 유지하고, 사용자가 스크롤하거나 클릭할 때 리소스를 로드합니다.

8) HTTP/2 또는 HTTP/3 사용
현대적인 프로토콜을 사용하여 리소스 요청을 병렬로 처리하고, 다중 스트림을 지원하여 웹 페이지 로딩을 최적화합니다.