웹사이트 성능 최적화 정리 (High Performance Web Sites)

웹사이트 성능 최적화 정리 (High Performance Web Sites)

Back-end = 5%, Front-end = 95% 정도 성능에 영향을 미침

1. HTTP Requests 를 최소화 한다.

- 사용자 응답시간의 80%는 프론트앤드단에서 발생한다.

많은 시간을 페이지의 컴포넌트(이미지, css, script, flash등)를 다운받는데 쓰인다는 얘기다.

위의 컴포넌트는 각각의 http request를 유발시켜서 페이지를 느리게 한다.
- Image Maps - 이미지 맵은 하나의 이미지로 여러장의 이미지 효과를 나타낸다.

또한 같은 사이즈를 가지고 많은량의 http request를 줄여준다.
- Css Request - 이미지맵처럼 필요한 이미지를 한장에 담고 css 스타일 적용으로 필요한 부분만 보이게 한다.
- Inline Images - data:URL scheme를 이용하여 페이지에 이미지 데이터를 삽입시킨다.

따라서 html 페이지의 사이즈는 엄청 커지는데 반해 요청은 줄게 된다.
- Comblined Files - 스타일시트, 스크립트 파일을 모두 통합하여 하나의 파일에 포함시켜 http request를 줄인다.

- CSS sprites

-> 종합 이미지에서 필요한 부분만 자르는 방식

 

예) <span style="background-image: url('sprites.gif'); background-position: -260px -90px;">

</span>
- 자바스크립트 파일과 CSS 파일을 한 두개로 병합한다

(자바스크립트를 한줄로 빌드로 할 경우 용량이 줄어드는걸 이용하는 사이트도 늘고 있다)
- image maps
- inline (data) images(IE 는 지원 하지 않는듯)

예) data: URL scheme
data:[<mediatype>][;base64],<data>
<IMG ALT=”Red Star” SRC="https://t1.daumcdn.net/cfile/tistory/2146463456E72FA806"MARGIN-LEFT: 40px">LMLAPN8ffBiYvWWlvrKy/FvcPewsO9VVfajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BAEAAAsALAAAA

AAMAAwAAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDBiatt2H1KBLQRFIJAIKywRgmhwAIlEEADs=">

2. CDN(Content Delivery Network) 사용

- CDN 서비스라고 하면 사용자의 위치에 따라서 가장 가까운 서버에 접속해서 데이터를 가져오는 서비스를 말한다.

데이터를 가장 빠르게 받을수 있는 서버에서 데이터를 받는다면 당연히 페이지가 빨리 뜰것이다.

야후의 경우 약 20%정도의 성능향상이 있었다고 한다.

- ISP의 네트워크 하단에 캐시서버(임시저장서버)를 설치/컨텐츠를 저장해 놓고 사용자 요청이

있을 때 미리 올려놓은 컨텐츠를 전달해주는 시스템

- 여러 네트워크 경로를 거치지 않아 빠름(병목현상 줄어듬)

예) amazon.com, aol.com, ebay.com, myspace.com 등에서 Akamai 를 이용함

3. Expires 해더를 설정한다.(Add an Expires Header)

- 웹페이지가 점점더 richer해지면서 각종 script, css, images등이 증가 하게 되며 이는 많은 http request를 유발시킨다.

하지만 expire header를 추가 한다면 이것들을 캐싱시킬수 있다.
- Expire header를 사용하면 그 날짜가 지나기 전에는 각 컴퍼넌트를 재 호출하지 않는다.

만약 아파치서버를 사용중이라면 ExpireDefault값을 이용하여 지정을 해줄수 있다.

- 이미지, 자바스크립트, CSS 등을 웹 브라우저 캐싱 기능을 사용

-> 만료가 지나기전까지는 브라우저에 저장되어 있는 캐시를 이용하기 때문에 서버로 요청을

보내지 않는다. "새로 고침" 하면 만료에 상관없이 다시 받긴 하지만 파일의 내용이 변경된다면

파일 이름을 변경하는 방식을 많이 쓰고 있다.(예: ABC_20100902_001.js)

- IIS에서 지정할 수 있고 닷넷의 http 핸들러를 이용해서 헤더를 추가해서 보내는 방법 등이 있다.

4. Gzip 컴포넌트(Gzip Components)

