CSSOM + 렌더링

CSSOM

CSS Object Model은 자바 스크립트에서 CSS를 조작 할 수있게 해주는 API 세트입니다. 

CSS의 경우 DOM과 HTML API의 펜던트이며, 이를 통해 CSS양식을 동적으로 읽고 수정할 수 있습니다.

웹 브라우저가 렌더링 하기 위해서는 이 구조를 거치게 됩니다.

DOM과 마찬가지로 트리형태의 구조로 이루어져 있습니다.

웹 브라우저가 렌더링 하는 순서는 다음과 같습니다.

1. The web browser examines your HTML and builds the DOM (Document Object Model). 
2. The web browser examines your CSS and builds the CSSOM (CSS Object Model).
3. The web browser combines the DOM and the CSSOM to create a render tree.
4. The web browser displays your webpage.

먼저, HTML을 읽어서 DOM을 빌드, 그리고나서, CSS를 읽어서 CSSOM을 빌드합니다.

그 후에 DOM과 CSSOM 의 구조를 적절히 Mixed해서 Render Tree 구조를 생성한다음에 마지막으로 웹페이지에 보여주게 됩니다.

한가지 좋은 소식은 이 렌더링이 단지 몇가지로 결정되는 것이라는 점입니다.

1. Know that the CSSOM blocks anything from rendering.(CSS에서  렌더링이 어떤 것을 차단하는지 확인해야 합니다.)
2. Know that the CSSOM has to be built everytime you load a new page. (새 페이지를 로드 할 때마다 CSSOM을 빌드해야 한다는 것을 확인해야 합니다.)
3. Know that there is a relationship between the CSS your page loads and the javascript your page loads.(페이지가로드되는 CSS와 페이지가로드되는 자바 스크립트 사이에 관계가 있음을 이해해야 합니다.)

1. CSS에서 렌더링이 어떤 것을 차단하는지 확인

CSS가 검사되기 전에 브라우저가 웹 페이지의 콘텐츠를 보여줄 경우 스타일이 지정되지 않은 상태로 표시되고 잠시 후 스타일이 지정되면 모든 것이 웹페이지가 됩니다. CSS가 적용되지 않은 웹페이지는 끔찍합니다.

2. 새 페이지를 로드 할 때마다 CSSOM을 빌드해야 한다는 것을 확인

CSS가 모두 로드 되었다고 해서 CSSOM이 모든 페이지에 빌드 된다는 것이 아니라는 것을 알아야 합니다.

즉, CSS가 캐시 되어도 CSSOM이 모든 페이지에 대해 빌드된다는 것을 의미하지는 않습니다.

브라우저가 이미 모든 CSS를 캐시했을지라도 사용자가 다른 페이지로 이동할 때 CSSOM을 다시 만들어야 합니다.

3. 페이지가 로드되는 CSS와 페이지가 로드되는 자바스크립트 사이에는 관계가 있습니다.

Javascript가 웹 페이지에서 사용되는 방식은 CSSOM을 빌드하지 못하도록 차단할 수 있습니다. 

CSSOM은 무엇이든 표시해야합니다.
CSSOM의 프로세스를 차단하면 CSSOM의 처리 시간이 길어지고, 표시되는 시간이 길어집니다.
자바 스크립트가 CSSOM이 작성되는 것을 차단하고 있다면 사용자는 빈 페이지를 오래 동안보고 있습니다.

렌더링 블로킹

일반적인 html, css, js가 있는 페이지가 표시되기 전에 걸리는 경로를 살펴보겠습니다.

1. 브라우저가 HTML 파일을 다운로드합니다.

2. 브라우저는 HTML을 읽고 하나의 CSS 파일, 하나의 자바 스크립트 파일 및 하나의 이미지가 있음을 확인합니다.

3. 브라우저는 이미지를 다운로드합니다.

4. 브라우저가 CSS 및 자바스크립트를 먼저 가져오지 않고 웹 페이지를 표시할 수 없다고 결정합니다.

5. 브라우저가 CSS 파일을 다운로드하고 읽음으로써 다른 파일이 호출되지 않도록 합니다.

6. 브라우저가 자바 스크립트가 있을 때까지 여전히 웹 페이지를 표시할 수 없다고 결정합니다.

7. 브라우저는 javascript파일을 다운로드 하고 읽음으로써 아무것도 호출되지 않도록 합니다.

8. 브라우저가 이제 웹페이지를 표시할 수 있을지 결정합니다.

이것은 렌더링 경로가 엉망진창일 가능성이 있음을 의미합니다.

대부분의 웹 사이트는 웹 페이지가 표시되기 전에 브라우저가 로드해야 하는 많은 것을 호출하기 때문에 절대적인 렌더링 경로를 가지고 있습니다.

워드프레스를 예로 들면, 하나의 테마에 여러가지 CSS가 있습니다. 하나의 파일로 합칠 수도 있지만 여러 테마를 추가하면

