ผู้ใช้งานหลายๆท่านคงเคยประสบปัญหาการทำเว็บไซต์ เมื่อเรียกใช้งานขึ้นมาแล้วพบว่าเว็บไซต์ของท่าน มีการดาวน์โหลดหน้าเว็บไซต์นานกว่าปกติ หลายๆท่านเคยทดสอบประสิทธิภาพความเร็วของเว็บไซต์ด้วย tools ต่างๆ ก็จะพบคำแนะนำที่ช่วยให้การเข้าใช้งานเว็บไซต์มีประสิทธิภาพเร็วยื่งขึ้น ซึ่งในบทนี้เราจะแนะนำวิธีการกำหนดค่า leverage Browser Caching ซึ่งการใช้เบราว์เซอร์แคชจะทำให้เบราว์เซอร์สามารถเก็บข้อมูลบางอย่างไว้ และให้โหลดโดยตรงจากแคชแทนการเรียกข้อมูลจากเซิร์ฟเวอร์ สำหรับผู้ที่เข้าใช้งานเว็บไซต์ซ้ำๆ ซึ่งจะสามารถช่วยลดเวลาในการโหลดหน้าเว็บไซต์ และยังช่วยให้ใช้งานแบรนด์วิธน้อยกว่าเดิมอีกด้วย
วิธีการใช้ leverage browser caching
วิธีการใช้ leverage browser caching กับเซิร์ฟเวอร์ของท่าน จะมีสองวิธีที่จะใช้ประโยชน์จาก leverage browser caching บนเซิร์ฟเวอร์ โดยวิธีที่ท่านเลือกจะขึ้นอยู่กับว่าเว็บเซิร์ฟเวอร์ที่ท่านใช้นั้นใช้งานเป็น Nginx หรือ Apache นั่นเอง
ในการเปิดใช้งาน leverage browser caching ท่านจะต้องตั้งค่า Cache-Control headers และเปิดใช้งาน mod_expires เพื่อกำหนดวันหมดอายุสำหรับไฟล์บางประเภท โดยผู้ใช้ส่วนใหญ่จะทำการเพิ่มโค้ดลงไปที่ไฟล์ .htaccess บนโฮสติ้ง / เซิร์ฟเวอร์ของท่าน ซึ่งไฟล์ .htaccess จะสามารถกำหนด config ต่างๆสำหรับเว็บไซต์ของท่านได้ ทั้งเว็บเซิร์ฟเวอร์ Apache และ Nginx
วิธีการ config ค่านั้นเราจะต้องดูว่าไฟล์ชนิดใดที่เราต้องการทำการแคช อาทิ เช่น favicon.ico / images : jpg, gif, png / javascript / css เป็นต้น จากนั้นมาตรวจสอบระยะเวลาในการเก็บข้อมูลในแคช อาทิ เช่น ไฟล์ที่ไม่มีการแก้ไขบ่อยครั้ง สามารถกำหนดระยะเวลาหมดอายุไว้ยาวนานขึ้นได้ ตัวอย่างเช่น 1 years ส่วนไฟล์ใดที่มีการแก้ไขข้อมูลบ่อยครั้ง ควรกำหนดระยะเวลาหมดอายุไว้ไม่นาน ตัวอย่างเช่น 1month , 1 week เป็นต้น
จากนั้นเรามาเริ่มทำการเพิ่ม config ที่ไฟล์ของท่านกันเลย โดยเราจะแนะนำการเพิ่มค่าของทั้ง Apache และ Nginx
Cache-Control Headers บน Nginx : ให้ทำการเพิ่ม config ต่อไปนี้ลงในเซิร์ฟเวอร์ของท่านโดยค่า default จะอยู่ที่ path /etc/nginx/site-enabled/default
location ~* \.(png|jpg|jpeg|gif)$ {
expires 365d;
add_header Cache-Control "public, no-transform";
}
location ~* \.(js|css|pdf|html|swf)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Cache-Control Headers บน Apache : ให้ทำการเพิ่ม config ต่อไปนี้ที่บรรทัดบนสุดของไฟล์ .htaccess ของท่าน
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
หมายเหตุ :
Header set Cache-Control : ส่วนกำหนดค่าส่วนหัว
max-age : = 2592000 วินาที (30 วัน) ซึ่งระบุไว้ว่าควรเก็บแคชไว้นานเท่าใด ค่าดังกล่าวคือค่าต่ำสุดที่สามารถกำจัดคำเตือนได้ หากตั้งค่าวันหมดอายุน้อยกว่านี้ท่านจะเห็นคำเตือนของเบราว์เซอร์ยังคงอยู่
public : ระบุว่าเป็นข้อมูลสาธารณะ
Expires Headers บน Nginx : ให้ทำการเพิ่ม config ต่อไปนี้ลงในเซิร์ฟเวอร์ของท่านโดยค่า default จะอยู่ที่ path /etc/nginx/site-enabled/default
location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 30d;
}
Expires Headers บน Apache : ให้ทำการเพิ่ม config ต่อไปนี้ที่บรรทัดบนสุดของไฟล์ .htaccess ของท่าน
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css "access 1 month" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/html "access 1 month" ExpiresByType text/x-javascript "access 1 month" </IfModule> ## EXPIRES CACHING ##
โดย config ด้านบนจะกำหนดว่าจะใช้แคชและระยะเวลาในการจำค่าเท่าใด ยกตัวอย่าง เช่น
ExpiresByType text/css "access 1 month"
จะเป็นการแคชไฟล์ css โดยเก็บไว้ 1 เดือน เนื่องจากมีการแก้ไขอยู่บ่อยครั้ง ซึ่งควรเพิ่มลงในส่วนบนสุดของไฟล์ .htaccess จากนั้นทำการบันทึกไฟล์ .htaccess และรีเฟรชหน้าเว็บไซต์ของท่าน
หลังจากทำการ config ที่ไฟล์ .htaccess เรียบร้อยแล้วสามารถทดสอบได้ดังนี้
เพียงเท่านี้ก็จะสามารถใช้งาน leverage browser caching ได้แล้วนะคะ ทาง HostPacific หวังว่า leverage browser caching จะเป็นการเก็บแคชของเบราว์เซอร์ ที่จะชวยทำให้เว็บไซต์ของท่านมีประสิทธิภาพในการเรียกใช้งานได้ไวมากยิ่งขึ้น