- 원초적인 해결방법으로 대역폭이나 캐싱가지고 해결이 안된다면 압축을 하는 방법도 있다. 즉 http request(1.1)의 헤더에 accept-encoding헤더를 붙여서 보내면 서버는 압축을 하며, 지정된 엔코딩 방식으로 압축후 response할때 그 엔코딩 방식으로 같이 붙여서 보내며, 이를 브라우저가 해석하는 방식이다. (가장 많이 쓰이는것이 gzip방식)
- gzip의 경우 약 70%의 압축률을 보여주며, 현재 90%의 인터넷 브라우저가 gzip을 지원한다. 다만 압축방식의 경우 image와 같은 이미 압축이 되어있는 파일을 대상으로 할경우에는 오히려 사이즈가 더 커지는 문제가 있으므로, script같은 text로 이루어져있는 컴포넌트 같은경우 매우 효율적일 수 있다.
- 국제표준 무료 압축 포맷이며 HTTP 통신에 이용할 수 있다.
- 텍스트 파일에 적용 가능 : HTML, JS, CSS (바이너리 안됨 - 예:이미지)

- 1K 미만은 압축하지 않는게 더 성능에 좋다(압축을 하고 푸는 시간이 더 걸리며 CPU 리소스 소비)

사용법 ex.C# 출처 : Hoons.kr

<httpHandlers> <!--*압축할 파일 설정*--> <add verb="*" path="*.aspx" type="Gzip"/> <add verb="*" path="*.ashx" type="Gzip"/> </httpHandlers>

[Web.Config 설정]

using System.IO.Compression; using System.IO; public class Gzip : IHttpHandler {     public Gzip() { }     #region IHttpHandler Members     public bool IsReusable { get { return true; }  }     public void ProcessRequest(HttpContext context)     {         string file = context.Server.MapPath(context.Request.FilePath.Replace(".ashx",""));//파일 경로         string filename = file.Substring(file.LastIndexOf('\\') + 1);//파일 이름         string extension = file.Substring(file.LastIndexOf('.') + 1);//파일 확장자         //1순위 - Gzip         if (context.Request.Headers["Accept-encoding"] != null && context.Request.Headers["Accept-encoding"].Contains("gzip"))         {             FileInfo fileInfo = new FileInfo(file);             if (fileInfo.Length > 1024)//1K 용량 설정             {                context.Response.Filter = new GZipStream(context.Response.Filter, CompressionMode.Compress);                context.Response.AddHeader("Content-Encoding", "gzip");              }          }//2순위 - Deflate          else if (context.Request.Headers["Accept-encoding"] != null && context.Request.Headers["Accept-encoding"].Contains("deflate"))          {              FileInfo fileInfo = new FileInfo(file);              if (fileInfo.Length > 1024)//1K 용량 설정              {                   context.Response.Filter = new DeflateStream(context.Response.Filter, CompressionMode.Compress, true);                   context.Response.AddHeader("Content-encoding", "deflate");               }          }          //ContentType설정          if (extension == "aspx")               context.Response.ContentType = "text/html";          if (extension == "js")               context.Response.ContentType = "application/x-javascript";          if (extension == "css")                context.Response.ContentType = "text/css";          //화면 출력          context.Response.WriteFile(file);          }         #endregion }

[Gzip 클래스의 코드]

5. 스타일쉬트는 위에 놓는다.(Put Stylesheets at the Top)

- 야후의 조사에 따르면 스타일시트를 웹페이지의 head 태그 안에 넣는것 만으로도 좋은 성능을 낸다고 한다.
- 화면이 점진적으로 나타나도록 하려면 CSS 파일이 내용(html)보다 먼저 다운로드되어야 한다.

- 표준에서도 link 태그는 head 태그에서만 사용할 수 있다.

- </HEAD> 위쪽

6. 스크립트는 아래에 놓는다.(Put Scripts at the Bottom)

- <head> 대신 <body> 아래쪽에 스크립트를 넣는다.
- 스크립트를 다운로드하는 동안에는 다른 파일 다운로드는 이루어지지 않는다.

- 화면 구성과 직접적으로 연관이 없는 스크립트는 맨 마지막에 위치시킨다.

- </BODY> 위쪽

7. CSS Expressions 사용을 지양한다.(Avoid CSS Expressions)

- CSS expression을 피하라 : width: expression(~~~) 식의 표현을 자제하면 된다.
- 매력적인 기술이지만 UI 이벤트가 필터링되지 않기 때문에 매우 민감하게 반복적으로 반응함

- 성능에 부정적인 영향을 야기하기 때문에 사용하지 않는다.

- 예) background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

8. 자바스크립트와 CSS를 별도 파일로 분리한다.(Make Javascript and CSS External)

- 자바스크립트와 CSS를 외부로 빼내라
- 파일로 분리하여 캐쉬 기능을 이용할 수 있도록 한다.

9. DNS 찾기를 줄인다.(Reduce DNS Lookups)

- DNS lookup시간을 줄여라
- 도메인 이름을 최소화한다.

- 주요 웹 브라우저에서는 2개의 도메인을 사용할 때 최적화된 처리를 한다.

