ใช้ประโยชน์จากการแคชเบราว์เซอร์ใน WordPress เพื่อปรับเวลาโหลดหน้าให้เหมาะสม

ผู้ใช้เว็บไซต์ WordPress มักจะค้นหาบางสิ่งที่นอกกรอบเสมอ และการมุ่งหวังที่จะบรรลุเกณฑ์มาตรฐานคะแนน Google PageSpeed ​​Insights 90+ นั้นค่อนข้างเป็นไปได้ โดยทั่วไป มีเทคนิคหลายอย่างในการเร่งความเร็วเว็บไซต์ WordPress แต่โดยรวมแล้วการแคชของเบราว์เซอร์เป็นปัญหาที่พบได้บ่อยที่สุดในระหว่างการวิเคราะห์การเพิ่มประสิทธิภาพความเร็วเว็บไซต์

ในการตรวจสอบและทดสอบประสิทธิภาพของเว็บไซต์ของคุณ คุณสามารถใช้เครื่องมือออนไลน์ต่างๆ เช่น Google PageSpeed ​​Insights, GTMetrix และ Pingdom พวกเขาให้ผลลัพธ์ที่ถูกต้องและช่วยให้คุณเข้าใจว่าเว็บไซต์ของคุณต้องการการปรับปรุงที่ใด ขณะทดสอบประสิทธิภาพของเว็บไซต์ คุณอาจได้รับการแจ้งเตือนว่า “Leverage Browser Caching”

วันนี้เราจะพูดถึงวิธีแก้ไขปัญหานี้ ดังนั้นอย่าเสียเวลาและเจาะลึก

แคชของเบราว์เซอร์คืออะไรและทำงานอย่างไร

เมื่อใดก็ตามที่มีผู้เยี่ยมชมเว็บไซต์ของคุณ เบราว์เซอร์จะส่งคำขอให้โหลดเนื้อหา เช่น HTML, สคริปต์, รูปภาพ, CSS ฯลฯ จากเซิร์ฟเวอร์ เซิร์ฟเวอร์จะตอบสนองต่อคำขอของเบราว์เซอร์ ขึ้นอยู่กับขนาดของสินทรัพย์ที่ร้องขอและเวลาดำเนินการของเซิร์ฟเวอร์ การตอบกลับอาจใช้เวลาเล็กน้อยในการตอบกลับ ส่งผลให้มีภาระงานเพิ่มขึ้นบนเซิร์ฟเวอร์และทำให้เว็บไซต์ช้าลงในส่วนของผู้ใช้

ในสถานการณ์นี้ แคชของเบราว์เซอร์จะทำงานได้ดีที่สุด มันเก็บเนื้อหาคงที่บนเบราว์เซอร์ของผู้ใช้ ในครั้งแรกที่ผู้เยี่ยมชมเข้าชมเว็บไซต์ หากเว็บไซต์ของคุณไม่ได้รับการกำหนดค่าอย่างเหมาะสมด้วยแคชของเบราว์เซอร์ และคุณกำลังทดสอบความเร็วเว็บไซต์ของคุณโดยใช้เครื่องมือทดสอบประสิทธิภาพที่กล่าวถึงข้างต้น เครื่องมือนี้จะแสดงข้อความเตือนเพื่อใช้ประโยชน์จากการแคชของเบราว์เซอร์อย่างแน่นอน

จากข้อมูลของ Google การตอบสนองของเซิร์ฟเวอร์ควรมีแท็กสองแท็กด้านล่างในส่วนหัว:

Cache-Control กำหนดวิธีการและระยะเวลาในการแคชการตอบสนองแต่ละรายการโดยเบราว์เซอร์และแคชระดับกลางอื่นๆ

ETag จัดเตรียมโทเค็นการตรวจสอบความถูกต้องที่เบราว์เซอร์ส่งโดยอัตโนมัติเพื่อตรวจสอบว่าทรัพยากรมีการเปลี่ยนแปลงหรือไม่นับตั้งแต่ครั้งสุดท้ายที่มีการร้องขอ

การแคชเบราว์เซอร์ Leverage คืออะไร?

พูดง่ายๆ ก็คือ การใช้ประโยชน์จากแคชของเบราว์เซอร์ช่วยลดคำขอ HTTP เพื่อโหลดหน้าเว็บได้เร็วยิ่งขึ้น และยังช่วยปรับปรุงเวลาตอบสนองของเซิร์ฟเวอร์อีกด้วย

มาดูตัวอย่างสดกัน ฉันทดสอบเว็บไซต์โดยใช้ Think with Google และนี่คือผลลัพธ์

มาทดสอบกันจากเครื่องมือ Google PageSpeed ​​Insights

