WP Rocket

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

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

คุณสมบัติที่น่าสนใจ

  • Auto generate Critical CSS ช่วยสร้าง  Critical CSS ให้อัตโนมัติโดยเราไม่ต้องไปวุ่นวายสร้างเองและใช้ปลั๊กอินเสริม
  • ระบบแยกแคช Desktop/Mobile
  • Minify & Combine JS/CSS รวมและบีบอัดไฟล์ JS และ CSS และสามารถแบ่งออกเป็นไฟล์ย่อยให้สามารถโหลดพร้อมกันได้เร็วขึ้น
  • Load JS Deferred โหลด JavaScript หลังจากโหลดข้อมูลเสร็จแล้ว
  • LazyLoad Image, iFrame, Video
  • Disable Emoji
  • Sitemap Preloading
  • Database optimization
  • Google font optimization
  • Remove query string from static resource
  • CloudFlare compatibility
  • DNS Prefetching
  • Import/Export

การใช้งาน

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

Dashboard

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

My Status

Rocket Tester ที่สำหรับเปิดงานเวอร์ชั่นเบต้าถ้ามีรุ่นเบต้าออกมา

Rocket Analytics ตรงนี้เปิดให้เว็บปลั๊กอินส่งข้อมูลเกี่ยวกับการใช้งานให้นักพัฒนาเพื่อใช้ในการพัฒนาปลั๊กอิน ตรง 2 ตัวเลือกนี้เราไม่จำเป็นต้องเปิดใช้งานก็ได้นะคะ

Quick Actions

จะเป็นส่วนของปุ่มลัดต่างๆ เช่น Clear cache ล้างแคช, Preload cache สร้างแคช, Purge OPCache content ล้าง OPCache สำหรับโฮ้สต์ที่ติดตั้ง OPCache cache เท่านั้น, Regenerate Critical CSS ใช้สร้าง Critical CSS ใหม่ ในกรณีที่เรามีการเปลี่ยนดีไซน์ แก้ไข CSS ของเว็บ เป็นต้น

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

Cache

ตั้งค่าเกี่ยวกับการแคช

Mobile Cache

ปลั๊กอินสามารถแยกการแคชออกเป็น Mobile กับ Desktop ปกติได้ สามารถเปิดใช้งานได้เลย โดยระบบจะแยกแคชออกเป็น 2 เวอร์ชั่นเพื่อเสริฟแคชให้กับ mobile อัตโนมัติ โดยเฉพาะเว็บที่มีการตั้งค่าการแสดงผลหรือใช้ปลั๊กอินที่แสดงหน้า Desktop กับ Mobile ต่างกัน

User Cache

สำหรับเว็บที่มีการล็อกอินของ User หลายแบบ เช่น เว็บที่มีระบบสมาชิกที่ต้องล็อกอินเพื่ออ่าน ระบบจะแยกแคชเป็นเวอร์ชั่นสำหรับ none login กับ login

Cache Lifespan

กำหนดระยะเวลาในการล้างแคชอัตโนมัติ

File Optimization

เป็นการตั้งค่าเกี่ยวกับการบีบอัพไฟล์ CSS และ JavaScript

Basic Settings

Minify HTML

ทำการบีบอัด HTML

Combine Google Fonts

files รวมไฟล์ Google Fonts เพื่อลดจำนวน HTTP รีเควส

Remove query strings from static resources

ลบ query string ที่ต่อท้ายไฟล์ต่างๆ มักใช้เพื่อให้บราวเซอร์โหลดอัพเดตล่าสุดเสมอ ทำการแปลง query string เหล่านี้เป็นชื่อไฟล์แทน

CSS Files

ตั้งค่าเกี่ยวกับไฟล์ CSS

Minify CSS files

เปิดการบีบอัดไฟล์ CSS ให้มีขนาดเล็กลง

Combine CSS files

