[원티드 9월] 데스크탑 웹사이트 개발하기 - 사이트 최적화

원티드에서 반응형 웹 사이트 관련된 강의가 있어서 참여하게 되었다. 

평소에 반응형 웹 사이트에 관심이 많았기 때문에 아주 흥미로웠다. 

 

브라우저 렌더링 원리

---

1. HTML을 파싱해서 DOM 트리를 구축합니다.

2. CSS를 파싱해서 CSSOM 트리를 구축합니다. 

3. DOM과 CSSOM을 결합해서 Render Tree를 구축합니다. 

4. Viewport를 기반으로 Render Tree의 각 노드가 가지는 정확한 위치와 크기를 계산하는 Layout 단계를 거칩니다. 

5. 계산한 위치와 크기를 기반으로 실제 pixel을 화면에 그리는 Paint 단계를 거칩니다. 

출처: beomy.github.io

 

 

사이트 최적화

---

이때, 사이트를 최적화하기 위해서는 위의 Layout과 Paint 단계, 즉 Reflow와 Repaint를 최소화시켜야 합니다. 

 

Reflow는 아래와 같은 상황에서 발생합니다. 

• 화면의 레이아웃이 변화 되었을 때
• DOM 노드의 추가, 제거, 위치, 박스 모델의 변경이 있을 때
• CSS3 애니메이션과 트랜지션이 발생했을 때
• 폰트, 텍스트 내용이 변경되었을 때
• 이미지 크기가 변경되었을 때
• offset, scrollTop, scrollLeft와 같은 계산된 스타일 정보를 요청할 때
• 페이지를 초기 렌더링할 때
• 윈도우를 리사이징

 

Repaint는 아래와 같은 상황에서 발생합니다. 

• 화면의 디자인이 변화되었을 때
• opacity, background-color, visibility, outline 등의 디자인 관련 스타일이 변경되었을 때

 

정리하자면, 

1. 인라인 스타일을 사용하지 않기

2. HTML 구조를 깊게 짜지 않기

3. CSS 셀렉터를 짧게 사용하기

4. 렌더트리 생성 이후 박스 모델 변경하지 않기

5. 애니메이션이 있는 요소는 position: fixed | absolute, transfrom, opacity를 사용하고, will-change 지정하기

6. JS로 스타일을 변경할 때는 display:none으로 숨긴 후 변경, 노출하기

7. JS는 </body> 바로 앞에 작성하기

 

사이트 최적화 - preload

---

preload를 사용해 현재 페이지에서 사용할 소스를 미리 로딩할 수 있습니다. 

 

단, 현재 페이지에서 3초 이내에 반드시 사용되는 리소스에만 사용해야하고, 남발하면 리퀘스트를 늘리기 때문에 오히려 악영향을 끼칠 수 있습니다. 

<link rel='preload' as='script' href='preload.js'>
<link rel='preload' as='stlye' href='preload.css'>
<link rel='preload' as='document' href='preload.html'>
<link rel='preload' as='image' href='preload.png'>
<link rel='preload' as='font' crossorigin type='font/woff2'>

 

사이트 최적화 - preconnect

---

현재 페이지에서 사용할 외부 도메인을 브라우저가 미리 준비해주는 것입니다. 

 

CPU에 부하를 줄 수 있다는 단점이 있습니다. 특히 https인 경우에는 더 많은 부하가 발생합니다. 또한 사용자가 10초 이상 보지 않는 짧은 내용의 콘텐츠에는 부적절합니다. 

<link rel='preconnect' href='https://fonts.goggleapis.com'>

 

사이트 최적화 - prefetch

---

지금 보는 콘텐츠가 아닌, 사용자가 다음에 볼 콘텐츠에서 필요한 내용을 미리 로딩해줍니다. 

 

<link rel='prefetch' as='script' href='preload.js'>
<link rel='prefetch' as='stlye' href='preload.css'>
<link rel='prefetch' as='document' href='preload.html'>
<link rel='prefetch' as='image' href='preload.png'>
<link rel='prefetch' as='font' crossorigin type='font/woff2'>

 

사이트 최적화 - async

---

JS 파일을 병렬 로딩하며, 로딩되면 html 파싱을 멈추고, JS를 먼저 실행한 후에 파싱을 이어서 진행합니다.

 

따라서, DOM에 영향을 주지 않는 JS 파일에 적합합니다. 예를 들어, jquery, Bootstrap과 같은 라이브러리가 있습니다. 

단, 실행 순서가 보장되지 않기 때문에, 순서를 보장하기 위해서는 자바스크립트로 동적 코드를 삽입하고 값을 false로 설정해줘야 합니다. script.async = false

<script src='async1.js' async></script>

 

사이트 최적화 - defer

---

병렬 로딩을 하지만 HTML 파싱이 끝난 후에 실행합니다. 

 

defer는 </body> 앞에 코드를 넣은 것과 같으나, 간혹 head 영역 안에 JS 관련 코드를 넣어야 하는 경우에 유용합니다. 

주로, JS 파일의 용량이 크거나, 파싱 후 바로 실행시켜야 하는 경우에 사용합니다. 

<script src='defer.js' defer></script>

 

참고자료

---

• https://beomy.github.io/tech/browser/reflow-repaint/