โอเค คุณจะเห็นว่าประสิทธิภาพโดยรวมของเว็บไซต์ฉันค่อนข้างดี แต่มีช่องว่างในการปรับปรุง มันแสดงว่า URL ภายในของฉันสามารถแคชได้

แก้ไขคำเตือน "Leverage Browser Caching"

ในการแก้ไขคำเตือน "Leverage Browser Caching" คุณจะต้องดำเนินการสองขั้นตอนต่อไปนี้

1. เปลี่ยนส่วนหัวของคำขอเพื่อใช้ cache
2. ปรับนโยบายการแคชให้เหมาะสม

1. เปลี่ยนส่วนหัวคำขอเพื่อใช้แคช

วิธีหนึ่งในการปรับปรุงความเร็วและการตอบสนองของเว็บไซต์คือการเปลี่ยนส่วนหัวของคำขอเพื่อใช้แคช เราจะเพิ่มโค้ดสองสามบรรทัดลงในไฟล์ WordPress .htaccess

หมายเหตุ: .htaccess เป็นห้องควบคุมของเว็บไซต์ หากกำหนดค่าไม่ถูกต้อง เว็บไซต์ทั้งหมดอาจเสียหายในขณะที่คุณใช้งานอยู่! เรียนรู้วิธีปกป้อง WordPress ของคุณด้วยไฟล์ . htaccess

หากต้องการใช้ประโยชน์จากการแคชของเบราว์เซอร์ใน WordPress ให้เข้าถึงไดเร็กทอรีหลักของการติดตั้ง WordPress ค้นหาไฟล์ .htaccess และเปิดด้วยโปรแกรมแก้ไขโค้ดใดๆ เพียงวางบรรทัดที่ระบุด้านล่างที่ด้านบนของไฟล์ WordPress .htaccess

 ## หมดอายุการแคช ##

<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>

## หมดอายุการแคช ##

2. เพิ่มประสิทธิภาพนโยบายแคช

ขั้นตอนที่สองในการเร่งเวลาตอบสนองบนเว็บไซต์ของคุณคือการปรับนโยบายแคชให้เหมาะสม โค้ดด้านบนนี้อธิบายประเภทไฟล์และการหมดอายุของไฟล์ ขึ้นอยู่กับคุณว่าคุณต้องการเก็บเนื้อหาแบบคงที่เฉพาะในแคชของเบราว์เซอร์ของผู้ใช้นานแค่ไหน หากเนื้อหาคงที่ของคุณเช่นรูปภาพเป็นเนื้อหาระยะยาว ฉันขอแนะนำให้คุณตั้งไว้เป็นเวลาหนึ่งปี อย่างไรก็ตาม เนื้อหาที่คุณสงสัยว่าสามารถเปลี่ยนแปลงได้ในอนาคตอันใกล้นี้ ขอแนะนำให้คุณกำหนดวันหมดอายุอย่างน้อยหนึ่งเดือน

การควบคุมแคช

หากวิธีการข้างต้นใช้ไม่ได้กับเซิร์ฟเวอร์ของคุณ เรามีทางเลือกอื่นที่สามารถช่วยคุณ ในการควบคุม แคชเพื่อตั้งค่าการหมดอายุของแคช สิ่งที่คุณต้องทำคือคัดลอกและวางบรรทัดต่อไปนี้ที่ด้านบนของไฟล์ .htaccess ของคุณ

 # 1 เดือนสำหรับสินทรัพย์คงที่ส่วนใหญ่

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
ชุดส่วนหัว Cache-Control "max-age=2592000, สาธารณะ"

</filesMatch>

เช่นเดียวกับขั้นตอนก่อนหน้า โค้ดด้านบนนี้อธิบายนโยบายการหมดอายุและการแคชของไฟล์ประเภทต่างๆ

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

หลังจากตั้งค่าไฟล์ .htaccess อย่างถูกต้องแล้ว ตอนนี้เราจะทำการทดสอบ งั้นมาทดสอบกัน!

และคำเตือน "การใช้ประโยชน์จากแคชของเบราว์เซอร์" ได้รับการแก้ไขแล้ว

WordPress Leverage Browser Caching สำหรับ Google Analytics

หากคุณกำลังใช้ปลั๊กอิน WordPress ใดๆ สำหรับ Google Analytics คุณอาจยังคงได้รับคำเตือนเกี่ยวกับการแคชของเบราว์เซอร์ ไม่ว่าคุณจะตั้งค่าทุกอย่างถูกต้อง

เป็นเพราะ Google Analytics ตั้งเวลาหมดอายุเริ่มต้นเพียงสองชั่วโมงเพื่อให้แน่ใจว่าคุณจะได้รับการอัปเดตโดยเร็วที่สุด

มีสองวิธีในการแก้ไขคำเตือนแคชของเลเวอเรจของเบราว์เซอร์สำหรับ Google Analytics

