웹 성능

대기 시간(Latency) 이해하기

대기 시간(Latency) 이란 하나의 데이터 패킷이 출발지에서 도착지까지 가는 데 걸리는 시간을 뜻합니다. 성능 최적화에 있어서 대기 시간의 원인을 줄이는 것과 연결 상태가 좋지 않은 사용자를 고려하여 대기 시간이 긴 환경에서 사이트 성능을 테스트하는 것은 중요합니다. 이 글에서 대기 시간이 무엇인지, 대기 시간이 성능에 어떤 영향을 주는지, 이를 어떻게 측정하고 어떤 방법으로 줄일 수 있을지에 관해 설명합니다.

웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가

사용자는 로드가 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹 경험을 원합니다. 따라서 개발자는 이 두 가지 목표를 달성하기 위해서 부단히 노력해야합니다.

중요 렌더링 경로

중요 렌더링 경로 (Critical Rendering Path)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킵니다. 중요 렌더링 경로는 Document Object Model (DOM), CSS Object Model (CSSOM), 렌더 트리 그리고 레이아웃을 포함합니다.

지연 로딩

지연 로딩은 리소스를 논 블로킹(중요하지 않음)으로 식별하여 필요할 때만 로드하는 전략입니다. 이는 중요 렌더링 경로의 길이를 단축하는 방법으로, 페이지 로드 시간을 감소시킬 수 있습니다.

MDN의 웹 성능 학습 안내서에는 웹 성능의 필수 개념들에 대한 최신 튜토리얼들이 있습니다. 웹 성능의 세계에 막 발을 들여놓았다면 여기에서 시작하세요.

웹 성능: 개요

본격적으로 웹 성능에 대해 배우기 전 내용을 전반적으로 살펴봅니다. 여기에서 여정을 시작하세요.

웹 성능이란 무엇인가?

이 글에서는 성능이란 어떤 것인지에 대해 자세히 살펴보면서 전체 모듈을 시작합니다. 성능에 관해 생각할 때 고려해야 할 도구나 지표, API, 네트워크, 사용자 그룹, 그리고 성능을 웹 개발 과정의 일부로 포함시키는 방법에 대해 다룹니다.

사용자는 성능을 어떻게 인지하는가?

웹사이트를 사용자가 주관적으로 얼마나 빠르다고 인식하는지가 실제 몇 ms 단위로 빠른지보다 중요합니다. 사용자의 주관적 인식은 실제 페이지 로딩 시간, 유휴 시간, 사용자의 상호작용에 대한 응답성, 스크롤 및 기타 애니메이션들이 얼마나 부드러운가에 의해 영향을 받습니다. 이 글에서는 로딩과 관련된 다양한 지표, 애니메이션, 응답성 지표에 대해 논의하고 실제 타이밍과 일치하지 않더라도 주관적 인식을 개선할 수 있는 모범 사례들을 살펴봅니다.

웹 성능 기초

HTML, CSS, JavaScript, 미디어 파일 등의 프론트엔드 구성 요소뿐만 아니라 어플리케이션을 느리게 만들 수 있는 기능들과 주관적, 객관적으로 빠르게 만들 수 있는 기능들이 있습니다. 웹 성능과 관련된 API, 개발자 도구, 모범 사례, 안 좋은 사례를 여럿 소개합니다. 이 글에서는 그런 기능들을 기본적인 수준으로 다루면서 각 주제별로 성능을 개선하기 위해 더 깊게 살펴볼 수 있는 링크를 제공합니다.

HTML과 웹 성능

마크업의 순서나 속성들이 웹사이트의 성능에 영향을 미칠 수 있습니다. DOM 노드의 개수를 최소화하고 스타일과 스크립트, 미디어와 써드파티 스크립트 등을 포함할 때의 순서와 속성을 최적화하여 사용자 경험을 크게 개선할 수 있습니다. 이 글에서는 최고의 성능을 끌어내려면 HTML을 어떻게 사용해야 하는지를 다룹니다.

멀티미디어: 이미지와 비디오

많은 경우 웹 성능을 개선하는 가장 쉬운 방법은 미디어 최적화입니다. 사용자 에이전트의 기능, 크기, 픽셀 밀도를 고려해 제각기 다른 미디어 파일을 제공할 수 있습니다. 배경의 비디오에서 오디오 트랙을 없애는 것과 같은 팁을 추가로 활용하면 더 성능을 개선할 수 있습니다. 이 글에서는 비디오, 오디오, 이미지 콘텐트가 성능에 어떻게 영향을 미치는지, 그리고 어떻게 그런 영향을 최소화할 수 있는지 살펴봅니다.

CSS와 웹 성능

성능 개선 시 CSS 최적화는 상대적으로 중요하지 않습니다. 하지만 다른 CSS 기능보다 성능에 많은 영향을 끼치는 기능들이 몇 가지 있습니다. 이 글에서는 성능에 영향을 미치는 CSS 속성을 살펴보고 성능에 부정적인 영향을 주지 않도록 스타일을 다루는 방법을 제안합니다.

