รับทำเว็บไซต์ครบวงจร
เลือกภาษา Thai English     facebook
รายการหลัก



บทความ


Page Ranking Tool

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


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


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

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

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

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



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

เริ่มต้นสร้างการแคช(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

Short URL click!
<< กลับคืน : เข้าชม 4,669 ครั้ง : ขึ้นไปด้านบน

รับทำเว็บไซต์ รับสร้างเว็บไซต์ รับออกแบบเว็บ รับเขียนเว็บ รับสอนทำเว็บ รับเช่า hosting รับเช่าพื้นที่เว็บไซต์ จดชื่อเว็บ รับโปรโมทเว็บไซต์ รับดูแลเว็บ SiteMap
สปริงเกอร์http://www.xn--22c2c4blb9n.xn--o3cw4h/