Learn Performance(web.dev)

✅ 웹 퍼포먼스란 무엇인가?

Web Performance는 웹 개발에서 가장 중요한 요소 중 하나입니다. 

웹 페이지가 얼마나 빠르게 로드되는지, 그리고 사용자의 입력에 얼마나 빠르게 반응하는지를 다룹니다.

 

웹 사이트의 퍼포먼스를 최적화한다는 것은, 사용자에게 더 나은 경험을 제공하는 것과 직결됩니다.

좋은 사용자 경험은 결국, 우리가 웹 사이트를 만들면서 세웠던 목표를 달성하는데 큰 도움이 됩니다.

 

✅ 웹 퍼포먼스는 왜 중요할까?

웹 퍼포먼스는 겉으로 보면 조금 전문적인 주제처럼 느껴질 수 있지만, 실제로는 폭넓고 또 깊이 있는 분야입니다.

그래서 웹 퍼포먼스를 배울 때는, 누구나 쉽게 다가갈 수 있으면서도, 동시에 중요한 내용은 놓치지 않는 방향으로 배워야 합니다.

이번에 소개하는 이 강좌는, 퍼포먼스의 기본 원리를 초보자도 이해할 수 있게 구성했습니다.

 

✅ Chapter 소개

이번 "Learn Performance" 강좌의 초기과정에서는 아래와 같은 내용들을 다룹니다:

 

Why speed matters

퍼포먼스를 배우기 전에, 먼저 퍼포먼스가 사용자 경험에서 어떤 역할을 하는지, 그리고 퍼포먼스가 어떻게 더 좋은 결과를 만들어내는지 이해할 필요가 있습니다.

해당 챕터에서는 이 주제들을 간단히 소개하는 것부터 시작합니다.

그리고 퍼포먼스를 공부하는 것이 왜 중요한지에 대한 핵심적인 배경 설명을 제공합니다.

 

General HTML performance considerations

모든 웹사이트는 HTML 문서를 요청하는 것에서 시작됩니다. 

그런데 이 첫 요청이, 웹 사이트 로딩 속도에 엄청난 영향을 미친다는 사실, 알고 있었나요?

해당 챕터에서는

• HTML 캐싱
• Parser Blocking
• Render Blocking

같은 핵심 개념들을 배웁니다.

그래서 우리가 웹 사이트를 만들 때, 첫 번째 HTML 요청이 빠르고 문제 없이 진행되도록 준비할 수 있게 도와줍니다.

 

Understanding the critical path

Critical Rendering Path는 웹 퍼포먼스(성능 최적화)에서 굉장히 중요한 개념입니다.

이 개념은, 웹 페이지가 브라우저에 처음으로 화면에 표시될 때까지 얼마나 빠르게 처리되느냐를 다룹니다.

 

해당 챕터에서는

• Critical rendering Path 이론
• Render-blocking Resources
• Parser-blocking Resources

주제를 배우게 됩니다.

이런 리소스들이 페이지 로딩 속도에 얼마나 큰 영향을 미치는지 이해하는 것이 핵십입니다.

 

Optimize resource loading

웹 페이지가 로드될 때, HTML 문서 안에는 다양한 리소스들이 함께 불러와집니다.

• CSS는 페이지의 디자인과 레이아웃을 담당하고
• Javascript는 페이지의 동작과 상호작용성을 담당합니다.

해당 챕터에서는 이런 리소스들이 페이지 로딩 속도에 어떤 영향을 미치는지 

그리고 리소스 로딩을 어떻게 최적화 할 수 있는지 알아봅니다.

 

Assist the browser with resource hints

Resource hints는 HTML에서 제공하는 특별한 기능입니다.

이 기능들을 사용하면, 브라우저가 리소스를 더 빠르게, 그리고 더 높은 우선순위로 가져올 수 있도록 도와줍니다.

해당 챕터에서는 페이지 로딩 속도를 한층 더 빠르게 만들어주는 Resource hints을 살펴봅니다.

 

Image performance

요즘 웹 페이지들은 이미지 파일이 전체 데이터 트래픽에서 큰 비중을 차지하고 있습니다.

해당 챕터에서는

• 이미지를 어떻게 최적화할지
• 사용자의 기기에 관계없이 낭비되는 데이터를 최소화면서 어떻게 이미지를 효율적으로 제공할지

에 대한 방법을 배웁니다.

 

Video performance

웹 페이지에서 비디오는 정말 자주 사용되는 미디어 타입입니다.

하지만, 비디오는 파일 크기가 크기 때문에, 효율적으로 제공하지 않으면 웹사이트 속도를 크게 떨어뜨릴 수 있습니다.

 

