กำหนดการแคชในเบราว์เซอร์(Leverage browser caching)

หน้าแรก Google กำหนดการแคชในเบราว์เซอร์(Leverage browser caching)

---

หลายคนคงเคย ทดสอบความเร็วเว็บไซต์ที่เราได้ทำขึ้นมา ซึ่งการทดสอบโดยใช้เครื่องมือของ google นั้นก็เป็นที่นิยมกันมาก ในการทดสอบนั้น ก็จะมีการแนะนำวิธีการต่าง ๆ เพื่อให้การโหลดหน้าเว็บไซต์นั้น มีประสิทธิภาพมากขึ้น และในบทความนี้ เรามาดูวิธีการหนึ่งในหลาย ๆ วิธีที่ทำให้เว็บไซต์ของเรานั้น โหลดได้เร็วขึ้น โดยการ กำหนดการแคชในเบราว์เซอร์(Leverage browser caching)

การแคช(Caching) คืออะไร
แคช(Cache) ก็คือหน่วยความจำชนิดหนึ่งที่เอาไว้เก็บข้อมูลที่ใช้งานบ่อย ๆ ดังนั้น การแคช(caching) ก็คือการเก็บข้อมูลที่จำเป็นต้องใช้บ่อย ๆ เอาไว้ในหน่วยความจำ ซึ่งทำให้เราสามารถใช้งานข้อมูลได้เร็วยิ่งขึ้น เพราะไม่ต้องไปเปิด หรือโหลดข้อมูลใหม่ทั้งหมด

browser caching คืออะไร
browser caching ก็เป็นการทำ การแคชในบราวเซอร์ ซึ่งก็คือการเก็บข้อมูลไว้ในหน่วยความจำของบราวเซอร์นั่นเอง เพื่อให้เว็บนั้นได้โหลดไวขึ้น เพราะการเข้าเว็บครั้งต่อไปนั้น ไม่จำเป็นต้องไปดึงข้อมูลจาก server ทั้งหมด เพราะสามารถดึงข้อมูลจาก cache ได้เลย

รูปภาพแสดงการเปรียบเทียบระยะเวลาระหว่างการทำแคช กับการไม่ทำแคช




เราสามารถนำประโยชน์จากการทำแคชนี้มาใช้ในเว็บไซต์เราได้

เริ่มต้นสร้างการแคช(caching) ในเว็บไซต์
ในบทความนี้จะเป็นการสร้างการแคช โดยใช้ไฟล์ .htaccess ผ่าน Apache Module mod_expires กันครับ

เรามาเริ่มสร้างกันเลยดีกว่า ก่อนอื่น เราก็ต้องดูว่าไฟล์ชนิดไหนบ้างที่เราต้องการทำการแคช เช่นไฟล์ด้านล่าง
images: jpg, gif, png
favicon/ico
javascript
css
ต่อไปก็มาดูระยะเวลาในการเก็บข้อมูลในแคช ซึ่งการระยะเวลาการเก็บนั้นก็ขึ้นอยู่กับการอัพเดทของไฟล์ เช่น ไฟล์ที่มีการแก้ไขน้อย ก็ควรเก็บไว้นาน ๆ หน่อย ส่วนไฟล์ที่มีการแก้ไขบ่อย ๆ ก็ควรเก็บไว้ซักพัก
years
months
weeks
days
hours
minutes
seconds
เมื่อเลือก ได้เลย เรามาเริ่มเขียนกันเลยดีกว่า ดังตัวอย่างด้านล่าง เป็นการแคช favicon

Code

ExpiresByType image/x-icon "access plus 1 year"

ตัวอย่างข้างบนเป็นการแคชไฟล์รูปภาพชนิด x-icon ให้เก็บในแคชเป็นเวลา 1 ปี เพราะว่า favicon นี้ นาน ๆ ทีถึงจะเปลี่ยน จึงเหมาะสำหรับเก็บไว้นาน ๆ

ต่อไปเป็นตัวอย่าง ที่เก็บรูปภาพ โดยเก็บไว้ 1 เดือน

Code

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"

มาดูการแคชไฟล์ css กันบ้างโดยเก็บไว้ 1 เดือน

Code

ExpiresByType text/css "access plus 1 month”

ต่อไปมาดูการแคชไฟล์ javascript กันดูบ้าง โดยตัวอย่างเก็บไว้ 1 ปี

Code

ExpiresByType application/javascript "access plus 1 year"

ดูวิธีการเขียนไปแล้ว ต่อไปมาดูวิธีเพิ่มลงไปในไฟล์ .htaccess กันบ้าง

การใส่ลงในไฟล์ .htaccess
อันดับแรกต้องไปเปิดโมดูล mod_expires ใน Apache ก่อนครับ
จากนั้น ก็เปิดไฟล์ .htaccess ขึ้นมา
ให้เพิ่มโค้ดด้านล่างลงไปในไฟล์

Code

<IfModule mod_expires.c> #Enable expirations ExpiresActive On </IfModule>

ต่อไปเป็นการเพิ่มวันหมดอายุแบบทัวไปในกรณีไม่กำหนด คุณจะใส่หรือไม่ใส่ก็ได้ ถ้าใส่ก็เพิ่ม 2 บรรทัดเข้าไป จะได้เป็น

Code

<IfModule mod_expires.c> #Enable expirations ExpiresActive On # Default directive ExpiresDefault "access plus 1 month" </IfModule>

จากนั้นก็ทำการเพิ่มไฟล์ได้ตามสะดวกเลบครับ ดังตัวอย่างด้านล่าง

Code

<IfModule mod_expires.c> # Enable expirations ExpiresActive On # Default directive ExpiresDefault "access plus 1 month" # My favicon ExpiresByType image/x-icon "access plus 1 year" # Images ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" # CSS ExpiresByType text/css "access 1 month" # Javascript ExpiresByType application/javascript "access plus 1 year" </IfModule>

ใครที่เปิด mod_expires ไม่เป็น ในบทความหน้ามาดู การดูโมดูลใน Apache กับการเปิด mod_expires ใน Apache กันครับ

จาก http://www.doesystem.com/bf27531b75b333c1a23e9e0b83c4d008/%E0%B8%81%E0%B8%B3%E0%B8%AB%E0%B8%99%E0%B8%94%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%81%E0%B8%84%E0%B8%8A%E0%B9%83%E0%B8%99%E0%B9%80%E0%B8%9A%E0%B8%A3%E0%B8%B2%E0%B8%A7%E0%B9%8C%E0%B9%80%E0%B8%8B%E0%B8%AD%E0%B8%A3%E0%B9%8C(Leverage-browser-caching).htm

ขึ้นไปด้านบน