สำหรับการรวมไฟล์ CSS เป็นไฟล์เดียว ตรงนี้อาจจะช่วยให้คะแนนในการทดสอบเว็บเราดีขึ้น แต่อาจจะไม่ได้ช่วยให้เว็บเราเร็วขึ้น ในทางตรงกันข้าง การแบ่งไฟล์ออกเป็นหลายไฟล์แยกกัน อาจจะทำให้คะแนนเราลดลงเพราะมีรีเควสเพิ่มขึ้น แต่อาจทำให้เว็บเราเร็วขึ้น โดยเฉพาะเว็บที่ใช้ HTTPS และเปิด HTTP/2 เพราะเราสามารถที่จะส่งไฟล์หลายไฟล์พร้อมกันในเวลาเดียวให้กับบราวเซอร์ได้ ทำให้การแสดงผลได้เร็วกว่าการส่งไฟล์ใหญ่ๆ ไฟล์เดียว เหมือนถนนที่มีเลนส์เดียวกับหลายเลนส์ ดังนั้นตรงนี้ไม่จำเป็นต้องเปิดใช้งานก็ได้ ลองทดสอบกันดูเอาเอง หาก Combine แล้ว เราก็ยังสามารถที่จะเว้นบางไฟล์ได้ในช่อง Exclude CSS Files

Optimize CSS delivery

เป็นการสร้าง Critical CSS อัตโนมัติสำหรับเว็บ ทำให้เว็บเราแสดงผลได้เร็วขึ้น เพราะไม่ต้องรอโหลด CSS  เนื่องจากจะมีการสร้าง  Critical CSS ที่สำหรับแสดงผลในส่วนของ Above the fold ให้เราอัตโนมัติ แต่ก่อนเราจะต้องใช้ปลั๊กอิน Autoptimize แล้วตั้งค่า Inline and Defer CSS แล้วก็สแกน Critical CSS มาใส่เอง แล้วยังใม่ได้แค่สำหรับหน้าเดียวทั้งเว็บ ถ้าต้องแต่ละหน้ามีดีไซน์ไม่เหมือนกัน ก็ต้องใช้ปลั๊กอินเสริมคือ AO Power up ที่จะต้องจ่ายรายเดือนเพิ่มอีก ตรงนี้ทำให้เราประหยัดเงินและลดการใช้งานปลั๊กอินลงไปได้อีกหลายตัว สามารถกำหนด Critical CSS เองได้ในช่อง Fallback critical CSS

JavaScript Files

เปิดการบีบอัด JavaScript

Minify JavaScript files

เปิดการบีบอัดไฟล์ JavaScript ให้มีขนาดเล็กลง

Combine JavaScript files

ทำการรวมไฟล์ JavaScript ให้เป็นไฟล์เดียว จะช่วยลด requests และทำให้ได้คะแนนดีขึ้น แต่อาจจะช้ากว่าการแบ่งไฟล์เป็นหลายๆ ไฟล์แล้วโหลดพร้อมกัน โดยเฉพาะกับโฮ้สต์ที่เปิดใช้งาน HTTP/2 จะสามารถเสริฟไฟล์หลายๆ ไฟล์พร้อมกันได้เหมือนกับถนนที่มีหลายๆ เลนส์ สามารถละเว้นไฟล์ที่ไม่ต้องการรวมได้ใน ช่อง Exclude JavaScript Files

Load JavaScript deferred

ทำการโหลด JavaScript แบบ defer ซึ่งแยก JavaScript ไว้โหลดทีหลัง ทำให้เว็บแสดงผล HTML ได้เร็วขึ้น

Safe Mode for jQuery

