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

กำหนดการแคชในเบราว์เซอร์ (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 
 ExpiresByType image/x-icon "access plus 1 year”
ตัวอย่างข้างบนเป็นการแคชไฟล์รูปภาพชนิด x-icon ให้เก็บในแคชเป็นเวลา 1 ปี เพราะว่า favicon นี้ นาน ๆ ทีถึงจะเปลี่ยน จึงเหมาะสำหรับเก็บไว้นาน ๆ

ต่อไปเป็นตัวอย่าง ที่เก็บรูปภาพ โดยเก็บไว้ 1 เดือน
 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 เดือน
 ExpiresByType text/css "access plus 1 month”
ต่อไปมาดูการแคชไฟล์ javascript กันดูบ้าง โดยตัวอย่างเก็บไว้ 1 ปี
 ExpiresByType application/javascript "access plus 1 year"
ดูวิธีการเขียนไปแล้ว ต่อไปมาดูวิธีเพิ่มลงไปในไฟล์ .htaccess กันบ้าง

การใส่ลงในไฟล์ .htaccess

อันดับแรกต้องไปเปิดโมดูล mod_expires ใน Apache ก่อนครับ
จากนั้น ก็เปิดไฟล์ .htaccess ขึ้นมา
ให้เพิ่มโค้ดด้านล่างลงไปในไฟล์
   #Enable expirations ExpiresActive On
ต่อไปเป็นการเพิ่มวันหมดอายุแบบทัวไปในกรณีไม่กำหนด คุณจะใส่หรือไม่ใส่ก็ได้ ถ้าใส่ก็เพิ่ม 2 บรรทัดเข้าไป จะได้เป็น
   #Enable expirations ExpiresActive On  # Default directive ExpiresDefault "access plus 1 month"
จากนั้นก็ทำการเพิ่มไฟล์ได้ตามสะดวกเลบครับ ดังตัวอย่างด้านล่าง
   # 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"
ใครที่เปิด mod_expires ไม่เป็น ในบทความหน้ามาดู การดูโมดูลใน Apache กับการเปิด mod_expires ใน Apache กันครับ