미분류 75mb 페이지에 lazy load 적용해보기
2014.09.03 02:31
업체 제휴 메일 내용 중, 캡쳐에 여자속옷 쇼핑몰 들렸던 흔적이 포함된채 받았던 적이 ㅋㅋ 그게 몇 년 전이여;;
http://www.chuu.co.kr/ - 네이버에 자주 노출되는 사이트
- 문제: 페이지당 트래픽이 엄청나다.
- 해결: 보이지 않는 이미지는 로딩하지 않았다가 스크롤할 때 로딩한다.
페이지에 75mb 집어넣는 무시무시한 트래픽 - 여기저기 광고해대니 년간 트래픽 비용만으로도 집 한채 살 듯하다 ㅠㅠ
마케팅 비용까지 합친다면?
페이지를 로컬에 저장하고 불러왔더니 network 트래픽은 그대로다.
로컬에서도 여전히 트래픽이 발생하므로 lazy load 테스트하기에 적절하다.
lazyload 플러그인 대신 unveil 적용한다, 자세한 이유는 생략
<?php $GLOBALS['unveil'] = file_get_contents('jquery.unveil.js'); ob_start(function(&$buff){ // dom ready 시점에 jquery.unveil.js 라이브러리 로딩함. $js = '<script>' .$GLOBALS['unveil'] // 이미지 마다 이벤트 적용하기 .'jQuery("img[data-src]").unveil();' // 초반 20개 이미지는 그냥 로딩하기 .'jQuery("img[data-src]:lt(10)").each(function(){ this.src = jQuery(this).attr("data-src"); });;' .'</script>'; $buff = str_ireplace('</body>', $js.'</body>', $buff); // 메뉴등 모든 이미지을 일시적으로 보이지 않는다. // 흔히 쓰이는 animated gif 파일을 적용할 경우 혼란스러우므로 아주 작은 투명 gif 적용한다. $new_img = 'http://i.imgur.com/XCGTXvT.gif'; // 이미지 파일들을 $new_img 변수로 대체한다. $buff = preg_replace('/(<img(?:[^>]+?)src[\s\t]*=)([\'"])([^\'">]*)([\'"])(?:[^>]*)>/i', sprintf('\1\2%s\4 data-src=\2\3\4\5>', $new_img), $buff); //$buff = preg_replace return $buff; }); // 파일명에 특수문자가 있어서 chuu.htm 으로 변경하고 내용 꺼내오기 readfile('chuu.htm');
결과:
방문시 트래픽이 1/100 가량 줄었으며 스크롤을 내리면 그제서야 새로운 이미지를 로딩한다.
댓글 0
번호 | 제목 | 날짜 | 조회 수 |
---|---|---|---|
81 | 검색엔진 등록 | 2010.05.12 | 142341 |
80 | VPS (가상 호스팅) 비교 | 2010.05.12 | 62201 |
79 | 마인크래프트 조합법 1 | 2011.04.01 | 38384 |
78 | CentOS 6 - Apache 2.4.1 컴파일 / 보안 설정 [1] | 2012.04.15 | 30240 |
77 | 리눅스 계정 생성/변경 [67] | 2011.04.02 | 29130 |
76 | Linux Memory 사용량 | 2012.05.16 | 25005 |
75 | CentOS 6 - MySQL 5.5 설치 [1] | 2012.04.15 | 21753 |
74 | Lighttpd 설치 | 2010.05.11 | 20679 |
73 | sAPM | 2010.05.12 | 20264 |
72 | php + ssh2 | 2010.06.05 | 20205 |
71 | Linux 설치시 파티션 관리 | 2012.05.12 | 19215 |
70 | Zend Optimizer + eAccelerator + Suhosin | 2010.05.11 | 18249 |
69 | MySQL 설치 | 2010.05.11 | 17280 |
68 | CentOS 6.2 다운로드 / 설치 [1] | 2012.04.15 | 17032 |
67 | Apache 설치 | 2010.05.11 | 16667 |
66 | ssh 로그인 제한 | 2011.04.05 | 16470 |
65 | 리눅스 자동 시작 | 2010.05.21 | 15895 |
64 | ftp | 2010.07.23 | 15443 |
63 | 솔라리스 mount options | 2013.10.06 | 15324 |
62 | PHP 설치 | 2010.05.11 | 15057 |