프론트엔드 성능 예산: 글로벌 사용자를 위한 리소스 제약

오늘날의 디지털 환경에서 웹사이트 성능은 매우 중요합니다. 로딩이 느린 웹사이트는 사용자에게 불편을 주고, 참여도를 감소시키며, 궁극적으로는 수익 손실로 이어질 수 있습니다. 글로벌 사용자를 대상으로 하는 비즈니스의 경우, 다양한 지역의 각기 다른 네트워크 환경, 기기 성능, 사용자 기대치 때문에 프론트엔드 성능 최적화는 더욱 중요해집니다. 이 가이드에서는 리소스 제약에 특히 초점을 맞춰 프론트엔드 성능 예산의 개념을 살펴보고, 전 세계 사용자에게 최적의 경험을 제공하기 위한 실행 가능한 전략을 제공합니다.

프론트엔드 성능 예산이란 무엇인가?

프론트엔드 성능 예산은 웹사이트 로딩 시간과 전반적인 성능에 영향을 미치는 다양한 지표에 대해 미리 정해놓은 한도입니다. 이를 재정 예산과 비슷하게 생각할 수 있지만, 돈 대신 다음과 같은 리소스를 예산으로 책정합니다:

• 페이지 무게(Page Weight): 페이지에 있는 모든 자산(HTML, CSS, JavaScript, 이미지, 폰트 등)의 총 크기입니다.
• HTTP 요청 수: 브라우저가 페이지를 렌더링하기 위해 다운로드해야 하는 개별 파일의 수입니다.
• 로딩 시간(Load Time): 페이지가 상호작용 가능해지기까지 걸리는 시간입니다.
• 첫 바이트 수신 시간(TTFB): 브라우저가 서버로부터 데이터의 첫 바이트를 수신하는 데 걸리는 시간입니다.
• 최초 콘텐츠풀 페인트(FCP): 첫 번째 콘텐츠(텍스트, 이미지 등)가 화면에 그려지는 시간입니다.
• 최대 콘텐츠풀 페인트(LCP): 가장 큰 콘텐츠 요소(이미지, 비디오, 블록 레벨 텍스트 요소)가 화면에 그려지는 시간입니다.
• 누적 레이아웃 이동(CLS): 예상치 못한 레이아웃 이동을 정량화하여 페이지의 시각적 안정성을 측정합니다.
• JavaScript 실행 시간: 메인 스레드에서 JavaScript 코드를 실행하는 데 소요되는 시간입니다.

명확한 성능 예산을 설정하고 이 예산에 맞춰 웹사이트의 성능을 지속적으로 모니터링함으로써, 잠재적인 병목 현상이 사용자 경험에 부정적인 영향을 미치기 전에 사전에 파악하고 해결할 수 있습니다.

글로벌 사용자에게 리소스 제약이 중요한 이유

리소스 제약은 다음과 같은 요인에 의해 부과되는 제한을 의미합니다:

• 네트워크 환경: 전 세계적으로 인터넷 속도와 안정성은 상당히 다릅니다. 일부 지역의 사용자는 느린 2G 또는 3G 연결을 사용할 수 있는 반면, 다른 지역의 사용자는 고속 광섬유 인터넷을 즐깁니다.
• 기기 성능: 사용자들은 고사양 스마트폰부터 처리 능력과 메모리가 제한된 구형 기기까지 다양한 기기로 웹사이트에 접속합니다.
• 데이터 비용: 일부 지역에서는 모바일 데이터 요금이 비싸서 사용자들이 데이터 소비량에 매우 민감합니다.

이러한 리소스 제약을 무시하면 상당수 사용자에게 만족스럽지 못한 사용자 경험을 제공하게 될 수 있습니다. 예를 들어, 북미의 고속 연결 환경에서 빠르게 로딩되는 웹사이트가 동남아시아의 느린 모바일 연결 환경을 사용하는 사용자에게는 고통스러울 정도로 느릴 수 있습니다.

다음은 몇 가지 주요 고려 사항입니다:

