ต่อไป »

[!KhunARM]

พอดีไปเจอที่ www.expertduck.com มาครับเลยเอามาฝาก ขอขอบคุณไว้ ณ ที่นี่ด้วยครับผม
 



หลังจากที่ค้างไว้บทความเก่า มาบทความนี้เป็นการจูนให้เว็บแคชทุกอย่างอิอิ ในบทความนี้จะกล่าวถึงการจูน .htaccess ให้ browser cache .css ,.js,รูป
หรืออื่นๆที่เป็น static(ข้อมูลไม่เปลี่ยนแปลง)เพื่อที่จะลด Connection/bandwidth เร่งความเร็วของหน้าเว็บให้ถึงขีดสุด (แต่ถ้าเข้ามาครั้งแรก ก็โหลดธรรมดา
คงต้องไปดูในเรื่องของการ optimzie css/javascript อะไรพวกนี้แล้วแหละครับ) และ php ที่เขียนขึ้นเองหรือว่า ใส่ไว้ในธีม wordpress ครับ ต้องบอกว่า
ลื่นหัวแตกจริงๆ(ใครหัวไม่แตกบอกผม เดี่ยวผมตีให้แตกเอง ฮ่าๆๆ)

หลังจากบทความที่แล้ว เล่ามาซะยืดยาว(เพื่ออะไรวะ 555+ ไม่ชอบก็บอกนะครับจะได้ไม่ต้องโพสต์ให้เมื่อยตุ้ม+ยุบโดเมนเหลือแต่ post เหวงๆ 55
{มันก็เหวงทุกpost อ่าแหละ}) มาบทความนี้สรุปสั้นๆละกันครับ (ขี้เกียจแล้ว)
บทความที่แล้วถ้าใครยังไม่ได้อ่านก็ไปอ่านมาก่อนนะครับเพื่อความเข้าใจยิ่งขึ้น(เพราะผมคิดว่าในบทความนี้ผมจะกล่าวถึงค่อนข้างเยอะ)
Cache-Control Basic

ทำความเข้าใจเพิ่มเติม
 ทำความเข้าใจเพิ่มเติมจากบทความ cache-control basic นะครับ บทความนั้นส่วนใหญ่ผมจะกล่าวถึง php โดยการส่งheaderออกไปแบบ custom
อันนี้จะกล่าวถึงภาพรวมหรือว่าทั้งไซต์เลยทีเดียวเชียว (โอ้ว อลังการงานสร้างมาก ) บอกไว้ก่อนนะครับในบทความที่ผมจะโพสต์นีจูน .htaccess
ในบทความ basic cache-control จะกล่าวถึง headers อยู่สองสามตัวครับ ซึ่งตัวที่เป็นพระเอกในเรื่องนั้นคือ Last-modified
แต่ในเรื่องนี้คือ Expires ครับ เพราะอย่างนึงที่ผมไม่ได้บอกใน บทความนั้นคือ “ถ้ากำหนด header Expires ไปแล้ว Browser
มันจะไม่ส่ง request มายัง serverเลย เรียกไฟล์แคชก่อนเลย”  ตราบใดที่ไม่ได้ F5 ,Refresh หน้าเพจ
(ถ้ากด F5 หรือ Refresh ก็ยังติดที่เราทำในบทความ basic cache-control อยู่ดีเพราะมีการส่ง if-modified-since กลับ ใช่มั้ยล่า~
เข้า โค๊ดกันเลย

โค๊ด:

Header set Cache-Control "public"
FileETag None
Header unset Etag
Header unset Pragma
<FilesMatch "\.(flv|gif|jpg|jpeg|png|ico|js|css|pdf|swf)$>
Header set Expires "Thu, 15 Apr 2011 20:00:00 GMT"
</FilesMatch>
<FilesMatch "\.(flv|gif|jpg|jpeg|png|ico)$">
   Header set Cache-Control "max-age=31536000"
</FilesMatch>
<FilesMatch "\.(js|css|pdf|swf)$">
   Header set Cache-Control "max-age=2592000"
</FilesMatch>

ใส่ไว้ใน .htaccess นะครับ แล้วอย่าลืมปรับเป็น read-only ด้วยละครับไม่งั้นเวลาเปลี่ยน permalink ใน wp ระบบมันจะเขียนทับใหม่หมดเลย
อธิบายโค๊ดเล็กน่อย (หรือไม่ต้องดี ?)
4 บรรทัดแรกปรับให้ทุก request ตัด Headers ETag + Pragma ออกไป แล้ว set cache-control = public
ส่วนของ FilesMatch ถ้า Files ไหนตรงกับ pattern นั้น (นามสกุลนั้น)จะเซ็ทค่าตามนั้น
FilesMatch อันแรก ตั้งค่า Expires ไว้ 1 ปี (แก้เอาเองนะ)อย่างน้อยพวกรูปอะไรพวกนี้ไม่ได้เปลี่ยนแปลงบ่อย
(ถ้าจะเปลี่ยน แปลงจริงๆ กด refresh ก็เป็นรูปใหม่ที่อัพเดทแล้ว หรือ อัพรูปใหม่ชื่อใหม่ไปเลยก็ได้ง่ายดี
FilesMatch ถันไป set Cache-Control ตามนามสกุลไฟล์ครับ
แค่นี้แหละครับไม่อยากโพสต์ยืดยาวไปมากกว่านี้

อ้อลืมสำหรับ wordpress ตั้งค่าในไฟล์ธีม/functions.php ให้มันแคชบทความหรือหน้าเพจเราด้วย สัก 30นาที หรือว่า 1วัน 7
วันก็ยังดีครับเผื่อใครชอบคลิ๊กไปคลิ๊กมา เอาๆ โค๊ดครับ ขี้เกียจแล้ว

โค๊ด:

$xpire = 60*30;
if(is_single() || is_page())
	$xpire = 60*60*24*7;//7 Days
else
	$xpire = 3600*3; // 3 ชั่วโมง
define('EXPIRE',$xpire);
if(!is_admin()){
	header('Cache-control: public;max-age='.EXPIRE);
	//แคชจ้าแคช
	header('Last-Modified:'.gmdate("D, d M Y H:i:s",time())." GMT");
	header('Pragma: cache');
	header('Expires: '.gmdate("D, d M Y H:i:s",time()+EXPIRE)." GMT");
}

ทดสอบได้ที่เว็บตามลายเซ็นครับ  

Edit: แก้ไขเมื่อกี้ตั้งกระทู้ งง ไปหน่อย