ในบางครั้งที่มีการใช้งาน Combine และ Defer อาจจะทำให้บางธีมหรือบางปลั๊กอินที่ต้องมีการเรียกใช้งาน jQuery ของ WordPress ไม่สามารถใช้งานได้ ทำให้เว็บแสดงผลผิดพลาด ยกตัวอย่างเช่น เราใช้ปลั๊กอิน Ewww Image Optimizer ในการเสริฟภาพแบบ WebP เพื่อแสดงภาพที่มีขนาดไฟล์เล็กที่สุดสำหรับ Chrome ซึ่งปลั๊กอินนี้จะต้องเรียกใช้งานตัว jQuery เพราะหากใช้ตัว .htaccess อย่างเดียว จะทำให้ใช้ร่วมกับ CloudFlare ไม่ได้เพราะจะแสดงผลผิดเพี้ยนบนบราวเซอร์อื่นที่ไม่ใช่ Chrome ดังนั้นถ้าเราไม่ติ๊ก Safe Mode หรือ Exclude jQuery ออก หน้าเว็บของเราก็จะแสดงผลผิดพลาดเป็นพังๆ ทันที แต่การที่เราเปิด Safe Mode หรือ Exclude jQuery ก็อาจจะทำให้เราได้คะแนนลดลงใน Google PageSpeed Insight หรือเว็บอื่นๆ เพราะมันมองว่าไปบล็อคการแสดงเนื้อหา ทั้งๆ ที่จริงๆ แล้วอาจจะไม่ใช่เลย ดังนั้นในที่นี้เราจึงเลือกระหว่างจะเอาแค่คะแนนสวย หรือความเร็วที่แท้จริง ตรงนี้เราจึงเลือกที่จะเอาความเร็วดีกว่า

Media

การตั้งค่าเกี่ยวกับไฟล์สื่อ รูปภาพ วิดีโอ

LazyLoad

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

Enable for images

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

Enable for iframe and videos

เปิดใช้งานกับ iframe และวิดีโอ และมีการเปิดใช้งานภาพพรีวิวของ YouTube แทนการโหลด iframe ใน Replace YouTube iframe with preview image

Emoji

Disable Emoji ปิดการใช้งานอีโมจิที่ต้องมีการเรียกจาก wordpress.org

Embeds

Disable WordPress embeds ปิดการใช้งาน WordPress embeds ที่จะ embed โพสของ WordPress อัตโนมัติเมื่อเราทำการวาง URL ของเว็บที่เป็น WordPress

 

WordPress embed

Preload

ตั้งค่าการสร้างแคชอัตโนมัติ

Sitemap Preloading

ทำการ preload ด้วยการสแกนจาก Sitemap โดยเราสามารถใส่ url ของ sitemap ได้ในช่อง Sitemaps for preloading แต่ถ้าหากใช้ Yoast SEO ระบบจะตรวจเจออัตโนมัติ เราก็สามารถที่จะติ๊กใช้งานได้เลย

Preload Bot

เคลียร์แคชเวลาที่มีการอัพเดตแก้ไขบทความต่างๆ และหน้าอื่นๆ ที่เกี่ยวข้อง ซึ่งจริงๆ ตัว Sitemap Preload ตัวเดียวก็ได้ เขาบอกว่าถ้ามีปัญหากับเซิฟเวอร์โหลดก็ไม่จำเป็นต้องเปิดตัวนี้ก็ได้ค่ะ

ตัวอย่างอีเมลด้านล่าง เนื่องจากเว็บเราเป็น VPS แบบราคาประหยัดต่ำสุด ก็จะสเปคต่ำหน่อย คือต่ำกว่า Share hosting ทั่วไปมาก บางครั้งโฮ้สต์ (DigitalOcean) ก็จะแจ้งเตือนแบบนี้ค่ะ

Prefectch DNS Requests

ช่วยให้การโหลดข้อมูลจากเว็บภายนอกเร็วขึ้น โดยการใส่โดเมนแบบไม่ต้องมี http ของไฟล์ที่ต้องการโหลดเข้าไป

Advanced Rules

การตั้งค่าเกี่ยวกับหน้าที่ต้องการแคชไม่ต้องการให้แคชเป็นกรณีพิเศษ

Never Cache URL(s)

ไม่ต้องแคชหน้าต่อไปนี้ สามารถใส่เป็น URL แบบเต็มๆ หรือ /contact/ แบบนี้ก็ได้ โดยใส่หน้า 1 บรรทัดต่อ 1 URL สามารถใช้ * ได้

Never Cache Cookies

ไม่แคชคุกกี้ต่อไปนี้ 1 บรรทัดต่อ 1 คุกกี้

