간단한 개발관련 내용

Chapter 05. 스타일시트는 위에 넣어라. 간혹 엔지니어들은 페이지 초기에 필요없는 CSS를 외부 스타일시트에 넣고 이를 페이지 하단에 넣으면 페이지가 좀 더 빨리 로드될 것이란 기대를 한다. 하지만 오히려 반대로 HEAD 영역으로 이동시켰더니 속도가 더 빨라짐을 알 수 있었다. 1. 점진적인 렌더링. 브라우저는 브라우저 자신과 사용자가 페이지 하단의 스타일시트를 다 받을 때까지 기다리는 동안 페이지 렌더링을 지연시킨다. 스타일시트를 페이지 하단에 넣는 것의 문제는 여러 브라우저에서 점진적인 렌더링을 못하게 한다는 것이다. 2. sleep.cgi. 3. 빈 흰색 스크린. 웹 페이지를 호출 한 후에 빈 흰색 스크린을 보지 않으려면 CSS를 페이지 아래에 넣거나 @import 를 이용해 첨부하지 말고 ..

Chapter04 Gzip 컴포넌트. 이번 장에서는 gzip 인코딩을 이용해서 HTTP 응답을 압축하여 응답의 크기를 줄여 속도를 개선하는 방법을 보여준다. 1. 압축을 적용하는 방법.HTTP/1.1 에서부터 웹 클라이언트는 HTTP 요청의 Accept-Encoding 헤더를 이용해 압축의 지원 여부를 보내주게 된다. 웹 서버는 응답 헤더 안의 Content-Encoding 속성을 통하여 웹 클라이언트에게 사용된 압축 방식을 알려준다. gzip 과 deflate 포맷을 사용할 수 있는데 주로 gzip을 사용한다. 2. 무엇을 압축해야 하는가?Gzip은 HTML문서, 스크립트와 스타일시트를 압축할 수 있지만 이미지와 PDF는 이미 압축된 파일이기 때문에 gzip 압축을 적용해서는 안 된다. 일반적으로 gz..

Chapter03. 헤더에 만료기간을 추가하라. 사이트에 처음 방문한 사용자일 경우 여러 번의 HTTP 요청을 하게 될지도 모르지만 헤더 만료기한(Expires)을 이용함으로써 그 구성요소를 캐시에 저장할 수 있다. 1. 헤더의 만료기간. 브라우저 캐시를 이용하여 HTTP의 요청 수를 줄일 수 있다. Expires헤더에서 지정한 시간 이후에는 해당 응답의 내용이 더 이상 유효하지 않다는 것이다. 2. max-age 와 mod_expires 속성. Expires는 지정된 날짜를 이용하기 때문에 서버와 클라이언트가 시간을 맞추어 사용해야며 만료일에 대해 갱신해야 한다는 단점이 있다. 그리하여 HTTP/1.1 에서 소개된 Cache-Control은 Expires 의 한계를 보완하고자 max-age 속성을 설정..

Chapter02. 콘텐츠 전송 네트워크를 이용하라. 서비스의 이용자가 늘게 되어 서버를 증설하게 되면 서버의 콘텐츠를 지리적으로 분산된 여러 개의 서버에 나누어 놓아야 할 필요가 생긴다. 콘텐츠를 지리적으로 분산시킬 때 먼저 웹 애플리케이션을을 분산 구조에 맞게 재설계하는 작업을 피하고, 웹 페이지 구성요소가 저장되어 있는 웹 서버를 먼저 분산시켜 놓는 것이 더 좋은 선택일 수 있고 이는 CDN(Contents Delivery Network)를 이용하면 더 쉽게 구현할 수 있다. CDN은 사용자에게 효율적으로 콘텐츠를 전달하기 위해서 여러 지역에 웹 서버를 분산시켜 놓는 기술인다. 이는 응답시간을 줄이며, 백업, 저장용량의 확대, 캐싱기능을 갖고 이미지, 스크립트, 스타일시트, 플래시와 같은 정적 콘텐..

Chapter 01. HTTP 요청을 줄여라. 1. 이미지 맵(Image map). 이미지 맵 을 이용하면 웹 페이지 UI 변경 없이 HTTP 요청 수를 줄일 수 있다. 그 이유는 한 개의 이미지로 여러 개의 URL 을 연결 할 수 있기 때문이다. 이미지 맵을 사용하면 장점으로는 보통 50% 빠른 속도를 보이는데, 단점으로는 클라이언트 측 맵으로 코드를 작성 할 경우 맵의 영역 좌표를 수동으로 하는 경우 지루하고 실수하기 쉽다. 그리고 네모가 아닌 다른 모양을 만드는 것을 거의 불가능하며 연속적인 이미지여야 하는 안 좋은 점이 있다. 2. CSS Sprite. CSS Sprite 는 이미지 맵처럼 여러 이미지를 결합할 수 있지만 이미지 맵보다 훨씬 유연하다. 보통 CSS 의 background-posit..

chapter 0A. 앞단성능의 중요성.성능 황금률(performance golden rule). 최종 사용자의 응답 시간의 10~20% 만이 HTML 문서를 다운받는 데 사용되고 80~90%는 페이지 안의 모든 구성요소를 다운받는 데 사용된다. chapter 0B. HTTP의 이해. http 를 통해 서버와 클라이언트가 서로 요청과 응답을 주고 받을 때 GET, POST, HEAD, PUT, DELETE, OPTION, TRACE 타입을 사용한다. 이러한 타입과 함께 http 헤더를 통해서 데이터를 압축하거나 조건부GET요청, 만료기간 설정 등으로 웹사이트 성능에 영향을 줄 수 있다.