สอนตั้งค่า WP-Rocket ให้เว็บโหลดเร็วง่ายๆ ได้ไม่เกิน 5 นาที

เบื่อไหมกับเว็บไซต์ที่โหลดช้าเหมือนเต่าคลาน? รู้หรือไม่ว่าความเร็วในการโหลดเว็บไซต์นั้นส่งผลอย่างมากต่อประสบการณ์ของผู้เข้าชม และยังมีผลต่ออันดับ SEO ของคุณใน Google อีกด้วย! หากคุณกำลังมองหาวิธีเร่งความเร็วเว็บ WordPress ของคุณให้พุ่งทะยานเหมือนติดจรวด WP-Rocket คือปลั๊กอินที่คุณไม่ควรพลาด

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

WP-Rocket คืออะไร?

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

ข้อดีของ WP Rocket

• ติดตั้งได้ง่ายภายใน 3 นาที โดยไม่จำเป็นต้องเขียนโค้ด
• การลดขนาดไฟล์ CSS และ JavaScript
• การลบไฟล์ที่ไม่จำเป็น
• รองรับภาษาไทย
• Support ดีมาก ตอบไว
• ปลั๊กอินอัปเดตเวอร์ชั่นใหม่ตลอด

ข้อเสีย WP Rocket

• เป็นปลั๊กอินเสียเงิน ไม่มีเวอร์ชั่นฟรี
• อาจส่งผลต่อการทำงานของปลั๊กอินหรือฟีเจอร์ของธีมบางอย่างบนเว็บไซต์ได้

WP-Rocket ราคาเท่าไหร่

• Single : ราคา 59 ดอลลาร์สหรัฐต่อปี สำหรับเว็บไซต์เดียว
• Plus : ราคา 119 ดอลลาร์สหรัฐต่อปี สำหรับเว็บไซต์ 3 เว็บไซต์
• Infinite : ราคา 299 ดอลลาร์สหรัฐต่อปี สำหรับเว็บไซต์ไม่จำกัดจำนวน

วิธีตั้งค่า WP-Rocket

ก่อนการเริ่มต้น อย่าลืมอ่าน Docs ของ WP-Rocket ได้จากที่นี่

สำหรับใครที่ใช้ Plugin หลายตัว ลองมาดูก่อนว่าปลั๊กอินเราจะใช้งานได้มั้ยกับ WP-Rocket Plugins

แนะนำว่าค่อยๆ ตั้งค่าไปทีละหัวข้อ หลังจากเปิดติ๊กใช้งานแล้วให้ Save แล้วกลับไปเช็คหน้าเว็บของเราใน Incognito mode บน browser ทุกครั้ง

หลังจากที่เราตั้งค่าเสร็จแล้ว เราไม่ต้อง clear cache แต่อย่างใด ทางปลั๊กอินจะเคลียร์แคชให้อัตโนมัติหลังจากเราตั้งค่าเสร็จ

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

1. ตั้งค่า Cache

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

Mobile Cache

• ติ๊กเปิดใช้งาน Enable caching for mobile devices
• ติ๊กเปิดใช้งาน Separate cache files for mobile devices

User Cache

• ติ๊กเปิดใช้งาน Enable caching for logged-in WordPress users

2. ตั้งค่า File Optimization

File Optimization ช่วยให้คุณสามารถลดขนาดไฟล์แบบ static เช่น JavaScript และ CSS stylesheets โดยการรวมไฟล์เหล่านี้เข้าด้วยกันและบีบอัดไฟล์เหล่านั้น

CSS Files

• เปิดใช้งาน Minify CSS files
• เปิดใช้งาน Combine CSS files (Enable Minify CSS files to select)
• เปิดใช้งาน Optimize CSS delivery
• กดเลือกปุ่ม Remove unused CSS
• เลื่อนลงมาด้านล่างอีกนิดนึง จะเจอหัวข้อการตั้งค่า JavaSript

Javascript Files

• เปิดใช้งาน Minify JavaScript files
• เปิดใช้งาน Load JavaScript deferred
• เปิดใช้งาน Delay JavaScript execution
• มาอ่านคำอธิบายว่าทำไมเว็บไซต์ของ Designil ถึงตั้งค่าแบบนี้กัน

คำอธิบายการตั้งค่าของ File optimization

การตั้งค่า Minify CSS และ JavaScript ตัว Plugin จะไปช่วยลบช่องว่างในโค้ด และในส่วนของคอมเม้นต่าง ๆ ทำให้ไฟล์ของเรามีขนาดเล็กลงและหน้าเว็บโหลดเร็วขึ้นนั้นเอง

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

การตั้งค่า Optimize CSS Delivery

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

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

ข้อควรระวัง : ฟังก์ชั่น Remove unused CSS (ปุ่มม่วง ๆ) อาจทำให้บางธีมหรือบางปลั๊กอินมีปัญหาได้ ผมเคยเจอเมื่อเปิดการตั้งค่านี้ หน้าเว็บเกิดปัญหา เข้าสู่ Skip to content ทุกหน้าเลย

การตั้งค่า Load JavaScript deferred

การตั้งค่าอันนี้อาจจะส่งผลกระทบต่อพวก JavaScript ที่ใช้บนพวกสไลเดอร์ อะไรที่วืบวาบหน้าเว็บไซต์ ดังนั้นถ้าเปิดใช้งานแล้ว เราอาจจะต้องไปเช็คหน้าเว็บไซต์ของเราใน Incognito mode อีกที เพื่อดูว่ามีลูกเล่นอะไรของเราพังหรือไม่

การตั้งค่า Delay JavaScript execution

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

ถ้าเกิดตั้งค่าใช้งานแล้วเว็บเรามีปัญหา เราสามารถ exclude ตัวไฟล์ JS เฉพาะบางตัวที่มีปัญหาได้ เพียงแค่ใส่ URL ลงไป

3. ตั้งค่า Media

LazyLoad

• เปิดใช้งาน Enable for images
• เปิดใช้งาน Enable for CSS backgroud images
• เปิดใช้งาน Enable for iframes and videos
• เปิดใช้งาน Replace YouTube iframe with preview image

Image Dimensions

• เปิดใช้งาน Add missing image dimensions

4. ตั้งค่า Preload

Preload Cache

• เปิดใช้งาน Activate Preloading

Preload Links

• เปิดใช้งาน Enable link preloading

เท่านี้ก็จะเรียบร้อยสำหรับการตั้งค่า WP-Rocket แล้วครับ เพียงเท่านี้เพื่อน ๆ ก็จะมีเว็บไซต์ที่โหลดเร็วเหมือนกับมือโปรมาปรับแต่งให้เลย

แต่ถ้าใครยังเลือกตัวปลั๊กอินในการทำ cache และจัดการรูปไม่ได้ ก็ลองดูตัวเลือกเสริมของ WP Rocket ได้

• Imagify – ตัวช่วยจัดการรูปภาพให้มีขนาดเล็ก ถ้ารูปภาพเล็กลง เว็บไซต์ก็จะโหลดไวขึ้น

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

สำหรับใครที่หน้าเว็บยังรู้สึกว่าช้าอยู่ แนะนำให้อ่านบทความนี้ดู : Page Speed คืออะไร? วิธีทำให้เว็บไวขึ้นใน 8 ขั้นตอน