Never Cache User Agent(s)

ไม่แคช User Agent Browsers

Always Purge URL(s)

ล้างแคชเหล่านี้เสมอเมื่อมีการอัพเดต Post หรือ Page ใดๆ ก็ตาม ใส่ URL ละบรรทัด

Cache Query String(s)

แคช Query String

Database

บีบอัดและทำความสะอาดฐานข้อมูล

เราสามารถที่จะติ๊กเพื่อทำความสะอาดฐานข้อมูลได้ และสามารถตั้งให้ทำงานอัตโนมัติได้ใน Automatic Cleanup ซึ่งควรมีปลั๊กอินสำรองฐายข้อมูลไว้อัตโนมัติด้วยนะคะ กันพลาด แนะนำ UpdraftPlus ค่ะ

CDN

การตั้งค่าเกี่ยวกับการใช้งานร่วมกับ CDN หากเรามีการใช้งานร่วมกับ CDN เช่น KeyCDN, MaxCDN ซึ่งจะสามารถเสริฟไฟล์ CSS, JS, Images ต่างๆ ผ่านทาง CDN ได้ด้วยการตั้งค่า CNAME ก็ให้เรามาตั้งค่า CNAME ที่ตรงนี้ค่ะ

Addon

ตั้งค่าเกี่ยวกับการแคชเสริมอื่นภายนอก WordPress

Vanish

เปิดการใช้งาน ​Vanish สำหรับโฮ้สต์ที่ติดตั้ง Vanish Cache เช่น CloudWays ถ้า WP Rocket ล้างแคช ระบบก็จะสั่งให้ล้างแคชของ Vanish ด้วย

Cloudflare

เปิดการเชื่อมต่อกับ CloudFlare โดยต้องคลิก MODIFY OPTIONS เพื่อทำการตั้งค่าเพิ่มเติม

Cloudflare Credentials

ใส่ CloudFlare Global API Key, Account Email และ Domain

วิธีการดู API key ให้ล็อกอินเข้า CloudFlare แล้วไปที่หน้า Overview จากนั้นไปที่ Get your API key

จากนั้นคลิก View API key ที่ Global API Key

ใส่รหัสผ่านและติ๊ก I’m not a robot แล้วคลิกปุ่ม View API Key

นำ API Key ที่ได้มากรอกใน WP Rocket

หากระบบแจ้ง error ว่า No Zone ID set in the WP Rocket settings ให้ทำการลบโดเมนออก แล้วกด Save แล้วใส่โดเมนใหม่อีกครั้ง แล้วกด Save อีกรอบ

Cloudflare settings

ให้สำหรับการตั้งค่า Cloudflare เช่น

Development Mode เปิดเพื่อปิดแคชของ Cloudflare ชั่วคราวเวลาที่เราต้องการดูผลการแก้ไขเว็บโดยไม่จำเป็นต้องเคลียร์แคชบ่อยๆ

Optimal settings ให้ WP Rocket ตั้งค่าอัตโนมัติให้

Relative protocal ใช้สำหรับการใช้งาน Flexible SSL โดยปลั๊กอินจะเปลี่ยน URL แบบ https://,http:// ให้เหลือเพียง //

Cloudflare Cache

สำหรับล้างแคชของ CloudFlare

Tools

ใช้สำหรับการ Export/Import การตั้งค่าของ WP Rocket เพื่อนำไปใช้กับเว็บอื่น และมี Rollback ที่ให้สามารถย้อนกลับไปใช้เวอร์ชั่นก่อนหน้าได้

การใช้งาน WP Rocket ผ่าน Toolbar

WP Rocket มีเมนูลัดอยู่บน Toolbar ทีเราสามารถใช้งานได้เลยทันทีโดยไม่ต้องคลิกเข้าไปที่หน้าตั้งค่า

ผลการทดสอบ WP Rocket

