วิธีเปิดใช้งานการแคชเบราว์เซอร์โดยใช้ Cloudflare ใน WordPress?

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

ในบทช่วยสอนนี้ เราจะเรียนรู้วิธีเพิ่มส่วนหัวที่หมดอายุใน Cloudflare ซึ่งโดยทั่วไปจะบอกเบราว์เซอร์ว่าควรแคชทรัพยากรแบบคงที่นานแค่ไหน

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

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

การแคชเป็นกระบวนการจัดเก็บข้อมูลในแคช แคชไม่มีอะไรมากไปกว่าพื้นที่จัดเก็บข้อมูลชั่วคราว

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

ข้อดีของการแคช

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

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

การแคชเบราว์เซอร์ทำงานอย่างไร

คำอธิบายวิธีการทำงานของแคชเบราว์เซอร์แสดงอยู่ในกราฟิกด้านล่าง

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

มาดูสองตัวอย่างนี้เพื่อดูว่าการแคชทำงานอย่างไร

กรณีที่ 1: ผู้ใช้ครั้งแรก

ภาพด้านล่างแสดงสถานการณ์ที่มีผู้เข้าชมเว็บไซต์เป็นครั้งแรก

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

กรณีที่ 2: ผู้ใช้ได้เข้าชมเว็บไซต์แล้ว

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

สถานการณ์กรณีนี้แสดงไว้ในกราฟิกด้านล่าง

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

วิเคราะห์เว็บไซต์ของคุณโดยใช้ GTMetrix

คุณอาจสังเกตเห็นข้อผิดพลาด "เพิ่มส่วนหัวที่หมดอายุ" หากคุณใช้ GTmetrix เพื่อประเมินไซต์ของคุณ

จะตรวจสอบส่วนหัวแคชในเบราว์เซอร์ของคุณได้อย่างไร?

ส่วนหัวการตอบสนองถูกใช้โดยการแคชของเบราว์เซอร์ เบราว์เซอร์ส่ง 'ส่วนหัวของคำขอ' กับคำขอ HTTP แต่ละรายการ และเซิร์ฟเวอร์ตอบสนองด้วย 'ส่วนหัวของการตอบสนอง' และข้อมูล

เซิร์ฟเวอร์ระบุส่วนหัวการตอบสนองที่เรียกว่า 'cache-control' ซึ่งบอกเบราว์เซอร์ว่าต้องแคชไฟล์มากแค่ไหน (เป็นวินาที)

คลิกที่จุดสามจุด (เมนูเคบับ) ที่ด้านบนขวาของเบราว์เซอร์ Chrome ของคุณ

คลิกที่เครื่องมือเพิ่มเติม -> เครื่องมือสำหรับนักพัฒนา

ใน Network -> js คุณจะพบโฟลเดอร์ที่จำเป็น

เปิดไฟล์ jquery แล้วคลิก Header เพื่อสังเกตการ ควบคุมแคช

อย่างที่คุณเห็น ไฟล์แคชจะถูกโหลดทันทีจากไดรฟ์หรือหน่วยความจำ (RAM)

การแคชเบราว์เซอร์ช่วยให้คุณทำสิ่งต่อไปนี้ได้:

• โหลดเซิร์ฟเวอร์ควรลดลง
• ลดเวลาที่ใช้ในการโหลดหน้า
• ลดค่าใช้จ่ายแบนด์วิดท์ของคุณ

วิธีเปิดใช้งานการแคชเบราว์เซอร์โดยใช้ Cloudflare (เพิ่ม Expires Headers Cloudflare)

หากคุณใช้ Cloudflare คุณสามารถเพิ่มส่วนหัวหมดอายุให้กับแต่ละคำขอได้อย่างง่ายดายด้วยการคลิกสองครั้งและไม่มีปลั๊กอิน

ไปที่แดชบอร์ด Cloudflare

ป้อนโดเมนของคุณ

คลิกที่ Caching -> Configuration จากเมนูด้านซ้ายมือ

เลื่อนลงไปที่ "Browser Cache TTL" และเปลี่ยนระยะเวลาตามนั้น

มันจะถูกตั้งค่าเป็น 4 ชั่วโมงโดยค่าเริ่มต้น เปลี่ยนเป็นสิ่งที่ใช้เวลานานกว่าสองเดือนและคุณทำเสร็จแล้ว!

บทสรุป

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

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