웹페이지 로딩의 단계별 과정과 스타일 적용 단계 설명

웹페이지 로딩단계

웹 페이지 로딩 과정은 DNS 조회로 IP 주소를 얻고, TCP를 통해 서버와 연결을 하게됩니다. HTTP 요청을 통해 서버에서 HTML과 CSS를 받아 DOM 및 렌더링 트리를 생성합니다. 생성된 트리에 CSS로 스타일을 적용하고 JavaScript를 실행하여 동적 콘텐츠를 추가합니다. 이후 레이아웃을 계산하고, 페인팅 및 컴포지팅을 통해 최종적으로 화면에 페이지를 표시하게 됩니다.

검색엔진 최적화 작업을 위해서는 웹피이지가 어떤 방식으로 로딩이 되는지 웹페이지 로딩단계의 기본적인 이해가 있으면 작업하기가 수월해집니다. 각 단계별로 운영자가 최적화 작업에서 진행할수 있는 부분과 할수 없는 부분을 알고 할수 있는 부분에 대한 작업을 진행해야 하며 웹페이지 로딩시 그 작업은 각단계의 일부분에 한정될수 있습니다. 검색엔진 최적화후 다른 요소로 인해 발생하는 문제도 차후 점검후 파악해야 하며 그부분이 웹페이지의 어떤 과정에서 발생하는지는 대략적으로 파악할 필요성이 있어 아래는 웹페이지 로딩의 단계별 설명을 간단하게 요약 정리했습니다.

웹페이지 로딩순서

1. DNS 조회 (DNS Lookup)

DNS 조회는 사용자가 웹사이트 주소를 입력하면 브라우저는 도메인 이름을 IP 주소로 변환하는 과정입니다. 일반적으로 사람들이 사용하기 편리한 사이트 이름을 컴퓨터가 이해할 수 있는 숫자로 변경해주는 작업입니다.

DNS(Domain Name System)로 서버에 요청을 보내면 DNS 서버는 도메인 이름에 해당하는 IP 주소를 반환합니다. 이때 캐시를 이용해서 캐시 정보가 브라우저에 존재하면 DNS 조회 과정을 생략할 수 있습니다. 페이지에서 외부의 여러 개의 다른 사이트 정보를 가져올 때 이 과정에서 로딩 시 부하가 걸릴 수 있기 때문에 페이지에 많이 사용하는 정보를 가져오는 사이트에 대해서 미리 연결할 준비를 해주면 좀 더 빠르게 외부 리소스를 로딩시킬 수 있습니다.

dns-prefetch는 브라우저가 도메인 이름을 미리 DNS 조회하여 IP 주소를 캐시하도록 설정합니다.
preconnect는 브라우저가 외부 도메인에 대한 연결을 미리 설정하도록 지시합니다

✔ 예

<link rel="preconnect" href="https://example.com">

<link rel="dns-prefetch" href="https://example.com">

2. 서버와 연결 (TCP)

브라우저는 DNS 조회를 통해 얻은 IP 주소를 사용하여 웹 서버와 연결을 하는 과정에서 초기 데이터를 전송하는 과정을 설정하고 초기화해주는 작업을 진행하게 됩니다. TCP(Transmission Control Protocol) 연결을 설정하기 위해 아래 방법을 수행합니다. 이때 데이터의 전송 속도, 패킷의 손실이나 오류 발송 등의 제어를 하게 됩니다.

SYN: 브라우저가 서버에 연결 요청을 보냅니다.
SYN-ACK: 서버가 요청을 수락하고 응답합니다.
ACK: 브라우저가 서버의 응답을 확인하여 연결을 완료합니다.

3. HTTP 요청

브라우저는 서버에 저장된 데이터를 요청하게 되며 이때 클라이언트와 서버간의 통신을 위해 HTTP 요청을 보냅니다. 이 요청에는 브라우저 정보, 요청한 리소스의 URL 등이 포함됩니다.

