회원보드

[web] 트래픽 아끼는 법 4 - (= 트래픽 절약법) ★

5,425

목차

  1. jQuery 외부로드
  2. .htaccess 에 PC 캐시 이미지 긁어와서 읽기
  3. 외부링크 차단
  4. 구글봇 차단
  5. 아파치 Deflate Expires 설정으로 트래픽 줄이기

 

jQuery 외부로드

jQuery에서 제공하는 CDN
 
jQuery에서 제공하는 최신 jQuery CDN
https://code.jquery.com/jquery.min.js
 
MS에서 제공하는 CDN
https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js
 
Google에서 제공하는 CDN
 
Google에서 제공하는 CDN
 
Google에서 제공하는 CDN

 


 
기존 자신의 서버에 있는 jQuery 로드 부분을 제거하고 위 링크 중 하나 사용.
<script type="text/javascript" src="jQuery 외부 링크 주소"></script>

로드 속도는 본인 서버에 올린 경우와 별반 다르지 않으니, 속도 관련해서는 걱정 안하셔도 됨.

PS.

 

.htaccess 에 PC 캐시 이미지 긁어와서 읽기

 

/.htaccess 파일에 아래 코드 추가 (없으면 생성 추가)
 수정 전
#ExpiresActive On
#ExpiresByType image/gif A86400
#ExpiresByType image/jpg A86400
 
수정 후 (# 제거해 주석 처리된 걸 해제)
ExpiresActive On
ExpiresByType image/gif A86400
ExpiresByType image/jpg A86400
 
해석 : gif, jpg 파일을 서버에서 한번 읽으면 하루동안 접속자 pc(캐시)에서 읽으라는 뜻.

 

 
[보완 코드]
 
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

 


외부링크 차단


파일 내용을 아래와 같이 작성해서 차단할 폴더 내 .htacess 파일을 만들어 업로드. 
※ 주의: htaccess 앞에 마침표 붙여야 함.

3번째 줄은 허용 도메인. (★ 허용 도메인에 반드시 본인 도메인 명은 입력되어야 합니다.)
4번째 줄은 차단할 파일 확장자.

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?naver\.com [NC]
RewriteRule .*\.(jpe?g|gif|png|swf|flv|mp3|mp4|wma|wmv|asf|mov|avi)$ - [NC,F]
 
차단시 대체 이미지 표시하려면 마지막 줄 소스를 아래 처럼 수정
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?naver\.com [NC]
RewriteRule \.(jpe?g|gif|png|swf|flv|mp3|mp4|wma|wmv|asf|mov|avi)$ http://불펌시 대체 이미지.jpg[NC,R,L]
 
참고로. 저는 이미지 파일들과 swf 파일만 확인 했습니다. 웬지 mp3같은 것들은 제대로 안되더군요;
 

 

구글봇 차단


아래 문구를 /.htaccess 파일에 추가하면 구글봇 차단.
SetEnvIfNoCase User-Agent "Googlebot" bad_request
Deny from env=bad_request
첫 번째 줄을 계속해서 다른 검색엔진들을 추가 하시면 됩니다.
SetEnvIfNoCase User-Agent "naver" bad_request 이런식으로 추가.

예)
SetEnvIfNoCase User-Agent "Googlebot" bad_request
SetEnvIfNoCase User-Agent "naver" bad_request
Deny from env=bad_request

그러나 이미 검색 엔진이 긁어 갔다면 늦은 겁니다.

 

아파치 Deflate Expires 설정으로 트래픽 줄이기

 

아파치 모듈중에 mod_deflate 가 있다. 컨텐츠를 압축해서 전송해주는 방법이다.

압축해서 전송하면 브라우저가 알아서 압축을 풀어서 보는 방식이다.

 

※ mod_deflate 모듈 설정

 

<IfModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

DeflateCompressionLevel 1

 

# Browser specific settings

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

BrowserMatch \bOpera !no-gzip

</IfModule>

 

DeflateCompressionLevel 은 압축율인데
1 ~ 9 사이의 값으로 설정이 가능한데 숫자가 높을수록 cpu 사용량이 올라간다.

