[03-04] 브라우저 추천 예산

[chouung]

The Performance Inequality Gap, 2024

💫 브라우저의 예산에 대한 알렉스 러셀의 이야기

• 7부작 시리즈 The Performance Inequality Gap, 2024 - Infrequently Noted 중 7부에서 중 일부 내용
• 아래로 갈수록 하드웨어 관련한 얘기가 많아서, 중반까지의 브라우저 예산 관련 글을 정리해보았습니다.

The Budget, 2024

• P75 네트워크 상에서 5초 미만의 첫 로딩에 대해 두가지 기준 수치가 제시된다.
  • Javascript-heavy : 자바스크립트가 많은 콘텐츠용
  • Markup-heavy : 마크업 중심 스택용
• 현재 인기 있는 프레임워크 중 일부는 성능을 주요 기능으로 홍보하고 있지만, 이 프레임워크들이 항상 최적의 성능을 보장하지는 않는다.

Javascript-heavy

• 대부분의 사이트는 자바스크립트로 가득 차 있다. 이러한 사이트의 경우 클라이언트에서 자바스크립트를 실행하는데 드는 막대한 비용을 고려해야 한다.
• HTML, CSS, 이미지, 글꼴은 모두 저사양 하드웨어도 실시간에 가까운 속도로 파싱하고 실행할 수 있지만 JavaScript는 바이트 단위로 최소 3배 이상 더 비싸다.
• 웹 개발자는 사용자 경험을 최적화하기 위해 자바스크립트 사용을 신중히 고려해야 한다.

성능 예산

• 대표적으로 느린 두 대의 디바이스를 타겟팅
• P75 네트워크 상에서 두 개의 연결을 사용하여 웹 페이지를 로드

5초 : 1.3MiB 미만

• 650KiB의 HTML, CSS, 이미지 및 글꼴
• 650KiB의 자바스크립트

3초 : 730KiB 미만

• 650KiB의 HTML, CSS, 이미지 및 글꼴
• 650KiB의 자바스크립트

Markup-heavy

• CSS의 복잡성과 제대로 로드되지 않은 글꼴로 인해 빠른 콘텐츠의 로딩 속도가 느려질 수 있다.

성능 예산

• 대표적으로 느린 두 대의 디바이스를 타겟팅
• P75 네트워크 상에서 두 개의 연결을 사용하여 웹 페이지를 로드

5초 : 2.5MiB 미만

• 2.4MiB의 HTML, CSS, 이미지, 글꼴
• 100KiB의 자바스크립트

3초 : 1.4MiB 미만

• 1.325MiB의 HTML, CSS 등 및
• 75KiB의 자바스크립트

[mingnuj]

성능을 홍보로 이용한 것만 알다 보니 js가 빠른줄만 알았는데 신기하군요..

[chouung]

성능을 홍보로 이용한 것만 알다 보니 js가 빠른줄만 알았는데 신기하군요..

저도 번들사이즈로 인한 성능 이슈 정도로만 생각하고 있었는데 파싱&실행 자체가 저렇게 느린건 몰랐어요 🫨

[snaag]

제 한달 예산도 추천해주세요

[chouung]

제 한달 예산도 추천해주세요

@snaag 20만원

[snaag]

@chouung 자기가쓰는거아니라고 넘하시넹.......,