บล็อกนี้ก็จะเป็นบล็อกที่สรุปเรื่อง Web Performance ที่ได้ไปเรียนมากับ Skooldio โดย คุณ วรัทธน์ วงศ์มณีกิจ ซึ่งเป็น Google Developers Expert
การ optimize จะอิงจากใน Mobile เป็นหลัก ถ้าทำ Mobile ได้แรง ใน Desktop ไม่ต้องพูดถึง เพราะเน็ทโทรศัพท์ ช้ากว่าเน็ทบ้าน แล้วก็เรื่อง CPU ด้วย ใน Desktop มันแรงกว่าเยอะ
หลักๆ การ Optimize จะแบ่งเป็นสอง part ด้วยกันคือ
- Optimize ฝั่ง Server
- Optimize ฝั่ง Client
การ Optimize ทางฝั่ง Sever
จะมีอยู่ 2 ปัจจัย คือ
- ความเร็วของ Internet Connection เรื่องนี้ ตัวใครตัวมัน ช่วยไม่ได้
- ความเร็วของ Server ขึ้นอยู่กับการ config, caching, การเขียน code ทางฝั่ง Server side ว่า optimize มาดีแค่ไหน
การ Config Server หลักๆก็ ทำ caching, compress และ เปลี่ยนไปใช้ HTTP/2
สรุป Application/Server จะดีร้ายแค่ไหน โยนใส่ Cloudflare , จับรูปยัด CDN จบเรื่องเลย Cloudflare มี
Server side จบ Client Side ไม่จบ (ถ้าไม่พอใจ ความเร็วระดับประมาณ 3วิ ก็ไปต่อ)
การ Optimize ทางฝั่ง Client
จะเน้นไปทางจัดการ resource อย่าง CPU
- เลิกใช้ jQuery และ เลิกใช้ jQuery และ เลิกใช้ jQuery *
- ถ้าต้องเว็บ Support IE ไม่ต้อง optimize
- เอาโค้ด CSS ส่วนที่ไม่ใช้ออก ถ้ามีใช้น้อยมากๆ ให้เอามาใส่ใน <style> (มี tools ในโครมช่วยตรวจสอบ แต่ต้องเอาออกเอง)
- compress ไฟล์รูปภาพ อาจะทำได้ถึง 50% ดูตามสถานะการณ์ ถ้าใช้ webp ได้ ให้ใช้ (รองรับแทบทุก browser แล้ว)
- ไฟล์รูปไม่ซับซ้อนให้ใช้ SVG (รองรับแทบทุก browser แล้ว)
- ตรวจสอบ Off screen (ใช้ Intersection observer ซึ่งเป็น native function)
- ใช้ lazy load จัดการเรื่อง image offscreen
- compress JS CSS
- การวางคำสั่ง js เช็คก่อนว่า CPU พร้อมทำงานให้หรือเปล่า ยัดๆๆ อย่างเดียว CPU spike ก็เรียบร้อย (พัดลมลั่น)
- web animation ให้ไปใช้ js
- ใช้ Service worker หากจำเป็น
สรุป ฝั่ง Client มีปัจจัยทางด้าน CPU ล้วนๆ เพราะ Web Browser จะใช้แค่ 1 core ในการประมวลผล นั่นหมายความว่าจัดการ CPU ดี เว็บเร็วก็ render เร็ว ลื่นๆ ไม่กระตุก
* ที่ต้องเลิกใช้ jQuery เพราะ จริงๆแล้วเราใช้มันแค่ไม่กี่ฟังก์ชัน เขียนเองเลยประมวลผลได้เร็วกว่า
see also youmightnotneedjquery.com
** สุดท้ายแล้ว อาจจะทำไม่ได้ทุกอย่าง ต้องดูด้วยว่าเหมาะสมกับเว็บเราไหม ค่าใช้จ่าย และ เวลาในการทำ
** ทีม WooCommerce ใช้เวลาเลิกยา(เอา jQuery ออก) 2 ปี
** Github เลิกใช้ jQuery แล้ว