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

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

มีหลายวิธีในการเร่งความเร็วเว็บไซต์ WordPress โดยทั่วไป อย่างไรก็ตาม ในระหว่างการวิเคราะห์การเพิ่มประสิทธิภาพความเร็วเว็บไซต์ การแคชเบราว์เซอร์เป็นปัญหาที่พบบ่อยที่สุด

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

คุณอาจอ่าน: ให้บริการสินทรัพย์แบบคงที่ด้วยนโยบายแคชที่มีประสิทธิภาพ

Leverage Browser Caching คืออะไร?

การแคชคือระยะเวลาที่เบราว์เซอร์เก็บทรัพยากรที่แคชได้ของเว็บไซต์ไว้บนระบบภายในของตน

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

ใช้ประโยชน์จากการแคชเบราว์เซอร์ใน WordPress อย่างไร?

มีกระบวนการมากมายที่ทำงานอยู่เบื้องหลังเมื่อใดก็ตามที่ผู้ใช้เข้าสู่โดเมนใดโดเมนหนึ่ง

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

1. มีการป้อน URL ลงในเบราว์เซอร์ของผู้เยี่ยมชม
2. เบราว์เซอร์ส่งคำขอไปยังเซิร์ฟเวอร์ที่โฮสต์เว็บไซต์ของคุณ (คำขอ HTTP)
3. ผู้ใช้จะได้รับข้อมูลหลังจากที่เซิร์ฟเวอร์ได้รวบรวมแล้ว ผู้ใช้เริ่มประสบปัญหาการชะลอตัว ณ จุดนี้ ผู้คนสามารถย่อขนาดของสคริปต์ เพิ่มประสิทธิภาพขนาดภาพ และมาตรการอื่นๆ เพื่อหยุดการทำงานช้านี้
4. เบราว์เซอร์อาจแสดงเว็บไซต์ในที่สุดหลังจากโอนข้อมูลแล้ว เมื่อผู้ใช้เข้าถึงหน้าต่างๆ กระบวนการจะทำซ้ำ ประสิทธิภาพต่ำอาจเป็นผลมาจากเซิร์ฟเวอร์ได้รับคำขอจำนวนมากพร้อมกัน ผู้คนจึงต้องเพิ่มประสิทธิภาพเว็บไซต์ของตนเพื่อรักษาความเร็ว

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

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

ความแตกต่างระหว่างการแคชเบราว์เซอร์และการแคชเซิร์ฟเวอร์

เพื่อลดภาระและเวลาแฝงบนเว็บเซิร์ฟเวอร์ การแคชเว็บฝั่งเซิร์ฟเวอร์ (สำหรับการแคชฝั่งเซิร์ฟเวอร์ เราแนะนำ LiteSpeed ​​Cache สำหรับ WordPress เสมอ) มักจะใช้เว็บพรอกซีที่เก็บการตอบสนองทางเว็บจากเว็บเซิร์ฟเวอร์ที่อยู่ข้างหน้า การแคชเว็บบนฝั่งไคลเอ็นต์อาจรวมถึงการแคชบนเบราว์เซอร์ ซึ่งจะบันทึกสำเนาแคชของเนื้อหาเว็บที่เข้าถึงก่อนหน้านี้

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

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

วิธีที่ 1: ใช้ประโยชน์จากการแคชเบราว์เซอร์ใน WordPress . ด้วยตนเอง

หมายเหตุ: วิธีนี้ใช้ได้กับ LiteSpeed ​​Enterprise หรือ Apache เท่านั้น

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

1. เพิ่มส่วนหัวหมดอายุ
2. เพิ่ม Cache-Control Headers
3. ปิด ETags

คุณต้องมีสิทธิ์เข้าถึงไฟล์เว็บไซต์ของคุณเพื่อเพิ่มรหัสนี้ ซึ่งคุณสามารถทำได้โดยลงชื่อเข้าใช้บัญชีโฮสติ้งหรือ CyberPanel

ไปที่แดชบอร์ด CyberPanel ของคุณ

คลิกที่ WordPress -> แสดง รายการ WordPress จากเมนูด้านซ้ายมือ

คุณจะเข้าสู่ รายการเว็บไซต์ WordPress จากที่นี่ คลิกที่ ชื่อไซต์ WordPress ของคุณ

