การทำเว็บไซต์ WordPress ให้โหลดเร็วระดับ “เต็มร้อย” บน Google PageSpeed Insights ไม่ใช่แค่การกด Optimize ครั้งเดียวจบ แต่เป็นกระบวนการที่ต้องวิเคราะห์และแก้ไขอย่างเป็นระบบ จากประสบการณ์ตรงที่ผมทำมา หากทำครบทุกขั้นตอนด้านล่าง มีโอกาสที่ทำการทดสอบความเร็วแล้วผลที่ได้จะแตะ 90–100 คะแนนได้จริง
1. วิเคราะห์ความเร็วเว็บไซต์ด้วย Google PageSpeed Insights
ก่อนเริ่มปรับแต่งเว็บไซต์ เราต้องรู้ก่อนว่าเว็บของเรามีปัญหาตรงไหน โดยให้เราเข้าไปทดสอบที่ Google PageSpeed Insights ทำการพิมพ์เว็บไซต์ของเราแล้วทำการตรวจสอบความเร็วของเว็บ เว็บจะแสดงค่าความเร็วของเรามี 2 แท็บ ได้แก่ ความเร็วของเว็บผ่านมือถือ และความเร็วของเว็บผ่านคอมพิวเตอร์ และทั้ง 2 แท็บจะมีการแสดงผลการประเมินจากการใช้งานจริงจากผู้ใช้งาน (Discover what your real users are experiencing) และการวินิจฉัยปัญหาด้านประสิทธิภาพโดย Google เอง (Diagnose performance issues) โดยแสดงผลรวมและค่าดัชนี Core Web Vitals ให้เราทราบ (อ่านต่อ เรื่อง Core Web Vitals) ดัชนีที่สำคัญได้แก่:
- TTFB (Time to First Byte) คือ เวลาที่ใช้ตั้งแต่ผู้ใช้ request เว็บจนกระทั่งเซิฟเวอร์เริ่มตอบกลับข้อมูล
- LCP (Largest Contentful Paint) คือ ระยะเวลาที่เนื้อหาหลักของหน้าเว็บโหลดเสร็จและแสดงผลบนหน้าจอ เช่น รูปแบนเนอร์ขนาดใหญ่
- CLS (Cumulative Layout Shift) คือ หน้าเว็บขยับหรือเด้งระหว่างโหลดมากแค่ไหน
ถ้าเราได้ผลรวมประสิทธิภาพมากกว่า 90% แสดงว่าเว็บเรามีความเร็วสูงและดี แต่หากเว็บของเราต่ำกว่า 50%แสดงว่าประสิทธิภาพของเราต่ำ ให้เราทำการแก้ไขปรับปรุงเว็บไซต์ของเราตามคำแนะนำที่ได้แสดงอยู่ด้านล่างการตรวจวัดความเร็วเว็บนี้จำเป็นที่จะต้องทำการตรวจวัดอย่างสม่ำเสมอขณะที่เราทำการปรับปรุงแก้ไขความเร็วเว็บไซต์เพื่อให้เราทำงานได้ถูกทาง
เคล็ดลับ:
หากค่า TTFB สูง แสดงว่าปัญหาอยู่ที่ Server
หาก LCP หรือ CLS สูง มักเป็นปัญหาฝั่ง Frontend
2. เปลี่ยน Hosting เป็น LiteSpeed Server
จากประสบการณ์ของผม การเปลี่ยน Hosting เป็น LiteSpeed Server เป็นจุดที่ช่วยเพิ่มความเร็วได้มากที่สุดอันดับต้นๆ ดังนั้นหากเว็บของใครยังใช้ Apache หรือ NginX ผมขอแนะนำให้เปลี่ยนมาเป็น LiteSpeed Server เป็นอันดับแรกครับ (อ่านต่อ ทำความรู้จักกับ LiteSpeed Server)
วิธีการตรวจสอบว่าเว็บเราใช้ Server แบบไหน ให้ไปหน้าเว็บที่เราต้องการตรวจสอบแล้วกด Ctrl + Shift + I ไปที่แท็บ Network แล้วกด Refresh หน้าเว็บของเรา แล้วเลื่อนหาชื่อเว็บไซต์ของเรากดเข้าไปแล้วดูข้อมูลเกี่ยวกับ Headers เราจะพบข้อมูลอยู่ตรง Server หรือ x-turbo-charged-by ดังรูปแสดงว่าใช้ LiteSpeed
ข้อดีของการใช้ LiteSpeed Server คือ จะช่วยลดเวลาโหลดหน้าเว็บ (TTFB) ซึ่งเป็นปัญหาใหญ่ที่ไม่สามารถลดได้ด้วยการใช้โฮสติ้งแบบเก่าซึ่งจะมีผลแตกต่างด้านความเร็วอย่างเห็นได้ชัด หากยังใช้ Apache หรือ Nginx แบบไม่ได้ Optimize แม้จะปรับแต่งค่าอื่น ๆ ดีแค่ไหน ก็ยังเสียเปรียบครับ นอกจากนั้นแล้วการใช้ LiteSpeed Server นั้นจะรองรับการใช้งาน Cache แบบ Server-level Cache ด้วย
หลังจากที่เราเปลี่ยนมาใช้งาน LiteSpeed Server แล้ว ผมแนะนำให้ทำการติดตั้งปลั๊กอิน LiteSpeed Cache เพิ่มเติม (ดูการตั้งค่าในหัวข้อ LiteSpeed Cache ด้านล่าง) แล้วลองทดสอบความเร็วอีกครั้งจะพบว่าเว็บของเราเร็วขึ้นทันที
3. เปลี่ยน Theme ให้เบาและเร็ว
Theme เป็นอีกหนึ่งปัจจัยที่มีผลต่อความเร็วเว็บไซต์โดยตรงครับ ก่อนหน้านี้ผมเคยเขียนธีมเองเพื่อใช้งานแต่ไม่ได้แก้ไขโค้ดให้มันมีความเบาสำหรับการโหลดเว็บ ทำให้เวลาดึงข้อมูลแสดงผลมีการเสียเวลาเยอะในส่วนของไฟล์ต่างๆ เช่น โหลด CSS/JS จำนวนมาก ซึ่งจะทำให้เว็บช้า ผมจึงทำการทดสอบโดยการเปลี่ยนธีมไปเป็นธีมที่เบา ยกตัวอย่างเช่น Hello Elementor, Astra หรือธีมกลุ่ม Twenty เพื่อทดสอบ (ดูเรื่อง ธีม WordPress แนะนำ)
หากทดสอบแล้วพบว่า เว็บเร็วขึ้นหรือทดสอบผ่าน Google Page Speed แล้วมีความเปลี่ยนแปลงอย่างเห็นได้ชัดก็ให้ทำการเปลี่ยนเป็นธีมใหม่จะดีกว่า
ข้อแนะนำ:
หากเปลี่ยนธีมแล้วคะแนนดีขึ้น แสดงว่า Theme เดิมคือสาเหตุหลัก ถ้าความเร็วแตกต่างกันเยอะให้เปลี่ยนธีมจะดีกว่าทำการแก้ไขธีมเก่า แนะนำ Hello Elementor หรือ Astra Theme
4. ลบหรือปิดปลั๊กอินที่ไม่จำเป็น
หลังจากที่เราได้ทำการเปลี่ยนธีมไปแล้ว อีกสาเหตุหนึ่งที่ผมค้นพบก็คือ ปลั๊กอิน การที่เรามีปลั๊กอินจำนวนมากเป็นสาเหตุหนึ่งที่ทำให้เว็บไซต์โหลดช้าจริง ให้เราทำการลดจำนวนปลั๊กอินให้เหลือน้อยที่สุดเท่าที่จะทำได้ ส่วนปลั๊กอินที่เหลืออยู่ให้ทำการทดสอบความเร็วปลั๊กอินทีละตัว หากตัวไหนช้าให้พิจารณาหาปลั๊กอินทดแทนตัวเดิมโดยเฉพาะปลั๊กอินที่เกี่ยวข้องกับ Slider, Page Builder และปลั๊กอินที่โหลดสคริปทุกหน้า เราสามารถใช้ WP Hive ซึ่งเป็น Chrome Extension มาตรวจสอบและเปรียบเทียบว่าปลั๊กอินตัวไหนที่ใช้งานแล้วทำให้ความเร็วเว็บของเราเร็ว
5. ติดตั้งและตั้งค่า LiteSpeed Cache Plugin
ขั้นตอนต่อไปหลังจากที่เราจัดการในส่วนของธีมและปลั๊กอินเรียบร้อยแล้ว คราวนี้เราจะมาตั้งค่าปลั๊กอินที่เราทำการติดตั้งในขั้นตอนที่ 2 ซึ่งก็คือ ปลั๊กอิน LiteSpeed Cache ที่ใช้งานร่วมกันกับ LiteSpeed Server (ในกรณีที่ใช้ NginX หรือ Apache ก็ยังสามารถใช้งานปลั๊กอินนี้ได้เพียงแต่ฟังก์ชั่นบางอย่างจะไม่มี)
วิธีการใช้งานอย่างง่าย ให้เราทำการไปที่เมนู Presets ทำการเลือกการตั้งค่าที่ทางปลั๊กอินกำหนดไว้แล้วมี 5 ตัวเลือก ให้ทำการเลือกตัวเลือก Advance เป็นลำดับแรก แล้วลองเปิดเว็บดูว่า เว็บของเราพังหรือไม่พร้อมกับดูความเร็วว่าเร็วขึ้นไหม หากเว็บของเราพังให้เปลี่ยนตัวเลือกเป็นตัวเลือกทางซ้ายมือ ได้แก่ Basic หรือEssential ตามลำดับ แต่หากเว็บของเรายังไม่พังและความเร็วไม่พอใจ เราสามารถเปลี่ยนตัวเลือกเป็นตัวเลือกทางขวามือ ได้แก่ Agreesive หรือ Extreme ตามลำดับ
ทั้งนี้ที่เคยทดสอบ การตั้งค่าแบบ Advance จะปลอดภัยที่สุด หากเราต้องการตั้งค่าเพิ่มเติมให้เราทำการตั้งค่าเพิ่มเองจะดีกว่า
การตั้งค่าที่สำคัญมีดังนี้
- เปิดใช้งาน Cache เป็นการเพิ่มความเร็วเว็บไซต์ด้วยการเก็บหน้าเว็บของเราไว้ที่ใดที่หนึ่งเพื่อให้สามารถดึงข้อมูลได้เร็วขึ้น เช่น Browser Cache คือการเก็บข้อมูลหน้าเว็บเราไว้ที่เบราเซอร์บนเครื่องของเราทำให้เวลาเปิดหน้าเว็บใช้งานก็สามารถเรียกจากเบราเซอร์ได้ในทันทีแทนที่จะต้องไปดึงข้อมูลจากเซิฟเวอร์
- CSS Minify และ JS Minify เป็นการลดขนาดไฟล์โดยนำพวกช่องว่างเว้นวรรค เว้นบรรทัดออก ทำให้ขนาดไฟล์มีขนาดเล็กลง
- Load CSS Asynchronously เป็นการโหลดใช้งาน CSS ไม่ได้ใช้เวลาเดียวกันกับการโหลดหน้าเว็บ เพื่อให้ข้อมูลเว็บแสดงผลครบถ้วนก่อนแล้วทำการตกแต่งหน้าตาเว็บด้วย CSS จะทำให้เว็บเร็วขึ้น
- Generate Critical CSS เป็นเทคนิคการโหลดไฟล์ CSS เฉพาะในส่วนที่จำเป็นจริงๆ ก่อน การตั้งค่าส่วนนี้มักจะทำให้เว็บของเราพังได้ เมื่อตั้งค่าแล้วต้องตรวจสอบเว็บก่อนทุกครั้งว่าพังหรือไม่
- Lazy Load Images การตั้งค่าให้แสดงรูปที่อยู่นอกหน้าจอแสดงผลเมื่อทำการเลื่อนหน้าเว็บลง ทำให้หน้าเว็บแสดงเฉพาะรูปที่อยู่ภายในหน้าจอก่อน
ผลลัพธ์ที่เกิดจากการใช้งาน LiteSpeed Cache คือ
- สามารถลด Render Blocking หรือการบล็อกการแสดงผลได้
- ปรับปรุง LCP ทำให้ภาพหรือข้อมูลขนาดใหญ่ไม่ขวางการแสดงผล
- โหลดหน้าเว็บเร็วขึ้นอย่างชัดเจน
6. เปิดใช้งาน CDN
ให้เราทำการเปิดใช้งาน CDN โดยให้หาบริษัทที่ดูแลทางด้านนี้ ในที่นี้ผมเลือกใช้บริการของ Cloudflare ครับ เพราะเป็นบริการฟรี ไม่มีค่าใช้จ่าย แต่หากถ้าอยากได้ฟังก์ชั่นใหม่หรือความสามารถที่เหนือกว่าปกติก็เสียเงินค่าบริการรายเดือน
Cloudflare CDN นี้ ทำหน้าที่ในการเก็บข้อมูลไว้บนเครื่องของผู้ให้บริการ CDN และเมื่อมีการเรียกใช้งานจากตำแหน่งใดก็ได้ในโลกนี้ หากมีเครื่องเซิฟเวอร์ของ Cloudflare อยู่ใกล้ การดึงข้อมูลมาแสดงก็จะดึงจากเครื่องที่ใกล้ที่สุด ยกตัวอย่างเช่น ผมอยู่อเมริกาแต่ต้องการดูหน้าเว็บของไทย หากไม่มี CDN ข้อมูลก็ต้องเสียเวลาเดินทางมาจากไทย แต่ถ้ามี CDN ก็จะถูกเก็บข้อมูลไว้ที่ Cloudflare ที่เราให้ฝากไว้ ทำให้เวลาเรียกดูหน้าเว็บก็จะเรียกมาจากเซิฟเวอร์ของ Cloudflare ที่อเมริกาทันที ทำให้ประหยัดเวลาให้การเข้าถึงเว็บได้
อ่านเนื้อหา CDN คืออะไร
7. จัดการเรื่องรูป
รูปเป็นอีกปัญหาหนึ่งที่ทำให้เว็บไซต์ช้า เราสามารถทำการปรับรูปไม่ให้กีดขวางการแสดงผลได้ด้วยวิธีการดังต่อไปนี้
- การทำรูปให้มีขนาดเท่ากับพื้นที่ที่จะแสดงผล เช่น พื้นที่สามารถใส่ได้ขนาด 900×600 px ก็ให้เอารูปภาพขนาดเดียวกันใส่เข้าไปในพื้นที่นั้น หากมีขนาดใหญ่กว่าจะทำให้มีการโหลดรูปขนาดใหญ่และทำให้ช้าได้
- การบีบอัดขนาดไฟล์ให้มีขนาดเล็กลง เพื่อให้สามารถโหลดไฟล์ได้เร็วขึ้น
- การเปลี่ยนนามสกุลของรูปให้เป็น webp ที่ช่วยในเรื่องของความเร็วได้ดีกว่า
- การใช้ Lazy Load Image ให้รูปที่อยู่นอกเหนือจากหน้าจอโหลดหรือแสดงผลทีหลัง
8. จัดการปัญหา External Scripts
หนึ่งในสาเหตุหลักที่ทำให้ความเร็วของเรามีปัญหา คือ สคริปต์จากภายนอกที่ขวางการแสดงผลหน้าเว็บไซต์ทำให้เกิด Render Blocking เช่น Google Analytics, Google Tag Manager, Google AdSense, CDN อย่าง Cloudflare, Bootstrap ซึ่งสคริปต์ส่วนนี้เราไม่สามารถควบคุมได้ทั้งหมด วิธีแก้ไขอย่างง่าย คือ ไม่ต้องทำการติดตั้งสคริปต์เหล่านั้นให้โหลดเฉพาะสคริปต์ที่จำเป็น แต่หากเรายังต้องการใช้งาน มีวิธีการดังนี้
แนวทางแก้ไข:
- ให้พยายามรวม Google Analytics, Google Adsense หรือสคริปต์อื่นๆ ไปที่ Google Tag Manager เพียงตัวเดียวเพื่อลดการเรียกใช้งาน
- ให้ทำการ Delay JavaScript ที่มีปัญหาให้ดึงและใช้งานช้ากว่าปกติ (อ่านการ Delay JavaScript)
9. ปรับปรุง Font ด้วย font-display: swap
อีกปัญหาหนึ่งที่เจอบ่อยคือการโหลดฟอนต์ที่โหลดช้าทำให้ส่งผลต่อการแสดงผลของหน้าเว็บช้าไปด้วย ซึ่งวิธีการแก้เราจำเป็นที่จะต้องมีความรู้เรื่องโค้ด CSS ด้วนั้นเราจำเป็นที่จะต้องทำการใส่ font-display: swap ลงไปในโค้ด CSS ตามตัวอย่างโค้ดด้านล่าง โดยให้ทำการใส่ที่ Apperance > Customize > Additional CSS ข้อดีคือจะทำให้ตัวอักษรแสดงผลทันที ลด CLS และเพิ่มคะแนน Google PageSpeed ครับ
@font-face{
font-family: 'YourFont';
src: url('font.woff2') format('woff2');
font-display: swap;
}10. ทดสอบซ้ำและปรับปรุงอย่างต่อเนื่อง
หลังจากทำการแก้ไขในแต่ละขั้นตอนให้เราทำการตรวจสอบความเร็วผ่าน Google PageSpeed Insights แล้วทำการปรับปรุงอย่างต่อเนื่อง ซึ่ง Google Page Speed ก็จะบอกว่าให้เราแก้ในส่วนใดต่อไป
สรุปการปรับความเร็วเว็บไซต์ให้ได้ 100 คะแนน
จากประสบการณ์จริง การเพิ่มความเร็วเว็บไซต์ให้ได้คะแนนสูง จำเป็นต้องปรับทั้งระบบ ได้แก่ เลือก Hosting ที่มีประสิทธิภาพ (LiteSpeed) ใช้ Theme ที่เบา ลดจำนวนปลั๊กอิน ตั้งค่า Cache ให้เหมาะสม ลดผลกระทบจาก External Scripts และ Optimize Font และ CSS หวังว่าหลังจากอ่านบทความนี้แล้ว ผู้อ่านทุกคนก็จะรู้ว่าจะต้องทำการปรับแต่งเว็บส่วนใดก่อนและวิธีใดสามารถทำให้เว็บตัวเองเร็วขึ้นได้นะครับ ขอบคุณครับ