웹 성능을 높이는 JavaScript 모범 사례

JavaScript는 올바르게 사용할 경우 상호작용이 가능한 몰입감 있는 웹 경험을 제공합니다. 그러나 그렇지 않을 경우 다운로드 시간과 렌더링 시간, 인앱 성능, 배터리 수명, 사용자 경험을 크게 저하시킬 수도 있습니다. 이 글은 복잡한 컨텐츠이더라도 성능을 최대한으로 발휘할 수 있도록 고려해야 하는 JavaScript 모범 사례들에 대해 소개합니다.

모바일 환경에서의 웹 성능

모바일 기기로 웹에 접속하는 것이 대중화되면서, 모든 모바일 플랫폼은 완전한 기능을 갖춘 웹 브라우저를 탑재하게 되었습니다. 그러나 여전히 대역폭과 CPU, 배터리 수명이 제한적이기 때문에 모바일 플랫폼에서의 웹 컨텐츠의 성능을 고려해야 합니다. 이 글에서는 모바일 환경에 특화된 고려 사항을 살펴봅니다.

Performance API

이 안내서는 High-Resolution Time 기준에 정의된 Performance 인터페이스를 어떻게 사용하는지 설명합니다.

Resource Timing API

Resource loading and timing 리소스를 로딩하고, 리소스 버퍼와 CORS에 대응하는 법을 다룹니다.

The performance timeline

Performance Timeline 기준은 Performance 인터페이스의 확장으로, 클라이언트 차원의 대기 시간을 어플리케이션 내부에서 측정할 수 있도록 돕습니다. 두 인터페이스를 함께 사용하여 어플리케이션의 어떤 지점이 성능에 병목 현상을 일으키는지 찾을 수 있습니다.

User Timing API

user timing API의 "mark"와 "measure" 타입을 활용하여 어플리케이션에 특화된 타임스탬프를 만들어 보세요. 이들은 브라우저의 Performance timeline의 일부가 됩니다.

Beacon API

Beacon 인터페이스는 비동기적이고 차단되지 않는 요청을 웹 서버에 보내도록 예약합니다.

Intersection Observer API

Intersection Observer API를 활용하여 요소가 보이는 시간을 지정하고 관심 요소가 보일 때 비동기적으로 알림을 받으세요.

성능과 관련된 Firefox Profiler 기능

이 웹사이트는 개발자 도구의 성능 관련 기능들이 무엇인지, 그리고 어떻게 사용하는지에 대한 정보를 제공합니다. Call Tree, Flame Graph, Stack Chart, Marker Chart, Network Chart 등에 대한 정보가 있습니다.

내장 profiler 사용하기

Firefox의 내장 profiler를 사용하여 앱 성능을 측정하는 법을 배웁니다.

• Beacon
• Brotli compression
• Client hints
• Code splitting
• CSSOM
• Domain sharding
• Effective connection type
• First contentful paint
• First CPU idle
• First input delay
• First interactive
• First meaningful paint
• First paint
• HTTP
• HTTP/2
• Jank
• Latency
• Lazy load
• Long task
• Lossless compression
• Lossy compression
• Main thread
• Minification
• Network throttling
• Packet
• Page load time
• Page prediction
• Parse
• Perceived performance
• Prefetch
• Prerender
• QUIC
• RAIL
• Real User Monitoring
• Resource Timing
• Round Trip Time (RTT)
• Server Timing
• Speculative parsing
• Speed index
• SSL
• Synthetic monitoring
• TCP handshake
• TCP slow start
• Time to first byte
• Time to interactive
• TLS
• Transmission Control Protocol (TCP)
• Tree shaking
• Web performance

HTML

• <picture> 요소

• <video> 요소

• <source> 요소

• <img> srcset 요소

  • 반응형 이미지

• rel="preload"를 사용해 콘텐츠 미리 불러오기 - https://w3c.github.io/preload/

CSS

• will-change
• GPU v CPU
• Measuring layout
• Font-loading best practices

JavaScript

• DOMContentLoaded
• Garbage collection
• requestAnimationFrame

API

• Performance API

• Navigation Timing API

• Media Capabilities API

• Network Information API

• PerformanceNavigationTiming

• Battery Status API

• Navigator.deviceMemory

• Intersection Observer

• Using the User Timing API

• Long Tasks API

• High Resolution Timing API (https://w3c.github.io/hr-time/)

• Resource Timing API

• Page Visibility

• Cooperative Scheduling of Background Tasks API

  • requestIdleCallback()

• Beacon API

• Resource Hints - dns-prefetch, preconnect, prefetch, and prerender

• FetchEvent.preloadResponse

• Performance Server Timing API

헤더

• Content-encoding
• HTTP/2
• gZip
• Client Hints

도구

• Performance in Firefox Developer Tools

추가 지표

• Speed Index and Perceptual Speed Index

모범 사례

• Using Service Workers

• Using Web Workers

  • Web Workers API

• PWA

• Caching

• Content Delivery Networks (CDN)