1. ในพื้นที่ : คุณสามารถสร้างสำเนาของ analytics.js และ/หรือ ga.js ในเครื่องได้ (ไฟล์ใดก็ตามที่คุณกำลังจัดการกับการใช้ประโยชน์จากแคชของเบราว์เซอร์) โปรดทราบว่า Google ไม่แนะนำวิธีนี้
2. ปลั๊กอิน : ใช้ปลั๊กอิน WordPress Analytics Optimization Suite (CAOS) ที่สมบูรณ์ซึ่งโฮสต์ไฟล์ Google Analytics ของคุณในเครื่องและใช้ wp_cron() เพื่ออัปเดตอยู่เสมอ

ยังเห็นคำเตือนแคชของ Leverage Browser อยู่ใช่หรือไม่

หลังจากตั้งค่าทุกอย่างถูกต้องแล้ว คุณอาจยังคงเห็น Google แนะนำให้ใช้ประโยชน์จากแคชของเบราว์เซอร์ ดังภาพด้านล่าง

อย่างที่คุณเห็น ไฟล์ด้านบนเป็นการผสานการทำงานกับบุคคลที่สาม สิ่งเหล่านี้ไม่มีอยู่บนเซิร์ฟเวอร์ของเรา เราไม่สามารถทำอะไรกับมันได้นอกจากการลบมัน การผสานรวมของบุคคลที่สามทั้งหมดอาจทำให้เกิดคำเตือนนี้ในเครื่องมือทดสอบความเร็ว

ฉันเป็นลูกค้า Cloudways มีอะไรให้ฉันบ้าง

หากคุณเป็นลูกค้าโฮสติ้ง WordPress ที่ปรับให้เหมาะสมกับ Cloudways คุณควรละทิ้งความกังวลเกี่ยวกับคำเตือนแคชของเบราว์เซอร์ WordPress ที่ปรากฏขึ้นในเครื่องมือทดสอบความเร็วออนไลน์ เนื่องจาก Cloudways จัดการปัญหานี้ด้วยตัวเอง คุณสามารถเปลี่ยนเวลาหมดอายุโดยเพียงแค่การนำไปยังเซิร์ฟเวอร์→การตั้งค่าและแพ็กเกจ→ขั้นสูงเลื่อนลงเล็กน้อยและมองหา NGINX - คงแคชหมดอายุ ค่าเริ่มต้นคือ 43200 นาที ซึ่งเท่ากับ 30 วัน

ใช้ประโยชน์จากแคชเบราว์เซอร์ด้วย W3 Total Cache

วิธีการที่ระบุไว้ข้างต้นเป็นวิธีการด้วยตนเองในการลบคำเตือนแคชของเบราว์เซอร์เลเวอเรจ หากคุณกำลังใช้แคชปลั๊กอินเช่น W3 รวม Cache คุณต้องเปิดใช้งานแคชเบราว์เซอร์โดยไปที่ผลการดำเนินงาน→การตั้งค่าทั่วไป

จากนั้นไปที่ Browser Cache และทำเครื่องหมายที่ช่องทำเครื่องหมายด้านล่างห้าช่อง

เลื่อนลงมาเล็กน้อยเพื่อตั้งเวลาหมดอายุสำหรับไฟล์ CSS & JSS ค่าเริ่มต้นคือ 31536000 ซึ่งเทียบเท่ากับ 365 วัน คุณสามารถเปลี่ยนเป็นกรอบเวลาที่ต้องการได้

เลื่อนลงมาอีกเล็กน้อยเพื่อตั้งเวลาหมดอายุสำหรับ HTML & XML

หากต้องการเปลี่ยนค่าเริ่มต้นสำหรับ Media & Other Files ให้เลื่อนลงมาเล็กน้อยและตั้งค่าการหมดอายุ ค่าเริ่มต้นคือ 31536000 ซึ่งเท่ากับ 365 วัน

ความคิดสุดท้าย

Leverage Browser Caching ช่วยในการปรับปรุงคะแนนการทดสอบประสิทธิภาพของเว็บ โปรดจำไว้ว่า การตั้งค่าเหล่านี้มีไว้สำหรับการสร้างหลักเกณฑ์พื้นฐานและความเข้าใจของผู้ใช้ WordPress เท่านั้น นอกเหนือจากนี้ มีเทคนิคมากมายที่สามารถช่วยให้บุคคลบรรลุเว็บไซต์ที่เร็วขึ้นภายในเวลาไม่นาน ซึ่งที่สำคัญที่สุดคือการเลือกโฮสติ้ง WordPress ที่เร็วที่สุด

หากคุณมีคำถามใด ๆ โปรดถามในส่วนความคิดเห็นด้านล่าง ฉันชอบที่จะตอบ