ทำไมเว็บไซต์โหลดช้าจึงเสียลูกค้า
เว็บไซต์โหลดช้าส่วนใหญ่เกิดจากสามเรื่อง รูปภาพที่ไฟล์ใหญ่เกินจำเป็น สคริปต์และปลั๊กอินที่โหลดมากเกินไป และโฮสติ้งที่ตอบสนองช้า ข่าวดีคือทั้งสามเรื่องวัดได้ฟรีด้วย Google PageSpeed Insights และหลายข้อแก้ได้โดยไม่ต้องสร้างเว็บใหม่ บทความนี้พาวัดก่อน แล้วค่อยแก้ตามลำดับความยาก
ความเร็วสำคัญเพราะผู้เข้าชมส่วนมากในไทยเปิดเว็บจากมือถือ บางครั้งอยู่บนรถไฟฟ้า บางครั้งใช้สัญญาณ 4G ที่ไม่นิ่ง ถ้าหน้าแรกยังขาวอยู่หลายวินาที คนจำนวนหนึ่งจะกดย้อนกลับไปผลค้นหาและเลือกคู่แข่งแทน โดยที่คุณไม่มีทางรู้ว่าเสียเขาไป Google ก็ใช้ประสบการณ์การใช้งานหน้าเว็บ รวมถึงความเร็ว เป็นหนึ่งในหลายสัญญาณของการจัดอันดับด้วย
ถ้าคุณเพิ่งเริ่มศึกษาว่าเว็บทำงานอย่างไร ตั้งแต่โดเมน โฮสติ้ง ไปจนถึงเบราว์เซอร์ บทความเว็บไซต์คืออะไร มีประโยชน์อย่างไรกับธุรกิจปูพื้นไว้ให้แล้ว
วัดความเร็วด้วย Google PageSpeed Insights
- เปิด pagespeed.web.dev แล้ววาง URL ของหน้าที่ต้องการตรวจ ควรตรวจทั้งหน้าแรก หน้าบริการหลัก และหน้าสินค้า ไม่ใช่แค่หน้าแรก
- กดวิเคราะห์ แล้วเลือกแท็บมือถือก่อน เพราะเป็นอุปกรณ์ที่ลูกค้าส่วนใหญ่ใช้ และมักได้คะแนนต่ำกว่า
- ดูส่วนบนก่อน ถ้ามีข้อมูลจากผู้ใช้จริง ส่วนนี้จะแสดงค่า Core Web Vitals ของผู้เข้าชมในช่วง 28 วันที่ผ่านมา
- เลื่อนลงไปดูคะแนนประสิทธิภาพและรายการคำแนะนำ ซึ่งมาจากการทดสอบจำลอง
ข้อมูลภาคสนามกับข้อมูลจากห้องทดลอง
PageSpeed Insights แสดงข้อมูลสองแบบ ข้อมูลภาคสนามมาจาก Chrome User Experience Report ซึ่งเก็บจากผู้ใช้ Chrome จริง สะท้อนประสบการณ์ของลูกค้าคุณได้ตรงที่สุด แต่เว็บที่มีผู้เข้าชมน้อยอาจไม่มีข้อมูลส่วนนี้ ข้อมูลจากห้องทดลองมาจาก Lighthouse ที่จำลองการโหลดหน้าบนมือถือระดับกลางกับเครือข่ายที่ช้ากว่าปกติ ตัวเลขนี้เปลี่ยนได้เล็กน้อยทุกครั้งที่ทดสอบ จึงเหมาะใช้หาสาเหตุ ไม่ใช่ตัดสินผล
คะแนนเต็ม 100 ไม่ใช่เป้าหมาย สิ่งที่ต้องดูคือค่า Core Web Vitals ผ่านเกณฑ์หรือไม่ และคำแนะนำข้อไหนประหยัดเวลาได้มากที่สุด
อ่านค่า Core Web Vitals: LCP INP และ CLS
Core Web Vitals คือค่าสามตัวที่ Google ใช้วัดประสบการณ์การใช้งานหน้าเว็บ เกณฑ์ด้านล่างเป็นเกณฑ์ระดับดีตามที่ web.dev ระบุไว้ ณ เวลาที่เขียน โดยวัดที่เปอร์เซ็นไทล์ที่ 75 ของการเข้าชม แยกมือถือและคอมพิวเตอร์
| ค่า | วัดอะไร | ระดับดี |
|---|---|---|
| LCP (Largest Contentful Paint) | เวลาที่องค์ประกอบใหญ่ที่สุดในหน้าจอแรก เช่น รูปหลักหรือหัวข้อ แสดงเสร็จ | ไม่เกิน 2.5 วินาที |
| INP (Interaction to Next Paint) | ความเร็วที่หน้าเว็บตอบสนองหลังผู้ใช้กด แตะ หรือพิมพ์ | ไม่เกิน 200 มิลลิวินาที |
| CLS (Cumulative Layout Shift) | หน้าเว็บขยับเองระหว่างโหลดมากแค่ไหน | ไม่เกิน 0.1 |
แต่ละค่าชี้ไปที่สาเหตุต่างกัน LCP สูงมักมาจากรูปหลักใหญ่หรือเซิร์ฟเวอร์ตอบช้า INP สูงมักมาจาก JavaScript ที่หนัก เช่น สคริปต์แชตหรือตัวติดตามหลายตัว ส่วน CLS สูงมักมาจากรูปที่ไม่ได้กำหนดขนาด แบนเนอร์ที่แทรกเข้ามาทีหลัง หรือฟอนต์ที่สลับตอนโหลดเสร็จ
สาเหตุที่ทำให้เว็บโหลดช้าบ่อยที่สุด
- รูปภาพไฟล์ใหญ่ รูปจากกล้องหรือมือถือที่อัปโหลดตรง ๆ อาจใหญ่หลายเมกะไบต์ ทั้งที่แสดงบนจอเพียงไม่กี่ร้อยพิกเซล ปัญหานี้พบบ่อยบนเว็บร้านอาหาร เว็บไซต์โรงแรม และร้านค้าที่มีรูปเยอะ
- ปลั๊กอินลากวาง (page builder) สะดวกตอนสร้าง แต่มักโหลด CSS และ JavaScript จำนวนมากในทุกหน้า แม้หน้านั้นจะไม่ได้ใช้
- ปลั๊กอินเยอะเกินจำเป็น ปัญหาไม่ใช่จำนวนอย่างเดียว ปลั๊กอินบางตัวหนักกว่าสิบตัวรวมกัน
- ไม่มีแคช เซิร์ฟเวอร์ต้องสร้างหน้าใหม่ทุกครั้งที่มีคนเปิด
- โฮสติ้งราคาถูกที่ใช้ร่วมกันแน่นเกินไป หรือเซิร์ฟเวอร์อยู่ไกลจากผู้ใช้ในไทย วิธีเลือกให้เหมาะอธิบายไว้ในบทความWeb Hosting คืออะไร และเลือกอย่างไรให้เหมาะกับธุรกิจ
- สคริปต์ภายนอก กล่องแชต ปุ่มโซเชียล ตัวติดตามโฆษณา และวิดีโอฝัง แต่ละตัวดึงไฟล์จากเซิร์ฟเวอร์อื่นเพิ่ม
- ฟอนต์เว็บ ฟอนต์ไทยหลายน้ำหนักรวมกันอาจหนักพอสมควร และทำให้ตัวอักษรกระพริบตอนโหลด
- ไม่ใช้ CDN สำหรับเว็บที่มีผู้เข้าชมจากหลายประเทศ ไฟล์ต้องเดินทางไกลกว่าที่ควร
วิธีแก้เว็บโหลดช้าเรียงตามความยาก
ทำเองได้ภายในวันเดียว
- ย่อขนาดและบีบอัดรูป ปรับความกว้างให้พอดีกับที่แสดงจริง แปลงเป็น WebP และบีบอัดก่อนอัปโหลด
- ลบปลั๊กอินที่ไม่ใช้ ปิดแล้วลบทิ้ง ไม่ใช่แค่ปิดไว้
- ทบทวนสคริปต์ภายนอก ถ้ามีกล่องแชตสองตัว ตัวติดตามที่ไม่มีใครดูรายงาน หรือวิดีโอฝังที่หน้าแรก ให้เลือกเก็บเฉพาะที่จำเป็น ปุ่ม LINE หรือ WhatsApp แบบลิงก์ธรรมดาเบากว่ากล่องแชตมาก
ต้องใช้ความรู้เทคนิคปานกลาง
- เปิดแคชหน้าเว็บ และตั้งให้เบราว์เซอร์เก็บไฟล์ที่ไม่เปลี่ยนบ่อยไว้
- โหลดรูปแบบ lazy loading ให้รูปที่อยู่ด้านล่างโหลดเมื่อเลื่อนมาถึง แต่ไม่ใช้กับรูปหลักด้านบน เพราะจะทำให้ LCP แย่ลง
- ลดฟอนต์ ใช้น้ำหนักเท่าที่จำเป็น และตัดชุดตัวอักษรที่ไม่ได้ใช้ออก
- เปิด HTTPS ให้ถูกต้อง เบราว์เซอร์รองรับ HTTP/2 ผ่านการเชื่อมต่อที่เข้ารหัสเท่านั้น ถ้ายังไม่ได้ทำ ดูวิธีเปิด HTTPS ให้เว็บไซต์
งานใหญ่
ย้ายไปโฮสติ้งที่ดีกว่า ใช้ CDN หรือเปลี่ยนจากปลั๊กอินลากวางมาใช้ธีมที่เขียนเอง งานเหล่านี้ได้ผลมากแต่ต้องวางแผนและทดสอบ ความเร็วเป็นเพียงส่วนหนึ่งของงานค้นหา ภาพรวมที่เหลืออยู่ในบทความการทำ SEO สำหรับเจ้าของธุรกิจ
WordPress ช้า ต้องเช็กอะไรเพิ่ม
- เวอร์ชัน PHP ดูในหน้าควบคุมโฮสติ้งว่าใช้เวอร์ชันที่ยังได้รับการสนับสนุน เวอร์ชันเก่ามักช้ากว่าและไม่ปลอดภัย
- ธีม ธีมอเนกประสงค์ที่มีตัวเลือกหลายร้อยแบบมักโหลดไฟล์ที่ไม่ได้ใช้ ลองเปิดหน้าทดสอบด้วยธีมพื้นฐานเพื่อเปรียบเทียบ
- ฐานข้อมูล ฉบับร่างเก่า ความคิดเห็นสแปม และข้อมูลชั่วคราวที่สะสมหลายปีทำให้ฐานข้อมูลบวม
- WP-Cron งานตั้งเวลาที่รันตอนมีคนเข้าเว็บอาจทำให้บางหน้าช้าเป็นช่วง ๆ
- WooCommerce ร้านที่มีสินค้าหลายพันรายการควรตรวจการค้นหา ตัวกรอง และการคำนวณค่าส่ง ซึ่งมักเป็นจุดที่ช้าที่สุด
ก่อนแก้อะไรบนเว็บจริง ให้สำรองไฟล์และฐานข้อมูลเสมอ และถ้าทำได้ ให้ทดลองบนสำเนาของเว็บก่อน
เมื่อไรควรให้ผู้เชี่ยวชาญช่วย
ถ้าแก้ขั้นพื้นฐานแล้วค่า LCP หรือ INP ยังไม่ผ่าน ถ้าเว็บพังหลังอัปเดตปลั๊กอิน หรือถ้าไม่มีใครในทีมกล้าแตะหลังบ้าน ถึงเวลาให้คนที่ทำเป็นประจำช่วยดู บริการรับแก้เว็บไซต์และดูแลหลังเปิดใช้งานของเราประเมินราคาตามสภาพของแต่ละเว็บ ส่งลิงก์เว็บและผล PageSpeed Insights มาทางหน้าขอใบเสนอราคา แล้วเราจะบอกว่าควรเริ่มแก้จากตรงไหน
บทความเรื่องประสิทธิภาพเว็บไซต์
ความเร็วเกี่ยวข้องกับโฮสติ้ง ความปลอดภัย และการค้นหา อ่านต่อได้จากบทความเกี่ยวกับการทำเว็บไซต์ทั้งหมดของเรา
แหล่งอ้างอิง
- Google PageSpeed Insights
- Google for Developers: เกี่ยวกับ PageSpeed Insights (ข้อมูลภาคสนามและข้อมูลห้องทดลอง)
- web.dev: Web Vitals
- Chrome for Developers: วิธีคิดคะแนนประสิทธิภาพของ Lighthouse
สร้างเว็บไซต์และดูแลอันดับการค้นหา รวมถึงวางระบบเบื้องหลังเว็บไซต์ลูกค้า 17 แห่งที่เราเผยแพร่ตัวเลขจาก Search Console เกี่ยวกับเรา (หน้าภาษาอังกฤษ)