당연히 CSS 파일 또한 많이 늘어나게 됩니다. 이 상황에서 브라우저에서 컨텐츠를 표시하기 전에 즉, 시작하기 전에

각 파일을 로드하고 구문 분석 해야합니다. 만약 CSS가 6 ~ 7 개가 있을 때는 서버로 6 ~ 7 번의 왕복을 해야합니다.

이를 렌더링 블로킹이라고 합니다.

이럴 때마다 이 모든 작업이 완료될 때까지 아무것도 나타나지 않기 때문에 흰색 화면을 쳐다보게 됩니다.

그러나 당신의 CSS가 다운로드 된 후에도 WordPress 테마는 여러 자바 스크립트 파일을 가지고 있기 때문에 아직 렌더링 할 수 없습니다. 

페이지는 여전히 많은 경우에 자바 스크립트 파일을 받고 있으므로 표시되지 않습니다. 

이것을 렌더링 블로킹 javascript라고합니다.

렌더링 경로 최적화하기

좋은 소식은 역시 3가지로 이루어져 있다는 것입니다.

1. 중요한 자원의 수를 최소화 즉, 자원들이 CSS 렌더링 되는동안 6 ~ 7 회 갈 것을 한번으로 줄일 수 있습니다.

2. 중요한 바이트의 수를 최소화 즉, 자원들 중 CSS와 Javascript는 minfying 을 통하여 언제든지 byte수를 줄일 수 있습니다.

3. 주요 경로의 길이를 최소화하십시오. 이 또한 바이트의 절감과 동시에 DOM, CSSOM이 해당 오브젝트를 찾아가는 데 있어서 최적화가 될 수 있습니다.

최적화의 구체적인 방법

1. IMAGES

만약에 페이지에 12000개의 이미지가 있어도 스크롤 없이 볼 수 있는 부분에 1 ~ 2개만 표시될 수 있도록 처리 할 수 있습니다.

단지 1~2개의 이미지에 집중하면 초기 페이지 로드 시간을 훨씬 향상시킬 수 있습니다.  나머지 이미지들은 Lazy Loading 처리하는 것으로 속도를 향상시킬 수 있습니다. 

2. Javascript files

자바스크립트 파일 역시 Lazy Loading 처리로 향상 시킬 수 있습니다.

3. CSS files

가장 획기적인 CSS 파일 단축 방법은 많이 사용하지 않는 것입니다.

필요에 따른 STYLE 사용으로 획기적으로 줄일 수 있는 방안입니다. 

또 다른 방법으로 외부 CSS 파일의 일부를 결합하면 렌더링에 필요한 파일의 양을 줄일 수도 있습니다.

CSS의 일부를 HTML inline 요소로 선택적으로 넣을 수도 있습니다. 

구글에서 말하는 페이지 로딩속도란, 사요앚가 해당 페이지에서 콘텐츠를 보는 속도를 의미합니다.

사용자가 해당 콘텐츠와 얼마나 빨리 상호작용할 수 있는가가 관건입니다.

가장 핵심적인 구글에서 제시하는 렌더링 방식에서는 Waterfall을 보면서 실제로 로드할 필요가 없는 

특히 로고, 비쥬얼에 들어가는 큰 이미지, 그리고 css를 제외한 부분은 외부경로로 뺌으로써 이러한 렌더링의 속도를 1.5s 에서 .25s 까지 줄일 수 있다는 것입니다.

가끔은 인라인 CSS를 사용하라고 권고합니다.

인라인 CSS는 웹페이지를 표시하기 전에 브라우저가 다운로드 해야하는 파일의 양을 줄입니다.

외부 CSS 파일을 사용하는 경우에는 브라우저는 먼저 HTML 파일을 모두 로드한 다음에 CSS파일을 다운로드합니다.

이것은 서버로 왕복하는 것을 다소 막아주지만 CSS 파일이 더 이상 캐시되지 않는다는 것을 의미하기도 합니다.

외부 CSS 파일을 사용하면 브라우저에서 전체 파일을 캐시하므로(기억하므로) 사용자가 웹 사이트의 다른 페이지로 이동할 때 동일한 단계를 반복해서 수행 할 필요가 없습니다. CSS를 인라인하면 방문자가 웹 사이트의 다른 페이지로 이동할 때 CSS가 읽히고 다시 작동합니다. CSS가 작고 단순한 것이라면 상관 없지만 CSS가 크고 복잡하면 종종 CSS 캐싱하는 것이 더 낫다는 생각을 하게 될 것입니다.

CSS Delivery tool 을 사용해서 CSS의 통신방식을 검사하는 것도 좋은 습관이 될 것입니다.

https://varvy.com/tools/css-delivery/

https://varvy.com/

추가로 SEO 검사하는 툴도 있네요!

다음에 또 봐요 : )

출처 : 

https://developer.mozilla.org/ko/docs/Web/API/CSS_Object_Model

https://varvy.com/performance/cssom.html

https://varvy.com/pagespeed/critical-render-path.html