- 정적인 파일들은 처리하는 도메인을 별도로 분리하여 사용하는 것을 권장한다.
 

10. 자바스크립트를 최소화한다.(Minify Javascript)

- 스크립트의 사이즈를 최소화하라
- js, css 파일을 압축 : 다른 리소스들(이미지와 같은)은 http connection이 모두 사용되어 다운로드를 하지만 유독 js만은 하나의 커넥션으로만 진행됨
: 압축 해주는 사이트 : http://alex.dojotoolkit.org/shrinksafe/
: java -jar custom_rhino.jar -c all.js > all_comp.js 2>&1
: 캐싱되는 문제점을 보완하기 위해서 <script src="script1.js?v=001"></script> 식으로 js src 지정자를 변형시킵니다.

- 여백을 제거하거나 로컬 변수명을 최소화해서 자바스크립트 파일 크기를 줄인다.

- 참고 사이트

http://crockford.com/javascript/jsmin
http://dojotoolkit.org/docs/shrinksafe

11. 리다이렉트 사용을 피한다.(Avoid Redirects)

- 리다이렉트 페이지를 피하라
- 브라우저가 서버에 요청을 한번 하면 서버는 브라우저에게 바뀐 주소로 다시 요청하게 한다.
그럼 해더에 있는 다른 주소로 브라우저가 다시 요청하게 된다.

즉 하나의 페이지를 열기위해 두번의 요청이 발생하게 된다.

- url 를 이동하는 것이 아닌 url 수정을 통해 한번에 갈 수 있도록 하자

12. 중복된 스크립트를 제거한다.(Remove Duplicate Scripts)

- 자바스크립트 뿐만 아니라 중복된 모든 것을 제거한다.

-> 대안 : 라이브러리 사용

13. ETags를 사용하지 않는다.(Configure ETags)

- ETag는 HTTP/1.1 에 명시되어있는 response header로서, cache validation으로 사용될 수 있는 값을 나타낸다. caching을 수행하는 측에서는 If-Modified-Since로 validation - caching되어있는 object가 새로 갱신하지 않아도 되는 유효한 object 인지 확인하는 작업 - 을 수행할 때, 저장되어있던 ETag값을 같이 이용하여 좀 더 확실한 validation을 할 수 있다.
- 클러스터링 환경에서 문제가 될 가능성이 다분

- 다른 대안이 있기 때문에 가급적 사용하지 않는다.

14. ....(Make Ajax Cacheable)

- Rule 3: Add an Expires Header
Rule 4: Gzip Components
Rule 9: Reduce DNS Lookups
Rule 10: Minify JavaScript
Rule 11: Avoid Redirects
Rule 13: Configure ETags 를 이용해서 Ajax 를 성능을 높일 수 있다.

그리고 위의 13가지의 항목의 우선순위를정해 가중치를 둬 우선순위가 높은 항목부터 우선 적용해서 효율적인 웹 서비스를 할 수 있도록 합시다.

Weight 11	3. Add an Expires Header 4. GZip Components 13. Configure ETags
Weight 10	2. Use a Content Delivery Network 5. Put CSS at the Top 10. Minify JavaScript 11. Avoid Redirects
Weight 5	9. Reduce DNS Lookups 6. Move Scripts to the Bottom 12. Remove Duplicate Scripts
Weight 4	1. Make Fewer Requests (CSS) 1. Make Fewer Requests (JS)
Weight 3	1. Make Fewer Requests (CSS background images)
Weight 2	7. Avoid CSS Expressions

[참고]

Book: http://www.oreilly.com/catalog/9780596514211/
Examples: http://stevesouders.com/examples/
Image maps: http://www.w3.org/TR/html401/struct/objects.html#h-13.6
CSS sprites: http://alistapart.com/articles/sprites
Inline images: http://tools.ietf.org/html/rfc2397
jsmin: http://crockford.com/javascript/jsmin
dojo compressor: http://dojotoolkit.org/docs/shrinksafe
HTTP status codes: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
IBM Page Detailer: http://alphaworks.ibm.com/tech/pagedetailer
Fasterfox: http://fasterfox.mozdev.org/
LiveHTTPHeaders: http://livehttpheaders.mozdev.org/
Firebug: http://getfirebug.com/
YUIBlog: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
http://yuiblog.com/blog/2007/03/01/performance-research-part-3/
http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
YDN: http://developer.yahoo.net/blog/archives/2007/03/high_performanc.html
http://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html

[출처] http://blog.naver.com/taekani/130093144753

[출처] [인터넷/웹] 웹사이트 성능 최적화 정리 (High Performance Web Sites)|작성자 주한길

 

[출처] [인터넷/웹] 웹사이트 성능 최적화 정리 (High Performance Web Sites)|작성자 주한길