사이트를 작업하다보면 많은 이미지를 호출하게 됩니다. 접속자가 많아서 사이트의 트래픽이 올라가면 좋겠지만 쓸대없이 사이트의 트래픽이 올라가는 경우가 있습니다. 바로 스크립트에 의한 반복적인 이미지 호출이 오늘의 이슈입니다.
위 소스에서 주석처리되어 있는 부분을 보면 이미지 객체를 생성해 인자로 받은 이미지객체에서 주소를 뽑아 새로 생성한 이미제 객체에 사용합니다. 아마 로딩 여부까지 확인하는 것 같은데요….
문제는 이 작업이 페이지를 열어 두고 있으면 몇초 간격으로 계속 발생하고 작동할때마다 4, 5건의 이미지를 전부 새로 로딩한다는 것입니다. 이미지 썸내일이라 용량이 크지 않지만 슬라이딩 될때마다 썸내일 이미지들을 전부 다시 부르고 있습니다.
슬라이딩 되는 이미지가 10개고 한개당 10kB 라고 5초마다 호출한다면 웹페이지를 10분만 열어 둬도 약 12MB 정도 트래픽이 발생하는 것이지요. 100명이 웹페이지 열어두고 있으면 1GB정도가 10분만에 발생하겠네요.
10kB * 10 * 60 * 10 / 5 = 12000kB = 11.72MB
AWS 라면 암튼, 비용이 발생하겠지요. 웹 호스팅이라면? … 역시 트래픽 초과로 사이트가 닫힐거고 열려면 비용이 발생할겁니다. 사용자가 주의깊에 새로 갱신하면서 봐야하는 이미지도 아닌데 말이죠.
프론트 작업할때 이런것도 주의깊게 확인하는 습관이 필요해 보입니다. 사이트 오픈전에 혹은 운영하면서도 확인이 필요합니다. 아마 이런걸 줄이면 서버도 저비용의 가상서버로 비용을 줄일 수도 있을거에요.
그리고 서버에서 PHP나 JSP나 ASP로 생성해서 직접 전송하는 이미지의 경우 브라우저 캐시가 되도록 해더를 정해주면 좋습니다. 안그러면 역시 계속 트래픽이 발생하니까요.
위 네트워크 정보를 보면 썸내일을 생성하는 PHP파일도 있지만 매모리 캐싱된 결과를 볼수 있습니다. 이는 아래 해더설정을 사용해서입니다.
header("Pragma: public");
header("Cache-Control: max-age=604800"); // cache for 1 week
header("Expires: ". gmdate("D, d M Y H:i:s GMT", time() + 604800));
header("Content-Type: image/jpeg");
캐싱 시간은 1주로 되어있지만 적당히 수정하셔도되고 아니면 1년을 잡고 url에 캐싱시간을 관리해도 좋습니다.
웹 개발자 이야기 