แผงควบคุม (Dashboard)
ในแดชบอร์ดจะเห็นไลเซนส์ที่ใช้อยู่และวันหมดอายุ หากต่อไปต้องล้างแคช ให้คลิกล้างและ Preload ที่ [Cache Files] และล้าง [Priority Elements] ทางด้านขวา นอกจากนี้ หากเกิดปัญหา คุณขอความช่วยเหลือจาก WP Rocket Support ได้ผ่าน [View my account] ทางขวาของหน้า หรือ [Ask support] ด้านล่าง
Rocket Insights Score — แสดงคะแนนประสิทธิภาพและค่า LCP·TBT·CLS·TTFB ของหน้าที่ติดตาม
Cache Files — ลบไฟล์แคชทั้งหมดแล้วทำ Preload ใหม่
Used CSS — ไฟล์ Used CSS จะถูกลบ
Priority Elements — รีเซ็ตการปรับแต่งที่บันทึกไว้ซึ่งเกี่ยวกับ automatic lazy rendering รูปภาพสำคัญ การเชื่อมต่อล่วงหน้าไปยังโดเมนภายนอก และการโหลดฟอนต์ล่วงหน้า
Rocket Insights
Rocket Insights คือแท็บที่ตรวจหน้าเว็บด้วย GTmetrix แล้วแสดงคะแนนประสิทธิภาพและค่า LCP·TBT·CLS·TTFB คุณเพิ่มที่อยู่หน้าที่ต้องการตรวจได้ และถ้าเปิด [Performance Monitoring] จะตรวจอัตโนมัติตามรอบที่กำหนดไว้
Content Delivery(CDN)
RocketCDN Free รวมอยู่ในไลเซนส์ WP Rocket และส่งหน้าเว็บ 3 หน้าที่เลือกเองผ่านตำแหน่ง edge 10 แห่ง หากต้องการใช้กับทั้งเว็บไซต์ต้องอัปเกรดเป็น RocketCDN Pro ราคา $ 7.99 /เดือน และตำแหน่ง edge จะเพิ่มเป็นมากกว่า 100 แห่ง
หากใช้ CDN แยกต่างหาก ให้ใส่ระเบียน CNAME ที่บริษัท CDN กำหนดไว้ใน [Other CDN] โปรดทราบว่าส่วนนี้เป็นการตั้งค่าสำหรับ CDN อื่นที่ไม่ใช่ Cloudflare CDN ส่วน Cloudflare CDN เปิดใช้ได้ในส่วนเสริม (Add-ons)
การปรับแต่งไฟล์ (File Optimization) · CSS Files
การปรับแต่งไฟล์คือแท็บที่ลดขนาดไฟล์ CSS และ JavaScript และเปลี่ยนลำดับการโหลด เมื่อสร้างไฟล์แคช การปรับแต่งนี้จะใช้กับไฟล์ของหน้านั้นด้วย (ได้แก่ CSS และ JavaScript )
ในแผนผังด้านล่าง ฟีเจอร์นี้อยู่ในส่วน แคชเว็บไซต์ ของแคชฝั่งเซิร์ฟเวอร์
💾 แคช
├── แคชฝั่งเซิร์ฟเวอร์
│ ├── แคชเว็บไซต์
│ │ ├─ แปลงเป็นไฟล์ HTML แบบสแตติก (CSS, JavaScript ฯลฯ)
│ │ └─ ที่เก็บแคชเว็บ
│ │ ├─ แคชหน่วยความจำ (RAM)
│ │ └─ แคชดิสก์ (HDD/SSD)
แบ่งออกเป็น 2 ฟีเจอร์ คือ การปรับแต่งไฟล์ CSS และการปรับแต่งไฟล์ JavaScript
① CSS Files
ⓐ Minify CSS files
↳ Minify CSS files จะลบช่องว่างและคอมเมนต์เพื่อลดขนาดไฟล์ หากมีปลั๊กอินที่หน้าตาเพี้ยนหลังเปิดใช้ ให้เพิ่มไฟล์ CSS ของปลั๊กอินนั้นลงในรายการยกเว้น
ในรายการยกเว้น ให้เขียนพาธบรรทัดละหนึ่งรายการแบบด้านล่าง
wp-content/plugins/Plugin/(.*).css
ⓑ Optimize CSS delivery
↳ Optimize CSS delivery คือฟีเจอร์ที่กำจัด CSS ที่บล็อกการเรนเดอร์ และเปิดพร้อมกับ Minify CSS files ได้ เลือกได้เพียงวิธีเดียวระหว่าง [Remove Unused CSS] กับ [Load CSS asynchronously]
Remove Unused CSS (ลบ CSS ที่ไม่ได้ใช้)
WP Rocket แนะนำ [Remove Unused CSS] ฟีเจอร์นี้ตัด CSS ที่แต่ละหน้าไม่ได้ใช้ออกเพื่อลดขนาดหน้าและจำนวนคำขอ HTTP ส่วนองค์ประกอบที่หน้าตาเพี้ยนหลังเปิดใช้ ให้ใส่ชื่อไฟล์·ID·คลาสไว้ใน [CSS safelist] เพื่อยกเว้นไม่ให้ถูกตัดออก
Load CSS Asynchronously (โหลด CSS แบบอะซิงโครนัส)
[Load CSS asynchronously] จะสร้าง CSS ที่จำเป็นสำหรับหน้าจอแรกแยกไว้ แล้วโหลด CSS ส่วนที่เหลือแบบอะซิงโครนัส ใช้แทนเมื่อ [Remove Unused CSS] ทำให้เกิดปัญหา
การปรับแต่งไฟล์ (File Optimization) · JavaScript Files
② JavaScript Files
การตั้งค่าไฟล์ JavaScript แบ่งเป็น 4 อย่าง ได้แก่ Minify JavaScript files, Combine JavaScript files, Load JavaScript deferred และ Delay JavaScript execution
รายการตั้งค่า
ฟังก์ชัน
คำอธิบาย
JavaScript ย่อขนาดไฟล์
ไฟล์เล็กลง
JavaScript รวมไฟล์
คำขอ HTTP ลดลง
JavaScript โหลดแบบหน่วงเวลา
ลดการบล็อกการเรนเดอร์
ทำให้ไฟล์ JavaScript ที่ขัดขวางการเรนเดอร์ทำงานหลังการแยกวิเคราะห์ HTML เสร็จ
JavaScript หน่วงการรัน
ประสบการณ์ผู้ใช้ดีขึ้น
หน่วงการโหลดไฟล์ JavaScript จนกว่าผู้ใช้จะมีปฏิสัมพันธ์ เช่น เลื่อนหน้าหรือคลิก
ⓐ Minify JavaScript files
ลบช่องว่างและคอมเมนต์เพื่อลดขนาดไฟล์ หากเปิดใช้แล้วบางฟีเจอร์ในหน้าของผู้เข้าชมไม่ทำงาน ให้ปิดการตั้งค่านี้
ⓑ Combine JavaScript files
รวมไฟล์ JavaScript หลายไฟล์เป็นไฟล์เดียวเพื่อลดจำนวนคำขอ HTTP ไม่แนะนำสำหรับเว็บไซต์ที่ใช้ HTTP/2 และถ้าเปิด [Delay JavaScript execution] จะเลือกตัวเลือกนี้ไม่ได้ หากเปิดแล้วเห็นข้อผิดพลาด ให้ปิดอีกครั้งแล้วเว็บไซต์จะกลับเป็นปกติ
ⓒ Load JavaScript deferred
Load JavaScript deferred จะเลื่อนการรัน JavaScript ไปจนกว่าการแยกวิเคราะห์ HTML จะเสร็จ เพื่อกำจัด JavaScript ที่บล็อกการเรนเดอร์ และทำให้ค่า First Contentful Paint (FCP) และ Largest Contentful Paint (LCP) ดีขึ้น
ทำงานอย่างไร?
ฟีเจอร์นี้เพิ่มแอตทริบิวต์ defer ให้แท็ก <script> เพื่อไม่ให้ขัดขวางการแยกวิเคราะห์ HTML ทำให้เว็บเบราว์เซอร์เรนเดอร์องค์ประกอบ HTML อื่นต่อไปได้ระหว่างดาวน์โหลดไฟล์ JavaScript ผู้ใช้จึงรู้สึกว่า หน้าเว็บโหลดเร็วขึ้น
ควรใช้ Load JavaScript deferred เมื่อไร?
ส่วนใหญ่ใช้กับไฟล์ JavaScript ที่ไม่จำเป็นต่อการแสดงหน้าจอแรกของหน้าเว็บ
การปรับแต่งไฟล์ (File Optimization) · Delay JavaScript execution
ⓓ Delay JavaScript execution
Delay JavaScript execution คือฟีเจอร์ที่ยังไม่โหลดไฟล์ JavaScript จนกว่าผู้เข้าชมจะใช้งานหน้าเว็บ เช่น เลื่อนหน้าหรือคลิก
One-click exclusions เป็นฟีเจอร์ที่ WP Rocket มีไว้เพื่อความสะดวก แค่ติ๊กปลั๊กอิน·ธีม·บริการที่ใช้บ่อย ไฟล์ JavaScript ของสิ่งนั้นก็จะถูกยกเว้นจากการหน่วงการรัน
One-click exclusions : รายการที่ยกเว้นได้เป็นค่าเริ่มต้นมีดังนี้ ฟีเจอร์ที่มีช่องให้ติ๊กเลือกแบบนี้แทบหาไม่ได้ในปลั๊กอินแคชตัวอื่น
หากรายการที่ต้องการไม่มีในรายการยกเว้น คุณตั้งค่าการยกเว้นเองได้
https://platform.twitter.com/widgets.js
https://connect.facebook.net/en_US/fbevents.js
https://pagead2.googlesyndication.com/pagead/js
https://cdnjs.cloudflare.com/
https://stackpath.bootstrapcdn.com/
https://code.jquery.com/
[Safe Mode for Delay JavaScript Execution] คือโหมดปลอดภัยที่เอาสคริปต์ภายในเว็บไซต์ทั้งหมดออกจากการหน่วง
สื่อ (Media)
สื่อเป็นแท็บที่เน้นการตั้งค่ารูปภาพ แต่ก็ตั้งค่าสำหรับ YouTube และ Google Fonts ได้ด้วย
ตั้งค่า ① การโหลดแบบหน่วงเวลา และ ② ขนาดรูปภาพ
การโหลดแบบหน่วงเวลาจะโหลดรูปภาพ·iframe·วิดีโอเมื่อเข้ามาในหน้าจอ ช่วยลดจำนวนคำขอ HTTP ถ้าเปิด [Replace YouTube iframe with preview image] วิดีโอ YouTube จะแสดงเป็นภาพตัวอย่างก่อน
[Add missing image dimensions] จะเติมแอตทริบิวต์ width·height ที่รูปภาพขาดไป เพื่อลดการขยับของเลย์เอาต์
③ ในส่วนฟอนต์ [Preload fonts] จะโหลดฟอนต์ที่ใช้ในหน้าจอแรกก่อน และ [Self-host Google Fonts] จะดาวน์โหลด Google Fonts มาไว้ในเซิร์ฟเวอร์ของคุณแล้วส่งจากที่นั่น
โหลดล่วงหน้า (Preload)
การโหลดแคชล่วงหน้าเป็นสิ่งที่ปลั๊กอินแคชทุกตัวมี การ Preload เนื้อหาอย่างเรื่องหรือหน้าไว้ก่อนผู้เข้าชมมาถึง ทำให้หน้าของ WordPress โหลดเร็วตั้งแต่ตอนที่ผู้เข้าชมเปิด
เมื่อเปิด Preload แล้ว WP Rocket จะหาแผนผังเว็บไซต์ (sitemap) บันทึก URL ทั้งหมด และสร้างแคชไว้ล่วงหน้า [Enable link preloading] จะดาวน์โหลดหน้าไว้ล่วงหน้าเมื่อผู้เข้าชมเอาเมาส์ไปวางบนลิงก์
นี่คือผลการตรวจสอบว่า WP Rocket โหลดแคชล่วงหน้าจริง โดยประมาณมากสุดราว 30 รายการต่อนาที และตอนสร้างแคชครั้งแรกจะสร้างแคช Preload มากกว่านั้น
นอกจาก Preload แล้ว ฟีเจอร์ล้างแคชของแต่ละเรื่องก็มีประโยชน์มากระหว่างดูแลเว็บไซต์
กฎขั้นสูง (Advanced Rules)
โดยส่วนตัว นอกจากตั้ง Cache Lifespan ไว้ 9 ชั่วโมงแล้ว ก็ไม่ได้ตั้งค่าอื่นเพิ่ม
ค่าเริ่มต้นคือ 10 ชั่วโมง และหน้าจอแนะนำให้ลดต่ำกว่า 10 ชั่วโมงหากมีปัญหาเกิดเป็นระยะ
รายการตั้งค่า
ฟังก์ชัน
คำอธิบาย
อายุแคช
กำหนดอายุของไฟล์แคช
กำหนดเวลาที่ไฟล์แคชจะถูกลบจากเซิร์ฟเวอร์โดยอัตโนมัติ
URL ที่ไม่แคชเด็ดขาด
ยกเว้นบางหน้าจากแคช
ยกเว้น URL ที่มีข้อมูลสำคัญ (หน้าเข้าสู่ระบบ/ออกจากระบบ) จากแคช
คุกกี้ที่ไม่แคชเด็ดขาด
ยกเว้นแคชตามคุกกี้ที่กำหนด
ป้องกันการแคชหน้าเมื่อเบราว์เซอร์มีคุกกี้ที่กำหนด
User Agent ที่ไม่แคชเด็ดขาด
ยกเว้นแคชสำหรับผู้ใช้บางกลุ่ม
ไม่ให้ผู้เข้าชมที่มี User Agent ที่กำหนดเห็นหน้าที่แคชไว้
URL ที่ล้างแคชทุกครั้ง
บังคับให้แคชหมดอายุ
กำหนด URL ที่จะถูกลบออกจากแคชทุกครั้งที่อัปเดตเรื่องหรือหน้า
Query String ที่แคช
แคชพารามิเตอร์ URL ที่กำหนด
บังคับให้แคช URL ที่มีพารามิเตอร์ GET ที่กำหนด (เช่น ?utm_source=google)
ฐานข้อมูล (Database)
แท็บฐานข้อมูลจะลบรีวิชัน·ฉบับร่างอัตโนมัติ·เรื่องในถังขยะ ความเห็นสแปม·ที่ถูกลบ และข้อมูลชั่วคราว (transient) แล้วปรับแต่งตาราง สิ่งที่ล้างไปแล้วกู้คืนไม่ได้ จึงควรสำรองฐานข้อมูลก่อนรัน
ถ้าเปิด [Schedule Automatic Cleanup] ระบบจะล้างอัตโนมัติตามรอบที่กำหนด
Heartbeat
WordPress Heartbeat คือ API ที่ทำให้ WordPress สื่อสารเป็นระยะ ระหว่างเว็บเบราว์เซอร์กับเซิร์ฟเวอร์ เหมือนหัวใจที่เต้นอยู่ตลอดเวลา API นี้ส่งสัญญาณเป็นระยะเพื่อรักษาการเชื่อมต่อกับเซิร์ฟเวอร์
WordPress ใช้ Heartbeat API นี้ทำฟีเจอร์หลายอย่าง เช่น ขณะที่ผู้ใช้กำลังแก้ไขเรื่องในตัวแก้ไข WordPress จะใช้ทำฟีเจอร์
ล็อก ที่ป้องกันไม่ให้ผู้ใช้อื่นแก้ไขเรื่องเดียวกัน
นอกจากนี้ Heartbeat ยังใช้บันทึกอัตโนมัติขณะเขียนเรื่อง และส่งการแจ้งเตือนแบบเรียลไทม์ในแดชบอร์ดผู้ดูแล
[Reduce activity] จะลดสัญญาณที่ส่งนาทีละครั้งเหลือ 2 นาทีครั้ง หากปิดไปเลย ปลั๊กอินและธีมที่ใช้ API นี้อาจทำงานไม่ได้
ส่วนเสริม (Add-ons)
แคชผู้ใช้
สร้างไฟล์แคชเฉพาะสำหรับผู้ใช้ที่เข้าสู่ระบบแต่ละคน โดยส่วนตัวแทบไม่ได้ใช้
Varnish
เมื่อ WP Rocket ล้างแคช จะล้างแคช Varnish ไปด้วยโดยอัตโนมัติ เพื่อให้เนื้อหาเป็นปัจจุบันเสมอ
ความเข้ากันได้กับ WebP
สร้างแคชแยกสำหรับเบราว์เซอร์ที่รองรับรูป WebP โดย WP Rocket ไม่ได้สร้างรูป WebP ให้ และถ้าใช้ปลั๊กอินที่ส่ง WebP โดยตรงอย่าง IMAGIFY ก็ไม่จำเป็นต้องเปิด
Cloudflare
จัดการแคชของ Cloudflare จาก WP Rocket และเปิดใช้การตั้งค่าที่เหมาะสมได้
Sucuri
เมื่อ WP Rocket ล้างแคช จะซิงก์และล้างแคชของ Sucuri ไปด้วยโดยอัตโนมัติ
ส่วนเสริม (Add-ons) · Varnish
① Varnish Cache
เซิร์ฟเวอร์ที่ตั้งค่าแคช Varnish ไว้ มักวาง Varnish ไว้หน้าเซิร์ฟเวอร์ Apache หรือ Nginx
Varnish Cache : ตัวเร่งเว็บที่แคชการตอบกลับเมื่อมีคำขอเว็บไซต์แบบไดนามิกและ API ช่วยลดภาระของเซิร์ฟเวอร์แบ็กเอนด์และเพิ่มความเร็วในการโหลดหน้าเว็บ
WP Engine , Flywheel, Cloudways หรือ WPX: หากโฮสต์เว็บไว้ที่บริการเหล่านี้ WP Rocket จะตรวจจับสภาพแวดล้อมและเปิดใช้ส่วนเสริม Varnish ให้อัตโนมัติ
SiteGround , Kinsta, Pressable — แคชของ WP Rocket ในบริการเหล่านี้ซิงก์กับแคชของเซิร์ฟเวอร์อยู่แล้ว จึงไม่ต้องเปิดตัวเลือกนี้
Varnish Cache ทำงานโดย
เก็บผลลัพธ์สุดท้ายของเว็บไซต์ (HTML , รูปภาพ ฯลฯ) แล้วส่งให้ผู้ใช้โดยตรง ส่วน OpCache และ Redis จะ
แคชข้อมูลหรือโค้ดภายใน ที่ประกอบเป็นเว็บไซต์ จึงมีลักษณะต่างกัน
ส่วนเสริม (Add-ons) · Cloudflare
② ตั้งค่า Cloudflare
หากใช้ Cloudflare ให้เปิดใช้เพื่อเชื่อมต่อกับ WP Rocket และใช้ร่วมกับ CDN อื่นที่มีอยู่เดิมได้
เมื่อเปิดใช้ Cloudflare ให้ใส่อีเมลบัญชี Global API Key และ Zone ID เพื่อเชื่อมต่อ
การปรับแต่งรูปภาพ (Image Optimization)
ว่ากันว่า 50% ของเวลาโหลดเว็บไซต์หมดไปกับรูปภาพ Imagify — หน้านี้แนะนำให้ติดตั้ง และแพ็กเกจฟรีบีบอัดได้เดือนละ 20MB (ประมาณ 200 รูป) พร้อมแปลงเป็น WebP หรือ AVIF ได้
เครื่องมือ (Tools)
[Tools] มีฟีเจอร์ส่งออกการตั้งค่าที่ทำไว้ใน WP Rocket
ส่งออกการตั้งค่าไว้ทดสอบแล้วนำเข้ากลับมาได้ หรือดาวน์โหลดไฟล์ตั้งค่าเก็บไว้ในพีซีแล้วอัปโหลดเพื่อกู้คืนการตั้งค่าได้
[MCP Server] ที่เพิ่มเข้ามาใหม่คือรายการสำหรับเชื่อมต่อเครื่องมือ AI เข้ากับ WP Rocket
[Rollback] ใช้ย้อนกลับไปเวอร์ชันก่อนหน้าเมื่อเกิดปัญหา และ [Update Inclusion and Exclusion Lists] ใช้อัปเดตรายการความเข้ากันได้ ซึ่งปกติจะดาวน์โหลดอัตโนมัติทุกสัปดาห์ ด้วยตนเอง
บทแนะนำ (Tutorials)
ปลั๊กอินแคชไม่ว่าจะอธิบายไว้ดีแค่ไหนหรือมีประสิทธิภาพดีเพียงใด ในทางปฏิบัติก็ยากที่จะใช้ได้เต็ม 100%
หน้าปลั๊กอินมีบทแนะนำของแต่ละฟีเจอร์ ผู้ใช้จึงมีโอกาสพัฒนาประสิทธิภาพต่อเนื่องได้ แม้หลังติดตั้ง WP Rocket ตั้งค่าพื้นฐาน และทดสอบเสร็จแล้ว
ปลั๊กอินของเรา (Our Plugins)
เพราะ WP Rocket ถูกใช้ในเว็บไซต์ WordPress จำนวนมาก จึงมีปลั๊กอินมากมายที่โฆษณาว่าใช้ร่วมกับ WP Rocket ได้โดยไม่ชนกัน ในทางปฏิบัติ ข้อผิดพลาดระหว่างตั้งค่าแคชเกิดได้กับทุกปลั๊กอิน จึงต้องหาจุดที่ลงตัว
บริษัทชื่อ group.one เข้าซื้อ
WP Media ในเดือนเมษายน 2021 และต่อมาในเดือนพฤษภาคม 2023 ก็เข้าซื้อ
RankMath ด้วย หมายความว่า WP Rocket, IMAGIFY และ RankMath เป็นผลิตภัณฑ์ของบริษัทเดียวกันและเข้ากันได้ดี