วิธีทำ Browser Caching แบบง่ายสุดๆ รองรับ Blogger


เอาวิธีการทำ Caching สำหรับเว็บไซต์ทั่วไป ที่ไม่ใช่พวก CMS ที่มีปลั้กอินสำเร็จรูปที่เพียงแค่ติดตั้ง กดใช้ง่าย ก็สามารถทำระบบ Caching ได้แล้ว อย่าง WordPress เราจึงเลยค้นหาเทคนิควิธีที่จะทำระบบ Caching ให้รองรับกับทุกเว็บไซต์ ในที่สุดก็รู้วิธีแล้ว โดย เราจะเขียนบอกอยู่ 2 รูปแบบ ที่คิดว่าคนนิยมใช้กันมากที่สุด นั้นก็คือ Blogger บล็อกฟรีจาก Google และ การปรับแต่ง .htaccess สำหรับทำระบบ Caching ในเว็บไซต์ทั่วไป ไม่ว่าจะเป็น HTML CSS ธรรมดา เว็บที่เป็นแนว Hard Code ต่างๆ แต่ วิธีนี้จะรองรับกับ Hosting ที่รองรับ .htaccess (แน่นอน Windows Hosting ไม่รองรับนะ) มาเริ่มตัว Code กันได้เลย

Leverage Browser Caching for Blogger
You have to include these tags within the tag HEAD of the page
[php]<include expiration=’7d’ path=’/assets/**.css’></include>
<include expiration=’7d’ path=’/assets/**.js’></include>
<include expiration=’7d’ path=’/assets/**.gif’></include>
<include expiration=’7d’ path=’/assets/**.jpeg’></include>
<include expiration=’7d’ path=’/assets/**.jpg’></include>
<include expiration=’7d’ path=’/assets/**.png’></include>[/php] Leverage Browser Caching for Website
Include the code in website root .htaccess file
[php]<IfModule mod_expires.c>
ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault “access plus 1 month”

# cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest “access plus 0 seconds”

# your document html
ExpiresByType text/html “access plus 0 seconds”

# data
ExpiresByType text/xml “access plus 0 seconds”
ExpiresByType application/xml “access plus 0 seconds”
ExpiresByType application/json “access plus 0 seconds”

# rss feed
ExpiresByType application/rss+xml “access plus 1 hour”

# favicon (cannot be renamed)
ExpiresByType image/x-icon “access plus 1 week”

# media: images, video, audio
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType video/ogg “access plus 1 month”
ExpiresByType audio/ogg “access plus 1 month”
ExpiresByType video/mp4 “access plus 1 month”
ExpiresByType video/webm “access plus 1 month”

# htc files (css3pie)
ExpiresByType text/x-component “access plus 1 month”

# webfonts
ExpiresByType font/truetype “access plus 1 month”
ExpiresByType font/opentype “access plus 1 month”
ExpiresByType application/x-font-woff “access plus 1 month”
ExpiresByType image/svg+xml “access plus 1 month”
ExpiresByType application/vnd.ms-fontobject “access plus 1 month”

# css and javascript
ExpiresByType text/css “access plus 2 months”
ExpiresByType application/javascript “access plus 2 months”
ExpiresByType text/javascript “access plus 2 months”

<IfModule mod_headers.c>
Header append Cache-Control “public”
</IfModule>

</IfModule>
# BEGIN W3TC Browser Cache
<IfModule mod_deflate.c>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json
<IfModule mod_mime.c>
# DEFLATE by extension
AddOutputFilter DEFLATE js css htm html xml
</IfModule>
</IfModule>
# END W3TC Browser Cache
# BEGIN W3TC Page Cache core
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteRule .* – [E=W3TC_ENC:_gzip] RewriteCond %{HTTP_COOKIE} w3tc_preview [NC] RewriteRule .* – [E=W3TC_PREVIEW:_preview] RewriteCond %{REQUEST_METHOD} !=POST
RewriteCond %{QUERY_STRING} =””
RewriteCond %{REQUEST_URI} \/$
RewriteCond %{HTTP_COOKIE} !(comment_author|wp\-postpass|w3tc_logged_out|wordpress_logged_in|wptouch_switch_toggle) [NC] RewriteCond “%{DOCUMENT_ROOT}/zeropaymovies/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}” -f
RewriteRule .* “/zeropaymovies/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}” [L] </IfModule>
# END W3TC Page Cache core[/php]