แม้ว่าเว็บระบบ WordPress เป็น CMS ที่ได้รับความนิยมมากที่สุดในโลก แต่ก็มีเว็บจำนวนไม่น้อยเลยที่มักจะประสบปัญหาเรื่องความเร็ว ซึ่งอาจส่งผลต่อประสบการณ์การใช้งานของผู้ใช้และการจัดอันดับในผลการค้นหา วิธีแก้ปัญหาเราควรจะใช้ปลั๊กอินแคชเพื่อเพิ่มความไวในการเข้าถึงหน้าเว็บ ซึ่งปลั๊กอินแคชที่ได้รับความนิยมสูงก็คือ WP Rocket เราจะมาอัพเดตการตั้งค่า WP Rocket สำหรับปี 2023 กันนะครับ
WP Rocket คืออะไร
WP Rocket เป็นปลั๊กอินที่ช่วยจัดการแคชและช่วยเพิ่มประสิทธิภาพเว็บไซต์ที่ได้รับความนิยมอย่างมาก ผลิตโดยบริษัท WP Media ตั้งอยู่ในประเทศฝรั่งเศส ตั้งแต่ปี 2014 โดยปลั๊กอินนี้จะช่วยเพิ่มความเร็วของเว็บไซต์ WordPress ได้อย่างมีประสิทธิภาพและง่ายดาย ปัจจุบันมีการติดตั้งปลั๊กอินนี้มากกว่า 1.5 ล้านเว็บเลยทีเดียวครับ เพราะฉะนั้นเรื่องคุณภาพไว้ใจได้เลย
คุณสมบัติที่ช่วยเพิ่มประสิทธิภาพ
– WP Rocket ช่วยในการแคชหน้าเว็บและไฟล์ต่างๆ ของเว็บไซต์ ซึ่งจะช่วยเพิ่มความเร็วในการโหลดหน้าเว็บ
– Lazy loadingช่วยในการโหลดรูปภาพและไฟล์อื่นๆ บนเว็บไซต์เมื่อผู้ใช้เลื่อนดูหน้าเว็บ ซึ่งจะช่วยเพิ่มความเร็วในการโหลดหน้าเว็บ
– ช่วยย่อและบีบอัดไฟล์ CSS, JavaScript และ HTML
– ช่วยปรับขนาดและบีบอัดรูปภาพบนเว็บไซต์
– สามารถใช้ CDN (Content Delivery Network) เพื่อให้บริการไฟล์ CSS, JavaScript และรูปภาพจากเซิร์ฟเวอร์ที่อยู่ใกล้กับผู้ใช้ ซึ่งจะช่วยเพิ่มความเร็วในการโหลดหน้าเว็บ
ราคา
WP Rocket เป็นปลั๊กอินที่ต้องเสียค่าใช้จ่าย ไม่มีเวอร์ชั่นฟรี โดยราคาเริ่มต้นอยู่ที่ 59 USD/ปี ได้ 1 เว็บ (ประมาณ 2,xxx บาท) ส่วนแพลนสูงสุดอยู่ที่ 299 USD/ปี ใช้ได้ไม่จำกัดเว็บ (ประมาณ 1x,xxx บาท) ใครใช้งานเยอะก็จัดแพลนนี้ได้เลย เหมาะสำหรับองค์กรหรือบริษัทรับทำเว็บครับ
วิธีตั้งค่า
เราขอข้ามวิธีการติดตั้งไปเลยนะครับ หลังติดตั้งและ Activate ปลั๊กอินแล้วให้ไปที่เมนู Settings > WP Rocket คลิกเลือกที่เมนู Cache ติ๊กเลือก “Enable caching for mobile devices” เพื่อให้มีการแคชที่อุปกรณ์มือถือด้วย
ตรง Cache Lifespan คืออายุการใช้งานแคช WP Rocket จะตรวจสอบการสร้างไฟล์แคชทุกชั่วโมง หากการตรวจสอบรายชั่วโมงพบว่าไฟล์แคชที่มีเก่ากว่าแคชปัจจุบัน WP Rocket จะลบไฟล์แคชและสร้างใหม่ในภายหลังหากเปิดใช้งาน Preloadไว้ล่วงหน้า
ไฟล์แคชที่ถูกลบออกหลังจากการตรวจสอบ Cache Lifespan จะเก็บอยู่ที่ /wp-content/cache/wp-rocket/yourdomain.com/
ค่าเริ่มต้นสำหรับ Cache Lifespan คือ 10 ชั่วโมง จากนั้นระบบจะล้างแคชและสร้างใหม่ ถ้าเราไม่ต้องการให้มีการล้างแคชอัตโนมัติ ให้ใส่เลข “0” เป็นการปิดการใช้งานส่วนนี้ไปครับ แต่ถ้าเว็บของเราไม่ค่อยมีการอัพเดต เป็นเว็บให้ข้อมูลทั่วๆ ไป เราใส่เป็น 24 ชั่วโมง ก็ได้ครับ จะได้ไม่ทำให้ CPU ของเซิฟเวอร์ทำงานหนักเกินไป
ไปที่เมนู File Optimization ติ๊กเลือก Minify CSS Files จะทำการลดขนาดไฟล์โดยจะเข้าไปลบช่องว่างออกจากโค้ด CSS ทำให้ไฟล์มีขนาดเล็กลง
ติ๊กเลือก Optimize CSS Delivery และเลือกที่ปุ่ม “Remove Unused CSS” แต่วิธีนี้ก็ยังโหลดเป็นแบบ CSS inline อยู่ครับ แม้ว่าวิธีนี้จะดีสำหรับคะแนน PageSpeed แต่อาจจะช้าสำหรับผู้ใช้จริง เนื่องจากไม่สามารถแคชไฟล์ได้และเพิ่มขนาด HTML ในขณะที่ปลั๊กอินแคชอย่าง FlyingPress, Perfmatters และ LiteSpeed Cache จะใช้การโหลด CSS แบบแยกไฟล์ External แทน ในขณะที่ WP Rocket เป็นปลั๊กอินแคชโหลดแบบ inline
จากนั้นเลื่อนลงมาจะเจอส่วนของ JavaScript Files ติ๊กเลือก Minify JavaScript Files จะทำการลดขนาดไฟล์โดยจะเข้าไปลบช่องว่างออกจากโค้ด Java ทำให้ไฟล์มีขนาดเล็กลง
Combine JavaScript Files ปิดตัวเลือกนี้ไว้ การตั้งค่านี้จะใช้ไม่ได้ถ้าเราเปิดการใช้งาน “Delay JavaScript Execution” และเราไม่ควรรวมไฟล์ JSโดยเฉพาะบนเว็บไซต์ที่มีไฟล์ JS ขนาดใหญ่ เพราะอาจทำให้เกิดปัญหาเมื่อใช้เซิร์ฟเวอร์ HTTP/2 และ HTTP/3 ครับ
Load JavaScript Deferred ติ๊กเลือกไว้เลยครับ มันจะโหลด JavaScript เมื่อหน้าเว็บโหลดเสร็จแล้ว พูดง่ายๆ เอาไปโหลดในส่วนท้ายๆ ของเว็บครับ
Delay JavaScript Execution อันนี้ติ๊กเลือกไว้ครับ เป็นการหน่วงเวลาการดำเนินการ JavaScriptลดโค้ดของ Third-party จนกว่าผู้ใช้จะมีการโต้ตอบ (เช่น การสกรอลหน้าเว็บหรือสัมผัสหน้าจอบนมือถือ) วิธีนี้จะช่วยปรับปรุง Core Web Vitals หลายๆ ด้าน
หัวข้อถัดมาคือ Media “Lazy Load Images” ให้ติ๊กเลือกทุกข้อเลยครับ จะเป็นการหน่วงเวลาการโหลดรูปภาพ, iframe, วีดีโอ, Css Backgroundจนกว่าผู้ใช้จะเลื่อนหน้าลงและมองเห็นได้ในวิวพอร์ต
ส่วนตรง Image Dimensions ติ๊กเลือก Add missing image dimensions จะเป็นการระบุขนาดของภาพ ช่วยแก้ Error ใน Page Speed Insights เวลาขึ้นแจ้ง “use explicit width and height on image elements” ได้ โดย WP Rocket จะไปแก้ปัญหาตรงนี้ด้วยการเพิ่มขนาดลงไปในไฟล์ ตามตัวอย่างข้างล่างนี้
<img src=”test.png” width=”250″ height=”250″ />
ต่อกันด้วยหัวข้อ Preload > Preload Cache ติ๊กเลือกทั้งหมดเช่นกัน เมื่อเปิดใช้งานการโหลดล่วงหน้า WP Rocket จะตรวจเช็ค Sitemap ของเว็บโดยอัตโนมัติและบันทึก URL ทั้งหมดลงในฐานข้อมูล ปลั๊กอินจะทำให้แคชของเว็บโหลดไว้ล่วงหน้าเสมอ
Preload Links คือ เมื่อผู้ใช้วางเมาส์เหนือลิงก์เป็นเวลานานกว่า 100 มิลลิวินาที (หรือแตะลิงก์บนมือถือ) หน้าเว็บจะดาวน์โหลดในเบื้องหลัง เมื่อผู้ใช้คลิกลิงก์ หน้าเว็บจะโหลดทันที การดำเนินการนี้จะไม่ได้ช่วยเรื่องคะแนนของเว็บ แต่ช่วยให้เรื่องเวลาในการโหลดได้ ปัญหาคือถ้าผู้ใช้วางเมาส์เหนือลิงก์จำนวนมาก (เช่น รูปภาพผลิตภัณฑ์) ก็อาจทำให้ CPU ของเซิฟเวอร์พุ่งสูงขึ้นได้
Prefetch DNS Requests เป็นการขอเรียกข้อมูล DNS ล่วงหน้า ตรงนี้อาจจะข้ามไปก็ได้ครับ เนื่องจากมีการ Delay JavaScript ไว้อยู่แล้ว เช่นเดียวกับ Preload Fonts ก็ไม่ต้องทำอะไรครับ ปล่อยไปตามค่าปกติ
Advanced Rules ตรงนี้ถ้าไม่มีความจำเป็นอะไรก็ปล่อยไปตามปกติของมันไปครับ
Never cache URL(s) เป็นการกำหนดลิ้งค์ที่ไม่ต้องการให้แคช
Never Cache Cookies เป็นการกำหนด Cookiesที่ไม่ต้องการให้แคช
Never Cache User Agents ป้องกัน Googlebot หรือ Agent อื่นจากการแคชหน้า
Always Purge URLs เป็นการสั่งให้ล้างแคช URLเสมอโดยกำหนด URL ที่ต้องการลงไป
Cache Query Strings กำหนดให้แคชไปยัง พารามิเตอร์ ที่ระบุได้
Database เป็นส่วนที่ใช้สำหรับ Optimize รวมถึงลบตารางที่ไม่ได้ใช้ในฐานข้อมูลออก กำหนดเลือกตามในภาพด้านล่างได้เลย
CDN (Content Delivery Network) คือเครือข่ายของเซิฟเวอร์ที่เชื่อมต่อกันซึ่งช่วยเพิ่มความเร็วในการโหลดหน้าเว็บ เหมือนเป็นตัวกลางระหว่างเครื่องเซิฟเวอร์ของเว็บกับของClient โดย WP Rocket รองรับ CDN ดังๆ เช่น Amazon Cloudfront, MaxCDN, KeyCDN ฯลฯ ถ้าใครใช้ CDN สามารถนำข้อมูล CDN CNAME มากรอกตรงนี้ได้เลย
ทิ้งท้าย
WP Rocket เป็นปลั๊กอินจัดการแคชที่ช่วยเพิ่มประสิทธิภาพเว็บไซต์ WordPress ที่ได้รับความนิยมอย่างมาก ช่วยให้คุณเพิ่มความเร็วของเว็บ ประหยัดแบนด์วิดท์ ที่สำคัญการตั้งค่าทำได้ง่าย หวังว่าบทความนี้จะช่วยให้เพื่อนๆ ตั้งค่าได้ง่ายขึ้นนะครับ
Related Posts
