렌더링이란?

렌더링이란 ?

- HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말함

- 웹사이트 코드를 사용자가 웹사이트를 방문했을 때 보는 인터랙티브한 페이지로 바꿔주는 웹 개발에서 사용되는 프로세스를 말한다.

- 렌더링 엔진과 웹 브라우저에서 웹 페이지를 렌더하기 위해 사용되는 소프트웨어에 의해서 완성된다.

- 이러한 웹 브라우저들과 밀접한 관계 때문에 렌더링 엔진은 흔히 브라우저 엔진이라고도 불린다.

 

 

웹 브라우저가 웹 페이지를 렌더링 하는 과정

1. 원시 코드에서 DOM과 CSSOM을 구성

- 웹 페이지가 로딩되는 동안, 웹 서버는 HTML, CSS, JavaScript가 들어있는 파일들의 폴더를 사용자의 웹 브라우저로 보냅니다.

- 브라우저 엔진은 바이트로 구성된 이 데이터를 HTML 코드(characters)로 변환합니다.

- HTML 코드(characters)를 토큰으로 구문 분석하고, 노드로 추가 구문 분석을 합니다.

- 브라우저 엔진은 노드들을 DOM(Document Object Model)이라고 알려진 트리구조로 연결합니다. 이 DOM은 HTML의 JavaScript 표현입니다.

- 동시에, 브라우저는 비슷한 과정으로 CSS 코드를 CSS 객체 모델인 CSSOM으로 변환합니다.

developers.google.com 에서 가져온 HTML 렌더링 과정 이미지

2. 렌더 트리를 사용해 최종 사용자 웹 페이지를 생성

- 브라우저 엔진은 렌더 트리 (render tree)라고 불리는 트리 구조를 만들기 위해서 DOM과 CSSOM을 결합합니다. 렌더 트리는 뷰어가 볼 수 있도록 웹 페이지를 채우고, 웹 페이지의 각 보이는 요소를 위해 레이아웃을 계산하며, 최종 사용자가 볼 수 있도록 화면을 채우는데에 필요한 스타일 및 컨텐츠 정보가 포함 되어 있습니다.

- 레이아웃 작동은 다음 단계입니다. 렌더 트리를 사용해서 브라우저 엔진은 웹 페이지의 각 보이는 요소들의 위치를 계산합니다.

- 마지막으로, 브라우저 엔진은 최종 사용자가 볼 수 있도록 화면의 각 요소들을 더하고 채웁니다.

 

동적 렌더링

자바스크립트는 웹 페이지 렌더링을 위해 가장 많이 선택하는 언어인데, 왜냐하면 직관적인 사용자 경험을 만드는 데에 사용되기 때문이다. 그러나, 많은 검색 엔진 봇들은 자바스크립트를 쉽게 처리하는데에 어려움을 겪는다. 따라서 대부분의 컨텐츠와 탐색을 저장하기 위해 자바스크립트를 사용하는 웹사이트들은 웹 크롤러에 보이지 않을 위험이 있다. 동적 렌더링은 위에서 설명한대로 사용자를 위해 웹 페이지를 렌더링하는 동시에 검색 엔진 봇을 위한 정적 HTML을 렌더링해서 이 문제를 해결한다.

 

 

페이지 렌더링 속도

페이지 렌더링 속도는 페이지를 생성하는 데 걸리는 시간을 나타낸다. 페이지 렌더링 속도는 브라우저 요청이 전송될 때(사용자가 링크를 클릭했을 때)부터 그 페이지가 사용자에게 완전히 작동할 때까지를 측정된다. 페이지 렌더링 속도와 페이지 로딩 속도(사용자가 웹 페이지를 보기 위해 걸린 시간)는 일반적으로 두 프로세스가 서로 분할 초(split seconds) 이내에 발생하기 때문에 서로 교환하여 사용된다. 

 

낮은 페이지 렌더링 속도는 바운스 속도 (사용자 체류 시간이 짧아지는 것을 의미함)를 높이고 변환 속도를 낮춥니다. 한 구글 연구에 따르면, 바운스된 세션의 로딩시간은 바운스되지 않은 세션에 비해 2.5초 느렸다고 한다.

사용자 경험에 영향을 주는 페이지 렌더링 속도 때문에, 2010년에 구글은 페이지 속도를 공식 순위 요소로 만들었다. 따라서 렌더링 속도와 전체 페이지 속도를 최대한 빠르게 유지하는 것이 SEO에서 중요한 작업이다.

 

SEO (검색 엔진 최적화)를 위한 렌더링의 중요성

웹 페이지 렌더링은 봇에 의해 페이지가 인덱싱 되고 사용자가 경험하는 방식에 영향을 미친다. 렌더링이 검색 엔진 순위와 SEO 결과에 미치는 영향을 이해하는 것은 모든 웹 개발 팀에 중요한 고려 사항이 되어야 한다.

 

요약하자면, 많은 웹사이트의 경우, 주로 자바스크립트로 웹사이트를 구축하는 것이 가장 사용자 친화적이고 심미적으로 매력적인 인터페이스를 제공할 수 있다. 그러나 검색 엔진 봇은 이러한 웹 사이트를 탐색하는 데 어려움을 겪을 수 있으며, 이는 검색 엔진 순위와 유기적 트래픽에 부정적인 영향을 미친다. 반면에 렌더링하는 페이지는 사용자 경험과 검색 엔진 순위에 모두 부정적인 영향을 미친다.

 

이러한 사실을 고려할 때, 웹 개발자들은 SEO 성능을 극대화하기 위해 봇과 인간에 대한 요구사항에 세심한 주의를 기울여야 한다.

 

 

참고

https://www.seobility.net/en/wiki/Rendering

Rendering (Web Development): Definition - Seobility Wiki

위의 웹 사이트 내용을 번역했습니다 :)

번역이 이상하거나 다른 내용이 있으면 댓글로 알려주시면 감사하겠습니다.

 

https://medium.com/%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98%ED%92%88%EA%B2%A9/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95-5c01c4158ce

브라우저의 렌더링 과정

첫번째 참고 사이트에서 번역한 내용에 대해서 더 자세하게 다뤄주는 글입니다. 참고하면 좋을 것 같아서 남겨놓습니다.