웹 요청을 보냈을 때 일어나는 과정

세부과정

  1. 브라우저는 로컬 DNS 캐시에 호스트 이름에 해당하는 IP 주소가 저장되어 있는지 확인합니다. 캐시에 저장되어 있다면, 브라우저는 해당 IP 주소로 바로 요청을 보내고, 캐시에 저장되어 있지 않다면 DNS 서버에 질의합니다.

  2. 브라우저는 먼저 로컬 DNS 서버에 호스트 이름에 대한 IP 주소를 요청합니다. 로컬 DNS 서버는 해당 도메인의 네임 서버에 질의하여 IP 주소를 찾아내고, 이를 브라우저에게 응답합니다.

  3. 만약 로컬 DNS 서버가 도메인의 네임 서버에 질의하였지만 IP 주소를 찾지 못한 경우, 상위 DNS 서버에 요청을 보내어 IP 주소를 찾으려고 시도합니다. 이러한 과정을 반복하여 IP 주소를 찾아내는데, 이때 DNS 서버들은 캐시를 사용하여 불필요한 DNS 조회를 줄이기도 합니다.

  4. 브라우저는 DNS 서버로부터 받은 IP 주소로 서버에 요청을 보내고, 해당 서버로부터 응답을 받습니다. 이후 브라우저는 응답을 해석하여 HTML, CSS, JavaScript 등의 리소스를 받아오고, 화면에 표시합니다.

최적화 할 수 있는 방법은?

캐싱 활용

브라우저 캐시를 활용하여 이전에 로드한 리소스를 재사용하면, 새로운 요청을 보내지 않고 빠르게 로드할 수 있습니다.

이미지 용량 최적화
  • 이미지 압축

    이미지 파일의 크기를 줄이는 압축 기술을 사용하여, 이미지 파일의 용량을 줄일 수 있습니다.

  • 스프라이트(Sprites) 이미지 사용 여러 이미지를 하나의 이미지로 합쳐서 사용하면, 각각의 이미지를 로드하는 요청 수를 줄일 수 있습니다.

    아이콘과 같이 크기나 사이즈가 일정한 이미지에 대해서는 부분적으로 가능한 방법으로 생각됩니다. 하지만 실제 적용한 적은 거의 없을 정도로 많이 사용하지는 않는 기법입니다.

    images

  • Gzip 압축 서버에서 전송되는 텍스트 파일들을 gzip 압축 방식을 사용하여, 파일의 용량을 줄일 수 있습니다.
  • 리소스 최적화 CSS, JavaScript, HTML 등의 코드를 최적화하여 파일 크기를 줄일 수 있습니다. 또한, 네트워크 요청을 최적화하는 데 있어서 다음과 같은 방법도 있습니다.
리소스 번들링(Resource Bundling)

여러 개의 JavaScript 또는 CSS 파일을 하나의 파일로 번들링하여 로드할 수 있습니다.

  • HTTP 요청 파이프라인 활용 : HTTP 요청을 한 번에 여러 개 보내는 파이프라인(Pipeline)을 활용하여 네트워크 요청의 지연을 최소화할 수 있습니다.
CDN 활용

전 세계에 분산된 콘텐츠 배포 네트워크(CDN)를 활용하여, 네트워크 지연을 최소화할 수 있습니다.

HTTP/2 사용

HTTP/2 프로토콜을 사용하면, 다수의 요청을 병렬로 처리하여 요청 대기 시간을 줄일 수 있습니다.

이러한 방법들을 활용하여, 웹 페이지의 네트워크 요청을 최적화하여 빠른 로딩 속도와 좋은 사용자 경험을 제공할 수 있습니다.