• 큰 이미지 크기: 이미지는 종종 페이지 무게에 가장 큰 기여를 합니다. 최적화되지 않은 이미지를 제공하면 특히 느린 연결을 사용하는 사용자의 로딩 시간을 크게 증가시킬 수 있습니다.
• 과도한 JavaScript: 복잡한 JavaScript 코드는 특히 성능이 낮은 기기에서 다운로드, 파싱, 실행하는 데 오랜 시간이 걸릴 수 있습니다.
• 최적화되지 않은 CSS: 큰 CSS 파일 또한 로딩 시간에 영향을 줄 수 있습니다.
• 너무 많은 HTTP 요청: 각 HTTP 요청은 오버헤드를 추가하여 페이지 로딩을 느리게 만듭니다.
• 웹 폰트 로딩: 여러 웹 폰트를 다운로드하면 텍스트 렌더링이 크게 지연될 수 있습니다.

프론트엔드 성능 예산 설정: 글로벌 관점

현실적이고 효과적인 성능 예산을 설정하려면 대상 사용자와 그들의 특정 리소스 제약을 고려해야 합니다. 다음은 단계별 접근 방식입니다:

1. 사용자 이해하기

먼저 대상 사용자의 인구 통계, 지리적 위치 및 기기 사용 패턴을 이해하는 것부터 시작하세요. Google Analytics와 같은 분석 도구를 사용하여 다음에 대한 데이터를 수집하세요:

• 기기 유형: 사용자가 가장 많이 사용하는 기기(데스크탑, 모바일, 태블릿)를 파악합니다.
• 브라우저: 가장 인기 있는 브라우저를 결정합니다.
• 네트워크 속도: 여러 지리적 지역의 네트워크 속도를 분석합니다.

이 데이터는 지원해야 할 기기와 네트워크 환경의 범위를 이해하는 데 도움이 될 것입니다. 예를 들어, 사용자의 상당 부분이 남미의 3G 네트워크에서 구형 안드로이드 기기를 사용하고 있다면, 성능 최적화에 더 적극적이어야 합니다.

2. 성능 목표 정의하기

성능 목표는 무엇인가요? 특정 로딩 시간, FCP 또는 LCP를 달성하고 싶으신가요? 목표는 야심차면서도 달성 가능해야 하며, 사용자의 리소스 제약을 고려해야 합니다. 다음 일반적인 가이드라인을 고려해 보세요:

• 로딩 시간: 특히 모바일 기기에서 3초 이하의 페이지 로딩 시간을 목표로 합니다.
• FCP: 1초 이하의 FCP를 목표로 합니다.
• LCP: 2.5초 이하의 LCP를 목표로 합니다.
• CLS: CLS를 0.1 미만으로 유지합니다.
• 페이지 무게: 특히 모바일 사용자의 경우 총 페이지 무게를 2MB 미만으로 유지하려고 노력합니다.
• HTTP 요청 수: 가능한 한 HTTP 요청 수를 줄입니다.
• JavaScript 실행 시간: JavaScript 실행 시간을 최소화하여 0.5초 미만을 목표로 합니다.

3. 예산 값 설정하기

사용자 분석 및 성능 목표를 바탕으로 각 지표에 대한 구체적인 예산 값을 설정하세요. WebPageTest나 Google의 Lighthouse와 같은 도구를 사용하면 웹사이트의 현재 성능을 측정하고 개선이 필요한 부분을 파악하는 데 도움이 됩니다. 특정 콘텐츠와 기능에 따라 페이지 유형별(예: 홈페이지, 제품 페이지, 블로그 게시물)로 다른 예산을 만드는 것을 고려해 보세요.

예산 예시:

지표	예산 값
페이지 무게 (모바일)	< 1.5MB
페이지 무게 (데스크탑)	< 2.5MB
FCP	< 1.5초
LCP	< 2.5초
CLS	< 0.1
JavaScript 실행 시간	< 0.75초
HTTP 요청 수	< 50

이것들은 단지 예시일 뿐이며, 구체적인 예산 값은 개인의 필요와 상황에 따라 달라집니다. 처음에는 다소 여유로운 예산으로 시작한 다음 웹사이트를 최적화하면서 점차적으로 예산을 강화하는 것이 종종 유용합니다.

리소스 제약 최적화 전략

