เชี่ยวชาญการตรวจสอบประสิทธิภาพแอปพลิเคชัน frontend ด้วย New Relic เรียนรู้วิธีระบุและแก้ไขปัญหาคอขวด เพิ่มประสบการณ์ผู้ใช้ และรับประกันความเร็วเว็บไซต์ที่ดีที่สุด
การเพิ่มประสิทธิภาพ Frontend ด้วย New Relic: คู่มือฉบับสมบูรณ์
ในโลกดิจิทัลปัจจุบัน frontend ที่รวดเร็วและตอบสนองได้ดีมีความสำคัญอย่างยิ่งต่อความสำเร็จ ผู้ใช้คาดหวังประสบการณ์ที่ราบรื่น และแม้แต่ปัญหาด้านประสิทธิภาพเพียงเล็กน้อยก็อาจนำไปสู่ความหงุดหงิด การละทิ้ง และท้ายที่สุดคือการสูญเสียรายได้ New Relic นำเสนอชุดเครื่องมืออันทรงพลังสำหรับการตรวจสอบและเพิ่มประสิทธิภาพของแอปพลิเคชัน frontend โดยให้ข้อมูลเชิงลึกอันล้ำค่าเกี่ยวกับวิธีที่ผู้ใช้โต้ตอบกับเว็บไซต์ของคุณและตำแหน่งที่อาจเกิดปัญหาคอขวด คู่มือนี้จะให้ภาพรวมที่ครอบคลุมเกี่ยวกับวิธีการใช้ประโยชน์จาก New Relic เพื่อเพิ่มประสิทธิภาพของ frontend และมอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยม
ทำไมประสิทธิภาพของ Frontend จึงมีความสำคัญ
ก่อนที่จะลงลึกในรายละเอียดของ New Relic เรามาพิจารณากันก่อนว่าทำไมประสิทธิภาพของ frontend จึงมีความสำคัญอย่างยิ่ง:
- ประสบการณ์ผู้ใช้: เว็บไซต์ที่ช้าอาจทำให้ผู้ใช้หงุดหงิดและส่งผลเสียต่อภาพลักษณ์ของแบรนด์ ผู้ใช้มีแนวโน้มที่จะออกจากเว็บไซต์ที่ใช้เวลาโหลดหรือตอบสนองนานเกินไป
- อัตราการแปลง (Conversion Rates): ประสิทธิภาพส่งผลโดยตรงต่ออัตราการแปลง ผลการศึกษาแสดงให้เห็นว่าแม้แต่ความล่าช้าเพียงเล็กน้อยในการโหลดหน้าเว็บก็สามารถลดอัตราการแปลงได้อย่างมีนัยสำคัญ
- การปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหา (SEO): เครื่องมือค้นหาเช่น Google พิจารณาความเร็วของหน้าเว็บเป็นปัจจัยในการจัดอันดับ เว็บไซต์ที่เร็วกว่ามักจะได้รับการจัดอันดับสูงกว่าในผลการค้นหา
- ประสิทธิภาพบนมือถือ: ด้วยการใช้งานอุปกรณ์มือถือที่เพิ่มขึ้น การเพิ่มประสิทธิภาพสำหรับอุปกรณ์มือถือจึงเป็นสิ่งจำเป็น ผู้ใช้มือถือมักมีการเชื่อมต่อที่ช้ากว่าและหน้าจอที่เล็กกว่า ทำให้ประสิทธิภาพมีความสำคัญมากยิ่งขึ้น
- การเข้าถึงทั่วโลก: การรับประกันประสิทธิภาพที่สม่ำเสมอในภูมิภาคต่างๆ ทั่วโลกเป็นสิ่งสำคัญสำหรับธุรกิจที่มีกลุ่มเป้าหมายทั่วโลก
แนะนำ New Relic สำหรับการตรวจสอบ Frontend
New Relic มีคุณสมบัติต่างๆ ที่ออกแบบมาโดยเฉพาะสำหรับการตรวจสอบ frontend ซึ่งรวมถึง:
- Real User Monitoring (RUM): เก็บข้อมูลประสิทธิภาพแบบเรียลไทม์จากผู้ใช้จริงที่กำลังโต้ตอบกับเว็บไซต์ของคุณ
- Browser Monitoring: รับข้อมูลเชิงลึกเกี่ยวกับตัวชี้วัดประสิทธิภาพฝั่งเบราว์เซอร์ เช่น เวลาในการโหลดหน้าเว็บ ข้อผิดพลาด JavaScript และประสิทธิภาพของคำขอ AJAX
- Synthetic Monitoring: จำลองพฤติกรรมของผู้ใช้เพื่อระบุปัญหาด้านประสิทธิภาพในเชิงรุกและรับประกันความพร้อมใช้งานของระบบ
- Error Tracking: ระบุและวินิจฉัยข้อผิดพลาด JavaScript ได้อย่างรวดเร็ว ช่วยให้คุณสามารถแก้ไขปัญหาก่อนที่จะส่งผลกระทบต่อผู้ใช้
- Performance Metrics: ติดตามตัวชี้วัดประสิทธิภาพหลัก (KPIs) เช่น First Contentful Paint (FCP), Largest Contentful Paint (LCP) และ Time to Interactive (TTI)
การตั้งค่า New Relic สำหรับการตรวจสอบ Frontend
ขั้นตอนแรกคือการติดตั้ง New Relic Browser agent เข้ากับเว็บไซต์ของคุณ โดยทั่วไปสามารถทำได้โดยการเพิ่มโค้ด JavaScript snippet ลงในส่วน <head> ของเว็บไซต์
ตัวอย่าง:
<script>
(function(N,q){var n=document.createElement("script");n.type="text/javascript";n.async=true;n.crossOrigin='anonymous';n.src="https://js-agent.newrelic.com/nr-spa-1234.min.js";
document.documentElement.appendChild(n)})()
</script>
แทนที่ `nr-spa-1234.min.js` ด้วยชื่อไฟล์ New Relic Browser agent ของคุณ คุณสามารถหาไฟล์นี้ได้ในบัญชี New Relic ของคุณ
เมื่อติดตั้ง agent แล้ว New Relic จะเริ่มรวบรวมข้อมูลประสิทธิภาพจากเว็บไซต์ของคุณโดยอัตโนมัติ จากนั้นคุณสามารถเข้าถึงข้อมูลนี้ผ่านแดชบอร์ดของ New Relic
ตัวชี้วัดประสิทธิภาพหลักที่ต้องตรวจสอบ
New Relic ให้ข้อมูลมากมาย แต่สิ่งสำคัญคือต้องมุ่งเน้นไปที่ตัวชี้วัดหลักที่มีผลกระทบต่อประสบการณ์ของผู้ใช้มากที่สุด นี่คือตัวชี้วัดที่สำคัญที่สุดบางส่วนที่ควรตรวจสอบ:
Page Load Time (เวลาในการโหลดหน้าเว็บ)
เวลาในการโหลดหน้าเว็บคือเวลารวมที่ใช้ในการโหลดหน้าเว็บจนสมบูรณ์ นี่เป็นตัวชี้วัดที่สำคัญซึ่งส่งผลโดยตรงต่อประสบการณ์ของผู้ใช้ ตั้งเป้าหมายให้เวลาในการโหลดหน้าเว็บต่ำกว่า 3 วินาที New Relic จะแบ่งเวลาในการโหลดหน้าเว็บออกเป็นส่วนประกอบต่างๆ ช่วยให้คุณสามารถระบุปัญหาคอขวดที่เฉพาะเจาะจงได้
First Contentful Paint (FCP)
FCP วัดระยะเวลาที่องค์ประกอบเนื้อหาแรก (เช่น ข้อความ, รูปภาพ) ปรากฏบนหน้าจอ ตัวชี้วัดนี้ให้สัญญาณเริ่มต้นแก่ผู้ใช้ว่าหน้าเว็บกำลังโหลด คะแนน FCP ที่ดีควรอยู่ที่ประมาณ 1-2 วินาที
Largest Contentful Paint (LCP)
LCP วัดระยะเวลาที่องค์ประกอบเนื้อหาที่ใหญ่ที่สุดปรากฏให้เห็น ตัวชี้วัดนี้แสดงถึงเวลาในการโหลดที่ผู้ใช้รับรู้ได้อย่างแม่นยำยิ่งขึ้น ตั้งเป้าหมายให้คะแนน LCP ต่ำกว่า 2.5 วินาที
Time to Interactive (TTI)
TTI วัดระยะเวลาที่หน้าเว็บจะสามารถโต้ตอบได้อย่างสมบูรณ์ ซึ่งหมายความว่าผู้ใช้สามารถเริ่มโต้ตอบกับองค์ประกอบ UI ได้ คะแนน TTI ที่ดีควรอยู่ที่ประมาณ 3-4 วินาที
Error Rate (อัตราข้อผิดพลาด)
ติดตามจำนวนข้อผิดพลาด JavaScript ที่เกิดขึ้นบนเว็บไซต์ของคุณ อัตราข้อผิดพลาดที่สูงอาจบ่งชี้ถึงปัญหาพื้นฐานที่ส่งผลกระทบต่อประสบการณ์ของผู้ใช้ New Relic ให้รายงานข้อผิดพลาดโดยละเอียดซึ่งสามารถช่วยคุณวินิจฉัยและแก้ไขปัญหาได้
AJAX Request Performance (ประสิทธิภาพของคำขอ AJAX)
ตรวจสอบประสิทธิภาพของคำขอ AJAX ซึ่งมักใช้ในการโหลดข้อมูลแบบอะซิงโครนัส คำขอ AJAX ที่ช้าอาจส่งผลกระทบอย่างมากต่อการตอบสนองของเว็บไซต์ของคุณ New Relic ให้ข้อมูลเชิงลึกเกี่ยวกับระยะเวลา, รหัสสถานะ และการพึ่งพาของคำขอ AJAX
การระบุและแก้ไขปัญหาคอขวดด้านประสิทธิภาพ
เมื่อคุณระบุตัวชี้วัดประสิทธิภาพหลักที่ต้องตรวจสอบได้แล้ว ขั้นตอนต่อไปคือการใช้ New Relic เพื่อระบุและแก้ไขปัญหาคอขวดด้านประสิทธิภาพ นี่คือสาเหตุทั่วไปของปัญหาประสิทธิภาพ frontend และวิธีการแก้ไข:
ขนาดรูปภาพที่ใหญ่เกินไป
รูปภาพขนาดใหญ่อาจเพิ่มเวลาในการโหลดหน้าเว็บได้อย่างมาก ควรปรับขนาดรูปภาพโดยการบีบอัดโดยไม่ลดทอนคุณภาพ ใช้รูปแบบรูปภาพที่เหมาะสม (เช่น WebP, JPEG, PNG) และพิจารณาใช้รูปภาพแบบ responsive เพื่อแสดงขนาดรูปภาพที่แตกต่างกันตามอุปกรณ์ของผู้ใช้
ตัวอย่าง: ใช้เครื่องมืออย่าง ImageOptim หรือ TinyPNG เพื่อบีบอัดรูปภาพ ใช้รูปภาพแบบ responsive โดยใช้องค์ประกอบ <picture> หรือแอตทริบิวต์ `srcset` ในแท็ก <img>
JavaScript และ CSS ที่ไม่ได้รับการปรับปรุง
โค้ด JavaScript และ CSS ที่ไม่ได้รับการปรับปรุงสามารถทำให้เวลาในการโหลดหน้าเว็บช้าลงได้ ควรย่อขนาด (minify) และรวม (bundle) ไฟล์ JavaScript และ CSS ของคุณเพื่อลดขนาดและจำนวนคำขอ HTTP ใช้ code splitting เพื่อโหลดเฉพาะโค้ดที่จำเป็นสำหรับแต่ละหน้า
ตัวอย่าง: ใช้เครื่องมืออย่าง Webpack, Parcel หรือ Rollup เพื่อรวมและย่อขนาดไฟล์ JavaScript และ CSS ของคุณ ใช้ code splitting โดยใช้ dynamic imports
ทรัพยากรที่ขัดขวางการเรนเดอร์ (Render-Blocking Resources)
ทรัพยากรที่ขัดขวางการเรนเดอร์ เช่น ไฟล์ CSS และ JavaScript สามารถป้องกันไม่ให้เบราว์เซอร์เรนเดอร์หน้าเว็บจนกว่าจะดาวน์โหลดและแยกวิเคราะห์เสร็จสิ้น ควรเลื่อน (defer) หรือโหลดไฟล์ CSS และ JavaScript ที่ไม่สำคัญแบบอะซิงโครนัสเพื่อปรับปรุงการเรนเดอร์เริ่มต้นของหน้า
ตัวอย่าง: ใช้แอตทริบิวต์ `async` หรือ `defer` ในแท็ก <script> เพื่อโหลดไฟล์ JavaScript แบบอะซิงโครนัส ใช้องค์ประกอบ <link rel="preload" as="style" href="styles.css" onload="this.onload=null;this.rel='stylesheet'"> เพื่อโหลดไฟล์ CSS ล่วงหน้า
สคริปต์ของบุคคลที่สาม (Third-Party Scripts)
สคริปต์ของบุคคลที่สาม เช่น ตัวติดตามการวิเคราะห์ วิดเจ็ตโซเชียลมีเดีย และสคริปต์โฆษณา สามารถส่งผลกระทบอย่างมากต่อประสิทธิภาพ ควรประเมินผลกระทบของสคริปต์ของบุคคลที่สามแต่ละตัวและลบตัวที่ไม่จำเป็นออกไป โหลดสคริปต์ของบุคคลที่สามแบบอะซิงโครนัสและพิจารณาใช้ lazy loading
ตัวอย่าง: ใช้ Google Tag Manager เพื่อจัดการสคริปต์ของบุคคลที่สามของคุณ ใช้ lazy loading สำหรับวิดเจ็ตโซเชียลมีเดียและสคริปต์อื่นๆ ที่ไม่สำคัญ
ความหน่วงของเครือข่าย (Network Latency)
ความหน่วงของเครือข่ายสามารถส่งผลกระทบอย่างมากต่อเวลาในการโหลดหน้าเว็บ โดยเฉพาะสำหรับผู้ใช้ในภูมิภาคต่างๆ ควรใช้ Content Delivery Network (CDN) เพื่อแคชเนื้อหาของเว็บไซต์ของคุณให้ใกล้กับผู้ใช้มากขึ้น ปรับปรุงเว็บไซต์ของคุณสำหรับ HTTP/2 และเปิดใช้งานการบีบอัด
ตัวอย่าง: ใช้ CDN เช่น Cloudflare, Akamai หรือ Amazon CloudFront เพื่อกระจายเนื้อหาของเว็บไซต์ของคุณไปทั่วโลก เปิดใช้งานการบีบอัด Gzip หรือ Brotli เพื่อลดขนาดไฟล์ของเว็บไซต์
ขนาด DOM ที่มากเกินไป
Document Object Model (DOM) ที่มีขนาดใหญ่และซับซ้อนสามารถทำให้การเรนเดอร์หน้าเว็บและการทำงานของ JavaScript ช้าลง ควรทำให้โครงสร้าง DOM ของคุณง่ายขึ้นโดยการลบองค์ประกอบที่ไม่จำเป็นออกและใช้ CSS selectors ที่มีประสิทธิภาพ
ตัวอย่าง: ใช้เครื่องมืออย่าง Chrome DevTools เพื่อวิเคราะห์โครงสร้าง DOM ของคุณและระบุส่วนที่สามารถปรับปรุงได้ หลีกเลี่ยงองค์ประกอบที่ซ้อนกันลึกเกินไปและการใช้ inline styles มากเกินไป
การใช้ประโยชน์จากคุณสมบัติของ New Relic เพื่อข้อมูลเชิงลึกที่ลึกยิ่งขึ้น
New Relic มีคุณสมบัติขั้นสูงหลายอย่างที่สามารถให้ข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพของ frontend ได้ลึกยิ่งขึ้น
Browser Interactions (การโต้ตอบของเบราว์เซอร์)
การโต้ตอบของเบราว์เซอร์ช่วยให้คุณสามารถติดตามการกระทำของผู้ใช้ที่เฉพาะเจาะจง เช่น การคลิกปุ่ม การส่งฟอร์ม และการเปลี่ยนหน้า ซึ่งสามารถช่วยคุณระบุปัญหาด้านประสิทธิภาพที่เกี่ยวข้องกับโฟลว์ของผู้ใช้ที่เฉพาะเจาะจงได้
Custom Events (เหตุการณ์ที่กำหนดเอง)
เหตุการณ์ที่กำหนดเองช่วยให้คุณสามารถติดตามเหตุการณ์เฉพาะที่เกี่ยวข้องกับแอปพลิเคชันของคุณ ซึ่งมีประโยชน์สำหรับการตรวจสอบประสิทธิภาพของคุณสมบัติเฉพาะหรือติดตามพฤติกรรมหลักของผู้ใช้
Synthetic Monitoring (การตรวจสอบสังเคราะห์)
การตรวจสอบสังเคราะห์ช่วยให้คุณสามารถตรวจสอบประสิทธิภาพและความพร้อมใช้งานของเว็บไซต์ของคุณในเชิงรุกโดยการจำลองพฤติกรรมของผู้ใช้ ซึ่งสามารถช่วยคุณระบุปัญหาด้านประสิทธิภาพก่อนที่จะส่งผลกระทบต่อผู้ใช้จริง
แนวทางปฏิบัติที่ดีที่สุดสำหรับการตรวจสอบประสิทธิภาพ Frontend อย่างต่อเนื่อง
การตรวจสอบประสิทธิภาพ frontend เป็นกระบวนการที่ต่อเนื่อง นี่คือแนวทางปฏิบัติที่ดีที่สุดบางประการที่ควรปฏิบัติตาม:
- ตรวจสอบตัวชี้วัดประสิทธิภาพหลักของคุณอย่างสม่ำเสมอ ตั้งค่าการแจ้งเตือนเพื่อรับทราบการเปลี่ยนแปลงที่สำคัญใดๆ ในด้านประสิทธิภาพ
- วิเคราะห์ข้อมูลประสิทธิภาพเพื่อระบุแนวโน้มและรูปแบบ ใช้ข้อมูลนี้เพื่อจัดลำดับความสำคัญของความพยายามในการเพิ่มประสิทธิภาพของคุณ
- ทดสอบประสิทธิภาพของเว็บไซต์ของคุณอย่างสม่ำเสมอ ใช้เครื่องมืออย่าง WebPageTest หรือ Lighthouse เพื่อระบุปัญหาที่อาจเกิดขึ้น
- ติดตามแนวทางปฏิบัติที่ดีที่สุดล่าสุดด้านประสิทธิภาพ frontend อยู่เสมอ ภูมิทัศน์ของการพัฒนาเว็บมีการพัฒนาอย่างต่อเนื่อง ดังนั้นจึงเป็นสิ่งสำคัญที่จะต้องรับทราบข้อมูลเกี่ยวกับเทคนิคและเทคโนโลยีใหม่ๆ
- ร่วมมือกับทีม backend ของคุณ ประสิทธิภาพของ frontend มักได้รับผลกระทบจากประสิทธิภาพของ backend ดังนั้นจึงเป็นสิ่งสำคัญที่จะต้องทำงานร่วมกันเพื่อเพิ่มประสิทธิภาพของทั้งแอปพลิเคชัน
ตัวอย่างจริงและกรณีศึกษา
ลองดูตัวอย่างจริงบางส่วนว่า New Relic สามารถนำมาใช้เพื่อปรับปรุงประสิทธิภาพของ frontend ได้อย่างไร:
เว็บไซต์ E-commerce
เว็บไซต์ e-commerce แห่งหนึ่งประสบปัญหาอัตราการตีกลับ (bounce rates) สูงในหน้าผลิตภัณฑ์ เมื่อใช้ New Relic พวกเขาค้นพบว่าหน้าผลิตภัณฑ์ใช้เวลาโหลดนานเนื่องจากขนาดรูปภาพที่ใหญ่เกินไป ด้วยการปรับขนาดรูปภาพและใช้ lazy loading พวกเขาสามารถลดเวลาในการโหลดหน้าเว็บลง 50% และปรับปรุงอัตราการแปลงได้อย่างมีนัยสำคัญ
เว็บไซต์ข่าว
เว็บไซต์ข่าวแห่งหนึ่งประสบปัญหาประสิทธิภาพช้าบนเว็บไซต์มือถือ เมื่อใช้ New Relic พวกเขาค้นพบว่าเว็บไซต์มือถือกำลังโหลด JavaScript จำนวนมากที่ไม่จำเป็นสำหรับการเรนเดอร์เริ่มต้นของหน้า ด้วยการเลื่อนการโหลด JavaScript ที่ไม่สำคัญออกไป พวกเขาสามารถปรับปรุงประสิทธิภาพของเว็บไซต์มือถือและมอบประสบการณ์ผู้ใช้ที่ดีขึ้น
แอปพลิเคชัน SaaS
แอปพลิเคชัน SaaS แห่งหนึ่งประสบปัญหาประสิทธิภาพของคำขอ AJAX ที่ช้า เมื่อใช้ New Relic พวกเขาค้นพบว่าคำขอ AJAX ใช้เวลานานเนื่องจากการสืบค้นฐานข้อมูลที่ไม่มีประสิทธิภาพ ด้วยการปรับปรุงการสืบค้นฐานข้อมูล พวกเขาสามารถปรับปรุงประสิทธิภาพของคำขอ AJAX ได้อย่างมีนัยสำคัญและมอบประสบการณ์ผู้ใช้ที่ตอบสนองได้ดียิ่งขึ้น
ข้อควรพิจารณาระดับโลกสำหรับประสิทธิภาพ Frontend
เมื่อเพิ่มประสิทธิภาพ frontend สำหรับผู้ชมทั่วโลก สิ่งสำคัญคือต้องพิจารณาปัจจัยต่อไปนี้:
- ความหน่วงของเครือข่าย: ความหน่วงของเครือข่ายอาจแตกต่างกันอย่างมากในแต่ละภูมิภาค ควรใช้ CDN เพื่อแคชเนื้อหาของเว็บไซต์ของคุณให้ใกล้กับผู้ใช้มากขึ้น
- ความสามารถของอุปกรณ์: ผู้ใช้ในภูมิภาคต่างๆ อาจมีอุปกรณ์ที่แตกต่างกันซึ่งมีความสามารถที่หลากหลาย ควรปรับปรุงเว็บไซต์ของคุณสำหรับอุปกรณ์และขนาดหน้าจอที่หลากหลาย
- ภาษาและการแปล (Localization): ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณได้รับการแปลเป็นภาษาท้องถิ่นสำหรับภาษาและภูมิภาคต่างๆ อย่างเหมาะสม ใช้การเข้ารหัสตัวอักษรและรูปแบบวันที่/เวลาที่เหมาะสม
- ข้อควรพิจารณาทางวัฒนธรรม: พิจารณาความแตกต่างทางวัฒนธรรมเมื่อออกแบบเว็บไซต์ของคุณ ใช้ภาพและภาษาที่เหมาะสมและละเอียดอ่อนต่อวัฒนธรรมที่แตกต่างกัน
สรุป
การเพิ่มประสิทธิภาพ frontend เป็นกระบวนการต่อเนื่องที่ต้องมีการตรวจสอบ วิเคราะห์ และปรับปรุงอย่างสม่ำเสมอ New Relic มีชุดเครื่องมืออันทรงพลังสำหรับการตรวจสอบและปรับปรุงประสิทธิภาพ frontend ช่วยให้คุณสามารถมอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยมและบรรลุเป้าหมายทางธุรกิจของคุณได้ ด้วยการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดที่ระบุไว้ในคู่มือนี้ คุณสามารถใช้ประโยชน์จาก New Relic เพื่อระบุและแก้ไขปัญหาคอขวด ปรับปรุงความเร็วของเว็บไซต์ และเพิ่มการมีส่วนร่วมของผู้ใช้
อย่าลืมให้ความสำคัญกับประสบการณ์ของผู้ใช้ ตรวจสอบตัวชี้วัดประสิทธิภาพหลัก และติดตามแนวทางปฏิบัติที่ดีที่สุดล่าสุดด้านประสิทธิภาพ frontend อยู่เสมอ ด้วยการเพิ่มประสิทธิภาพ frontend ของคุณอย่างต่อเนื่อง คุณสามารถมั่นใจได้ว่าเว็บไซต์ของคุณจะรวดเร็ว ตอบสนองได้ดี และน่าสนใจสำหรับผู้ใช้ทั่วโลก
แหล่งข้อมูลเพิ่มเติม: