웹 성능은 웹 개발에서 중요한 측면으로, 페이지가 로드되는 속도뿐 아니라 사용자 입력에 얼마나 반응하는지에 초점을 맞춥니다. 성능을 위해 웹사이트를 최적화하면 사용자에게 더 나은 경험을 제공할 수 있습니다. 사용자 환경을 개선하면 웹사이트의 목표를 달성하는 데 큰 도움이 됩니다.
웹 성능은 틈새 주제처럼 보일 수 있지만 실제로는 광범위하면서도 상당히 심층적인 주제입니다. 웹 성능에 관한 과정은 매우 깊이있기 때문에 접근하기 쉬우면서도 유익해야 합니다. 이 과정의 최초 출시에서는 초보자에게 유익한 웹 성능 기본 사항에 중점을 둡니다.
이 시리즈의 각 모듈은 가능한 경우 각 모듈의 콘텐츠를 보완하고 주요 성능 개념을 보여주는 데모 세트를 제공하는 것을 목표로 합니다. 이 과정은 초기 과정이므로 현재 향후 몇 달 내에 추가 모듈이 게시될 예정입니다.
실적 학습의 초기 과정에서 제공되는 내용은 다음과 같습니다.
속도가 중요한 이유
학습 성능을 시작하기 전에 먼저 사용자 환경에서의 역할과 이러한 성능이 사용자에게 더 나은 결과를 가져올 수 있는 방식을 이해해야 합니다. 이 과정에서는 먼저 이러한 주제에 관한 간단한 소개를 통해 성능을 배우는 것이 중요한 이유를 설명합니다.
일반적인 HTML 성능 고려사항
모든 웹사이트는 HTML 문서 요청으로 시작되며, 해당 요청은 웹사이트 로드 속도에 중요한 역할을 합니다. 이 모듈에서는 HTML 캐싱, 파서 차단, 렌더링 차단과 같은 중요한 개념을 다루므로, 웹사이트의 HTML을 처음 요청하는 것이 순조롭게 진행될 수 있습니다.
핵심 경로 이해
핵심 렌더링 경로는 페이지의 초기 렌더링이 브라우저에 표시되는 속도를 다루는 웹 성능의 개념입니다. 이 모듈에서는 렌더링 차단 및 파서 차단 리소스와 같은 개념 및 페이지가 브라우저에 표시되는 속도에 중요한 역할을 하는 방법을 다루며 핵심 렌더링 경로의 이론을 살펴봅니다.
리소스 로드 최적화
페이지가 로드될 때 여러 리소스가 HTML 내에서 참조되며, 이 리소스는 CSS를 통한 페이지의 모양과 레이아웃 및 자바스크립트를 통한 상호작용 기능을 제공합니다. 이 모듈에서는 이러한 리소스와 관련된 중요한 개념과 이러한 리소스가 페이지 로드 시간에 미치는 영향을 다룹니다.
리소스 힌트로 브라우저 지원
리소스 힌트는 HTML에서 제공되는 기능 모음으로, 브라우저가 리소스를 더 일찍 로드하거나 리소스 우선순위가 더 높은 경우에도 도움을 줄 수 있습니다. 이 모듈에서는 페이지 로드 속도를 높이는 데 도움이 되는 몇 가지 리소스 힌트를 다룹니다.
이미지 성능
이미지는 오늘날 많은 웹페이지에서 전송되는 데이터의 상당 부분을 차지합니다. 이 모듈에서는 사용자 기기에 관계없이 이미지를 최적화하고 효율적으로 제공하여 바이트 낭비를 최소화하는 방법을 다룹니다.
동영상 실적
동영상은 웹페이지에서 자주 사용되는 미디어 유형이지만, 효율적으로 제공하는 방법을 아는 것도 간과해서는 안 되는 성능 측면 중 하나입니다. 이 모듈에서는 웹사이트를 빠르게 유지하는 방식으로 동영상을 임베딩하는 몇 가지 주요 기술과 사용 시 발생할 수 있는 인접 성능 고려사항에 대해 다룹니다.
웹 글꼴 최적화
웹 글꼴은 웹에서 흔히 사용되는 리소스로, 다른 리소스는 할 수 없는 방식으로 웹사이트 디자인에 추가하므로 당연합니다. 그렇더라도, 웹 글꼴은 여전히 성능 비용이 발생합니다. 이 모듈에서는 웹 글꼴과 관련된 여러 성능 고려사항과 기술을 살펴봅니다.
코드 분할 자바스크립트
일부 리소스는 웹페이지의 초기 로드에 중요하지 않습니다. JavaScript는 코드 분할이라는 기법을 통해 필요한 시점까지 지연할 수 있는 리소스 중 하나입니다. 이렇게 하면 시작 시 초기 페이지 로드 속도와 입력 반응성을 모두 개선하기 위한 중요한 고려사항인 대역폭과 CPU 경합을 줄여 성능을 개선할 수 있습니다.
이미지 및 <iframe> 요소 지연 로드
이미지와 <iframe> 요소는 상당한 대역폭과 CPU 처리 시간을 소비할 수 있습니다. 그러나 초기 페이지 로드 중에 모든 이미지와 <iframe> 요소를 로드할 필요는 없으며, 사용자가 이미지를 볼 가능성이 가장 높은 이후로 연기할 수 있습니다. 이 기법을 지연 로드라고 합니다. 이 모듈에서는 페이지를 더 빠르게 로드하고 필요할 때만 대역폭과 처리 시간을 소비할 수 있도록 이미지 지연 로드와 <iframe> 요소를 설명합니다.
미리 가져오기, 사전 렌더링, 서비스 워커 사전 캐싱
대부분의 성능은 불필요한 리소스를 최적화하고 제거하기 위해 할 수 있는 작업을 처리하지만 일부 리소스가 필요하기 전에 로드되어야 한다고 제안하는 것은 약간 역설적으로 보일 수 있습니다. 하지만 특정 리소스를 미리 로드하는 것이 적절한 경우도 있습니다. 이 모듈에서는 미리 가져오기, 사전 렌더링, 서비스 워커 사전 캐싱을 설명하면서 이러한 성능 측면을 살펴봅니다.
웹 작업자 개요
사용자가 브라우저에서 보는 대부분의 내용은 기본 스레드라고 하는 단일 스레드에서 발생합니다. 그러나 기본 스레드에서 사용자에게 표시되는 중요한 작업을 수용할 수 있도록 새 스레드를 시작하여 계산 비용이 많이 드는 작업을 실행할 수 있는 경우가 있습니다. 이를 수행하는 API를 Web Worker API라고 하며 이 모듈에서는 기본 사항을 다룹니다.
구체적인 웹 작업자 사용 사례
이제 웹 작업자와 웹 작업자의 기능 및 제한사항을 기본적으로 이해했으므로 웹 작업자의 구체적인 사용 사례를 살펴보겠습니다. 이 데모에서는 사용자가 브라우저에서 볼 수 있도록 웹 작업자를 사용하여 JPEG 파일을 가져오고 메타데이터를 추출한 후 기본 스레드로 다시 보냅니다.
웹 성능 학습을 시작할 준비가 되셨나요? 먼저 속도가 중요한 이유를 읽어 보세요.