성능 예산을 설정했다면, 다음 단계는 웹사이트의 리소스를 최적화하고 그 한도 내에서 유지하기 위한 전략을 실행하는 것입니다. 다음은 몇 가지 효과적인 기법입니다:

1. 이미지 최적화

이미지는 종종 페이지 무게에 가장 큰 기여를 합니다. 특히 느린 연결을 사용하는 사용자를 위해 웹사이트 성능을 향상시키려면 이미지 최적화가 중요합니다.

• 올바른 포맷 선택: (지원되는 경우) JPEG 및 PNG에 비해 우수한 압축률과 품질을 제공하는 WebP를 사용하세요. 가능하면 더 나은 압축을 위해 AVIF를 사용하세요. 구형 브라우저를 위해 JPEG 및 PNG와 같은 대체 포맷을 제공하세요.
• 이미지 압축: TinyPNG, ImageOptim 또는 Squoosh와 같은 이미지 압축 도구를 사용하여 품질을 크게 저하시키지 않으면서 이미지 파일 크기를 줄이세요.
• 이미지 크기 조정: 올바른 크기로 이미지를 제공하세요. 200x200 픽셀로만 표시되는 이미지를 2000x2000 픽셀로 업로드하지 마세요.
• 지연 로딩(Lazy Loading) 사용: 이미지가 뷰포트에 보일 때만 로드하세요. 이는 초기 페이지 로딩 시간을 크게 줄일 수 있습니다. <img> 태그에 loading="lazy" 속성을 사용하세요.
• 반응형 이미지: <picture> 요소나 <img> 태그의 srcset 속성을 사용하여 사용자의 기기 및 화면 해상도에 따라 다른 크기의 이미지를 제공하세요. 이렇게 하면 모바일 기기 사용자가 불필요하게 큰 이미지를 다운로드하지 않도록 할 수 있습니다.
• 콘텐츠 전송 네트워크(CDN): CDN을 활용하여 사용자와 더 가까운 곳에 위치한 서버에서 이미지를 제공함으로써 지연 시간을 줄이세요.

예시: 전 세계 사용자에게 서비스를 제공하는 뉴스 웹사이트는 WebP를 지원하는 브라우저에는 WebP를 사용하고 구형 브라우저에는 JPEG를 사용할 수 있습니다. 또한 반응형 이미지를 구현하여 모바일 사용자에게 더 작은 이미지를 제공하고, 지연 로딩을 사용하여 화면 상단(above the fold)의 이미지에 우선순위를 둘 수 있습니다.

2. JavaScript 최적화

JavaScript는 특히 모바일 기기에서 웹사이트 성능에 상당한 영향을 미칠 수 있습니다. 다운로드 및 실행 시간을 최소화하도록 JavaScript 코드를 최적화하세요.

• 축소(Minify) 및 난독화(Uglify): JavaScript 코드에서 불필요한 문자(공백, 주석)를 제거하여 파일 크기를 줄이세요. 난독화는 변수 및 함수 이름을 짧게 만들어 파일 크기를 더욱 줄입니다. 이 목적으로 Terser와 같은 도구를 사용할 수 있습니다.
• 코드 분할(Code Splitting): JavaScript 코드를 더 작은 덩어리로 나누고 특정 페이지나 기능에 필요한 코드만 로드하세요. 이는 초기 다운로드 크기를 크게 줄일 수 있습니다.
• 트리 쉐이킹(Tree Shaking): JavaScript 번들에서 사용되지 않는 코드(데드 코드)를 제거하세요. Webpack 및 기타 번들러는 트리 쉐이킹을 지원합니다.
• 로딩 지연(Defer Loading): <script> 태그의 defer 또는 async 속성을 사용하여 중요하지 않은 JavaScript 코드를 비동기적으로 로드하세요. defer는 HTML 파싱이 끝난 후 스크립트를 순서대로 실행하고, async는 다운로드되는 즉시 스크립트를 실행합니다.
• 불필요한 라이브러리 제거: JavaScript 종속성을 평가하고 필수적이지 않은 라이브러리를 제거하세요. 더 작고 가벼운 대안을 사용하는 것을 고려하세요.
• 타사 스크립트 최적화: 타사 스크립트(예: 분석, 광고)는 웹사이트 성능에 상당한 영향을 미칠 수 있습니다. 비동기적으로 필요할 때만 로드하세요. 스크립트 관리 도구를 사용하여 타사 스크립트의 로딩을 제어하는 것을 고려하세요.

