Section 30: Performance Optimization - Start Fast, Stay Fast

The goals

💪🏻What is "Performance"?

✌🏻Measuring & Analyzing Performance

👍🏻Optimization Ideas

👊🏻Further Resources

 

 

insertAdjacentElement

 

 

 

jsperf

 

 

서버 측 성능 최적화

이 강의 섹션에서는 JavaScript 성능에 대해 배웠습니다.

웹 사이트의 전반적인 성능이 중요한 것은 JavaScript만이 아닙니다. 다른 클라이언트 측 최적화(예: CSS, 이미지 => 참조: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency) 외에도 서버 측 성능을 개선시킬 수 있습니다.

서버 측(예: NodeJS)에서 코드를 실행하는 것도 중요하지만 서버 구성도 중요합니다.

특히 다음과 같은 세 가지 주요 개선 영역을 살펴볼 수 있습니다.

• 제공된 자산의 압축
• 캐싱(클라이언트 측 및 서버 측)
• HTTP/2

압축

압축은 정적 자산(CSS, JS, 이미지)을 제공하기 전에 압축하는 겁니다. 최신 브라우저는 이러한 파일의 압축을 푸는 방법을 알고 있고 자동으로 압축을 풉니다. 압축된 자산이 전송되기 때문에 서버에서 클라이언트로 전송되는 데이터가 더 적어집니다 => 로딩 시간이 더 빨라집니다.

압축을 설정하는 방법은 사용 중인 서버/서비스에 따라 다릅니다. 가령 Firebase에서 정적 자산은 자동으로 압축됩니다.

자체 NodeJS 서버 측 코드가 있는 경우 정적 자산이 압축되었는지 수동으로 확인해야 합니다(https://github.com/expressjs/compression).

캐싱

캐싱은 복잡한 주제입니다 - 재사용할 수 있도록 데이터나 파일을 저장하는 것이고, 다양한 수준에서 수행할 수 있습니다.

예를 들어 브라우저는 제공 호스트(https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control)에서 설정한 캐싱 헤더를 기반으로 자동으로 파일(예: JS 파일)을 캐시합니다. 따라서 서버 측 구성에서 이러한 헤더를 제어하면 브라우저가 이러한 파일을 캐시하는 방법을 제어할 수 있습니다. 이렇게 하면 불필요한 데이터 전송을 피할 수 있지만 사이트 방문자가 중요한 업데이트를 놓치지는 않도록 해야 합니다.

서버 측 캐싱은 동일한 데이터를 요청하는 여러 요청이 캐시된 데이터를 가져올 수 있도록 서버에서 작업하는 데이터(예: 데이터베이스에서 가져온 데이터)를 저장하는 겁니다.

이 링크에서 캐싱에 대해 더 자세히 알아볼 수 있습니다. https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching

이 링크에서도요. https://wp-rocket.me/blog/different-types-of-caching/

HTTP/2

HTTP/2는 Http 프로토콜의 최신 "형식"이고 HTTP 1과는 달리 "서버 푸시"를 허용합니다. 이는 서버가 (클라이언트가 요청하기를 기다리는 대신) 필요한 자산/파일을 클라이언트에 능동적으로 푸시할 수 있음을 의미합니다.

더 자세한 설명은 이 링크에서 확인해 주세요. https://developers.google.com/web/fundamentals/performance/http2

 

 

 

Sources

https://web.dev/optimize-javascript-execution/

Optimize JavaScript execution

https://developer.chrome.com/docs/devtools/

Chrome DevTools - Chrome Developers

https://github.com/jsperf/jsperf.com

GitHub - jsperf/jsperf.com: jsperf.com v2. https://github.com/h5bp/lazyweb-requests/issues/174

https://www.breck-mckye.com/blog/2014/08/using-jsperf-a-how-to-guide/

Using jsPerf: a how-to guide