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

목차

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

jQuery 외부로드

jQuery에서 제공하는 CDN

https://code.jquery.com/jquery-1.8.3.min.js

 

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

https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

 

Google에서 제공하는 CDN

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

 

Google에서 제공하는 CDN

https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

 

---

 

기존 자신의 서버에 있는 jQuery 로드 부분을 제거하고 위 링크 중 하나 사용.

<script type="text/javascript" src="jQuery 외부 링크 주소"></script>

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

PS.

XE 유저 경우 아래 주소에 가셔서 이애드온을 사용 ! 
https://www.xpressengine.com/index.php?mid=download&category_srl=18322925&parent_srl=18322917&package_srl=19433415

.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(캐시)에서 읽으라는 뜻.

 

 

[보완 코드]

https://varvy.com/pagespeed/leverage-browser-caching.html

 

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

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

참고 : 데벨 님 , 라온넷, XE 홈페이지 , 도라란 님

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

브라우저에 해당 파일을 캐시에 저장한 후에 

다음 접속시 만료시간 전이라면 브라우저 캐시에서 데이터를 가져오게 되므로 

서버에 트래픽이 발생하지 않는 이점이 있다.

한 가지 흠이 있다면 

서버에 이미지가 수정되어 업로드 한 경우에 

즉각적으로 변경된 이미지를 볼 수 없다는 점이 아쉽다.

정보출처: 딸기아빠 님