예시: 전자상거래 웹사이트는 코드 분할을 사용하여 사용자가 제품 상세 페이지를 방문할 때만 해당 페이지의 JavaScript 코드를 로드할 수 있습니다. 또한 라이브 채팅 위젯이나 A/B 테스트 도구와 같은 비필수 스크립트의 로딩을 지연시킬 수 있습니다.

3. CSS 최적화

JavaScript와 마찬가지로 CSS도 웹사이트 성능에 영향을 미칠 수 있습니다. 파일 크기를 최소화하고 렌더링 성능을 향상시키도록 CSS 코드를 최적화하세요.

• CSS 축소(Minify): CSS 코드에서 불필요한 문자를 제거하여 파일 크기를 줄이세요. 이 목적으로 CSSNano와 같은 도구를 사용할 수 있습니다.
• 사용하지 않는 CSS 제거: 웹사이트에서 사용되지 않는 CSS 규칙을 식별하고 제거하세요. UnCSS와 같은 도구가 사용하지 않는 CSS를 찾는 데 도움이 될 수 있습니다.
• 중요 CSS(Critical CSS): 화면 상단 콘텐츠를 렌더링하는 데 필요한 CSS 규칙을 추출하여 HTML에 직접 인라인하세요. 이렇게 하면 브라우저가 외부 CSS 파일 다운로드를 기다리지 않고 초기 콘텐츠를 렌더링할 수 있습니다. CriticalCSS와 같은 도구가 이 작업에 도움이 될 수 있습니다.
• CSS 표현식(Expressions) 피하기: CSS 표현식은 더 이상 사용되지 않으며 렌더링 성능에 상당한 영향을 미칠 수 있습니다.
• 효율적인 선택자 사용: 브라우저가 규칙을 요소와 일치시키는 데 소요되는 시간을 최소화하기 위해 구체적이고 효율적인 CSS 선택자를 사용하세요.

예시: 블로그는 중요 CSS를 사용하여 기사 제목과 첫 단락을 렌더링하는 데 필요한 스타일을 인라인하여 이 콘텐츠가 빠르게 표시되도록 할 수 있습니다. 또한 테마에서 사용하지 않는 CSS 규칙을 제거하여 전체 CSS 파일 크기를 줄일 수 있습니다.

4. 폰트 최적화

웹 폰트는 웹사이트의 시각적 매력을 높일 수 있지만, 올바르게 최적화되지 않으면 성능에 영향을 줄 수 있습니다.

• 웹 폰트 포맷 현명하게 사용하기: 최신 브라우저에는 WOFF2를 사용하세요. WOFF는 좋은 대체재입니다. 가능하다면 EOT나 TTF와 같은 구형 포맷은 피하세요.
• 폰트 서브셋팅(Subsetting): 웹사이트에서 실제로 사용되는 문자만 포함시키세요. 이렇게 하면 폰트 파일 크기를 크게 줄일 수 있습니다. Google Webfonts Helper와 같은 도구가 서브셋팅에 도움이 될 수 있습니다.
• 폰트 미리 로드(Preload): <link rel="preload"> 태그를 사용하여 폰트를 미리 로드하여 브라우저가 렌더링 과정 초기에 폰트를 다운로드하도록 지시하세요.
• font-display 사용: font-display 속성은 폰트가 로딩되는 동안 어떻게 표시될지를 제어합니다. 렌더링 차단을 방지하기 위해 swap, fallback 또는 optional과 같은 값을 사용하세요. swap은 폰트가 로드될 때까지 대체 텍스트를 표시하므로 일반적으로 권장됩니다.
• 폰트 수 제한: 너무 많은 다른 폰트를 사용하면 성능에 부정적인 영향을 미칠 수 있습니다. 적은 수의 폰트를 고수하고 웹사이트 전체에서 일관되게 사용하세요.

