Skip to content

Latest commit

 

History

History
138 lines (76 loc) · 5.8 KB

기본적인 렌더링 최적화 방법.md

File metadata and controls

138 lines (76 loc) · 5.8 KB
Raw

기본적인 렌더링 최적화 방법


HTTP 요청의 최소화

대부분의 웹사이트 구성 요소(이미지, 스타일시트, 자바스크립트, 마크업 등)는 웹 서버에 존재한다. 사용자의 컴퓨터에서 웹 사이트를 띄울 때 이 요소들을 가져오는데는 그 만큼의 네트워크 비용이 들기 마련이다.

CSS 스프라이트 기법

CSS 스프라이트 기법은 이미지 여러 개를 하나로 만들고 background-position 속성을 이용해 필요한 부분의 이미지만 보여준다.

만약 다수의 이미지가 포함된 웹 사이트라면, 이미지의 갯수만큼 HTTP 요청을 했던 방식을 한 번의 요청으로 줄일 수 있어 렌더링 속도가 향상될 수 있다.

#spriteImg span {
  background: url(images/buttons-bg.png) no-repeat;
}

#spriteImg #profile span {background-position: 0 0;}
#spriteImg #github span {background-position: 0 -15px;}

캐시 저장

// 1. 파일 이름에 날짜 추가
<script type="text/javascript" src="test_20181004.js"></script>

// 2. 쿼리스트링 이용
<script type="text/javascript" src="test.js?20181004"></script>

위와 같이 파일에 만료날짜를 추가해놓으면 사용자가 웹 사이트에 접근했을 때 사용자의 컴퓨터에 요소를 저장한다.

이후, 다시 접근하면 외부 네트워크가 아닌 사용자의 컴퓨터에서 요소를 받아오기 때문에 추가적인 요청을 하지 않을 수 있다.

  • 만약 파일이 수정되었다면, 파일 이름이나 쿼리 스트링을 변경하거나 새로 추가해주어야 한다.

자바스크립트 파일 통합

이는 유지보수측면에서 바라보는게 좋을 것 같은데, 우선적으로 기존에 있던 파일이 현재 웹 사이트에서도 유효한지 파악할 필요가 있다.

또한 여러 개의 파일로 나뉘어져 있다면 하나로 통합해 관리하면 요소를 다운 받는 시간도 줄일 수 있을 것이다.


파일 크기 최소화

다운 받는 파일의 크기를 최소화 한다.

Gzip 압축

보통 스타일 시트 파일과 자바스크립트 파일을 압축한다.

아파치 서버를 예로 들면, Gzip 압축을 주로 사용한다.

  • 웹 사이트가 렌더링 될 때, 클라이언트에서 웹 서버에 파일의 인코딩 여부를 물어보게 된다.
  • 서버에서는 헤더 정보에 인코딩 여부를 포함해 전송하고 인코딩된 요소라면 클라이언트에서는 압축을 해제한다.
  • 압축을 해제할 때 CPU연산이 들어가기 때문에 파일의 압축 크기는 1~2KB 이상일 떄 압축하는 것이 좋다.

쿠키 크기 최소화

보통 요즘 일반적인 웹 사이트에선 쿠키를 사용할 일이 많이 없을 수도 있다.

하지만 포털 사이트 같은 경우에는 쿠키를 많이 사용하게 되는데 이를 줄이는 것도 방법이 될 수 있다.

  • 필요없는 쿠키는 삭제한다.

  • 쿠키의 만료 날짜를 필요한 만큼만 설정한다.

  • 쿠키를 설정할 때 최상위 도메인을 사용하지 않는다.

  • 쿠키 정보가 필요 없는 이미지, 스타일시트, 자바스크립트 파일은 별도의 도메인으로 사용한다. 최상위 도메인이 같지 않으면 쿠키 정보는 공유되지 않는 점을 활용한 방법이다.


렌더링 성능 향상

웹 브라우저의 작동 원리를 이해하면 렌더링의 성능 향상은 개발을 할 때 필수적으로 고려해야할 사항들이다.

스타일시트와 자바스크립트 배치

스타일시트 즉 CSS 파일은 렌더 트리를 만드는데 필수적으로 필요한 요소다. 따라서 <head></head>태그 사이에 두고 최대한 빨리 다운로드 받아야 한다.

하지만, 자바스크립트 파일의 경우 브라우저가 파싱을 하고 배치하고 그리는 과정에서 자바스크립트 요소를 만나면 이를 다운로드해서 실행하기 전까지 모든 동작을 멈춘다.

따라서, 자바스크립트 파일의 경우엔 </body>태그 바로 위에 즉, 마지막에 두는 것이 효율적이다.

물론, js애니메이션이 필요한 부분의 경우 해당 요소만 <head></head>에 두는 것도 방법이 될 수 있다.

초기 렌더링시 Ajax 요청 최소화

    1. 사용자가 페이지를 요청한다.
    1. 서버에서 보낸 마크업을 다운로드해 화면을 구성하는 레이아웃을 그린다.
    1. 자바스크립트 다운로드와 렌더링이 끝난 후 onload 이벤트가 발생한다.
    1. Ajax 통신을 실행하고 데이터를 화면에 그린다.

위와 같이 동적인 웹 페이지가 렌더링 될 때, Ajax통신이 이루어진다면, 사용자 입장에선 레이아웃이 그려지고 다시 한 번 더 그려지는 상황을 보게 될 것이다.

이를 해결하기 위해선 서버에서 마크업을 모두 그린 후, 사용자의 동작(이벤트)이 발생할 때만 서버에 다시 요청을 하면 체감 속도를 높일 수 있다.

마크업 최적화

  1. 되도록이면 <table> 태그를 사용하지 않는다. <table> 태그는 그 안의 모든 데이터를 파싱하기 전까지 화면을 그리지 않기 때문이다.

  2. <div> 태그와 스타일시트를 이용해 레이아웃을 구성한다.

  3. 본문 전체를 <table>태그로 감싸지 않는다.

  4. 전체 태그의 갯수를 줄이고, 부분적으로 태그의 중첩을 최소화한다.


Reference