วิธีแก้ไขการแคชเบราว์เซอร์ Leverage ใน WordPress ในปี 2021

วิธีแก้ไขการแคชเบราว์เซอร์ Leverage ใน WordPress

บทนำ

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

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

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

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

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

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

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

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

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

จำเป็นต้องมีการแคชเบราว์เซอร์หรือไม่

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

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

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

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

แก้ไขคำเตือนการใช้แคชของเบราว์เซอร์ใน WordPress โดยไม่ต้องใช้ปลั๊กอิน

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

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

คุณสามารถแก้ไขการแคชของเลเวอเรจเบราว์เซอร์ได้โดยทำตามขั้นตอนเหล่านี้:

1. การเพิ่ม Expires Headers: ส่วนหัวเหล่านี้จะบอกให้เบราว์เซอร์ทราบเมื่อต้องการขอทรัพยากรเวอร์ชันใหม่จากเซิร์ฟเวอร์
2. เปลี่ยนส่วนหัวของการตรวจสอบแคช: คุณสามารถใช้ส่วนหัวเหล่านี้เพื่อกำหนดเกณฑ์แคชได้
3. การตั้งค่าส่วนหัวของแท็กเอนทิตี (ETags): เป็นไปได้ที่จะระบุว่าทรัพยากรบนเซิร์ฟเวอร์มีการเปลี่ยนแปลงเมื่อเทียบกับไฟล์ในเครื่องหรือไม่

แก้ไขการแคชของเลเวอเรจเบราว์เซอร์ใน Apache

1. สร้างหรือแก้ไขไฟล์ .htaccess

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

อ่านเพิ่มเติม: รายการตรวจสอบ SEO ในหน้า: 10 เคล็ดลับการเพิ่มประสิทธิภาพที่นำไปปฏิบัติได้เพื่ออันดับที่ดีขึ้น

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

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

หรือหากคุณใช้ตัวจัดการไฟล์ cPanel ให้ย้ายไปยังตำแหน่งที่ต้องการ และสร้าง ไฟล์ . htaccess

หากคุณมี ไฟล์ . htaccess อยู่ แล้ว คุณสามารถเพิ่มกฎการแคชของเบราว์เซอร์ใหม่ได้

2. เพิ่มส่วนหัวหมดอายุ

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

หมดอายุActive On

หลังจากนั้น คุณสามารถกำหนดช่วงเวลาสำหรับไฟล์ข้อความต่างๆ โดยใช้ไวยากรณ์ที่แสดงด้านล่าง:

ExpiresByType text / CSS “เข้าถึง 1 เดือน”

ExpiresByType text / HTML “เข้าถึง 1 เดือน”

หากต้องการกำหนดเวลาหมดอายุสำหรับรูปภาพ ให้ใช้รูปภาพแทนเครื่องหมายทับข้อความและนามสกุลรูปภาพแทน

ExpiresByType image / jpeg “เข้าถึงได้ 1 เดือน”

ExpiresByType image / svg “เข้าถึง 1 เดือน”

หากต้องการกำหนดวันปิดรับสมัคร ให้ใช้แอปพลิเคชันและระบุนามสกุลไฟล์

แอปพลิเคชัน ExpiresByType / pdf “เข้าถึง 1 เดือน”

สำหรับไฟล์อื่นๆ ทั้งหมดที่ไม่ครอบคลุมโดยการตั้งค่าเฉพาะ ให้ใช้คำจำกัดความ ExpiresDefault:

ExpiresDefault “เข้าถึง 1 เดือน”

3. กำหนดนโยบายแคช

ถัดไป คุณต้องกำหนดเกณฑ์แคชโดยใช้การตั้งค่าการตรวจสอบแคช

นโยบายแคชมีสามส่วนหลัก:

• วิธีแคชทรัพยากร
• ตำแหน่งของแคช
• เวลาก่อนที่ทรัพยากรจะหมดอายุ

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

ตัวอย่างเช่น หน้าโปรไฟล์ของผู้ใช้ที่เข้าสู่ระบบควรถูกแคชบนอุปกรณ์ไคลเอนต์เท่านั้น

ในทางกลับกัน หน้าแรกของบล็อกสามารถแคชบน CDN ได้เช่นกัน คุณสามารถตั้งค่านโยบายแคชสาธารณะโดยเพิ่มกฎต่อไปนี้:

<IfModule mod_headers.c>

ชุดส่วนหัวควบคุมแคชสาธารณะ

</ IfModule>

คุณยังสามารถระบุเกณฑ์ที่แตกต่างกันสำหรับไฟล์ประเภทต่างๆ โดยเพิ่มตัวกรองต่อไปนี้ในโมดูลส่วนหัว:

<ifModule mod_headers.c>

<filesMatch “\. (ico | jpeg | jpg | png) $”>

ชุดส่วนหัวควบคุมแคชสาธารณะ

</ FilesMatch>

<filesMatch “\. (php) $”>

ชุดส่วนหัวควบคุมแคชส่วนตัว

</ FilesMatch>

</ IfModule>

โค้ดด้านบนระบุว่าเบราว์เซอร์สามารถจัดเก็บไฟล์รูปภาพได้ทุกที่ แต่ต้องเก็บไฟล์ PHP ไว้ในอุปกรณ์ไคลเอ็นต์

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

