แก้ไขทันที WordPress Leverage Browser Caching (ทีละขั้นตอน)
เผยแพร่แล้ว: 2021-07-08WordPress Leverage Browser Caching (แก้ไขง่าย & ทันที)
สารบัญ
หากคุณต้องการเข้าใจวิธีการแก้ไขการแคชของเบราว์เซอร์บน WordPress อย่างถ่องแท้ ให้อยู่กับเราจนจบเพราะเรามีเรื่องมากมายที่จะแบ่งปัน
ใครไม่ชอบความเร็วในการโหลดที่รวดเร็วอย่างเห็นได้ชัด?
แต่อย่างใดคุณค้นพบว่า "การใช้ประโยชน์จากแคชของเบราว์เซอร์" ทำให้เว็บไซต์ของคุณไม่สามารถโหลดได้อย่างรวดเร็ว
แต่เราอยู่ที่นี่ด้วยวิธีแก้ปัญหา
นี่เป็นข้อผิดพลาดทั่วไปที่คนส่วนใหญ่พบใน Google PageSpeed Insights
และหากเป้าหมายของคุณคือการได้คะแนนมากกว่า 90 คะแนนใน Google PageSpeed Insights คุณจะต้องแก้ไขปัญหานี้
คุณจำเป็นต้องรู้ว่าความเร็วของเพจมีความสำคัญเท่ากับที่เคยเป็นมาสำหรับการจัดอันดับสูงใน Google SERP รวมถึงการมอบประสบการณ์การใช้งานที่ดีแก่ผู้ใช้
โพสต์นี้จะบอกคุณว่า WordPress ใช้ประโยชน์จากการแคชของเบราว์เซอร์อย่างไร และวิธีแก้ไขการใช้ประโยชน์จากการแคชของเบราว์เซอร์ใน WordPress
งั้นเรามาเจาะลึกกัน
ข้อมูลเล็กน้อยเกี่ยวกับการใช้ประโยชน์จากเบราว์เซอร์แคช WordPress
พูดง่ายๆ ก็คือ การใช้ประโยชน์จากแคชของเบราว์เซอร์ทำให้การโหลดหน้าเว็บเร็วขึ้นโดยลดคำขอ HTTP และปรับปรุงเวลาตอบสนองของเซิร์ฟเวอร์
ตอนนี้เราหมายถึงอะไรโดยการแคช?
ระยะเวลาที่เบราว์เซอร์จัดเก็บทรัพยากรที่สามารถแคชได้บนเว็บไซต์ในเครื่องจะเรียกว่าการแคช
สิ่งที่รวมอยู่ในนั้น?
ซึ่งรวมถึงรูปภาพ, CSS, JavaScript และอื่นๆ
เมื่อมีผู้เยี่ยมชมเว็บไซต์ ทรัพยากรที่แคชได้ซึ่งบันทึกไว้ในอุปกรณ์ของคุณจะถูกอัปโหลดอีกครั้ง
ความเร็วในการโหลดของเว็บไซต์จึงดีขึ้นอย่างเห็นได้ชัด นี่คือเหตุผลที่ผู้คนต้องการใช้ประโยชน์จากการแคชของเบราว์เซอร์ใน WordPress
แพลตฟอร์มของแท้ที่แสดงข้อมูลและวิธีแก้ปัญหาคืออะไร
คุณสามารถลองใช้ Think with Google เพื่อตรวจสอบสถานะของไซต์ว่าโหลดเร็วหรือใช้เวลาโหลดเพียงไม่กี่วินาที
เครื่องมือนี้จะให้คำตอบทั้งหมดแก่คุณเกี่ยวกับวิธีเพิ่มประสิทธิภาพเว็บไซต์ของคุณให้โหลดได้อย่างรวดเร็ว พร้อมรายงานฉบับสมบูรณ์
เครื่องมือที่ถูกต้องตามกฎหมายอีกอย่างที่คุณสามารถใช้ได้คือ PageSpeed Insights โดย Google เพื่อทดสอบความเร็วหน้าเว็บของเว็บไซต์ของคุณ
จะแนะนำให้คุณพัฒนานโยบายแคชที่มีประสิทธิภาพเพื่อเพิ่มความเร็วของหน้า
วิธีใช้ประโยชน์จากการแคชเบราว์เซอร์
หากคุณเป็นเจ้าของหรือดำเนินการเว็บไซต์ คุณควรได้รับแจ้งว่าการแคชเซิร์ฟเวอร์หมายถึงกลไกที่เว็บไซต์ของคุณสร้างหน้าเว็บที่แคชไว้
นี่คือฝั่งเซิร์ฟเวอร์ การแคชเบราว์เซอร์เกิดขึ้นเมื่อผู้ใช้เข้าถึงเว็บไซต์ผ่านเบราว์เซอร์
นี่คือสิ่งที่ตรงกันข้ามกับคำสั่งก่อนหน้านี้
ยิ่งกว่านั้น เมื่อคุณใช้การแคชของเบราว์เซอร์ คุณกำลังบอกเซิร์ฟเวอร์ของคุณว่าควรเก็บทรัพยากรไว้ในเบราว์เซอร์ของผู้เยี่ยมชมของคุณนานแค่ไหน
เพื่อใช้ประโยชน์จากการแคชของเบราว์เซอร์ โดยทั่วไปคุณจะต้องระบุส่วนหัว HTTP เพื่อระบุเวลาหมดอายุที่ถูกต้องสำหรับไฟล์ประเภทต่างๆ ในเว็บไซต์ของคุณ
หากคุณต้องการป้อนรหัสด้วยตนเองหรือใช้ปลั๊กอิน WordPress จะขึ้นอยู่กับว่าเว็บเซิร์ฟเวอร์ของคุณคือ Nginx หรือ Apache
ตอนนี้ มาดูวิธีการใช้ประโยชน์จากแคชของเบราว์เซอร์ใน WordPress กัน ทั้งที่มีและไม่มีปลั๊กอิน
วิธีแก้ไขการแคชเบราว์เซอร์ Leverage บน WordPress โดยไม่ต้องใช้ปลั๊กอิน
หลายคนไม่ชอบปลั๊กอิน WordPress เพื่อแก้ไขปัญหานี้
คุณสามารถใช้การแคชของเบราว์เซอร์ได้โดยเปลี่ยนการตั้งค่าบนเว็บเซิร์ฟเวอร์ของคุณ
เว็บเซิร์ฟเวอร์ของคุณจะบอกเบราว์เซอร์ของผู้เยี่ยมชมให้บันทึกทรัพยากรเหล่านั้นลงในแคชของเบราว์เซอร์หากคุณทำเช่นนั้น
ไฟล์เหล่านี้จะถูกจัดเก็บไว้ภายในเบราว์เซอร์ตามระยะเวลาที่กำหนดและใช้สำหรับการเยี่ยมชมหน้าครั้งต่อไป
ขั้นตอนการสั่งเว็บเซิร์ฟเวอร์ของคุณให้เริ่มแคชเบราว์เซอร์ของผู้เข้าชมจะแตกต่างกันไปในแต่ละเซิร์ฟเวอร์
Apache และ Nginx เป็นเว็บเซิร์ฟเวอร์ที่ได้รับความนิยมสูงสุด
มาเริ่มแก้ไขการแคชของเบราว์เซอร์ใน WordPress บนเซิร์ฟเวอร์ทั้งสองแบบทีละขั้นตอนกัน
1. WordPress Leverage Browser Caching โดยใช้ (Apache)
บริการโฮสติ้งที่ใช้ร่วมกันจำนวนมากใช้ Apache ดังนั้นหากเว็บไซต์ของคุณมีไฟล์ an.htaccess คุณจะต้องปฏิบัติตามคำแนะนำโค้ด Apache
ต่อไปนี้คือวิธีที่คุณสามารถใช้โค้ดที่กำหนดเองเพื่อใช้ประโยชน์จากการแคชเบราว์เซอร์บนเซิร์ฟเวอร์ Apache ของคุณ
เมื่อคุณยืนยันว่าเซิร์ฟเวอร์ของคุณทำงานบน Apache แล้ว คุณสามารถไปยังขั้นตอนถัดไปได้
1. ในการเข้าถึงเซิร์ฟเวอร์ของคุณ ให้เข้าสู่ระบบ CPanel หรือใช้ไคลเอนต์ FTP
2. ค้นหา ไฟล์ . htaccess ของคุณตอนนี้
เนื่องจากไฟล์ the.htaccess อาจถูกซ่อนไว้โดยค่าเริ่มต้น คุณอาจต้องแสดงไฟล์ที่ซ่อนอยู่ (dotfiles)
ไฟล์ .htaccess ของคุณควรมีลักษณะเหมือนภาพด้านล่าง
คุณต้องเข้าใจว่าคุณสามารถแก้ไขได้โดยตรงบนเซิร์ฟเวอร์หรือนำเข้าและเปิดในโปรแกรมแก้ไขข้อความ
นอกจากนี้ คุณมีตัวเลือกมากมายในการกำหนดกฎการแคชของเบราว์เซอร์ เช่น:
ส่วนหัวหมดอายุ หรือ ส่วน หัวควบคุมแคช
ลองดูทั้งสอง
1. ส่วนหัวควบคุมแคช:
คุณจะต้องเพิ่มข้อมูลโค้ดต่อไปนี้ที่ด้านบนสุดของไฟล์ your.htaccess หลังจากที่เปิดแล้ว:
คัดลอกรหัสนี้:
# BEGIN ส่วนหัวควบคุมแคช
<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch “\.(ico|jpe?g|png|gif|swf)$”>
ส่วนหัวผนวก Cache-Control "สาธารณะ"
</filesMatch>
<filesMatch “\.(css)$”>
ส่วนหัวผนวก Cache-Control "สาธารณะ"
</filesMatch>
<filesMatch “\.(js)$”>
ส่วนหัวผนวก Cache-Control “ส่วนตัว”
</filesMatch>
<filesMatch “\.(x?html?|php)$”>
ส่วนหัวผนวก Cache-Control “ส่วนตัว ต้องตรวจสอบใหม่”
</filesMatch>
</IfModule>
</IfModule>
2. หมดอายุส่วนหัว:
คุณสามารถเพิ่มส่วนหัว Expire ที่ด้านบนของไฟล์ your.htaccess ได้ เช่นเดียวกับส่วนหัว Cache-Control
ดูรูปแบบรหัส:
## หมดอายุการแคช ##
<IfModule mod_expires.c>
หมดอายุActive On
ExpiresByType image/jpg “เข้าถึงได้ 1 ปี”
ExpiresByType image/jpeg “เข้าถึงได้ 1 ปี”
ExpiresByType image/gif “เข้าถึงได้ 1 ปี”
ExpiresByType image/png “เข้าถึง 1 ปี”
ExpiresByType text/css “เข้าถึง 1 เดือน”
ExpiresByType text/html “เข้าถึงได้ 1 เดือน”
แอปพลิเคชัน ExpiresByType/pdf “เข้าถึงได้ 1 เดือน”
ExpiresByType text/x-javascript “เข้าถึงได้ 1 เดือน”
แอปพลิเคชัน ExpiresByType/x-shockwave-flash “เข้าถึงได้ 1 เดือน”
ExpiresByType image/x-icon “เข้าถึง 1 ปี”
ExpiresDefault “เข้าถึง 1 เดือน”
</IfModule>
## หมดอายุการแคช ##
คุณสามารถตรวจสอบส่วนหัวเหล่านี้ได้อย่างง่ายดายจาก DevTools ของ Chrome เมื่อคุณตั้งค่าไว้บนเซิร์ฟเวอร์ของคุณแล้ว
เพียงไปที่แท็บเครือข่าย เลือกสินทรัพย์ และค้นหาแบบฟอร์มส่วนหัวที่คุณเพิ่ม เช่น Cache-Control, Expires หรือทั้งสองอย่าง
2. ปิดการใช้งานแท็กเอนทิตี:
สุดท้ายแต่ไม่ท้ายสุด คุณต้องใช้รหัสต่อไปนี้เพื่อปิดใช้งานแท็กเอนทิตี:
FileETag ไม่มี
เมื่อคุณปิดใช้งาน ETags เบราว์เซอร์สามารถใช้นโยบายแคชของคุณแทนการตรวจสอบไฟล์ใหม่ทุกครั้งที่โหลดหน้า
หากต้องการให้การเปลี่ยนแปลงมีผล ให้บันทึกไฟล์ .htaccess และรีสตาร์ท Apache
WordPress ใช้ประโยชน์จากเบราว์เซอร์แคชโดยใช้ (Nginx)
Nginx เป็นเว็บเซิร์ฟเวอร์โอเพ่นซอร์สฟรีที่มีการใช้งานโดยเว็บไซต์มากกว่า 500 ล้านแห่ง
คุณมีตัวเลือกสองสามอย่างในการตั้งเวลาหมดอายุของแคชบนส่วนประกอบสแตติกและไดนามิกของเว็บไซต์ของคุณ เช่นเดียวกับ Apache
1. ส่วนหัว “การควบคุมแคช” (Nginx)
ภายในบล็อกเซิร์ฟเวอร์ของคุณ ซึ่งโดยทั่วไปจะอยู่ที่
/etc/nginx/site-enabled/default,
เพิ่มส่วนต่อไปนี้
ตำแหน่ง ~* \.(png|jpg|jpeg|gif)$ {
หมดอายุ 365d;
add_header Cache-Control "สาธารณะไม่มีการแปลง";
}
ตำแหน่ง ~* \.(js|css|pdf|html|swf)$ {
หมดอายุ 30d;
add_header Cache-Control "สาธารณะไม่มีการแปลง";
}
2. ส่วนหัว "หมดอายุ" (Nginx)
ใส่รหัสต่อไปนี้ลงในบล็อกเซิร์ฟเวอร์ของคุณซึ่งอยู่ที่:
/etc/nginx/site-enabled/default/
ตำแหน่ง ~* \.(jpg|jpeg|gif|png)$ {
หมดอายุ 365d;
}
ตำแหน่ง ~* \.(pdf|css|html|js|swf)$ {
หมดอายุ 30d;
}
วิธีแก้ไขการแคชเบราว์เซอร์ Leverage บน WordPress ด้วยปลั๊กอิน
ในกรณีที่คุณต้องการข้ามขั้นตอนการเข้ารหัสที่เกี่ยวข้องมากขึ้น คุณสามารถใช้ปลั๊กอิน WordPress ที่ดีบางตัวเพื่อใช้ประโยชน์จากการแคชของเบราว์เซอร์
1. WP แคชที่เร็วที่สุด:
WP แคชที่เร็วที่สุด
WP Fastest Cache เป็นปลั๊กอินแคชของ WordPress อีกตัวที่มีตัวเลือกการปรับแต่งที่ง่าย
คุณสามารถอนุญาตการแคชเบราว์เซอร์ในรุ่นฟรีได้ ดังที่แสดงไว้ด้านบน ไปที่หน้าการตั้งค่าและทำเครื่องหมายที่ช่องทำเครื่องหมายแคชของเบราว์เซอร์
2. แคช LiteSpeed:
แคช LiteSpeed
LiteSpeed Cache เป็นปลั๊กอินสำหรับแคชที่ให้คุณใช้ประโยชน์จากการแคชของเบราว์เซอร์โดยเพียงแค่เปิดใช้งาน
ไปที่การตั้งค่าแคชหลังจากที่คุณได้ติดตั้งและเปิดใช้งานปลั๊กอินแล้ว ไปที่แท็บเบราว์เซอร์และเปิดฟังก์ชันแคชของเบราว์เซอร์
คุณยังระบุวันหมดอายุได้อีกด้วย
อย่างไรก็ตาม การตั้งค่านี้จะใช้กับไฟล์แคชทั้งหมดบนไซต์ของคุณ
บทสรุป:
การใช้แคชของเบราว์เซอร์สามารถช่วยคุณปรับปรุงคะแนนการทดสอบประสิทธิภาพเว็บของคุณได้
หากคุณเห็นคำเตือนนี้ใน Google PageSpeed Insights คุณสามารถแก้ไขได้โดย:
- การเพิ่มส่วนหัว Cache-Control หรือ Expires
- ใช้ประโยชน์จากการแคชเบราว์เซอร์สำหรับ Google Analytics
- ลดการใช้สคริปต์บุคคลที่สามของคุณ
คุณมีข้อเสนอแนะอื่นๆ ในการแก้ไขปัญหาการแคชของเบราว์เซอร์เลเวอเรจหรือไม่ กรุณาแบ่งปันความคิดของคุณในส่วนความคิดเห็นด้านล่าง!