ผลการทดสอบด้านล่างเป็นการใช้ร่วมกับ CloudFlare เนื่องจากเซิฟเวอร์ที่ใช้ในการทดสอบมักจะอยู่ไกลเกินจริง แต่ถ้าไม่ใช่ CloudFlare มักจะได้คะแนนจาก Pingdom สูง แต่จะวัดความเร็วจริงที่ใกล้กับเซิฟเวอร์ไม่ได้เราจึงเลือกไม่สนใจคะแนนที่เสียไป เอาความเร็วดีกว่า การจะได้คะแนน 100% นั้นสามารถทำได้ แต่เราก็อาจจจะเป็นจะต้องตัดฟังชั่นบางอย่างของเว็บออกไป ซึ่งเราขอไม่สนใจในคะแนนเหล่านั้นและเลือกเอาความเร็วในการใช้งานมากกว่า ซึ่งสำหรับ Google PageSpeed Insight นั้นเตยได้เขียนบทความแยกไว้ต่างหากเรื่อง Google PageSpeed Insight ทำยังไงให้ได้ 100 แล้ว นอกจากนี้การเพิ่ม Lazyload ก็อาจจะทำให้เว็บมี request เพิ่มขึ้นซึ่งอาจจะได้คะแนนลดลง แต่ก็เร็วขึ้น ดังนั้นเราจึงไม่ควรอ้างอิงความเร็วกับคะแนนเพียงอย่างเดียวค่ะ

ผลทดสอบ Pindom, Gtmetrix, Google

สรุป

WP Rocket ยังเป็นปลั๊กอินแคชพรีเมี่ยมที่น่าสนใจ แต่ก็ไม่ได้หมายความว่าเราจำเป็นจะต้องใช้ปลั๊กอินเสียเงินเสมอไป เพราะยังมีปลั๊กอินหลายตัวที่สามารถใช้งานได้และให้ผลลัพธ์คล้ายๆ กัน ปลั๊กอินนี้ช่วยลดการใช้งานปลั๊กอินที่เราต้องใช้ลงไปหลายตัว เช่น Autoptimize ที่ใช้สำหรับ Minify HMTL, CSS, JS และปลั๊กอินที่ใช้สำหรับทำ CriticalCSS ด้วย และเชื่อมต่อกับ CloudFlare ทำให้เราไม่ต้องลงปลั๊กอินเสริมก็สั่งเคลียร์แคชของ CloudFlare ได้เช่นกัน ปลั๊กอินนี้ไม่ได้ Optimize แบบสุดขีดจนเกินไป ทำให้ไม่ค่อยกระทบกับการแสดงผลของเว็บและก็ยังให้ผลลัพธ์ที่ดีขึ้นได้ เป็นปลั๊กอินที่มีระบบช่วยเหลือดี เหมาะสำหรับคนทั่วไปที่ไม่จำเป็นต้องรู้เรื่องเทคนิคมาก เพราะสามารถอ่านคำแนะนำและมี Support อยู่ทุกจุดให้เราศึกษา นับว่าเป็นดีไซน์ที่ดีมากเลยทีเดียวสำหรับการรวมเอาคู่มือการใช้งานมาไว้ในปลั๊กอินเลย

WP Rocket
บทสรุป
เวอร์ชั่น 3.0 มีการปรับเปลี่ยนครั้งใหญ่ทั้งหน้าตาและฟังชั่นการใช้งานต่างๆ ที่ง่ายและน่าใช้กว่าเดิมมาก ยังคงเป็นปลั๊กอินแคชพรีเมี่ยมที่น่าใช้งานอีกตัว โดยที่ไม่เน้นการ optimize มากเสียจนทำให้เว็บพัง การตั้งค่าต่างๆ ง่ายกว่าเวอร์ชั่นก่อน
Design Quality90
Feature Availability90
Easy to use100
ข้อดี
ใช้งานง่าย
User Interface สวยงาม
ซัพพรอต CloudFlare ในตัว
มีปุ่มลัดบน Toolbar ที่ใช้งานได้สะดวก
สามารถสร้าง CriticalCSS ได้
ข้อเสีย
ไม่มีเวอร์ชั่นฟรีหรือทดลองใช้
93
คะแนน
บทความชุด : WordPress Cache Plugins