ชุดส่วนหัว หมดอายุ 0

4. ปิดใช้งานแท็กเอนทิตีใน Apache

สุดท้าย จำเป็นต้องปิดการใช้งานแท็กเอนทิตีโดยใช้รหัสต่อไปนี้:

FileETag ไม่มี

การปิดใช้งาน ETag กำหนดให้เบราว์เซอร์ต้องอาศัยเกณฑ์แคชและหลีกเลี่ยงการตรวจสอบไฟล์ซ้ำทุกครั้งที่โหลดหน้าเว็บ

บันทึก ไฟล์ . htaccess และรีสตาร์ท Apache เพื่อให้การเปลี่ยนแปลงมีผล

แก้ปัญหาการแคชเบราว์เซอร์ Leverage ใน Nginx

ใน Nginx คุณจะพบไฟล์การกำหนดค่า nginx.conf ในตำแหน่ง / etc / nginx / site-enabled / default

คุณสามารถเพิ่มส่วนหัว Expires ให้กับไฟล์บางประเภทได้โดยใช้รหัสต่อไปนี้:

ที่ตั้ง ~ * \. (ico | jpeg | jpg | png) $ {

หมดอายุ 30d;

}

คุณยังสามารถเพิ่มส่วนหัว Cache-Control ไปยังบล็อกของรหัสเดียวกันได้:

ที่ตั้ง ~ * \. (ico | jpeg | jpg | png) $ {

หมดอายุ 30d;

add_header Cache-Control "สาธารณะ";

}

บันทึกไฟล์การกำหนดค่าและรีสตาร์ท Nginx เพื่อให้การเปลี่ยนแปลงมีผล

แก้ปัญหา Leverage Browser Cache ด้วย plugin

หากคุณกำลังใช้ปลั๊กอินแคชสำหรับ WordPress ปลั๊กอินนั้นอาจรองรับการแคชของเบราว์เซอร์อยู่แล้ว

ตอนนี้เรามาดูวิธีแก้ปัญหาการแคชของเบราว์เซอร์โดยใช้ปลั๊กอินแคชที่มีชื่อเสียงที่สุด

1. WP Rocket

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

• การบีบอัดไฟล์แบบคงที่ (GZip) – เพื่อลดขนาดข้อมูลทั้งหมด (อ่านบทความฉบับเต็มเกี่ยวกับวิธีการเปิดใช้งานการบีบอัด GZip ใน WordPress )
• เปิดใช้งานไฟล์แคช (รวมถึงการโหลดแคชล่วงหน้า) – เพื่อลดความเครียดบนเซิร์ฟเวอร์ (และกู้คืนสำเนาของแต่ละหน้าที่สแกนล่วงหน้า)
• การเพิ่มประสิทธิภาพแบบอักษรของ Google – เพื่อให้แน่ใจว่ามีการโหลดแบบอักษรขนาดใหญ่ขึ้นอย่างรวดเร็ว
• โหลดช้า – เพื่อให้ภาพถูกเรียกเก็บเงินเฉพาะเมื่อผู้ใช้เลื่อนลงไปที่ส่วนของหน้าที่ต้องใช้ภาพ
• การลดขนาดและ การรวม – ลดขนาดและการรวมทรัพยากรข้อความเพื่อส่งไปยังผู้ใช้ปลายทางอย่างรวดเร็วยิ่งขึ้น
• เลื่อนการโหลด JS เพื่อให้หน้าปรากฏขึ้นอย่างรวดเร็วแทนที่จะรอให้ทรัพยากรทั้งหมดดาวน์โหลด
• ผสานรวมและเปิดใช้งานเครือข่าย CDN เพื่อให้ส่งภาพที่หนักกว่าได้เร็วขึ้น
• การดึงข้อมูล DNS ล่วงหน้า – เพื่อลดเวลาที่ใช้ในการแก้ไขที่มาของเนื้อหาของบุคคลที่สาม

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

เราขอแนะนำให้อ่านรีวิว WP Rocket ของเรา

2. แคช LiteSpeed ​​​​

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

นอกจากนี้ยังสามารถตั้งเวลาหมดอายุได้ อย่างไรก็ตาม โปรดทราบว่าการตั้งค่านี้ใช้กับไฟล์แคชทั้งหมดบนเว็บไซต์

3. WP แคชที่เร็วที่สุด

WP Fastest Cache เป็นปลั๊กอินแคช WordPress อีกตัวที่มีตัวเลือกการปรับแต่งอย่างง่าย รุ่นฟรีช่วยให้คุณสามารถเปิดใช้งานการแคชของเบราว์เซอร์ ไปที่หน้าการตั้งค่าและเลือกช่องทำเครื่องหมายสำหรับการแคชเบราว์เซอร์

4. W3 แคชทั้งหมด

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

ปลั๊กอินนี้ช่วยให้คุณตั้งค่าการอนุญาตสำหรับไฟล์ประเภทต่างๆ เช่น รูปภาพ สคริปต์ และสไตล์ชีต สำหรับแต่ละกลุ่ม คุณสามารถตั้งค่าส่วนหัว Expires, Expires lifes และ ETags ได้

คำถามที่พบบ่อย

บทสรุป

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