กำลังเตรียมประสบการณ์ดิจิทัล
ทุกวันนี้ความสามารถหลายอย่างที่เคยต้องพึ่งไลบรารี เบราว์เซอร์ทำได้เองแล้ว บทความนี้สรุปวิธีใช้ Baseline เป็นเกณฑ์ตัดสินใจว่าจะถอดไลบรารีตัวไหนออกได้บ้าง พร้อมกรอบคำถามสามข้อและตัวอย่างที่ลดขนาดบันเดิลได้จริงหลายสิบกิโลไบต์
ทุกวันนี้ความสามารถหลายอย่างที่เคยต้องพึ่งไลบรารี เบราว์เซอร์ทำได้เองแล้ว บทความนี้สรุปวิธีใช้ Baseline เป็นเกณฑ์ตัดสินใจว่าจะถอดไลบรารีตัวไหนออกได้บ้าง พร้อมกรอบคำถามสามข้อและตัวอย่างที่ลดขนาดบันเดิลได้จริงหลายสิบกิโลไบต์
Baseline เป็นโครงการของ WebDX Community Group ที่จัดสถานะความพร้อมใช้งานของฟีเจอร์เว็บออกเป็นสามระดับ ได้แก่ Limited คือยังไม่รองรับครบทุกเบราว์เซอร์หลัก, Newly available คือเพิ่งรองรับครบทุกเอนจิน และ Widely available คือรองรับมาแล้วเกิน 30 เดือน ซึ่งถือว่าปลอดภัยพอจะใช้ในงานจริงเป็นวงกว้าง
ประโยชน์ของการมีเกณฑ์กลางแบบนี้คือทีมไม่ต้องเถียงกันด้วยความรู้สึกว่า "ฟีเจอร์นี้ใช้ได้หรือยัง" แต่ตรวจสอบได้จาก webstatus.dev หรือ MDN แล้วตัดสินใจบนข้อมูลชุดเดียวกัน
ก่อนลบไลบรารีใด ๆ ผู้เขียนแนะนำให้ตอบสามคำถาม หนึ่งคือฟีเจอร์ทดแทนปลอดภัยกับสัดส่วนเบราว์เซอร์ของผู้ใช้จริงของคุณหรือไม่ สองคือการสลับมาใช้ของเนทีฟมีต้นทุนเท่าไรทั้งขนาดบันเดิลและความซับซ้อนของโค้ด และสามคือฟีเจอร์เนทีฟครอบคลุมกรณีใช้งานจริงของคุณ ไม่ใช่แค่ตัวอย่างพื้นฐานในเอกสาร
คำถามข้อแรกสำคัญเป็นพิเศษสำหรับเว็บไทยที่ยังมีผู้ใช้บนอุปกรณ์รุ่นเก่าจำนวนไม่น้อย ควรดูข้อมูลจริงจาก analytics ของตัวเอง ไม่ใช่ยึดสถิติเบราว์เซอร์ระดับโลก
กลุ่มจัดรูปแบบภาษาและตัวเลขอย่าง timeago.js และ numeral แทนได้ด้วย Intl namespace ประหยัดราว 14 KB, กลุ่ม HTTP client อย่าง axios และ superagent แทนได้ด้วย fetch ร่วมกับ AbortController ประหยัดราว 17 KB, กลุ่มคอมโพเนนต์พื้นฐานอย่างไลบรารี modal และ tooltip แทนได้ด้วยแท็ก dialog และ Popover API ประหยัดราว 24 KB และฟังก์ชันยูทิลิตีจาก lodash หลายตัวแทนได้ด้วย Object.groupBy และ structuredClone ประหยัดราว 8 KB
ตัวอย่างที่เห็นผลชัดคือการใช้แท็ก dialog แทนไลบรารี modal เพราะได้ทั้งการจัดการโฟกัสและพฤติกรรมด้านการเข้าถึงมาให้ในตัว หรือใช้ structuredClone แทน lodash.clonedeep ซึ่งรองรับชนิดข้อมูลซับซ้อนได้ดีกว่า ส่วนงานจัดกลุ่มข้อมูลใช้ Object.groupBy และเมธอดของ Set อย่าง union กับ intersection ได้เลย
ผู้เขียนเตือนเรื่อง Temporal ซึ่งเป็นตัวแทนของ Date รุ่นใหม่ว่ายังไม่ควรรีบนำมาใช้ เพราะ polyfill มีขนาดราว 44 KB หลังบีบอัด ซึ่งหักล้างประโยชน์ที่ได้จนกว่า Safari จะรองรับและฟีเจอร์เข้าสถานะ Baseline
บทเรียนตรงนี้ใช้ได้กว้างกว่าเรื่อง Temporal คือฟีเจอร์ที่ยังต้องพึ่ง polyfill ขนาดใหญ่ มักไม่คุ้มที่จะนำมาใช้เพียงเพื่อความทันสมัย ควรรอจนสถานะเปลี่ยนเป็น Newly available เป็นอย่างน้อย
เริ่มจากรัน npm ls --omit=dev --depth=0 เพื่อดูรายการไลบรารีที่ส่งถึงผู้ใช้จริง จากนั้นตรวจผลกระทบต่อขนาดบันเดิลด้วย Bundlephobia หรือ source-map-explorer แล้วเช็กสถานะ Baseline ของฟีเจอร์ทดแทนจาก webstatus.dev หรือ MDN
เมื่อได้รายชื่อผู้สมัครแล้วให้ใช้กรอบคำถามสามข้อคัดกรอง สำหรับฟีเจอร์ที่เพิ่งเข้าสถานะ Newly available ให้ครอบด้วย progressive enhancement เผื่อเบราว์เซอร์เก่า และตั้งเป็นวาระทบทวนทุกไตรมาส เพราะช่องว่างระหว่างสิ่งที่ต้องใช้ไลบรารีกับสิ่งที่เบราว์เซอร์ทำได้เองแคบลงเรื่อย ๆ
บทความอื่นที่เกี่ยวข้อง
เว็บที่โหลดช้าเพียง 1 วินาทีอาจทำให้ Conversion ลดลงอย่างมีนัยสำคัญ บทความนี้สรุปแนวทางจากคอร์ส Learn Performance ของ Google web.dev อธิบายตัวชี้วัด Core Web Vitals ทั้ง LCP, INP และ CLS พร้อมเทคนิคปรับปรุงที่ทีมพัฒนาไทยนำไปใช้ได้ทันที
อ่านบทความ
ผู้ใช้เว็บในไทยส่วนใหญ่เข้าผ่านมือถือ การออกแบบ Responsive จึงไม่ใช่ทางเลือกแต่คือมาตรฐาน บทความนี้รวบรวมแนวคิดสมัยใหม่จากบทความของ Smashing Magazine ตั้งแต่ Mobile-First, Fluid Layout ด้วย CSS Grid ไปจนถึง Container Query ที่เปลี่ยนวิธีคิดเรื่อง Breakpoint ไปตลอดกาล
อ่านบทความ
ผู้ใช้จำนวนไม่น้อยเข้าถึงเว็บผ่าน Screen Reader แป้นพิมพ์ หรือมีข้อจำกัดด้านการมองเห็น เว็บที่เข้าถึงไม่ได้คือการปิดประตูใส่ลูกค้า บทความนี้แนะนำมาตรฐาน WCAG ของ W3C หลักการ POUR และการแก้ไข 5 อันดับปัญหาที่พบบ่อยที่สุด ซึ่งส่วนใหญ่ใช้ความพยายามน้อยกว่าที่คิด
อ่านบทความตั้งแต่ประเมินระบบปัจจุบัน วางแผน จนถึงลงมือพัฒนา — คุยกับเราได้โดยไม่มีค่าใช้จ่าย
