• Q&A
  • 회원가입
  • 로그인

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

1. 
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.

 

2. 

.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 ##

 



3. 
외부링크차단
 

파일 내용을 아래와 같이 작성해서 차단할 폴더 내 .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같은 것들은 제대로 안되더군요;
 

 

 

4.

구글봇차단


 아래 문구를 /.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

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



5. 
아파치 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 (서버의 파일 수정 시간 기준)

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

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


정보출처: 딸기아빠 님


코딩 공부는 「홈짱닷컴」에서...

no_profile young 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2015-02-06 (금) 08:46 5년전
와.. 제가원하는정보를 올려주셨네요
안그래도 제가 얼마전에 티스토리에다 업로드하고 이미지를 대체할려고했는데
안먹히더라구요 방법이 잘못된것같은데..
http://cfile9.uf.tistory.com/image/2604933654D2BBB826051F

이 이미지주소를 가지고 어떻게 올려야하나요?
     
     
홈짱 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 2015-02-06 (금) 12:06 5년전
외부이미지를 사용하면 본문에 이미지가 노출됩니다. 그래도, 사용을 원하시면 아래 과정 따라하세요.

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

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

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


PS. 티스토리 말고, imgur.com 도 사람들이 많이 이용하더군요.
PS. 배추 님께 물어봤는데, 외부이미지는 썸네일용으로 이용 힘들다 하네요.
    display:none 이나 visibility:hidden 속성을 이용해 감추니까 썸네일 생성 자체가 안됨. ㅡㅡ

방문자 수

오늘 162
어제 2,443
최대 2,543
이달 53,019
전체 1,114,735
찾아주셔서 감사합니다. Since 2012