미분류 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 | 142494 |
80 |
VPS (가상 호스팅) 비교
![]() | 2010.05.12 | 62366 |
79 |
마인크래프트 조합법 1
![]() | 2011.04.01 | 38601 |
78 | CentOS 6 - Apache 2.4.1 컴파일 / 보안 설정 [1] | 2012.04.15 | 30584 |
77 | 리눅스 계정 생성/변경 [67] | 2011.04.02 | 29353 |
76 |
Linux Memory 사용량
![]() | 2012.05.16 | 25267 |
75 |
CentOS 6 - MySQL 5.5 설치
[1] ![]() | 2012.04.15 | 22030 |
74 |
Lighttpd 설치
![]() | 2010.05.11 | 20873 |
73 |
sAPM
![]() | 2010.05.12 | 20461 |
72 |
php + ssh2
![]() | 2010.06.05 | 20423 |
71 |
Linux 설치시 파티션 관리
![]() | 2012.05.12 | 19441 |
70 |
Zend Optimizer + eAccelerator + Suhosin
![]() | 2010.05.11 | 18452 |
69 |
MySQL 설치
![]() | 2010.05.11 | 17452 |
68 |
CentOS 6.2 다운로드 / 설치
[1] ![]() | 2012.04.15 | 17251 |
67 |
Apache 설치
![]() | 2010.05.11 | 16845 |
66 | ssh 로그인 제한 | 2011.04.05 | 16785 |
65 |
리눅스 자동 시작
![]() | 2010.05.21 | 16090 |
64 |
ftp
![]() | 2010.07.23 | 15671 |
63 | 솔라리스 mount options | 2013.10.06 | 15582 |
62 |
PHP 설치
![]() | 2010.05.11 | 15259 |