การแคชเบราว์เซอร์ WordPress
เผยแพร่แล้ว: 2015-05-18เร่งความเร็วเว็บไซต์ WordPress ของคุณอย่างมากด้วยการใช้การแคชของเบราว์เซอร์เลเวอเรจ หรือที่เรียกว่าการ แคชหมดอายุ
ผู้ให้บริการทดสอบและเพิ่มประสิทธิภาพความเร็วจำนวนมากจะเรียกสิ่งนี้ว่า " เบราว์เซอร์แคช ", " ใช้ประโยชน์ จากแคชของเบราว์เซอร์", " ส่วนหัวหมดอายุ ", " ส่วนหัวของแคช ", " การควบคุมแคช " และ " เว็บแคช " ตามที่ระบุโดย Google PageSpeed Insights GTMetrix และ MaxCDN ทำตามคำแนะนำนี้เพื่อตั้งค่าอย่างถูกต้อง
การแคชเบราว์เซอร์คืออะไร?
การ แคชเบราว์เซอร์ เป็นวิธีการของเว็บเซิร์ฟเวอร์ของคุณที่บอกให้เบราว์เซอร์จัดเก็บหน้าหรือทรัพยากรเฉพาะในช่วงระยะเวลาหนึ่ง เพื่อไม่ให้ต้องดาวน์โหลดจากเซิร์ฟเวอร์ทุกครั้งที่โหลดหน้า ซึ่งสามารถแคชทั้งหน้าและ/หรือทรัพยากร เช่น JavaScript, CSS, รูปภาพ (jpeg, png, gif ฯลฯ) และอื่นๆ อีกมากมาย
เว็บไซต์ WordPress ของคุณจะโหลดตามปกติสำหรับผู้ใช้แต่ละคนในครั้งแรก แต่หลังจากนั้นจะเร็วขึ้นอย่างเห็นได้ชัดเมื่อเรียกดูหน้าเว็บและดำเนินการต่างๆ ทรัพยากรจะถูกเก็บไว้ในเบราว์เซอร์และเป็นผลให้มีการโหลดในเครื่องแทนที่จะดาวน์โหลดอีกครั้ง
ความสำคัญของการแคชเบราว์เซอร์
ในท้ายที่สุด จุดประสงค์และความสำคัญของการแคชเบราว์เซอร์คือเพื่อ เพิ่มความเร็วให้กับเว็บไซต์ WordPress สำหรับผู้ใช้ของคุณ เพื่อให้พวกเขาได้รับประสบการณ์ที่น่าพึงพอใจยิ่งขึ้น ซึ่งอาจนำไปสู่การเข้าชมที่เพิ่มขึ้น การจัดอันดับการค้นหาที่ดีขึ้น และปรับปรุงอัตรา Conversion ให้กับสิ่งที่คุณพยายามทำให้สำเร็จ
ในฐานะที่เป็นเอฟเฟกต์โบนัสเพิ่มเติม การโหลดจะถูกนำออกจากเว็บเซิร์ฟเวอร์ของคุณโดยไม่ได้ดาวน์โหลดทรัพยากรในการโหลดแต่ละหน้าสำหรับผู้เยี่ยมชมคนเดียวกัน และจะช่วยประหยัดแบนด์วิดท์บนเว็บเซิร์ฟเวอร์ของคุณด้วย
เว็บแคชให้ความเร็วร่วมกันกับเซิร์ฟเวอร์และผู้ใช้
การใช้แคชของเบราว์เซอร์
การตั้งค่าการแคชของเบราว์เซอร์ที่ใช้ประโยชน์จากเว็บไซต์ WordPress นั้นทำได้ง่ายและรวดเร็วมาก แต่การตั้งค่าอาจแตกต่างกันไปตามการตั้งค่าและเว็บเซิร์ฟเวอร์ที่คุณใช้ ตามค่าเริ่มต้น การตั้งค่าทั่วไปส่วนใหญ่คือ WordPress ที่ทำงานบนเว็บเซิร์ฟเวอร์ Apache แต่มีเว็บเซิร์ฟเวอร์ยอดนิยมอื่น ๆ เช่น Nginx, IIS เป็นต้น
การใช้ WordPress Leverage Browser Caching Plugin ช่วยลดความยุ่งยากในการใช้งาน
เพื่อให้ง่ายยิ่งขึ้น มีปลั๊กอินแคชของเบราว์เซอร์ที่ใช้ WordPress หลายตัว เราได้ใช้ ทดสอบ และแนะนำปลั๊กอิน WordPress Leverage Browser Caching Ninjas เป็นการติดตั้งและเปิดใช้งานปลั๊กอินที่จะจัดการส่วนที่เหลือให้คุณเอง ง่ายๆ แค่นี้เอง
Apache Browser Cache
Apache ใช้ไฟล์ . .htaccess สำหรับการแคชเบราว์เซอร์ ควรมีไฟล์ . .htaccess อยู่ที่รูทของการติดตั้ง WordPress ของคุณ และหากไม่มี คุณสามารถสร้างไฟล์ขึ้นมาและใส่โค้ดต่อไปนี้ลงไปที่ด้านบนสุด:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
(https://gist.github.com/tribulant/36be0f683eedfa468f51)
การแคชเบราว์เซอร์ Nginx Leverage
หากคุณกำลังใช้งานเซิร์ฟเวอร์ Nginx (En-gine-ex) การตั้งค่าจะแตกต่างจาก Apache ด้านบน คุณจะต้องเพิ่มรหัสต่อไปนี้ในไฟล์การกำหนดค่า vhost ของคุณ โดยทั่วไปจะอยู่ที่ /etc/nginx/sites-enabled/default เพิ่มสิ่งต่อไปนี้ในบล็อกเซิร์ฟเวอร์ของคุณ:
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}
(https://gist.github.com/tribulant/19bb56a222af41854ecc)
Lighttpd
โมดูล mod_expire ถูกใช้โดย Lighttpd เพื่อควบคุมส่วนหัวที่จัดเตรียมการแคชเนื้อหาโดยเบราว์เซอร์ นี้สามารถเข้าสู่การกำหนดค่าของแกนหลักของ Lighttpd ตามลำดับ
$HTTP["url"] =~ "^/images/" {
expire.url = ( "" => "access plus 1 hours" )
}
(https://gist.github.com/tribulant/26263533eee33e3b61ed)
การแคชเบราว์เซอร์ Microsoft IIS Leverage
การตั้งค่าแคชเบราว์เซอร์สำหรับ IIS (Internet Information Services) นั้นง่ายมาก
เลือกในอินเทอร์เฟซของ Administration Tools และเรียกคุณสมบัติขึ้นมา หลังจากเลือกแท็บ HTTP Headers คุณจะเห็นพื้นที่ที่น่าสนใจสองส่วน Enable Content Expiration และ Custom HTTP headers สิ่งแรกควรอธิบายตนเองได้ และส่วนที่สองสามารถใช้เพื่อใช้ส่วนหัวการควบคุมแคช
เทคนิคของการแคชเบราว์เซอร์
การใช้ประโยชน์จากการแคชเบราว์เซอร์ทำได้โดยเว็บเซิร์ฟเวอร์โดยส่งส่วนหัว HTTP ไปยังเบราว์เซอร์ก่อนที่จะส่ง HTML พวกเขาบอกเบราว์เซอร์บางอย่างเกี่ยวกับเนื้อหา HTML ที่กำลังจะตามมา เช่น ประเภทเนื้อหา วันที่ปัจจุบัน รายละเอียดเซิร์ฟเวอร์ การควบคุมแคช และการหมดอายุ เป็นต้น
ส่วนหัว Cache-Control , Expires และ Etag เป็นส่วนหัวที่ให้คำแนะนำแคชของเบราว์เซอร์ ส่วนหัวเหล่านี้สร้างขึ้นโดยอัตโนมัติโดยวิธีการที่กล่าวถึงข้างต้นสำหรับการใช้ประโยชน์จากแคชของเบราว์เซอร์ใน Apache, Nginx และ IIS ตามลำดับ ดังนั้นคุณไม่จำเป็นต้องลงรายละเอียดเว้นแต่คุณจะสนใจ
ส่วนหัวควบคุมแคช
Cache-Control ให้คำแนะนำบางอย่างแก่เบราว์เซอร์ เช่น ระยะเวลาที่เนื้อหาถือว่าเป็น "ใหม่" สถานะแคชสาธารณะ/ส่วนตัว การตรวจสอบความถูกต้อง และอื่นๆ
การควบคุมแคช: max-age=3600, สาธารณะ
(https://gist.github.com/tribulant/6309926734d3c127064c)
หมดอายุ Header
ส่วนหัว Expires ระบุวันที่ของ HTTP จนกว่าทรัพยากรควรและสามารถแคชได้จนถึงเมื่อใด
หมดอายุ: เสาร์ 28 พ.ย. 2015 05:36:25 GMT
(https://gist.github.com/tribulant/1b655d60a8a665b18b85)
ส่วนหัว Etag
Etag ถูกนำมาใช้ใน HTTP 1.1 เป็นวิธีตรวจสอบความถูกต้องด้วยโทเค็นที่ส่งโดยเซิร์ฟเวอร์และเบราว์เซอร์ใช้เพื่อตรวจสอบว่าการแสดงเนื้อหามีการเปลี่ยนแปลงหรือไม่ จนถึง Etag เบราว์เซอร์ส่วนใหญ่ใช้ส่วนหัว Last-Modified แต่ Etag มีความเกี่ยวข้องมากกว่าในขณะนี้ เว็บเซิร์ฟเวอร์ส่วนใหญ่จะสร้างทั้งส่วนหัว Last-Modified และ Etag
เช่น: “pub1259380237;gz”
(https://gist.github.com/tribulant/2b542d76410bc047be00)
บรรทัดล่างของการแคชเบราว์เซอร์
การแคชเบราว์เซอร์มีประโยชน์ร่วมกันทั้งกับคุณ (เว็บเซิร์ฟเวอร์ของคุณ) และผู้ใช้ของคุณ โดยให้ความเร็วและประสิทธิภาพแก่ทั้งสองฝ่าย
เมื่อใช้แคชของเบราว์เซอร์ ให้เข้มงวดและก้าวร้าว เว็บเซิร์ฟเวอร์ของคุณฉลาดพอที่จะรู้ว่าเมื่อใดที่ทรัพยากรเปลี่ยนไป เพื่อสร้างส่วนหัวที่อัปเดตสำหรับผู้ใช้เพื่อรับเนื้อหาใหม่ตามต้องการ อย่าตกใจว่าผู้ใช้ของคุณจะติดอยู่กับเนื้อหาเก่า ซึ่งไม่ใช่กรณีนี้
ขอแนะนำให้ใช้แคชเว็บเบราว์เซอร์สำหรับเว็บไซต์ WordPress และท้ายที่สุด ปลั๊กอิน WordPress Leverage Browser Caching Ninjas ที่แนะนำจะทำเคล็ดลับได้ เพียงติดตั้ง เปิดใช้งาน เท่านี้ก็เรียบร้อย!