กำหนดการแคชในเบราว์เซอร์ (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 ขึ้นมา


ให้เพิ่มโค้ดด้านล่างลงไปในไฟล์


<IfModule mod_expires.c>

#Enable expirations
ExpiresActive On 

</IfModule>


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


<IfModule mod_expires.c>

#Enable expirations
ExpiresActive On

# Default directive
ExpiresDefault "access plus 1 month"

</IfModule>


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


<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 กันครับ