성능 최적화를 위해 고려해야 할 점(feat. 스크립트 태그의 위치는?)

 사용하지 않는 CSS를 제거하고, 미디어쿼리를 사용해 CSS를 간단하게 유지하자.

 

브라우저는 CSSOM이 생성될 때까지 렌더링을 차단합니다. CSS가 없는 페이지는 상대적으로 사용성이 떨어지므로, DOM과 CSSOM이 모두 만들어질 때까지 렌더링을 차단하는 것입니다. 미디어 쿼리나 미디어 유형을 사용해 사용자가 필요한 CSS만 렌더링 되도록하면 성능을 향상시킬 수 있습니다.  

 

 

 

 

 불필요한 자바스크립트를 제거하고, 스크립트 태그를 바디를 닫는 태그 앞에 적자.

 

자바스크립트는 DOM과 CSSOM을 수정할 수 있습니다. 따라서 브라우저는 스크립트가 무엇을 수정할지 모르기 때문에 스크립트 태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진에 제어권한을 넘깁니다. 자바스크립트 엔진의 실행이 완료된 후 브라우저가 중지했던 시점부터 DOM 생성을 재개합니다. 스크립트 안에 돔을 접근하려고 한다면, 돔이 파서되어 생성된 이후여야 하므로 모든 돔이 만들어진 시점인 바디를 닫는 태그가 적절합니다.

 

 

 

 

  자바스크립트를 비동기적으로 실행하자.

 

인라인으로 스크립트를 실행하면 DOM 생성이 차단되고, 이로 인해 렌더링도 지연됩니다. 이때문에 인라인 스크립트가 아닌 스크립트 태그를 이용해 별도의 외부 리소스로 자바스크립트를 연결하고, async를 이용해 비동기적으로 설정해주면 성능을 향상시킬 수 있습니다. 스크립트 태그에 async를 넣으면, 이 스크립트가 사용 가능해질 때까지 기다리는 동안 DOM 생성하는 것을 차단하지 말라고 브라우저에 지시할 수 있습니다. 이는 성능을 크게 향상시킬 수 있습니다. 

 

 

 

 

 정리

 

브라우저의 작동원리를 이해하면 웹페이지의 성능을 최적화할 수 있다. 브라우저의 작동원리가 궁금하다면 이전 포스팅을 참고바랍니다.

 

 

 

 

 자료 출처

 

[렌더링차단 CSS] - https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=ko

[자바스크립트로 상호작용 추가] - https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript?hl=ko