간단한 개발관련 내용

Chapter 13. ETag를 설정하라. 사용자가 경험을 향상시키기 위한 최선의 방법은 페이지 렌더링에 필요한 HTTP 요청수를 줄이는 것이다. 1. ETag란 무엇인가?웹서버와 브라우저가 캐시된 구성요소의 유효성을 확인하기 위해서 사용하는 메커니즘이다. ㄱ. 헤더의 Expires.헤더 Expires에 설정된 만료기한이 지나지 않았다면 구성요소는 새로운 것이라 판단한다. 권고된 기간은 1년미만이지만 브라우저는 1년이상의 만료기한을 지원한다. ㄴ. 조건부 GET 요청.서버의 구성요소와 캐시된 구성요소가 같은 파일인지 결정하는 두 가지 방법이 있다. 마지막 수정일을 비교한다.ETag를 비교한다. ㄷ. 마지막 수정일.구성요소의 마지막 수저일은 서버에서 응답헤더의 Last-Modified 를 통하여 반환된다...

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..