ทำไมต้องเพิ่มคะแนน PageSpeed ?
คุณรู้หรือไม่ว่าทุกๆ 3 วินาทีที่เว็บคุณใช้เวลาโหลดนานขึ้น เพิ่มโอกาสถึง 90% ที่คนจะเปลี่ยนใจไปเข้าเว็บอื่นแทน
ดังนั้น…ได้เวลาบอกลาเว็บไซต์อืดๆแล้ว
บทความนี้จะแนะนำเคล็ด(ไม่)ลับวิธีแก้ปัญหาเว็บ WordPress และ WooCommerce โหลดช้า เอาใจลูกค้าใจร้อน เทคนิคเพิ่มคะแนน PageSpeed และ YSlow ให้คุณทำตามได้ทันที แถมส่งผลดีต่ออันดับ SEO ด้วย
หาจุดเพิ่มคะแนน PageSpeed ด้วย GTMetrix
เว็บ GTMetrix เป็นเครื่องมือฟรีที่ให้คุณทดสอบความเร็วเว็บไซต์ได้ง่ายๆ ใช้หาจุดบกพร่องที่เป็นสาเหตุทำให้เว็บ WordPress หรือ WooCommerce ของคุณโหลดช้า
นอกจากนี้ GTMetrix ยังให้คำแนะนำวิธีแก้ไข เพื่อเพิ่มคะแนน PageSpeed และเพิ่มความเร็วให้เว็บไซต์ของคุณอีกด้วย
อ่านรายละเอียดวิธีใช้ GTMetrix ได้ในบทความ: เจาะลึก PageSpeed ด้วย GTMetrix
เลือกโฮสติ้งคุณภาพดี
เว็บโฮสติ้งเป็นปัจจัยสำคัญอันดับต้นๆ ที่จะส่งผลต่อคะแนน PageSpeed และเวลาในการโหลดหน้าเว็บเพจ
เว็บโฮสติ้งนั้นไม่เพียงแต่ส่งผลกับ TTFB โดยตรง แต่ยังส่งผลถึงเวลาการในโหลดไฟล์ การโหลดรูป และประสิทธิภาพการแคชไฟล์ต่างๆอีกด้วย เรียกได้ว่าเป็นต้นทางของความเร็วทุกอย่างบนเว็บไซต์ของคุณ
โดย WordPress.org แนะนำผู้ให้บริการเว็บโฮสติ้งอยู่ 3 ที่ คือ SiteGround, BlueHost และ Dreamhost
แต่จากประสบการณ์แอดเอง มีโฮสติ้งแนะนำ 3 ที่
- SiteGround โฮสติ้งแนะนำจาก WordPress เมนูใช้ง่ายสุดๆ รับประกันความพอใจ
- ThaiDataHosting คลาวด์โฮสติ้งไทย แรงอินเตอร์ (แถมมีปลั๊กอินแคช WP-Rocket ให้ใช้ฟรี)
- Cloudways คลาวด์โฮสติ้งนอก Control Panel สุดล้ำ ขยายพื้นที่ได้ตามใจ
เลือกที่ตั้งเซิร์ฟเวอร์ให้ใกล้ผู้ใช้งาน
ผู้ใช้งานยิ่งอยู่ไกลจากโฮสติ้งเซิร์ฟเวอร์ ยิ่งต้องใช้เวลาโหลดนานขึ้น
ดังนั้นคุณตอนสมัครโฮสติ้ง ควรเลือกโฮสติ้งเซิร์ฟเวอร์ (หรือ Datacenter) ที่อยู่ใกล้กลุ่มลูกค้าหลักของคุณมากที่สุด จากนั้นจึงค่อยใช้ CDN ในการช่วยลดเวลาในการโหลดหน้าเว็บอีกทีหนึ่ง
โฮสติ้งที่ดีจะสามารถให้คุณเลือก Datacenter ตามประเทศหลักๆอย่าง USA, London, Singapore, Japan เป็นต้น
เลือกโฮสติ้งที่รองรับ HTTP/2
HTTP/2 เป็นโปรโตคอลการเชื่อมต่อแบบใหม่ แทนที่ HTTP/1
ข้อดีของ HTTP/2 คือสามารถโหลดไฟล์ในหน้าเว็บเพจได้หลายไฟล์พร้อมๆกัน (Multiplexing) แตกต่างจาก HTTP/1 ที่ต้องรอคิวโหลดทีละไฟล์ต่อๆกัน
HTTP/2 เป็นโปรโตคอลการเชื่อมต่อแบบใหม่ แทนที่ HTTP/1
ข้อดีของ HTTP/2 คือสามารถโหลดไฟล์ในหน้าเว็บเพจได้หลายไฟล์พร้อมๆกัน (Multiplexing) แตกต่างจาก HTTP/1 ที่ต้องรอคิวโหลดทีละไฟล์ต่อๆกัน
คุณสามารถสองทดสอบความเร็ว HTTP/2 เทียบกับ HTTP/1 ได้
HTTP/2 จึงมีผลอย่างมากในการทำให้หน้าเว็บเพจของคุณโหลดเร็วขึ้น
หากคุณกำลังจะเช่าโฮสติ้งใหม่ ให้ดูข้อมูล Server Spec ว่ารองรับ HTTP/2 หรือไม่
แต่หากคุณมีโฮสติ้งอยู่แล้ว และไม่แน่ใจว่าเว็บไซต์ของคุณใช้งาน HTTP/2 อยู่รึเปล่า สามารถเข้าไปทดสอบได้ที่เว็บไซต์ https://http2.pro/
ถ้าขึ้นว่า HTTP/2 Supported! คือเว็บไซต์ของคุณรองรับ HTTP/2
อีกวิธีหนึ่งคือดูจาก Response Header ใน Waterfall Chart ถ้าขึ้นว่า Response Version – HTTP/2.0 คือคุณกำลังใช้งาน HTTP/2 อยู่
เลือกใช้ DNS Provider ที่มีคุณภาพ
Nameserver หรือ DNS นั้นสามารถส่งผลต่อเวลาในการโหลดหน้าเว็บของคุณได้เช่นกัน เนื่องจาก DNS เป็นการเชื่อมต่อแรกที่จะเกิดขึ้น เวลาผู้ใช้งานเรียกหน้าเว็บจาก Browser
ผู้ให้บริการ DNS (DNS Provider) ที่คุณภาพต่ำ ย่อมส่งผลต่อ Time to First Byte (TTFB)
คุณสามารถใช้เว็บ Who.is ในการดูว่าคุณใช้ Nameserver ของใครอยู่
จากนั้นดูความเร็วของ DNS Provider ได้จากเว็บ DNSperf.com ซึ่งจะทำการเปรียบเทียบความเร็วของ DNS Provider เจ้าใหญ่ๆ 40 โดเมน ไม่ว่าจะเป็น CloudFlare, Google, GoDaddy, Namecheap เป็นต้น
อีกทั้งคุณยังสามารถตรวจสอบผู้ให้บริการ DNS รวมทั้งทดสอบความเร็ว Nameservcer ที่คุณใช้อยู่ได้จากเว็บ Neustar DNS Speed Test
ใช้ CDN (Content Delivery Network)
YSLow: Use a Content Delivery Network (CDN)
หากคุณมีลูกค้ากระจายอยู่หลายประเทศ CDN จะนำแคชไฟล์จากเว็บเพจของคุณไปเก็บไว้บนเซิร์ฟเวอร์ของ CDN ที่กระจายอยู่ทั่วโลก และให้ผู้ใช้งานแต่ละคนของคุณโหลดแคชไฟล์จากเซิร์ฟเวอร์ CDN ที่อยู่ใกล้ที่สุด (Edge Server)
CDN จะช่วยลดเวลาในการโหลดหน้าเว็บได้อย่างมาก เพราะไม่ต้องโหลดไฟล์จากเซิร์ฟเวอร์ต้นทางที่อยู่ไกล (Origin Server) แถม CDN ยังช่วยประหยัดปริมาณการรับ-ส่งข้อมูล (Bandwidth) ให้กับเว็บไซต์ของคุณอีกด้วย
ผู้ให้บริการ CDN ฟรีที่คนนิยมที่สุดคือ CloudFlare CDN
หากคุณคือหนึ่งในลูกค้าของ ThaiDataHosting, SiteGround หรือ Cloudways สามารถอ่านวิธีติดตั้ง CloudFlare CDN ฟรี ได้ที่บทความ:
- ติดตั้ง CloudFlare บน ThaiDataHosting
- ติดตั้ง CloudFlare บน SiteGround
- ติดตั้ง CloudFlare บน CloudWays
คุณสามารถดูสถานะการเรียกไฟล์ผ่าน CloudFlare CDN ได้จาก cf-cache-status ใน Response Header จากกราฟ Waterfall Chart
cf-cache-status ของ CloudFlare ที่คุณจะเจอบ่อยๆ
- cf-cache-status: HIT คือไฟล์แคชถูกโหลดจาก CloudFlare (นี่คือสิ่งที่คุณต้องการ)
- cf-cache-status: MISS คือไฟล์ไม่ได้ถูกแคชอยู่บน CloudFlare (ไฟล์ถูกโหลดจาก Origin Server แทน)
- cf-cache-status: EXPIRE ไฟล์ถูกแคชอยู่บน CloudFlare แต่หมดอายุพอดี ดังนั้นไฟล์ถูกโหลดจาก Origin Server เพื่ออัพเดทแคชใหม่
นอกจากนี้ คุณยังสามารถใช้ Dr.Flare Chrome Extension เพื่อดูสถานะ และข้อมูลแคชของ CloudFlare แบบละเอียดได้อีกด้วย
เปิด SSL เพื่อใช้โปรโตคอล HTTPS แทน HTTP
HTTPS นอกจากจะช่วยให้การรับ-ส่งข้อมูลของเว็บโซต์คุณปลอดภัยแล้ว ยังทำให้หน้าเว็บโหลดเร็วกว่าแบบ HTTP อีกด้วย
นอกจากนั้น HTTPS ยังเป็นโปรโตคอลที่จำเป็นต้องมี หากคุณต้องการใช้ HTTP/2, CDN และโปรแกรมช่วยลดขนาดไฟล์อย่าง Brotli Compression
ลองทดสอบความเร็วของ HTTPS เทียบกับ HTTP ได้ที่ https://www.httpvshttps.com/
โฮสติ้งคุณภาพดีมักจะมี SSL ให้คุณสามารถใช้งานได้ฟรีอีกด้วย
หากคุณใช้ SiteGround คุณสามารถเปิด SSL เพื่อใช้งาน HTTPS ได้ง่ายๆจากเมนู Security > SSL Maanager
ถ้าโฮสติ้งของคุณใช้ DirectAdmin เมนู SSL จะอยู่ใน Advance Features > SSL Certificates
ส่วนใน CloudWays คุณสามารถตั้งค่า SSL ได้จากเมนู SSL Certificates ในหน้า Apllication Management
อัพเดท PHP ให้เป็นเวอร์ชัน 7.x
WordPress นั้นทำงานด้วยโค้ด PHP เป็นหลัก ดังนั้นเวอร์ชันของ PHP จะส่งผล อย่างมากต่อความเร็วในการโหลดหน้าเว็บ
ซึ่ง PHP 7.x จะเร็วกว่า PHP 5.x ถึง 3 เท่า เลยทีเดียว
คุณควรใช้ PHP เวอร์ชัน 7.0 เป็นอย่างต่ำ แต่ถ้าให้ดีที่สุด คือเปลี่ยนมาใช้ PHP 7.3 ตามที่ WordPress แนะนำ
คุณสามารถตรวจสอบเวอร์ชัน PHP ของคุณได้ใน WordPress Admin ที่เมนู Tools > Site Health > Info > PHP Version
วิธีเปลี่ยน PHP Version ด้วยตัวเองอย่างง่ายๆ
ThaiDataHosting (Direct Admin) PHP จะอยู่อยู่ในเมนู Advance Features > Select PHP Version เลือกเวอร์ชัน PHP ที่ต้องการแล้วเลือก Set as Current
SiteGround เปลี่ยนเวอร์ชัน PHP ในเมนู Devs > PHP Manager คลิกที่ไอคอนดินสอ แล้วเลือก PHP Version ที่ต้องการ จากนั้นคลิก Confirm
CloudWays เข้าไปที่เมนู Server Management > Setting & Packages เลือก Packages ที่เมนูด้านบน จากนั้นเลือก PHP Version ที่ต้องการแล้วคลิก Save
ลดจำนวน HTTP Redirect
จำนวนครั้งในการ Redirect สู่ URL เป้าหมายของคุณนั้น จะส่งผลต่อเวลาที่ใช้ในการเชื่อมต่อกับโฮสติ้งเซิร์ฟเวอร์ (TTFB หรือ Time to First Byte) โดยตรง
เช่น เว็บคุณใช้ https://www แต่ผู้ใช้งานเข้าเว็บไซต์คุณผ่าน URL http จะเสียเวลา Redirect 2 ครั้งคือจาก http:// ไปยัง https:// และ จาก https:// ไปยัง https://www.
คุณสามารถลดเวลา TTFB ตรงส่วนนี้ได้โดยลดจำนวน URL Redirect ลง คือจาก http:// ไปยัง https://www. เลย
วิธีลดจำนวน URL Redirect
- ใช้โปรโตคอลปลายทางเสมอในการลิงก์มายังเว็บเพจของคุณ (เช่น https://www.)
- ตั้ง Forwarding URL ใน CloudFlare Page Rules ให้เป็น 301 Permanent Redirect ไปยังโปรโตคอลหลักที่คุณใช้
อัพเดท WordPress, ปลั๊กอิน และธีมอยู่เสมอ
คุณควรอัพเดทเวอร์ชันของ WordPress รวมถึงธีม และปลั๊กอินต่างๆ ให้เป็นเวอร์ชันล่าสุดอยู่เสมอ
ผู้พัฒนาจะอัพเดทเวอร์ชันใหม่ เพื่ออุดช่องโหว่ความปลอดภัย แก้ไขโค้ดที่ผิดพลาด และเพิ่มความฟังก์ชันการใช้งานใหม่ๆ ซึ่งอาจส่งผลต่อความเร็วในการโหลดหน้าเว็บของคุณด้วย
คุณสามารถตั้งค่าให้ WordPress ธีม และ ปลั๊กอิน อัพเดทอัตโนมัติ ได้ด้วยนะ
เลือกธีม WordPress เบาๆ
การเลือกใช้ธีมก็มีส่วนอย่างมากต่อความเร็วในการโหลดหน้าเว็บของคุณ
บางธีมที่ลูกเล่นเยอะ แต่มีโค้ดสารพัดใส่ไว้เต็มไปหมด ทั้งที่ใช้งาน และเผื่อใช้งาน ย่อมส่งผลให้ต้องใช้เวลาในการโหลดโค้ดต่างๆนานกว่าธีม WordPress ที่ใส่เฉพาะโค้ดที่จำเป็น
ธีมที่โค้ดที่รุงรัง หรือเขียนมาไม่ดี จะส่งผลต่อคะแนน PageSpeed ได้เช่นกัน
ผู้พัฒนาธีมที่ดีมักจะให้คุณเลือกเปิดใช้งานเฉพาะโค้ดที่ต้องการได้อีกด้วย (Modular Theme)
ธีม WordPress ที่แนะนำ
- Astra: ธีมเบาๆ โหลดไว เปิด-ปิดลูกเล่นได้ แอดก็ใช้ธีมนี้อยู่ มีทั้งฟรี และ Astra Pro
- GeneratePress: อีกหนึ่ง Lightweight Theme มีทั้งฟรี และ Pro
- Hello Elementor: Official Theme ฟรีของ Elementor เบาหวิว (เพราะไม่มีลูกเล่นอะไรมาให้เลย) ออกแบบมาให้คุณปรับแต่งเพิ่มลูกเล่นตามใจได้ด้วย Elementor Pro
ใช้แคชปลั๊กอิน
PageSpeed: Leverage browser caching
แคชปลั๊กอิน (Cache Plugins) จะส่งผลอย่างมากต่อการเพิ่มคะแนน PageSpeed รวมถึงเพิ่มความเร็วในการโหลดหน้าเว็บของคุณโดยตรง
แคชปลั๊กอินจะช่วยโหลดหน้าเว็บเพจของคุณรอไว้ล่วงหน้า
เมื่อมีผู้ใช้งานเข้ามาโหลดหน้าเว็บเพจนั้นจริงๆ ก็จะโหลดหน้าเว็บเพจที่ถูกสร้างรอไว้ล่วงหน้าจากแคชไฟล์ ซึ่งเร็วกว่าการโหลดหน้าเว็บเพจใหม่ทุกครั้งจากเซิร์ฟเวอร์โดยตรง
การใช้แคชปลั๊กอิน นอกจากจะช่วยให้หน้าเว็บเพจโหลดได้เร็วแล้ว ยังช่วยประหยัดปริมาณการรับ-ส่งข้อมูลของเซิร์ฟเวอร์ (Bandwidth) อีกด้วย
แคชปลั๊กอินมักจะมีฟังก์ชันเสริมต่างๆ ที่ช่วยลดเวลาในการโหลดหน้าเว็บด้วย เช่น
- Database Optimization: ช่วยทำความสะอาด จัดระเบียบข้อมูลในฐานข้อมูล
- Minify HTML, CSS, JS: ช่วยลดขนาดไฟล์โค้ดต่างๆ (ตัดโค้ด HTML, CSS, JS)
- LazyLoad: โหลดรูปเฉพาะส่วนที่แสดงอยู่บนหน้าจอของผู้ใช้งาน
- ปิดฟังก์ชันการใช้งานใน WordPress ที่กินทรัพยากร CPU ของเซิร์ฟเวอร์ เช่น Heartbeat
แคชปลั๊กอินที่แนะนำ
- WP-Rocket แคชปลั๊กอินพรีเมี่ยม มีฟังก์ชันช่วยเพิ่มความเร็วในการโหลดหน้าเว็บให้ครบ แถมใช้ได้ฟรีหากคุณเป็นลูกค้า ThaiDataHosting
- Swift Performance แคชปลั๊กอินฟรี ใช้งานได้ดีเกือบเท่า WP-Rocket
ทำความสะอาด Database เป็นประจำ
คุณควรใช้ปลั๊กอินช่วยในการทำความสะอาด-จัดระเบียบฐานข้อมูล (Database Optimization) อย่างน้อยสัปดาห์ละครั้ง เพื่อลบไฟล์ หรือโค้ดที่ไม่จำเป็นในฐานข้อมูล
Database Optimization ทำอะไรบ้าง?
- ลบ Posts เก่าๆที่คุณไม่ได้ใช้ทิ้ง เช่น โพสท์ที่อยู่ใน Auto Draft, Revision หรือ Trash
- ลบ Spam Comments และ Trashed Comments
- ลบแคชเก่าๆในฐานข้อมูล (Transient Records)
- ตัดโค้ดในฐานข้อมูลที่ไมจำเป็น
ปลั๊กอินแนะนำที่จะช่วยคุณทำความสะอาดฐานข้อมูลใน WordPress
อย่าลืมใช้ปลั๊กอินอย่าง UpDraftPlus ในการ Backup ฐานข้อมูลของคุณก่อน Optimize Database ด้วย (โดยปกติการทำ Database Optimization จะไม่ทำให้เกิดปัญหาใดๆ แต่กันไว้ดีกว่าแก้ทีหลังนะ)
หากคุณตั้งค่าให้ปลั๊กอินทำ Database Optimization ให้อัตโนมัติทุกสัปดาห์ คุณสามารถใช้ UpDraftPlus หรือปลั๊กอิน BackUp อื่นๆ สำรองข้อมูลไว้วันละครั้ง หรือก่อนวันที่ Database Optimization จะทำงานก็ได้
ตัดโค้ด HTML CSS และ JS
PageSpeed: Minify CSS, HTML, JavaScript YSlow: Minify JavaScript and CSS
การตัดโค้ด (Minification) HTML, CSS และ JS คือการทำ File Optimization อย่างหนึ่งเพื่อช่วยลดขนาดไฟล์ ของโค้ดที่ใช้โหลดหน้าเว็บเพจ
การทำ Minification คือการตัด comments หรือ white space (บรรทัดว่าง) ที่ไม่จำเป็นในโค้ดออกไป โดบไม่กระทบกับฟังก์ชันการทำงานของโค้ด
คุณสามารถใช้ปลั๊กอินอย่าง WP-Rocket หรือ Swift Performance ในการช่วยตัดโค้ด HTML, CSS, JS
โหลดหน้าเว็บก่อนโค้ด JS
PageSpeed: Defer parsing of JavaScript
โดยปกติหน้าเว็บมักจะรอให้โค้ด JavaScript โหลดเสร็จแล้วจึงค่อยแสดงผลหน้าเว็บ ซึ่งโค้ด JS บางตัวนั้นไม่จำเป็นต่อการแสดงผลหน้าเว็บแต่อย่างใด
การโหลดโค้ด JS หลังจากที่หน้าเว็บเพจโหลดเสร็จ (Load JavaScript Deferred) จะช่วยให้หน้าเว็บแสดงผลได้เร็วขึ้น เพราะตัดเวลาในการรอโหลดโค้ด JS ออกไป
คุณสามารถตั้งค่า Load JavaScript Deferred (หรือ Async Load JavaScrip) ได้ในแคชปลั๊กอิน WP-Rocket รวมทั้งแคชปลั๊กอินอื่นๆก็มักจะมีฟังก์ชันนี้ติดมาให้
ลดจำนวนไฟล์ที่โหลดจากเว็บอื่น
PageSpeed: Serve resources from a consistent URL YSlow: Reduce DNS lookups
การที่หน้าเว็บของคุณมีไฟล์ที่ต้องโหลดจากเว็บอื่น (External Domain) ไม่ว่าจะเป็นโค้ด JS, ไฟล์รูป หรือ ฟ้อนต์ต่างๆ จะเป็นการเพิ่มจำนวน DNS Lookups ซึ่งจะเพิ่มเวลาในการโหลดหน้าเว็บของคุณ
ดังนั้นคุณควรจะโฮสต์ไฟล์ให้อยู่บนเว็บไซต์ของคุณให้มากที่สุด
ใช้ Prefetch สำหรับ External Domain ที่ใช้บ่อยๆ
หากเว็บของคุณมีโค้ดที่จำเป็นต้องโหลดจากเว็บไซต์อื่น เช่น Google Maps, Google Analytics หรือ Facebook Ads การทำ DNS Prefetch จะสร้างการเชื่อมต่อกับ โดเมนปลายทางไว้ล่วงหน้า เพื่อให้การโหลดคอนเทนต์จากเว็บปลายทางทำได้เร็วขึ้น
รายการ DNS Prefetch ที่แนะนำ (คลิก)
//0.gravatar.com
//1.bp.blogspot.com
//1.gravatar.com
//2.bp.blogspot.com
//2.gravatar.com
//3.bp.blogspot.com
//4.bp.blogspot.com
//ad.doubleclick.net
//adservice.google.com
//ajax.aspnetcdn.com
//ajax.googleapis.com
//ajax.microsoft.com
//api.pinterest.com
//apis.google.com
//bp.blogspot.com
//c.disquscdn.com
//cdnjs.cloudflare.com
//cm.g.doubleclick.net
//code.jquery.com
//connect.facebook.net
//disqus.com
//fonts.googleapis.com
//fonts.gstatic.com
//github.githubassets.com
//google-analytics.com
//googleads.g.doubleclick.net
//maps.googleapis.com
//maps.gstatic.com
//pagead2.googlesyndication.com
//pixel.wp.com
//platform.instagram.com
//platform.linkedin.com
//platform.twitter.com
//player.vimeo.com
//referrer.disqus.com
//s.gravatar.com
//s0.wp.com
//s3.amazonaws.com
//s3.buysellads.com
//s7.addthis.com
//sitename.disqus.com
//ssl.google-analytics.com
//stackpath.bootstrapcdn.com
//stats.buysellads.com
//stats.g.doubleclick.net
//stats.wp.com
//syndication.twitter.com
//tpc.googlesyndication.com
//use.fontawesome.com
//w.sharethis.com
//www.google-analytics.com
//www.googletagmanager.com
//www.googletagservices.com
//youtube.com
ปลั๊กอินอย่าง WP-Rocket จะมีฟังก์ชันให้คุณใส่ URL ที่ต้องการ Preload (หรือ Prefetch)
ใช้โค้ด Google Analytics จากโฮสติ้งของคุณเอง
PageSpeed: Leverage browser caching
PageSpeed จะมีคะแนนในส่วนของการทำ Leverage Browser Caching หรือก็คือการแคชไฟล์ต่างๆลงบน Web Browser ซึ่งจะช่วยเพิ่มความเร็วในการโหลดไฟล์
แต่ปัญหาก็คือคุณไม่สามารถทำ Browser Cache สำหรับไฟล์ที่ต้องโหลดจากเว็บอื่นได้ และ โค้ดของ Google Analytics (analytics.js หรือ gtag.js) ก็เป็นหนึ่งในนั้น
ทางแก้คือ คุณสามารถใช้ปลั๊กอินที่ช่วยติดตั้งโค้ดของ Google Analytics ลงบน WordPress โดยตรง แทนที่จะโหลดโค้ดจาก Google ทุกครั้ง (Self-Hosted Google Analytics)
ปลั๊กอินสำหรับทำ Self-Hosted Google Analytics
ติดตั้งฟ้อนต์ Google Fonts บนเว็บของคุณเอง
PageSpeed: Serve resources from a consistent URL YSlow: Reduce DNS lookups
การใช้ External Fonts อย่าง Google Fonts จะเป็นการโหลดฟ้อนต์จากเว็บปลายทาง ซึ่งมักใช้เวลาในการโหลดที่นานกว่า
คุณสามารถใช้ปลั๊กอินช่วยในการดาวน์โหลดฟ้อนต์ของ Google Fonts มาเก็บไว้บนโฮสติ้ง และโหลดฟ้อนต์เหล่านี้จากเว็บของคุณโดยตรง (Local Fonts)
ปลั๊กอินที่ใช้ติดตั้ง Google Fonts บนโฮสติ้งของคุณเอง
นอกจากการทำ Self-Hosted Google Fonts แล้ว ปลั๊กอินอย่าง AssetClenUp หรือ WP-Rocket ยังคุณสามารถรวมการโหลด Google Fonts เข้าด้วยกัน (Combined Google Fonts) เพื่อลดจำนวน DNS Request ได้อีกด้วย
Preload Fonts
นอกจากการทำ Local Fonts แล้ว คุณสามารถทำ Preload Fonts เพื่อให้การโหลดฟ้อนต์ต่างๆเร็วขึ้น
ปลั๊กอิน Asset CleanUp มีตัวช่วยให้คุณทำ Proload Fonts ได้แบบง่ายๆ ที่ทำได้ทั้งฟ้อนต์ที่อยู่บนเว็บของคุณ (Local Fonts) และ ฟ้อนต์ที่ต้องโหลดจาก Google Fonts (fonts.gstatic.com)
โหลดไอคอน Font Awesome ผ่าน CDN
ไอคอน Font Awesome นั้นเป็นที่นิยมใช้ในธีมต่างๆเป็นอย่างมาก แต่ข้อเสียคือมักจะเป็นสาเหตุหนึ่งที่ทำให้หน้าเว็บของคุณโหลดช้า
เนื่องจากไอคอน Font Awesome นั้นจะทำการโหลดผ่านเว็บของ Font Awesome เอง
คุณสามารถลดเวลาการโหลดไอคอน Font Awesome ส่วนนี้ได้โดยการโหลด Font Awesome จาก CDN Library อย่าง CDNJS.com ซึ่งใช้ CloudFlare CDN ในการโหลดไอคอนจากเซิร์ฟเวอร์ CDN ที่อยู่ใกล้ผู้ใช้งานที่สุด แทนการโหลดจากเว็บของ Font Awesome เอง
คุณสามารถเพิ่มโค้ดด้านล่างไปใน functions.php (หรือใช้ปลั๊กอินอย่าง Code Snippets) เพื่อโหลด Font Awesome ผ่าน CDN แทน โดยแทนที่ชื่อฟ้อนต์ .woff2 ที่คุณใช้อยู่
add_action( 'wp_enqueue_scripts', 'tu_custom_font_awesome', 100 );
function tu_custom_font_awesome() {
wp_dequeue_style( 'font-awesome' );
wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.woff2' );
}
ลบปลั๊กอินที่ไม่ใช้
หากคุณมีปลั๊กอินที่ไม่ได้ใช้ หรือ Deactivate ทิ้งไว้นานๆ (ก็คือไม่ได้ใช้นั่นแหละ) แนะนำให้ลบปลั๊กอินออกไปเลยดีกว่า เพราะนอกจากเป็นช่อวโหว่ด้านความปลอดภัยแล้ว
ปลั๊กอินที่ Deactivate ทิ้งไว้สามารถมีโค้ดที่ทำงานอยู่ใน Background ซึ่งเพิ่มเวลาในการโหลดเว็บเพจของคุณโดยไม่จำเป็นอีกด้วย
ปิดการใช้งานโค้ดที่ไม่จำเป็น
คุณสามารถใช้ปลั๊กอินอย่าง Asset CleanUp ช่วยในการปิดโค้ดที่ไม่จำเป็นซึ่งจะช่วยลดเวลาในการโหลดเว็บของคุณได้อย่างมาก
นอกจากนั้น การเลือกใช้ธีมแบบ Modular อย่างเช่น AstraPro ที่ผู้พัฒนาให้คุณสามารถเลือกเปิดใช้งานโค้ดเฉพาะส่วน ช่วยลดโค้ดส่วนเกินได้อีกด้วย
หลีกเลี่ยงปลั๊กอินกิน CPU
ปลั๊กอินที่ทำงานอยู่ใน Background ของคุณตลอดเวลา หรือปลั๊กอินที่ใช้ CPU เยอะๆ ย่อมกินทรัพยากรเซิร์ฟเวอร์ของคุณโดยไม่จำเป็น
ปลั๊กอินกิน CPU ที่คุณควรหลีกเลี่ยง
AddThis
AdSense Click Fraud Monitoring
All-In-One Event Calendar
Backup Buddy
Beaver Builder
Better WordPress Google XML Sitemaps
Broken Link checker (use Dr. Link Check)
Constant Contact for WordPress
Contact Form 7
Contextual Related Posts
Digi Auto Links
Disqus Comment System
Divi Builder
Essential Grid
Facebook Chat
Fancy Gallery
Fuzzy SEO Booster
Google Analytics
Google Language Translator
Google Translate
Google XML Sitemaps
Jetpack
Leaflet Maps Marker
MyReview
NextGEN Gallery
NewStatPress
Real Estate Website Builder
Really Simple Share
Reveal IDs
Revolution Slider
Sharebar
ShareThis
S2 member
SEO Auto Links & Related Posts
Share Buttons by AddToAny
Share Buttons by E-MAILiT
ShareThis
Social Discussions
Socialable
Similar Posts
Slimstat Analytics
SumoMe
Talk.To
Tribulent Slideshow Gallery
Ultimate Social Media & Share
VaultPress
WooCommerce Customer History
Wordfence (disable live traffic reports)
WordPress Facebook
WordPress Related Posts
WordPress Popular Posts
WordPress Social Ring
WP Bakey (formerly Visual Composer)
WP Facebook Like Plugin
WP Jump Menu
WP Social Bookmarking Lite
WP Social Share
WP Statistics
WP Power Stats
WP-PostViews
WPML (if you use too many extensions)
wpCloaker
WPML
Yet Another Related Post Plugin
Yuzo Related Posts
ที่มา OnlineMediaMasters
ปิด CronJob บน WordPres
define('DISABLE_WP_CRON', true);
จากนั้นจึงไปตั้งค่า Corn Job จากใน Control Panel ของโฮสติ้งที่คุณใช้อยู่ โดยใช้โค้ดนี้ (อย่าลืมเปลี่ยน your domain ให้เป็นชื่อโดเมนของเว็บคุณด้วย) และเลือกความถี่ในการรัน Cron วันละสองครั้ง (Twice Per Hour)
wget -q -O - https://www.yourdomain.com/wp-cron.php?doing_wp_cron >/dev/null 2>&1โค้ดตัวอย่างด้านบนนั้นเป็น Cron ของ WordPress อย่างไรก็ตามหากคุณมีปลั๊กอินอื่นๆที่ใช้งาน Cron Job เช่น WP-Rocket ก็จะต้องใส่ Cron Job สำหรับแต่ละปลั๊กอินด้วย ตัวอย่าง Cron ของ WP-Rocket:
wget -q -O - https://www.yourdomain.com/rocket-clean-domain.php >/dev/null 2>&1
ปิด HeartBeat บน WordPres
HeartBeat ใน WordPress นั้นจะทำหน้าที่รับ-ส่งข้อมูลต่างๆแบบ Real-Time ระหว่าง WordPress และ Browser เช่น:
- การเซฟโพสต์ร่างอัตโนมัติ (Autosave และ Revision)
- การส่งข้อความแจ้งเตือน Notification ใน Admin Dashboard
- ป้องกันการแก้ไขโพสต์ซ้ำขณะที่ Editor คนอื่นกำลังแก้ไขอยู่
- ส่งข้อมูลจากปลั๊กอินแบบ Real-Time ไปยัง WordPress Dashboard
ซึ่งในความ Real-Time ของ HeartBeat API นั้นย่อมหมายถึง CPU ของคุณแทบจะถูกใช้งานอยู่ตลอดเวลา ซึ่งส่งผลต่อความเร็บเซิร์ฟเวอร์อย่างแน่นอน
คุณสามารถใช้ปลั๊กอินอย่าง WP-Rocket ในการตั้งความถี่ในการรับ-ส่งข้อมูลของ HeartBeat (หรือปิด HeartBeat ไปเลย) เพื่อช่วยประหยัดการใช้ทรัพยากรเซิร์ฟเวอร์ได้
ลดจำนวน Post Revisions
Post Revisions คือการให้ WordPress บันทึกการเปลี่ยนแปลงโพสต์แต่ละครั้งเก็บไว้ ซึ่งการทำงานนี้ส่งผลให้ WordPress ต้องมีการรัยโค้ด และใช้งาน CPU ค่อนข้างมากในการติดตามการเปลี่ยนแปลงต่างๆเวลาคุณแก้ไขโพสต์ โดยเฉพาะเมื่อมีจำนวน Revision เยอะๆ
การลดจำนวน Post Revisions จะช่วยลดการใช้งานทรัพยากรเครื่องเซิร์ฟเวอร์ รวมถึงความเร็วในการโหลดโพสต์เพื่อแก้ไขได้ด้วย
คุณสามารถเปลี่ยนจำนวน Post Revisions โดยใส่โค้ดด้านล่างนี้ใน wp-config.php ก่อนถึงบรรทัด
/* That’s all, stop editing! Happy blogging. */
define('WP_POST_REVISIONS', 3);
หากคุณต้องการปิด Post Revisions ไปเลย ให้ใช้โค้ดนี้แทน
define('WP_POST_REVISIONS', false);
สำหรับ Post Revison เก่าๆที่คุณมีอยู่ในฐานข้อมูล สามารถลบได้ด้วยปลั๊กอิน WP-Sweep
ปิด Pingbacks, Trackbacks บน WordPress
Pingbacks กับ Trackbacks คือฟีเจอร์ใน WordPress ที่ใช้แจ้งให้แอดมินเว็บไซต์อื่นรู้เวลาเนื้อหาในเว็บของคุณมีการลิงก์ไปยังเว็บไซต์นั้นๆ
อย่างไรก็ตามฟีเจอร์นี้คนแทบไม่ค่อยใช้กันแล้ว เนื่องจากมักเป็นช่องทางส่ง Spamlinks แทน ซึ่งทั้ง Pingbacks และ Trackbacks ทำให้ WordPress ต้องคอย Monitor Backlinks อยู่เสมอซึ่งหมายถึงมีการใช้ CPU ของเซิร์ฟเวอร์อยู่ตลอดเวลา
Pingbacks และ Trackbacks นั้นใช้ฟังก์ชันใน WordPress ที่เรียกว่า XML-RPC
หากคุณไม่ได้ใช้ฟีเจอร์นี้ สามารถไปปิดได้จากใน Admin Panel > Settings > Discussion
ปิด Gravatars บน WordPress
Gravatars เป็นเหมือนรูปประจำตัวสำหรับคนที่ใช้ Account WordPress ซึ่งเป็นรูปที่ต้องโหลดจาก External Servers
หากคุณคิดว่าไม่จำเป็นต้องใช้ก็สามารถปิด Gravatars ได้จาก Admin Panel > Settings > Discussion
ลดเวลาโหลด admin-ajax.php
โค้ดที่มักพบว่าใช้เวลาโหลดนานอีกอันหนึ่งคือ admin-ajax.php ซึ่งเป็นโค้ดหลักที่ใช้ในการรันโค้ดปลั๊กอินอื่นๆใน WordPress
หาก Waterfall Chart ของคุณพบ admin-ajax.php ที่ใช้เวลาโหลดนาน คุณสามารถตรวจสอบจาก Request Header ได้ว่าปลั๊กอิน หรือโค้ดอะไรใน WordPress ที่สั่งรัน admin-ajax.php จากนั้นจึงค่อยไปจัดการโค้ดตัวปัญหาต่อไป (หาจาก Google ก็ได้)
ลดขนาดรูปด้วยปลั๊กอิน Image Optimization
PageSpeed: Optimize images
ขนาดไฟล์ของรูปที่คุณใช้มีความสำคัญอย่างมากกับความเร็วในการโหลดหน้าเว็บ โดยเฉพาะอย่างยิ่งหากเว็บไซต์ของคุณเน้นการแสดงรูปภาพเยอะๆ
คุณสามารถใช้ปลั๊กอิน Image Optimization ที่ช่วยในการลดขนาดไฟล์รูปภาพ โดยยังคงคุณภาพของรูปภาพไว้ได้ด้วย
ปลั๊กอิน Image Optimization ที่แนะนำ
- Imagify (ไม่ฟรี)
- Optimole Image CDN
- WP-Smush
ใช้ LazyLoad สำหรับหน้าเว็บที่รูปเยอะๆ
LazyLoad คือการให้ Browser โหลดรูปภาพเฉพาะส่วนที่ปรากฎอยู่บนพื้นที่หน้าจอของผู้ใช้งาน รูปภาพส่วนล่างๆของหน้าที่ผู้ใช้งานยังเลื่อนไปไม่ถึง จะยังไม่ถูกโหลด จนกว่าผู้ใช้งานจะเลื่อนหน้าจอไปยังรูปภาพส่วนนนั้น
ข้อดีของ LazyLoad คือช่วยลดจำนวนรูปภาพที่ต้องใช้ในการโหลดเพื่อแสดงผลหน้าเว็บเพจ แทนที่จะโหลดรูปภาพทั้งหมดทีเดียว ก็โหลดเฉพาะส่วนที่ผู้ใช้งานจะต้องเห็นก่อน เพียงเท่านี้ก็สามารถช่วยลดเวลาในการโหลดหน้าเว็บลงได้อย่างมาก
คุณสามารถใช้ LazyLoad ได้จากปลั๊กอินแคช หรือ Image Optimization อย่าง WP-Rocket ก็ได้
โหลด Thumbnail แทนไฟล์วิดิโอเมื่อใช้ YouTube Embed
หากคุณมีแชร์ไฟล์วิดิโออย่าง YouTube หรือ Vimeo ในหน้าเพจ ไฟล์วิดิโอที่ว่าจะต้องถูกโหลดรอไว้ ซึ่งเป็นการเพิ่มเวลาในการโหลด
หากคุณใช้ปลั๊กอินจัดหน้าอย่าง Elementor คุณสามารถตั้งค่าให้โหลดรูปหน้าปก แทนไฟล์วิดิโอ เมื่อผู้ใช้งานคลิกที่วิดิโอจึงจะทำการโหลดไฟล์วิดิโอจริงๆ ก็จะช่วยลดเวลาโหลดไฟล์วิดิโอล่วงหน้าได้ (เหมือนตัวอย่างวิดิโอในเทคนิคที่ 4 HTTP/2 ในบทความนี้)
ลดเวลาโหลด WooCommerce Cart Fragments
หากคุณใช้ปลั๊กอิน Woocommerce สำหรับร้านค้าออนไลน์ เมื่อคุณทดสอบ PageSpeed ใน GTMetrix ค่อนข้างแน่นอนว่าจะเห็น ?wc-ajax=get_refreshed_fragments แท่งยาวๆบาดสายตาใน Waterfall Chart
โค้ด get_refreshed_fragments หรือ Ajax Cart Fragments คือโค้ดของ WooCommerce ที่ใช้เพื่ออัพเดทตัวเลขในตะกร้าสินค้าแบบ Real-Time เวลาผู้ใช้งานหยิบสินค้าใส่ตะกร้า (Dynamic Carts)
ปัญหาคือโค้ดตัวนี้ทำงาน ‘ทุกหน้า’ ในเว็บไซต์ของคุณ แม้กระทั่งหน้าที่ไม่ไม่ได้แสดงตะกร้าสินค้าก็ตาม
หากธีมของคุณไม่ได้สนับสนุนการใช้ Dynamic Carts หรือคุณคิดว่าฟีเจอร์นี้ไม่จำเป็น ก็สามารถปิดแบบถาวรได้ใน Admin Panel เมนู WooCommerce > Settings > Products เอาครื่องหมายถูกในช่อง Enable AJAX add to cart button on archives ออก
หรือจะใช้ปลั๊กอินอย่าง Disable Cart Fragments ช่วยในการปิดปิดโค้ดตัวนี้ก็ได้เช่นกัน โดยปลั๊กอินตัวนี้จะเปิดใช้งานโค้ดต่อเมื่อมีการเพิ่มสินค้าลงในตะกร้า
ปิดโค้ด WooCommerce ในหน้าที่ไม่จำเป็น
WooCommerce นั้นสามารถเป็นปลั๊กอินที่กินทรัพยากรเซิร์ฟเวอร์พอสมควร เนื่อจากโค้ดต่างๆของมันนั้นจะถูกเรียกใช้งานในทุกๆหน้าบนเว็บไซต์ของคุณ แม้กระทั่งหน้าที่ไม่ได้แสดงผลเกี่ยวกับสินค้าเลยก็ตาม
คุณสามารถใส่โค้ดด้านล่างเพิ่มใน functions.php เพื่อสั่งให้โค้ดต่างๆของ WooCommerce ทำงานเฉพาะหน้า Product, Cart และ Checkout ได้ (Credits: Webnots.com)
/** Disable All WooCommerce Styles and Scripts Except Shop Pages **/
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_styles_scripts', 99 );
function dequeue_woocommerce_styles_scripts() {
if ( function_exists( 'is_woocommerce' ) ) {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
# Styles
wp_dequeue_style( 'woocommerce-general' );
wp_dequeue_style( 'woocommerce-layout' );
wp_dequeue_style( 'woocommerce-smallscreen' );
wp_dequeue_style( 'woocommerce_frontend_styles' );
wp_dequeue_style( 'woocommerce_fancybox_styles' );
wp_dequeue_style( 'woocommerce_chosen_styles' );
wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
# Scripts
wp_dequeue_script( 'wc_price_slider' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-add-to-cart' );
wp_dequeue_script( 'wc-cart-fragments' );
wp_dequeue_script( 'wc-checkout' );
wp_dequeue_script( 'wc-add-to-cart-variation' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-cart' );
wp_dequeue_script( 'wc-chosen' );
wp_dequeue_script( 'woocommerce' );
wp_dequeue_script( 'prettyPhoto' );
wp_dequeue_script( 'prettyPhoto-init' );
wp_dequeue_script( 'jquery-blockui' );
wp_dequeue_script( 'jquery-placeholder' );
wp_dequeue_script( 'fancybox' );
wp_dequeue_script( 'jqueryui' );
}
}
}
อ่านจบแล้ว ไงต่อ...?
แชร์ต่อ…
อ่านจบแล้วก็แชร์ความรู้นี้ต่อ ให้เพื่อนๆที่สนใจการทำเว็บ หรือทำร้านขายของออนไลน์ด้วยไงล่ะ คลิกเพื่อแชร์จากลิงก์โซเชียลมีเดียขาประจำด้านล่างได้เลย! (แอดขอขอบคุณที่ช่วยแบ่งปันความรู้ให้เพื่อนๆนะ =/\=)
บทความแนะนำ
สร้างเว็บด้วย WordPress สำหรับผู้เริ่มต้น พร้อมแนะนำโฮสติ้ง (คู่มือ WordPress 2020 ตอนที่ 1)
อ่านเลย »