1 정도만 설정해도 효과는 충분할 것 같다.

 

추가로 mod_expires 라는 모듈도 있는데
이는 브라우저의 캐시 기능을 활용하는 방식인데
이 또한 설정을 해 놓으면 트래픽을 줄일 수가 있다.

 


※ mod_expires 모듈 설정

 

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/gif "access plus 1 days"

ExpiresByType image/jpeg "access plus 1 days"

ExpiresByType image/png "access plus 1 days"

ExpiresByType text/css "access plus 1 days"

ExpiresByType image/gif "modification plus 1 days"

ExpiresByType image/jpeg "modification plus 1 days"

ExpiresByType image/png "modification plus 1 days"

ExpiresByType text/css "modification plus 1 days"

 

</IfModule>

 

캐시 만기 시간 설정
 
1. 
access plus (접속 후 만기 시간) 
  • 1년 후 : 5 years
  • 1달 후 : 1 months
  • 2주 후 : 2 weeks
  • 10일 수 : 10 days
  • 5분 후 : 5 minutes
  • 30초 후 : 30 seconds

2. 
modifications plus (서버의 파일 수정 시간 기준)

브라우저에 해당 파일을 캐시에 저장한 후에 
다음 접속시 만료시간 전이라면 브라우저 캐시에서 데이터를 가져오게 되므로 
서버에 트래픽이 발생하지 않는 이점이 있다.

한 가지 흠이 있다면 
서버에 이미지가 수정되어 업로드 한 경우에 
즉각적으로 변경된 이미지를 볼 수 없다는 점이 아쉽다.


정보출처: 딸기아빠 님

 


2015-02-06 (금) 08:46 9년전
와.. 제가원하는정보를 올려주셨네요
안그래도 제가 얼마전에 티스토리에다 업로드하고 이미지를 대체할려고했는데
안먹히더라구요 방법이 잘못된것같은데..
http://cfile9.uf.tistory.com/image/2604933654D2BBB826051F

이 이미지주소를 가지고 어떻게 올려야하나요?
     
     
2015-02-06 (금) 12:06 9년전
외부이미지를 사용하면 본문에 이미지가 노출됩니다. 그래도, 사용을 원하시면 아래 과정 따라하세요.

1. 관리자 > 기본환경설정 > 이미지 업로드 확장장

  수정 전: gif|jpg|jpeg|png
  수정 후: gif|jpg|jpeg|png||

2. 에디터 편집모드에서 우측 하단의 <> 버튼 클릭해 html 모드로 전환 후, 아래 형식으로 기입
  <img src="티스토리 주소">


PS. 티스토리 말고, imgur.com 도 사람들이 많이 이용하더군요.
PS. 배추 님께 물어봤는데, 외부이미지는 썸네일용으로 이용 힘들다 하네요.
    display:none 이나 visibility:hidden 속성을 이용해 감추니까 썸네일 생성 자체가 안됨. ㅡㅡ
분류 제목 조회
girl 이주은 치어리더 님 - 내 날개 어딨나 뚤레뚤레... 새글
13
13
ucc 여동생의 변신 - 도도하고 차가운 느낌 말 걸기 어려운 이송경 님 [유머] 새글
17
17
dance 2차원 금발 소녀 엘리베이터 댄스
36
36
dance 레드벨벳 웬디 칠 킬 댄스 (Red Velvet WENDY - Chill Kill)
35
35
ucc 층간 소음으로 입주민들 다 내쫒는 얌체 4층 입주민 고양이 [동물/유머]
33
33
sports 축구 U23 대한민국, 승부차기 끝에 호주 제압하고 WAFF (서아시아 잼피언십) 우승
21
21
sports 축구 월드컵 2차 예선 태국 원정 0:3으로 이기긴 했지만...
31
31
talk 개발자 님들, $_POST 귀신 만나본 적 있으신가요?
42
42
vote AI가 출현과 홈페이지 광고 수익 관계 설문조사 설문 중
48
48
sports 김은선 프로 님이 알려주는 올바른 골프 스윙 자세
37
37
ucc 코딩 날로 먹으려는 학생 참교육하는 ChatGPT G선생님
74
74
1/149
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인