예시: 사용자 지정 폰트를 사용하는 여행 웹사이트는 브랜딩 및 웹사이트 텍스트에 필요한 문자만 포함하도록 폰트를 서브셋팅할 수 있습니다. 또한 폰트를 미리 로드하고 font-display: swap을 사용하여 폰트가 아직 로드되지 않았더라도 텍스트가 빠르게 표시되도록 할 수 있습니다.

5. HTTP 요청 최적화

각 HTTP 요청은 오버헤드를 추가하므로 요청 수를 줄이면 웹사이트 성능을 크게 향상시킬 수 있습니다.

• 파일 결합: 여러 CSS 및 JavaScript 파일을 단일 파일로 결합하여 요청 수를 줄이세요. Webpack이나 Parcel과 같은 번들러가 이 과정을 자동화할 수 있습니다.
• CSS 스프라이트(Sprites) 사용: 여러 개의 작은 이미지를 단일 이미지 스프라이트로 결합하고 CSS를 사용하여 스프라이트의 적절한 부분을 표시하세요. 이는 이미지 요청 수를 줄입니다.
• 작은 자산 인라인(Inline): 작은 CSS 및 JavaScript 코드를 HTML에 직접 인라인하여 별도의 요청 필요성을 없애세요.
• HTTP/2 또는 HTTP/3 사용: HTTP/2 및 HTTP/3는 단일 연결을 통해 여러 요청을 할 수 있게 하여 오버헤드를 줄입니다. 서버가 이러한 프로토콜을 지원하는지 확인하세요.
• 브라우저 캐싱 활용: 정적 자산에 대해 적절한 캐시 헤더를 설정하도록 서버를 구성하세요. 이렇게 하면 브라우저가 이러한 자산을 캐시하여 후속 방문 시 요청 수를 줄일 수 있습니다.

예시: 마케팅 웹사이트는 Webpack을 사용하여 모든 CSS 및 JavaScript 파일을 단일 번들로 결합할 수 있습니다. 또한 CSS 스프라이트를 사용하여 작은 아이콘들을 단일 이미지로 결합하여 이미지 요청 수를 줄일 수 있습니다.

성능 예산 모니터링 및 유지 관리

성능 예산을 설정하는 것은 일회성 작업이 아닙니다. 웹사이트의 성능을 예산에 맞춰 지속적으로 모니터링하고 필요에 따라 조정해야 합니다.

• 성능 모니터링 도구 사용: WebPageTest, Google의 Lighthouse 및 GTmetrix와 같은 도구를 사용하여 웹사이트의 성능을 정기적으로 모니터링하고 개선할 부분을 찾으세요.
• 자동화된 성능 테스트 설정: 개발 워크플로우에 성능 테스트를 통합하여 성능 저하를 조기에 발견하세요. 이 목적으로 Sitespeed.io나 SpeedCurve와 같은 도구를 사용할 수 있습니다.
• 핵심 지표 추적: 로딩 시간, FCP, LCP, CLS와 같은 핵심 성능 지표를 시간 경과에 따라 모니터링하세요.
• 정기적으로 예산 검토 및 조정: 웹사이트가 발전함에 따라 성능 예산을 조정해야 할 수도 있습니다. 정기적으로 예산을 검토하고 사용자의 요구와 성능 목표에 따라 변경하세요.

결론

잘 정의되고 일관되게 시행되는 프론트엔드 성능 예산은 글로벌 사용자에게 최적의 사용자 경험을 제공하는 데 필수적입니다. 다른 지역의 사용자가 직면한 리소스 제약을 이해하고 그에 따라 웹사이트의 리소스를 최적화함으로써 웹사이트 성능을 향상시키고, 사용자 참여를 높이며, 비즈니스 목표를 달성할 수 있습니다. 웹사이트의 성능을 지속적으로 모니터링하고 필요에 따라 예산을 조정하여 전 세계 사용자에게 항상 최상의 경험을 제공하고 있는지 확인하는 것을 잊지 마세요. 이미지 최적화, JavaScript 최적화, CSS 최적화 및 폰트 최적화를 우선순위에 두세요. 일관되고 최적화된 성능 수준을 유지하기 위해 도구와 자동화된 프로세스를 활용하세요.