이미지 트래픽을 줄여봅시다. 정보
이미지 트래픽을 줄여봅시다.
관련링크
본문
트래픽 = 돈 입니다.(특히 한국은 트래픽 비용이 외국보다 비쌉니다.)
트래픽만 줄여도 비용이 많이 save 됩니다.
cdn 을 클라우드플레어 쓴다면 크게 문제없지만,
클라우드 플레어의 플랜에 따른 colo 문제 때문에 쇼핑몰에선 거의 사용 불가죠.
비싼 idc 비용을 절감하기 위해 트래픽을 낮추는 방법입니다.
1. lazy loading
- 모든 상품 이미지는 lazy loading을 적용합니다. 썸네일포함
2. 동적 썸네일 적용
- 영카트는 특성상 s, m, l 이미지 3개만유지하는데, 썸네일은 페이지별로 상황에 따라 요청하는 크기가 다릅니다.
- 45x45 같은 작은 이미지를 150x130 으로 요청할 필요가 없는거죠.(별차이 없어보이지만, 작은 차이가 모이면 커집니다.)
: 동적 썸네일을 만드는 방법은 인터넷 문서를 참조.(nginx rewrite rule + php 도 가능하고, nginx 자체 기능으로도 가능)
3. 퀵뷰(미리보기)
- 상품 상세에는 큰 이미지가 있기 마련입니다. 가장 많은 트래픽을 만들어 냅니다.
: 사용자는 페이지 가 새로고침되는 상세 페이지보다 퀵뷰를 선호합니다.
: 상세 페이지 요청수가 많이 줄어들게 됩니다.
4. 이미지는 모두 캐싱 처리
- php thumbnail 같이 요청마다 이미지 트래픽을 만드는 페이지는 사용하지 않습니다.
- 모든 이미지는 정적 이미지로 제공되어야 합니다. 그리고 캐싱처리되어야함
5. 캐싱주기를 늘리자
- 상품 이미지는 한번 올리면 변경되지 않습니다. 상세 이미지는 캐싱 주기를 1일이상 유지해도 됩니다.
- 단 수정이 일어날수 있음으로 퍼지기능을 추가하면 좋습니다.
위의 5가지를 적용하면, 트래픽이 많은 쇼핑몰 사이트의 경우 30~ 50% 이상 트래픽을 절감할수 있습니다.
트래픽만 줄여도 비용이 많이 save 됩니다.
cdn 을 클라우드플레어 쓴다면 크게 문제없지만,
클라우드 플레어의 플랜에 따른 colo 문제 때문에 쇼핑몰에선 거의 사용 불가죠.
비싼 idc 비용을 절감하기 위해 트래픽을 낮추는 방법입니다.
1. lazy loading
- 모든 상품 이미지는 lazy loading을 적용합니다. 썸네일포함
2. 동적 썸네일 적용
- 영카트는 특성상 s, m, l 이미지 3개만유지하는데, 썸네일은 페이지별로 상황에 따라 요청하는 크기가 다릅니다.
- 45x45 같은 작은 이미지를 150x130 으로 요청할 필요가 없는거죠.(별차이 없어보이지만, 작은 차이가 모이면 커집니다.)
: 동적 썸네일을 만드는 방법은 인터넷 문서를 참조.(nginx rewrite rule + php 도 가능하고, nginx 자체 기능으로도 가능)
3. 퀵뷰(미리보기)
- 상품 상세에는 큰 이미지가 있기 마련입니다. 가장 많은 트래픽을 만들어 냅니다.
: 사용자는 페이지 가 새로고침되는 상세 페이지보다 퀵뷰를 선호합니다.
: 상세 페이지 요청수가 많이 줄어들게 됩니다.
4. 이미지는 모두 캐싱 처리
- php thumbnail 같이 요청마다 이미지 트래픽을 만드는 페이지는 사용하지 않습니다.
- 모든 이미지는 정적 이미지로 제공되어야 합니다. 그리고 캐싱처리되어야함
5. 캐싱주기를 늘리자
- 상품 이미지는 한번 올리면 변경되지 않습니다. 상세 이미지는 캐싱 주기를 1일이상 유지해도 됩니다.
- 단 수정이 일어날수 있음으로 퍼지기능을 추가하면 좋습니다.
위의 5가지를 적용하면, 트래픽이 많은 쇼핑몰 사이트의 경우 30~ 50% 이상 트래픽을 절감할수 있습니다.
추천
3
3
댓글 6개
좋은 팁 감사합니다.
덧붙여서 nginx를 사용할 경우 캐싱하는 설정 코드입니다.
# cache expires 1 year
location ~ [^/]\.(css|js|gif|png|jpg|jpeg|eot|svg|ttf|woff|woff2|otf)(/|$) {
access_log off;
add_header Cache-Control must-revalidate;
expires 1y;
etag on;
}
1년간 변하지 않는다는 가정입니다.
css, js, 이미지, 웹폰트 류는 한번 정해지면 쉽사리 바뀌지 않는 것들이지요.
만약 바뀐다는 가정이 있으면 php에서 filemtime 함수를 이용해서 수정이 생긴 css, js파일들은 처리가 가능합니다.
function js_css($urls)
{
$html = null;
if (!is_array($urls)) {
$urls = (array)$urls;
}
foreach ($urls as $url) {
$arr = explode('.', $url);
$ext = $arr[count($arr) - 1];
if ($ext === 'js') {
$html .= '<script src="'.$url.'?'.filemtime(ROOT.$url).'"></script>'.PHP_EOL;
} else if ($ext === 'css') {
$html .= '<link rel="stylesheet" href="'.$url.'?'.filemtime(ROOT.$url).'">'.PHP_EOL;
}
}
return $html;
}
저같은 경우는 이렇게 함수를 만들어서 css와 js의 캐싱처리를 합니다.
덧붙여서 nginx를 사용할 경우 캐싱하는 설정 코드입니다.
# cache expires 1 year
location ~ [^/]\.(css|js|gif|png|jpg|jpeg|eot|svg|ttf|woff|woff2|otf)(/|$) {
access_log off;
add_header Cache-Control must-revalidate;
expires 1y;
etag on;
}
1년간 변하지 않는다는 가정입니다.
css, js, 이미지, 웹폰트 류는 한번 정해지면 쉽사리 바뀌지 않는 것들이지요.
만약 바뀐다는 가정이 있으면 php에서 filemtime 함수를 이용해서 수정이 생긴 css, js파일들은 처리가 가능합니다.
function js_css($urls)
{
$html = null;
if (!is_array($urls)) {
$urls = (array)$urls;
}
foreach ($urls as $url) {
$arr = explode('.', $url);
$ext = $arr[count($arr) - 1];
if ($ext === 'js') {
$html .= '<script src="'.$url.'?'.filemtime(ROOT.$url).'"></script>'.PHP_EOL;
} else if ($ext === 'css') {
$html .= '<link rel="stylesheet" href="'.$url.'?'.filemtime(ROOT.$url).'">'.PHP_EOL;
}
}
return $html;
}
저같은 경우는 이렇게 함수를 만들어서 css와 js의 캐싱처리를 합니다.
오, 꿀팁 감사합니다.
감사합니다
감사합니다
어려운데 공부를 해야 겠네요
