Web
WordPress ช้าแก้ยังไง
WordPress ช้าแก้ยังไง? (ฉบับ อ.บอม)
เฮ้ย! WordPress ช้าเนี่ย ปัญหาโลกแตกของคนทำเว็บเลยนะ สมัยผมทำร้านเน็ต SiamCafe นี่ ลูกค้าบ่นเรื่องเว็บโหลดช้าประจำ ยิ่งสมัยก่อนเน็ตมันไม่ได้แรงแบบนี้ด้วยแล้ว ยิ่งต้องจูนกันสุดชีวิต
ทำไมเว็บช้าถึงสำคัญ? ก็เพราะคนมันใจร้อนไง! ถ้าเว็บโหลดนานเกิน 3 วิ คนก็ปิดหนีไปแล้ว เสียลูกค้า เสียโอกาสทางธุรกิจหมด ยิ่ง Google เค้าให้ความสำคัญกับ Page Speed ด้วยนะ เว็บช้าอันดับก็ตกตามไปด้วย
ทำความเข้าใจสาเหตุหลักๆ ที่ทำให้ WordPress ช้า
ก่อนจะแก้ เราต้องรู้ก่อนว่าอะไรมันฉุดรั้งเว็บเราอยู่ หลักๆ เลยมี 4 เรื่อง:
- Hosting: เหมือนบ้านที่เราอยู่ ถ้าบ้านไม่ดี เว็บก็อืด
- Theme: บาง Theme โค้ดเยอะแยะรกไปหมด
- Plugin: ติดตั้งเยอะเกินไป ก็เหมือนมีปลิงเกาะกินพลัง
- Media: รูปภาพ วิดีโอ ขนาดใหญ่เกินไป ทำให้โหลดนาน
เช็ค Hosting ก่อนเพื่อนเลย
Hosting คือหัวใจหลักของเว็บเราเลยนะ ถ้า Hosting ไม่ดี ต่อให้ทำอะไรอย่างอื่นก็แทบไม่มีประโยชน์ สมัยก่อนผมเคยเจอ Hosting ที่ Shared Resources กันแบบสุดๆ คือเว็บอื่นโหลดอะไรเยอะแยะ เว็บเราก็พลอยช้าไปด้วย
เลือก Hosting ให้เหมาะกับเว็บ
Hosting มีหลายแบบ หลักๆ ก็มี Shared Hosting, VPS, Dedicated Server, และ Cloud Hosting แต่ละแบบก็มีข้อดีข้อเสียต่างกัน
Shared Hosting: ถูกสุด แต่ก็แชร์ Resources กับคนอื่น เหมาะกับเว็บเล็กๆ ที่คนเข้าไม่เยอะ
VPS (Virtual Private Server): เหมือนเช่าห้องในคอนโด ได้ Resources เป็นสัดส่วนมากขึ้น แรงกว่า Shared Hosting
Dedicated Server: เช่า Server ทั้งเครื่อง แรงสุด แต่ก็แพงสุด เหมาะกับเว็บใหญ่ๆ ที่ต้องการ Performance สูง
Cloud Hosting: ยืดหยุ่น ปรับ Scale ได้ตามต้องการ จ่ายเท่าที่ใช้
ผมแนะนำว่าถ้าเว็บเริ่มโตแล้ว ให้ขยับไป VPS หรือ Cloud Hosting ดีกว่า รับรองเห็นผลชัดเจน
วิธีเช็ค Performance ของ Hosting
ลองใช้ Tools พวก GTmetrix หรือ Pingdom Website Speed Test ดู จะได้รู้ว่า Hosting เรามันตอบสนองช้าแค่ไหน
อีกวิธีคือลองเปิดเว็บตัวเองดู ถ้ามันอืดๆ หน่วงๆ ก็สันนิษฐานได้เลยว่า Hosting มีปัญหา
Theme: เลือกดีมีชัยไปกว่าครึ่ง
Theme เนี่ยสำคัญไม่แพ้ Hosting เลยนะ บาง Theme สวยก็จริง แต่โค้ดรกมาก โหลด Script มาเยอะแยะเต็มไปหมด ทำให้เว็บอืด
เลือก Theme ที่ Lightweight และ Optimized
มองหา Theme ที่เน้นความเร็วเป็นหลัก พวก Theme ที่มี Page Builder เยอะๆ อาจจะไม่ใช่ตัวเลือกที่ดี เพราะมันจะสร้างโค้ดเยอะแยะเกินความจำเป็น
ลองดู Theme ฟรีจาก WordPress Repository ก็ได้ หลายๆ Theme เค้า Optimized มาดีมาก หรือถ้าจะใช้ Theme Premium ก็เลือกจากผู้พัฒนาที่น่าเชื่อถือ
วิธีเช็ค Theme ว่าหนักแค่ไหน
ใช้ Tools พวก GTmetrix หรือ Pingdom Website Speed Test เหมือนเดิม แล้วดูตรง Waterfall Chart จะเห็นว่าไฟล์ไหนโหลดนานที่สุด ถ้าไฟล์ของ Theme เยอะเกินไป ก็แสดงว่า Theme นั้นอาจจะไม่ค่อยดี
หรืออีกวิธีคือลองเปลี่ยนไปใช้ Theme Default ของ WordPress แล้วดูว่าเว็บเร็วขึ้นไหม ถ้าเร็วขึ้นเยอะ ก็แปลว่า Theme เก่าเป็นตัวปัญหา
Plugin: น้อยแต่มาก ดีกว่ามากแต่รก
Plugin เนี่ยเป็นดาบสองคม ติดตั้งเยอะก็สะดวกสบาย แต่ก็ทำให้เว็บช้าได้เหมือนกัน
ลบ Plugin ที่ไม่ได้ใช้
อันนี้สำคัญมาก Plugin ไหนไม่ได้ใช้แล้วก็ลบทิ้งไปเลย อย่าเสียดาย เพราะมันเปลือง Resources โดยใช่เหตุ
เลือก Plugin ที่ Lightweight และ Optimized
ก่อนติดตั้ง Plugin อะไรก็ตาม ลองอ่าน Review ดูก่อนว่าเค้าว่ายังไง Plugin ไหนคนบ่นว่าหนัก ก็อย่าไปใช้
ถ้า Plugin ที่จำเป็นต้องใช้มีหลายตัว ลองมองหา Plugin ที่ทำหน้าที่เดียวกันแต่ Lightweight กว่า
ผมเคยเจอเคสที่ลูกค้าติดตั้ง Plugin Social Media Sharing ไว้ 5-6 ตัว สุดท้ายก็ใช้แค่ตัวเดียว ที่เหลือก็กิน Resources ฟรีๆ
Plugin ที่แนะนำให้ใช้
มี Plugin บางตัวที่ช่วยให้ WordPress เร็วขึ้นได้จริง:
- Cache Plugin: เช่น WP Rocket, LiteSpeed Cache, W3 Total Cache พวกนี้จะช่วยสร้าง Cache ของหน้าเว็บ ทำให้โหลดเร็วขึ้น
- Image Optimization Plugin: เช่น Smush, Imagify พวกนี้จะช่วยบีบอัดรูปภาพให้มีขนาดเล็กลง โดยที่คุณภาพยังดีอยู่
- Database Optimization Plugin: เช่น WP-Optimize พวกนี้จะช่วย Clean Database ลบข้อมูลที่ไม่จำเป็นออกไป
Media: บีบอัด ลดขนาด ก่อนอัพโหลด
รูปภาพ วิดีโอ เป็นตัวการสำคัญที่ทำให้เว็บโหลดช้า เพราะไฟล์มันใหญ่มาก ก่อนอัพโหลดขึ้นเว็บ ต้องบีบอัด ลดขนาดก่อนเสมอ
บีบอัดรูปภาพให้มีขนาดเล็กลง
ใช้ Tools พวก TinyPNG หรือ ImageOptim ในการบีบอัดรูปภาพ พวกนี้จะบีบอัดรูปภาพให้มีขนาดเล็กลง โดยที่คุณภาพยังดีอยู่ หรือจะใช้ Plugin Image Optimization ที่บอกไปข้างบนก็ได้
ปรับขนาดรูปภาพให้เหมาะสม
ก่อนอัพโหลดรูปภาพขึ้นเว็บ ลองเช็คดูก่อนว่าขนาดมันใหญ่เกินความจำเป็นไหม ถ้ามันใหญ่เกินไป ก็ปรับขนาดให้เล็กลงก่อน
สมมติว่าเราจะใช้รูปภาพในขนาด 500x500 Pixel ก็ไม่จำเป็นต้องอัพโหลดรูปภาพขนาด 2000x2000 Pixel ขึ้นไป
ใช้ CDN (Content Delivery Network)
CDN คือเครือข่าย Server ที่กระจายอยู่ทั่วโลก CDN จะช่วยให้เว็บโหลดเร็วขึ้น เพราะมันจะส่งไฟล์ Media จาก Server ที่อยู่ใกล้กับผู้ใช้มากที่สุด
มี CDN หลายเจ้าให้เลือกใช้ เช่น Cloudflare, MaxCDN, KeyCDN
ตารางเปรียบเทียบ Hosting แต่ละประเภท
| ประเภท Hosting | ราคา | ประสิทธิภาพ | เหมาะสำหรับ |
|---|---|---|---|
| Shared Hosting | ถูก | ต่ำ | เว็บเล็กๆ, คนเข้าไม่เยอะ |
| VPS | ปานกลาง | ปานกลาง | เว็บขนาดกลาง, ต้องการ Performance มากกว่า Shared Hosting |
| Dedicated Server | แพง | สูง | เว็บขนาดใหญ่, ต้องการ Performance สูงสุด |
| Cloud Hosting | ตามการใช้งาน | ยืดหยุ่น | เว็บที่ต้องการปรับ Scale ได้ตามต้องการ |
Code Snippet: Lazy Load Image (สำหรับคนชอบลุย Code)
Lazy Load คือการโหลดรูปภาพเฉพาะตอนที่ผู้ใช้เลื่อนหน้าจอลงมาถึงรูปภาพนั้นๆ วิธีนี้จะช่วยให้หน้าเว็บโหลดเร็วขึ้นมาก
<img src="placeholder.jpg" data-src="real-image.jpg" alt="Image" >
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages = document.querySelectorAll("img.lazy");
var lazyloadThrottleTimeout;
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
});
</script>
Code นี้เป็นแค่ตัวอย่างนะ จะเอาไปใช้จริงก็ต้องปรับแต่งให้เข้ากับ Theme ของตัวเองด้วย
หวังว่าบทความนี้จะเป็นประโยชน์กับทุกคนนะครับ ถ้ามีคำถามอะไรก็ถามมาได้เลย ผมยินดีตอบ
อย่าลืมแวะไปอ่านบทความอื่นๆ ใน SiamCafe Blog ด้วยนะ มีเรื่อง IT สนุกๆ อีกเยอะเลย
สรุป
WordPress ช้าเนี่ยแก้ได้แน่นอน ขอแค่เราเข้าใจสาเหตุและลงมือทำอย่างถูกวิธี เริ่มจาก Hosting, Theme, Plugin, Media และอย่าลืม Optimize Database ด้วย
ถ้าทำตามที่ผมบอกแล้วยังไม่ดีขึ้น ลองปรึกษาผู้เชี่ยวชาญดูครับ เค้าอาจจะช่วยหาสาเหตุที่ซับซ้อนกว่านั้นได้
สุดท้ายนี้ ขอให้ทุกคนทำเว็บ WordPress ได้เร็ว แรง ทะลุนรกนะครับ! แล้วเจอกันใหม่ในบทความหน้า ที่ SiamCafe Blog
Best Practices / เคล็ดลับจากประสบการณ์
สมัยผมทำร้านเน็ตนี่ เรื่องความเร็วเว็บสำคัญมาก ลูกค้าหัวร้อนง่าย WordPress ช้าคือหายนะ ผมเลยมีเคล็ดลับที่ใช้มาตั้งแต่ยุคนั้นจนถึงทุกวันนี้เลือก Hosting ให้เหมาะสม
อย่าเห็นแก่ของถูก! Hosting ที่ถูกอาจจะแชร์ resource กับคนอื่นเยอะ ทำให้เว็บช้า เลือก Hosting ที่มี Server อยู่ใกล้กลุ่มเป้าหมายของเราด้วยนะ ถ้าลูกค้าเราคนไทย ก็เลือก Server ในไทยนี่แหละใช้ CDN (Content Delivery Network)
CDN จะช่วยเก็บ cache ไฟล์ต่างๆ ของเว็บเราไว้ใน Server ทั่วโลก เวลาคนเข้าเว็บจากที่ไหน CDN ก็จะส่งไฟล์จาก Server ที่ใกล้ที่สุดให้ ทำให้เว็บโหลดเร็วขึ้นเยอะOptimize รูปภาพ
รูปภาพขนาดใหญ่คือตัวการทำให้เว็บช้า บีบอัดรูปภาพให้เล็กลงโดยที่ยังคงคุณภาพไว้ ผมแนะนำให้ใช้ plugin ช่วย optimize รูปภาพ หรือจะใช้ online tool ก็ได้<img src="my-huge-image.jpg" alt="My Image" width="600" height="400" loading="lazy">
Minify CSS และ JavaScript
ไฟล์ CSS และ JavaScript ที่มีช่องว่างหรือ comment เยอะๆ จะทำให้เว็บโหลดช้า Minify ไฟล์เหล่านี้เพื่อลดขนาดไฟล์ลง ผมใช้ plugin ช่วย minify เอา สะดวกดี<link rel="stylesheet" href="style.min.css">
<script src="script.min.js"></script>
