[웹 최적화]웹사이트 최적화를 위한 몇가지 방법

웹사이트 최적화 방법을 구글링한 결과를 정리해본다.

1. 도메인을 적절히 분리
   DNS 정보는 브라우져에 캐쉬 되기 때문에 같은 도메일을 가진 외부 파일을 사용하면 DNS lookup 시간을 단축 할 수 있다. 그러나, HTTP/1.1 스팩에 의하면 하나의 도메인당 최대 2개까지만 외부 파일을 병렬로 다운 받을 수 있다. 병렬 다운로드를 극대화해서 외부파일 다운로드 시간을 줄이기 위해서는 여러 도메인에서 파일을 다운 받는것이 좋은데 이글 의 저자는 2개~4개 사이의 도메인을 사용해서 DNS 캐쉬와 병렬 다운로드를 통한 성능 개선 간의 균형을 맞추라고 조언한다.
2. ETags(Entity tags)의 사용(참고)
   ETags는 Entity(이미지,javascript,css 등)이 브라우져에 캐쉬된 파일과 같은지 판단하는 방법이다. Last-Modified 보다 더 융통성(flexible) 하다. 그런데, 로드벨런싱을 위해 여러대의 서버를 운영할 경우 같은 파일이지만 다른 ETag를 가지게 되어 캐쉬기능이 정상적으로 작동하는데 방해가 될 수 있다.
3. Flush를 이용한 Buffer
   서버 작업이 오래 걸릴 경우 클라이언트 는 마냥 기다려야한다. 그때 먼저 준비된 HTML 부터 보내 줄 수 있는 기능이 Flush 이다. 이를 통해 클라이언트는 먼저 HTML을 불러(Fetch) 올수 있게 된다. Flush 위치는 Head태그가 끝나는 지점을 추천한다.
4. Ajax의 method(Get/Post)를 올바르게 사용하자
   Post request의 경우 브라우져 내부적으로 request 해더를 먼저 보내고 body(data)를 보내게 된다. 이에 반해 Get은 하나의 TCP패킷 위로 해더와 데이터를 모두 전송 할 수 있다. 따라서 HTTP 스팩에 따라 Get을 사용해야 하는경우(데이터를 조회해오는 경우)에는 Get을 사용하자.
5. Post-load Components를 구분하라
   Javascript 의 이벤트(가령 show/hide), hidden 속성의 Entity들 , 현재 보이지 않는 이미지 등은 최초 로드시에 불러올 필요가 없다.(최초 렌더링이 끝난 후에 작동 하는 컴포넌트들) Post-load 컴포넌트를 구별하여 lazy로드를 구현하는것도 좋은 방법이다. 야후에서 추천하는 tool들 

6. Dom 갯수를 줄여라
   Dom 갯수가 많을 경우 Javascript 에서 Dom을 조작하는 경우 access 시간이 오래 걸린다.
7. 쿠키의 size를 줄여라
   최초 response에 cookie가 존재한다면 브라우져는 사용자의 PC에 저장 후 이후 설정된 도메인(*.mukgee.com)의 request에 대해 해당 cookie를 다시 서버로 보낸다. cookie의 size가 클 경우 도메인을 방문할때마다 의도하든 의도하지 않든 큰 사이즈의 데이터를계속 보내고 받아야한다. 잘 사용하자.
8. 자바스크립트/CSS minify
   이부분도 약간 논쟁이 있는것 같은데 minify를 통해 물론 파일 사이즈가 줄어들면 http request 타임이 줄어 들겠지만, 정말 그 효과가 크냐 라는 논쟁이 있는것도 사실이다. 그럼에도 JSmin 같은 프로그램을 이용하면 용량이 줄어든 파일들을 만날 수 있다.
9. Javascript 는 가장 아래에 작성(참고)
   브라우져가 서버로부터 response를 받아 문서를 파싱하는 중 Javascript 태그를 만나면 HTML 파싱을 멈추고 외부 Javascript 파일을 로딩하게 되는데 그 동안 HTML 파싱이 딜레이 되면서 사용자입장에서는 느려보일 수 있기 때문이다.
10. CSS는 가장 상단에 위치(참고)
    CSS를 head태그 안에 선언 할 경우 HTML 렌더를 순차적(progressively)으로 할 수 있다.  이런 점은 사용자에게 visual feedback를 줄 수 있다. 가장 중요한 사실은 HTML 스펙에 CSS는 Head 태그 안에 선언하라고 명시 되어 있다.
11. Javascript 와 CSS는 외부 파일로 분리
    이부분은 논쟁이 될 수 있는게 사실, 웹 최적화의 1번 rule이 Http request를 줄이는 것이다. 때문에 css 파일의 작을 경우는 내부에 작성 하는게 Http 요청을 줄여 줄 수 있다. 그러나, trade-off를 봣을 때, request가 하나 늘어나는것보다 브라우져 캐쉬를 통한 성능 향상 크므로(그리고 사실 css파일이 작다의 기준도 알수 없음) 외부로 분리하자
12. Javascript를 통한 Dom접근/제어는 최소한으로
    Dom이 복잡할 경우 javascript 를 통한 접근은 당연히 느릴것이고, 특히 레이어를 고치는 경우는 피해야한다고 한다. Jquery의 hide/show는 어쩌지 

13. Event 설정도 최소한으로
    <div> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> </div>

    1 2 3 4 5 6 7 8 9 10

    <div>     <button></button>     <button></button>     <button></button>     <button></button>     <button></button>     <button></button>     <button></button>     <button></button> </div>

    이 경우 button에 event를 추가하는 것이 아니라 button을 wrap 하고 있는 div에 event를 추가하라는 것이다. event는 bubbling 이 발생하기 때문에 div의 이벤트 트리거로도 어느 버튼이 클릭되었는지 확인 할 수 있다.

14. 브라우져의 동작원리를 이해하고 적절히 사용해라
    Dom과 레이어 그리고 하드웨어 가속 등을 이해하고 적절히 사용해라. (이부분은 따로)
    http://d2.naver.com/helloworld/2061385
    https://www.html5rocks.com/ko/tutorials/speed/layers/
15. 최대한 캐쉬를 이용해라
    Ajax든, 이미지든, Javascript, CSS 모두 캐쉬를 사용할 수 있다면 적극적으로 적용해라. 또한 정적인 컨텐츠에 대해서는 Expires header를 이용해 먼 미래로 expires 값을 설정해놓고 , 동적인 페이지에 대해서는 Cache-Control 해더로 캐쉬를 컨트롤해라. Ajax에 대해서도 Expires나 Cache-Control을 설정해서 캐쉬를 사용할 수 있도록 하자
    http://www.letmecompile.com/http-cache-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC/
16. 기타
    Http 리퀘스트가 Gzip을 활용해서 데이터를 전송할 수 있도록 헤더를 추가해라. Http 리퀘스트를 줄여라

Ajax어플리케이션의 성능 향상에 대해 글을 남기신 Julien Lecomte에 따르면 Less is more 이다. 고민해보고 줄일 수 있는건 최대한 줄여라. 추가적으로 캐싱할 수 있는건 최대한 캐싱.

참고 : https://developer.yahoo.com/performance/rules.html , https://firejune.com/1302/