웹 성능 이해의 첫걸음(네트워킹과 웹 성능 최적화 기법)

웹 성능 이해의 첫걸음

웹 성능 이해의 첫걸음

웹 성능 이해의 첫걸음은 웹 페이지가 어떻게 작동하고 로드되는지 이해하는 것입니다. 

웹 성능은 사용자가 웹 페이지를 요청했을 때부터 페이지가 완전히 로드되고 

사용 가능한 상태가 될 때까지의 시간을 의미합니다.

 

웹 성능 이해와 단계

 

브라우저의 동작 이해:
사용자가 웹 페이지에 접속하면 브라우저가 웹 페이지의 HTML, CSS, JavaScript 등의 리소스를 

서버에서 다운로드합니다.
브라우저는 HTML 문서를 파싱하고 DOM(Document Object Model)을 생성합니다. 

이는 웹 페이지의 구조를 표현하는 트리 구조입니다.
CSS 파일을 다운로드하고 파싱하여 스타일 규칙을 적용하고, 

JavaScript 코드를 실행하여 페이지를 동적으로 만듭니다.

네트워크 지연 이해:
웹 페이지의 성능은 네트워크 지연에 크게 영향을 받습니다. 

사용자와 서버 간의 데이터 전송 시간이 길면 페이지 로딩 시간이 늘어납니다.
네트워크 지연은 DNS 조회, TCP 연결 설정, SSL 핸드셰이크, 

데이터 전송 등의 단계에서 발생할 수 있습니다.

HTTP 요청과 응답:
브라우저는 서버로부터 HTML, CSS, JavaScript, 이미지 등의 리소스를 요청하고 받습니다. 

이러한 요청과 응답의 수가 많으면 페이지 로딩 시간이 증가할 수 있습니다.
최적화된 리소스 요청과 압축된 응답은 웹 성능 향상에 기여할 수 있습니다.

캐싱의 활용:
브라우저는 이전에 다운로드한 리소스를 캐싱하여 저장하고, 동일한 페이지를 방문할 때 재사용합니다. 

이를 통해 필요한 리소스를 다시 다운로드할 필요가 없어지며 로딩 시간이 단축됩니다.

이미지 및 다른 리소스 최적화:
큰 크기의 이미지나 불필요한 리소스는 페이지 로딩 속도를 늦출 수 있습니다. 

이미지를 압축하고 필요한 만큼만 사용하도록 최적화하는 것이 중요합니다.

자바스크립트 최적화:
자바스크립트는 웹 페이지의 동적인 부분을 담당하므로 최적화가 필요합니다. 

비동기적으로 스크립트를 로드하거나, 

스크립트를 압축하고 불필요한 작업을 최소화하여 성능을 향상시킬 수 있습니다.

모바일 환경 고려:
모바일 장치에서의 웹 사용이 증가함에 따라 모바일 환경에서의 성능 최적화도 고려되어야 합니다. 

모바일 기기의 제약사항과 느린 네트워크 속도를 고려하여 웹 페이지를 최적화합니다.
웹 성능 이해의 첫걸음은 이러한 다양한 측면을 고려하여 웹 페이지의 로딩 및 

사용성을 최적화하는 것입니다. 

이를 통해 사용자는 빠르게 웹 페이지를 이용할 수 있고, 좋은 사용자 경험을 얻을 수 있게 됩니다.

웹 성능 주요 요소

 

웹 성능은 사용자가 웹 페이지를 요청했을 때부터 해당 페이지가 완전히 로드되어 활동 가능한 상태가 될 때까지 걸리는 시간과 사용자 경험의 품질을 나타내는 개념입니다. 

웹 성능은 여러 측면에서 평가되며, 주요 요소들은 다음과 같습니다.

로딩 시간 (Loading Time): 

웹 페이지가 얼마나 빨리 로드되는지가 중요합니다. 

빠른 로딩은 사용자가 기다리지 않고 콘텐츠에 빠르게 액세스할 수 있게 합니다.

응답 시간 (Response Time): 

사용자가 웹 페이지와 상호작용할 때 서버가 얼마나 빠르게 응답하는지가 중요합니다. 

빠른 응답 시간은 사용자 경험을 향상시킵니다.

페이지의 완전성 (Page Completeness): 

웹 페이지가 모든 필수 리소스를 성공적으로 로드하고 렌더링되었을 때, 페이지는 완전하다고 간주됩니다.

사용자 경험 (User Experience): 

웹 페이지가 빠르게 로드되고 반응성이 뛰어나면 사용자는 더 좋은 경험을 얻을 수 있습니다. 

페이지의 디자인, 네비게이션, 및 사용자 인터페이스도 사용자 경험에 큰 영향을 미칩니다.

로딩 순간 (Critical Rendering Path): 

웹 페이지가 로드되는 동안 어떤 리소스가 먼저 로드되고, 

사용자에게 어떤 내용이 먼저 표시되는지를 나타내는 개념입니다. 

중요한 콘텐츠가 빠르게 나타나는 것이 중요합니다.

네트워크 사용량 (Network Usage): 

웹 페이지가 로드되는 데 필요한 데이터 양이 많으면 사용자의 네트워크 비용과 시간이 

증가할 수 있습니다. 

최소한의 데이터로 웹 페이지를 구성하는 것이 성능에 도움이 됩니다.

모바일 성능 (Mobile Performance): 

모바일 기기에서의 웹 페이지 성능도 고려되어야 합니다. 

모바일 환경에서의 느린 네트워크 속도와 기기 제약사항에 대응하는 것이 중요합니다.

웹 성능을 향상시키기 위해서는 최적화 기술과 도구를 사용하여 페이지의 로딩 시간을 최소화하고, 

사용자 경험을 개선하는 데 주력해야 합니다. 이는 웹사이트의 성능 최적화, 콘텐츠 압축, 이미지 최적화, 

브라우저 캐싱 등 다양한 기술과 전략을 활용하여 달성됩니다.

 

 

*바쁜 사람을 위한 정리

웹 성능 이해의 첫걸음이란 웹 페이지가 어떻게 작동하고 로드되는지 이해하는 것을 말합니다. 브라우저의 동작을 이해하고 네트워크 지연이 왜 발생하는지 또한 요청과 응답을 HTTP로 어떤식으로 받고 보내는지 등에 다양한 요소가 존재하며 로딩 시간, 응답 시간, 네트워크 사용량을 분석하여 생각 하는 것을 웹 성능 이해라고 이해하면 쉬울거 같습니다.