해당 챕터에서는

• 웹 사이트를 느려지지 않게 하면서 비디오를 삽입하는 방법
• 비디오 삽입 시 함께 고려해야 할 성능 최적화 포인트들

에 대해 배웁니다.

 

Optimize web fonts

웹 폰트(Web fonts)는 오늘날 웹사이트 디자인에 빠질 수 없는 요소입니다.

다른 리소스들로는 표현할 수 없는 스타일과 개성을 웹 폰트로 쉽게 추가할 수 있기 때문입니다.

 

하지만 주의해야 할 점이 있습니다.

웹 폰트는 사이트 로딩 속도에 영향을 줄 수 있습니다.

 

해당 챕터에서는

• 웹 폰트를 사용할 때 성능을 고려해야 하는 이유
• 웹 폰트 로딩을 최적화하는 다양한 방법들

에 대해 배웁니다.

 

Code-split JavaScript

웹 페이지를 처음 불러올 때, 모든 리소스가 처음부터 꼭 필요한 것은 아닙니다.

특히 자바스크립트(JavaScript)는 페이지가 완전히 로드된 후, 진짜 필요한 순간에만 불러오는 방식으로 최적화할 수 있습니다.(Code Splitting)

 

Code Splitting을 하면, 네트워크 대역폭을 절약할 수 있고, CPU가 한 번에 처리해야 할 양도 줄일 수 있습니다.

이렇게 되면 초기 페이지 로딩 속도가 빨라지고, 사용자 입력(클릭, 스크롤 등)에 대한 반응성도 훨씬 좋아집니다.

 

퍼포먼스를 높이려면 반드시 고려해야 할 중요한 기술입니다.

 

Lazy load images and <iframe> elements

이미지나 <iframe>은 페이지 안에서 많은 네트워크 대역폭과 CPU 처리 능력을 소모할 수 있습니다.

(특히 <iframe>은 유튜브 영상 같은 외부 콘텐츠를 불러올 때 더 무겁습니다.)

 

그런데 실제로는, 모든 이미지와 <iframe>을 처음부터 불러올 필요가 없습니다.

사용자가 스크롤을 내려서 해당 요소를 볼 것 같은 순간까지 로딩을 미루는 기술이 있습니다.

이를 Lazy Loading이라 부릅니다.

 

해당 챕터에서는

• 이미지와 <iframe> 요소를 필요할 때만 로드하는 방법
• 이를 통해 초기 페이지 로딩 속도를 크게 향상시키는 방법

에 대해 배웁니다.

 

Prefetching, prerendering, and service worker precaching

웹 퍼포먼스 최적화에서는 보통 불필요한 리소스를 제거하거나, 필요한 리소스만 빠르게 불러오는 방법을 고민합니다.

하지만 모순같게도 어떤 경우에는 아직 필요하지 않은 리소스라도 미리 불러오는 것이 성능에 도움이 될 수 있습니다.

 

해당 챕터에서는

• Prefetching
• Prerendering
• Service Worker Precaching 

기법을 다루면서, 미리 준비해두는 전략이 어떻게 페이지 성능을 더 끌어올릴 수 있는지 알아봅니다.

 

An overview of web workers

우리가 브라우저에서 보는 대부분의 동작은 메인 스레드(Main Thread)에서 이루어집니다.

그런데 복잡한 계산 작업까지 메인 스레드가 다 처리하게 되면, 

화면이 멈추거나 사용자 입력(클릭, 스크롤 등)에 반응이 느려질 수 있습니다.

 

이런 문제를 해결하기 위해, 새로운 스레드를 따로 만들어 무거운 계산을 맡길 수 있는데요, 이걸 가능하게 해주는 게 바로 Web Worker API입니다.

 

해당 챕터에서는

• Web Worker가 무엇인지
• 왜 필요한지
• 기본적으로 어떻게 사용하는지

를 배웁니다.

 

A concrete web worker use case

이제 Web Workder가 무엇인지, 어떤 기능과 한계가 있는지 기본적인 개념을 익혔습니다.

그렇다면 이제, Web Worker를 실제로 어떻게 활용할 수 있는지 구체적인 예시를 살펴볼 차례입니다.

 

이번 챕터에서는

• Web Workder를 이용해 JPEG 파일을 가져오고
• 그 안에서 메타데이터를 추출한 뒤
• 결과를 메인 스레드로 다시 전달해서 브라우저 화면에 결과를 표시하는 과정을 보여줍니다.

---

※ 출처

https://web.dev/learn/performance/welcome