นี่คือ ตัวจัดการ WordPress ของ CyberPanel คลิกที่ ตัวจัดการไฟล์

ใน public_html คุณจะพบ ไฟล์ htaccess โปรดทราบว่า กฎ htaccess รองรับโดย LiteSpeed ​​Enterprise เท่านั้น ไม่รองรับ OpenLite Speed คลิกขวาที่มันและคลิกที่ CodeMirror

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

 #Customize expires cache start - adjust the period according to your needs <IfModule mod_expires.c> FileETag MTime Size AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript ExpiresActive On ExpiresByType text/html "access 600 seconds" ExpiresByType application/xhtml+xml "access 600 seconds" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresDefault "access 1 month" </IfModule> #Expires cache end

รหัสดังกล่าวสั่งให้เบราว์เซอร์ส่งสำเนาแคชของทรัพยากรแบบคงที่แทนที่จะดาวน์โหลดใหม่

เวลารีเฟรช/หมดอายุจะรวมอยู่ในการตั้งค่าด้วย:

HTML ใช้เวลา 600 วินาที
JavaScript และ CSS เป็นเวลาหนึ่งเดือน
สำหรับรูปภาพหนึ่งปี

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

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

รหัสต่อไปนี้แล้ววาง:

 # BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header append Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header append Cache-Control "private, must-revalidate" </filesMatch> </IfModule> </IfModule>

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

 Turn Etags off <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None

เมื่อเสร็จแล้ว ให้คลิกที่ บันทึก

วิธีที่ 2: ใช้ประโยชน์จากการแคชเบราว์เซอร์ใน WordPress โดยใช้ปลั๊กอิน

ข้อผิดพลาดเพียงครั้งเดียวสามารถทำลายเว็บไซต์ของคุณได้อย่างสมบูรณ์ ดังนั้นการแก้ไขไฟล์ .htaccess อาจเป็นอันตรายได้ ดังนั้น คุณสามารถใช้ปลั๊กอินเช่น W3 Total Cache ได้ หากคุณไม่ต้องการเสี่ยงโดยไม่จำเป็น

ปลั๊กอิน W3 Total Cache

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

เข้าสู่ แดชบอร์ด WordPress ของคุณ

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

ค้นหา W3 Total cache ตอนนี้ ติดตั้งและเปิดใช้งาน ปลั๊กอินนี้

แท็บ ประสิทธิภาพ จะปรากฏในเมนูด้านซ้ายมือ คลิกที่ ประสิทธิภาพ -> การตั้งค่าทั่วไป จากเมนูด้านซ้ายมือ

เลื่อนลงไปที่ Browser Cache และตรวจสอบให้แน่ใจว่าเปิดใช้งานและ บันทึก การเปลี่ยนแปลง

ตอนนี้คลิกที่ ประสิทธิภาพ -> แคชเบราว์เซอร์ จากเมนูด้านซ้ายมือ

ทำให้เเน่นอน

1. ตั้งค่าส่วนหัวหมดอายุ
2. ตั้งค่าการควบคุมแคช
3. ตั้งค่าแท็กเอนทิตี

เปิดใช้งานอยู่ บันทึก การเปลี่ยนแปลงทั้งหมด

ปลั๊กอินแคช LiteSpeed

CyberPanel ให้ LiteSpeed ​​Cache แก่ผู้ใช้ทุกคนตามค่าเริ่มต้นด้วยการปรับใช้ไซต์ WordPress ทุกครั้ง หากคุณไม่ได้ใช้ CyberPanel คุณสามารถดาวน์โหลดได้จากที่นี่

เพียงแค่เปิดคุณลักษณะนี้ ปลั๊กอินแคช LiteSpeed ​​Cache จะช่วยให้คุณใช้ประโยชน์จากการแคชของเบราว์เซอร์ได้

ไป ที่แดชบอร์ด WordPress ของคุณ

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

คลิกที่แท็บ เบราว์เซอร์ จากแถบด้านบน

ตรวจสอบให้แน่ใจว่าได้เปิดใช้งาน Browser Cache แล้ว และคลิกที่ บันทึกการเปลี่ยนแปลง

บทสรุป

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

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