4. 서버 응답

서버는 브라우저의 요청을 처리하고 HTTP 응답을 보냅니다. 응답에는 요청한 웹 페이지의 HTML 코드, 상태 코드, 헤더 정보 등이 포함됩니다.

5. HTML 파싱 및 렌더링 (HTML Parsing , Rendering)

웹페이지를 브라우저에 표시하는 과정으로 HTML의 코드를 읽고 분석해서 사람이 이해할수 있는 형태로 변환하는 과정입니다.브라우저는 HTML 문서를 파싱하여 DOM(Document Object Model) 트리 HTML 문서의 구조를 생성합니다. DOM 트리는 HTML 문서의 구조를 표현하는 코드를 각각의 작은 형태(토큰)으로 변환하고 구문을 분석해서 형성합니다.

6. CSS 처리

구조가 형성되면 CSS파일을 읽어 들여서 HTML문서의 스타일을 정의하게 됩니다. 즉 브라우저는 HTML 문서에서 CSS 파일을 요청하고, CSS를 파싱하여 스타일 규칙을 적용합니다. 이때 주로 페이지의 디자인과 설정에 관련된 작업을 진행하게 됩니다. CSS 코드는 DOM 요소의 스타일을 정의하며, 이 과정에서 스타일 트리(또는 렌더 트리)가 생성됩니다.

7. JavaScript 실행

웹페이지를 동적으로 기능을 추가하는 과정으로 HTML문서에 기능성과 동적 콘텐츠를 생성합니다.브라우저는 HTML 문서에 포함된 JavaScript를 파싱하고 실행합니다. JavaScript는 DOM과 CSS을 수정할 수 있으며, 이로 인해 페이지의 내용이나 스타일이 동적으로 변경될 수 있습니다.

8. 렌더링 트리 구성 (Render Tree )

브라우저는 DOM과 CSSOM을 결합하여 렌더링 트리를 생성합니다. 렌더링 트리는 화면에 실제로 그려질 요소의 정보를 포함합니다.

9. 레이아웃 계산

브라우저는 렌더링 트리를 기반으로 각 요소의 정확한 위치와 크기를 계산합니다. 이 과정을 레이아웃 또는 리플로우라고 합니다. 이 과정에서 HTML의 보여주게 될 각 요소가 계산되는 과정으로, 이 과정이 복잡하게 되면 레이아웃이 흔들리는 문제가 발생하게 됩니다.

검색 최적화에서 가장 중요한 CLS 측정값이 이 부분에서 가장 많은 문제를 일으키게 됩니다. HTML 문서의 기본 레이아웃 방식 중 플로우 레이아웃에서 HTML 요소들이 배치되는 과정에서 설정 태그의 요소로 인해 줄바꿈이 발생하는 경우와 발생시키지 않는 경우가 있습니다.

블록 요소: 기본적으로 전체 너비를 차지하며, 줄바꿈을 발생시킵니다.
인라인 요소: 기본적으로 콘텐츠의 너비에 맞추어 배치되며, 줄바꿈을 발생시키지 않습니다

10. 페인팅 (Painting)

브라우저는 각 요소를 화면에 그립니다. 이 과정에서는 색상, 텍스트, 이미지 등이 실제로 렌더링됩니다.

11. 컴포지팅 (Compositing)

컴포지팅은 각각의 렌더링된 요소를 결합하여 최종적으로 화면에 표시하는 과정입니다.복잡한 레이아웃의 경우, 브라우저는 여러 레이어로 구성된 페이지를 이때 처리하며. 각 레이어는 독립적으로 렌더링되며, 최종적으로 화면에 표시되기 전에 합쳐집니다.

12. 페이지 로딩

모든 리소스가 로드되고, JavaScript가 실행되고, 페이지가 렌더링되면서 브라우저에 페이지의 로딩이 완료되는 시점입니다.

웹페이지 로딩 단계별 과정