Frontend DataDog: การตรวจสอบโครงสร้างพื้นฐานที่ครอบคลุมสำหรับเว็บแอปพลิเคชันสมัยใหม่

ในภูมิทัศน์ดิจิทัลที่เปลี่ยนแปลงอย่างรวดเร็วในปัจจุบัน การมอบประสบการณ์เว็บแอปพลิเคชันที่ราบรื่นและมีประสิทธิภาพเป็นสิ่งสำคัญยิ่ง ผู้ใช้คาดหวังว่าเว็บไซต์และแอปพลิเคชันจะโหลดได้เร็ว ทำงานได้อย่างไม่มีที่ติ และให้ประสบการณ์ที่สอดคล้องกันในทุกอุปกรณ์และทุกสถานที่ ประสิทธิภาพที่ไม่ดีอาจนำไปสู่ความคับข้องใจของผู้ใช้ การละทิ้ง และท้ายที่สุดคือการสูญเสียรายได้ นี่คือจุดที่การตรวจสอบโครงสร้างพื้นฐาน frontend ที่แข็งแกร่งเข้ามามีบทบาท และ DataDog ก็เป็นเครื่องมือที่ทรงพลังเพื่อให้บรรลุเป้าหมายนี้

คู่มือฉบับสมบูรณ์นี้จะสำรวจวิธีการใช้ประโยชน์จาก DataDog สำหรับการตรวจสอบโครงสร้างพื้นฐาน frontend โดยครอบคลุมประเด็นสำคัญต่างๆ เช่น:

• การตั้งค่า DataDog สำหรับการตรวจสอบ frontend
• เมตริกสำคัญที่ต้องติดตามสำหรับประสิทธิภาพ frontend
• การตรวจสอบผู้ใช้จริง (Real User Monitoring - RUM) ด้วย DataDog
• การทดสอบสังเคราะห์ (Synthetic Testing) เพื่อการตรวจจับปัญหาเชิงรุก
• แนวทางปฏิบัติที่ดีที่สุดสำหรับการเพิ่มประสิทธิภาพ frontend ด้วยข้อมูลเชิงลึกจาก DataDog

การตรวจสอบโครงสร้างพื้นฐาน Frontend คืออะไร?

การตรวจสอบโครงสร้างพื้นฐาน frontend เกี่ยวข้องกับการติดตามและวิเคราะห์ประสิทธิภาพและสถานะของส่วนประกอบที่ประกอบกันเป็นส่วนที่ผู้ใช้มองเห็นของเว็บแอปพลิเคชัน ซึ่งรวมถึง:

• ประสิทธิภาพของเบราว์เซอร์: เวลาในการโหลด, ประสิทธิภาพการเรนเดอร์, การทำงานของ JavaScript และการโหลดทรัพยากร
• ประสิทธิภาพของเครือข่าย: Latency, ความล้มเหลวของคำขอ และการแก้ไข DNS
• บริการของบุคคลที่สาม: ประสิทธิภาพและความพร้อมใช้งานของ API, CDN และบริการภายนอกอื่นๆ ที่ frontend ใช้
• ประสบการณ์ผู้ใช้: การวัดปฏิสัมพันธ์ของผู้ใช้, อัตราข้อผิดพลาด และประสิทธิภาพที่ผู้ใช้รับรู้

ด้วยการตรวจสอบสิ่งเหล่านี้ คุณจะสามารถระบุและแก้ไขปัญหาคอขวดด้านประสิทธิภาพ ป้องกันข้อผิดพลาด และรับประกันประสบการณ์ผู้ใช้ที่ราบรื่นสำหรับผู้ชมทั่วโลกของคุณ ตัวอย่างเช่น เวลาในการโหลดที่ช้าสำหรับผู้ใช้ในออสเตรเลียอาจบ่งชี้ถึงปัญหาเกี่ยวกับการกำหนดค่า CDN ในภูมิภาคนั้น

ทำไมต้องเลือก DataDog สำหรับการตรวจสอบ Frontend?

DataDog มอบแพลตฟอร์มที่เป็นหนึ่งเดียวสำหรับการตรวจสอบโครงสร้างพื้นฐานทั้งหมดของคุณ รวมถึงระบบทั้ง backend และ frontend คุณสมบัติหลักสำหรับการตรวจสอบ frontend ได้แก่:

• การตรวจสอบผู้ใช้จริง (RUM): รับข้อมูลเชิงลึกเกี่ยวกับประสบการณ์ของผู้ใช้จริงโดยการรวบรวมข้อมูลจากผู้ใช้จริงที่กำลังเรียกดูเว็บไซต์หรือแอปพลิเคชันของคุณ
• การทดสอบสังเคราะห์ (Synthetic Testing): ทดสอบประสิทธิภาพและความพร้อมใช้งานของแอปพลิเคชันของคุณในเชิงรุกจากสถานที่ต่างๆ ทั่วโลก
• การติดตามข้อผิดพลาด: จับและวิเคราะห์ข้อผิดพลาดของ JavaScript เพื่อระบุและแก้ไขข้อบกพร่องได้อย่างรวดเร็ว
• แดชบอร์ดและการแจ้งเตือน: สร้างแดชบอร์ดที่กำหนดเองเพื่อแสดงเมตริกสำคัญและตั้งค่าการแจ้งเตือนเพื่อรับการแจ้งเตือนเมื่อเกิดปัญหาด้านประสิทธิภาพ
• การผสานรวมกับเครื่องมืออื่นๆ: DataDog ผสานรวมกับเครื่องมืออื่นๆ ในสแต็กการพัฒนาและการดำเนินงานของคุณได้อย่างราบรื่น

การตั้งค่า DataDog สำหรับการตรวจสอบ Frontend

การตั้งค่า DataDog สำหรับการตรวจสอบ frontend ประกอบด้วยขั้นตอนต่อไปนี้:

1. การสร้างบัญชี DataDog

หากคุณยังไม่มีบัญชี ให้ลงทะเบียนบัญชี DataDog ที่ เว็บไซต์ของ DataDog พวกเขามีเวอร์ชันทดลองใช้ฟรีเพื่อให้คุณเริ่มต้นได้

2. การติดตั้ง DataDog RUM Browser SDK

DataDog RUM Browser SDK เป็นไลบรารี JavaScript ที่คุณต้องรวมไว้ในเว็บแอปพลิเคชันของคุณเพื่อรวบรวมข้อมูลเกี่ยวกับการโต้ตอบของผู้ใช้และประสิทธิภาพ คุณสามารถติดตั้งได้โดยใช้ npm หรือ yarn:

            npm install @datadog/browser-rum
            

              
                Copy
              
            
          

หรือ:

            yarn add @datadog/browser-rum
            

              
                Copy
              
            
          

3. การเริ่มต้น RUM SDK

ในไฟล์ JavaScript หลักของแอปพลิเคชันของคุณ ให้เริ่มต้น RUM SDK ด้วย DataDog application ID, client token และ service name ของคุณ:

            import { datadogRum } from '@datadog/browser-rum'

datadogRum.init({
  applicationId: 'YOUR_APPLICATION_ID',
  clientToken: 'YOUR_CLIENT_TOKEN',
  service: 'your-service-name',
  env: 'production',
  version: '1.0.0',
  sampleRate: 100,
  premiumSampleRate: 100,
  trackResources: true,
  trackLongTasks: true,
  trackUserInteractions: true,
});

datadogRum.startSessionReplayRecording();

            

              
                Copy
              
            
          

คำอธิบายพารามิเตอร์:

• applicationId: Application ID ของ DataDog ของคุณ
• clientToken: Client token ของ DataDog ของคุณ
• service: ชื่อของบริการของคุณ
• env: สภาพแวดล้อม (เช่น production, staging)
• version: เวอร์ชันของแอปพลิเคชันของคุณ
• sampleRate: เปอร์เซ็นต์ของเซสชันที่จะติดตาม ค่า 100 หมายความว่าทุกเซสชันจะถูกติดตาม
• premiumSampleRate: เปอร์เซ็นต์ของเซสชันที่จะบันทึก session replay
• trackResources: จะติดตามเวลาในการโหลดทรัพยากรหรือไม่
• trackLongTasks: จะติดตาม long tasks ที่บล็อก main thread หรือไม่
• trackUserInteractions: จะติดตามการโต้ตอบของผู้ใช้ เช่น การคลิกและการส่งฟอร์มหรือไม่

สำคัญ: แทนที่ `YOUR_APPLICATION_ID` และ `YOUR_CLIENT_TOKEN` ด้วยข้อมูลประจำตัว DataDog ที่แท้จริงของคุณ ซึ่งจะพบได้ในการตั้งค่าบัญชี DataDog ของคุณภายใต้การตั้งค่า RUM

4. การกำหนดค่า Content Security Policy (CSP)

หากคุณใช้ Content Security Policy (CSP) คุณต้องกำหนดค่าเพื่อให้ DataDog สามารถรวบรวมข้อมูลได้ เพิ่มคำสั่งต่อไปนี้ใน CSP ของคุณ:

            connect-src https://*.datadoghq.com https://*.data.dog;
img-src https://*.datadoghq.com https://*.data.dog data:;
script-src 'self' https://*.datadoghq.com https://*.data.dog;

            

              
                Copy
              
            
          

5. การปรับใช้แอปพลิเคชันของคุณ

ปรับใช้แอปพลิเคชันของคุณโดยผสานรวม DataDog RUM SDK เข้าด้วยกัน ตอนนี้ DataDog จะเริ่มรวบรวมข้อมูลเกี่ยวกับเซสชันของผู้ใช้ เมตริกประสิทธิภาพ และข้อผิดพลาด

เมตริกสำคัญที่ต้องติดตามสำหรับประสิทธิภาพ Frontend

เมื่อคุณตั้งค่า DataDog เรียบร้อยแล้ว คุณต้องรู้ว่าควรติดตามเมตริกใดบ้างเพื่อรับข้อมูลเชิงลึกที่มีความหมายเกี่ยวกับประสิทธิภาพ frontend ของคุณ นี่คือเมตริกที่สำคัญที่สุดบางส่วน:

1. Page Load Time

Page load time คือเวลาที่ใช้ในการโหลดหน้าเว็บอย่างสมบูรณ์และพร้อมใช้งาน เป็นเมตริกที่สำคัญสำหรับประสบการณ์ของผู้ใช้ DataDog มีเมตริกต่างๆ ที่เกี่ยวข้องกับเวลาในการโหลดหน้าเว็บ ได้แก่:

• First Contentful Paint (FCP): เวลาที่ใช้สำหรับเนื้อหาแรก (ข้อความ, รูปภาพ, ฯลฯ) ที่จะปรากฏบนหน้าจอ
• Largest Contentful Paint (LCP): เวลาที่ใช้สำหรับองค์ประกอบเนื้อหาที่ใหญ่ที่สุดที่จะปรากฏบนหน้าจอ LCP เป็นเมตริกหลักของ core web vital
• First Input Delay (FID): เวลาที่เบราว์เซอร์ใช้ในการตอบสนองต่อการโต้ตอบของผู้ใช้ครั้งแรก (เช่น การคลิก) FID ก็เป็นเมตริกหลักของ core web vital เช่นกัน
• Time to Interactive (TTI): เวลาที่ใช้เพื่อให้หน้าเว็บพร้อมสำหรับการโต้ตอบอย่างสมบูรณ์
• Load Event End: เวลาที่เหตุการณ์ load เสร็จสิ้น

ตั้งเป้าให้ LCP อยู่ที่ 2.5 วินาทีหรือน้อยกว่า, FID อยู่ที่ 100 มิลลิวินาทีหรือน้อยกว่า และ TTI อยู่ที่ 5 วินาทีหรือน้อยกว่า นี่คือเกณฑ์มาตรฐานที่ Google แนะนำสำหรับประสบการณ์ผู้ใช้ที่ดี

ตัวอย่างสถานการณ์: ลองนึกภาพเว็บไซต์อีคอมเมิร์ซ หากหน้าสินค้าใช้เวลาในการโหลดนานกว่า 3 วินาที (LCP สูง) ผู้ใช้อาจละทิ้งตะกร้าสินค้าเนื่องจากความคับข้องใจ การตรวจสอบ LCP ช่วยระบุและแก้ไขความล่าช้าดังกล่าว ซึ่งอาจนำไปสู่การเพิ่ม Conversion การขาย

2. JavaScript Errors

ข้อผิดพลาดของ JavaScript สามารถขัดขวางประสบการณ์ของผู้ใช้และทำให้ฟีเจอร์ต่างๆ ทำงานไม่ถูกต้อง DataDog จะจับและรายงานข้อผิดพลาดของ JavaScript โดยอัตโนมัติ ช่วยให้คุณสามารถระบุและแก้ไขข้อบกพร่องได้อย่างรวดเร็ว

ตัวอย่างสถานการณ์: การเพิ่มขึ้นอย่างกะทันหันของข้อผิดพลาด JavaScript ที่รายงานจากผู้ใช้ในญี่ปุ่นอาจบ่งชี้ถึงปัญหาความเข้ากันได้กับเบราว์เซอร์เวอร์ชันใดเวอร์ชันหนึ่ง หรือปัญหากับทรัพยากรที่แปลเป็นภาษาท้องถิ่น

3. Resource Load Time

Resource load time คือเวลาที่ใช้ในการโหลดทรัพยากรแต่ละรายการ เช่น รูปภาพ, ไฟล์ CSS และไฟล์ JavaScript เวลาในการโหลดทรัพยากรที่นานอาจส่งผลให้เวลาในการโหลดหน้าเว็บช้าลง

ตัวอย่างสถานการณ์: รูปภาพขนาดใหญ่ที่ไม่ได้ปรับให้เหมาะสมจะเพิ่มเวลาในการโหลดหน้าเว็บอย่างมาก ข้อมูล resource timing ของ DataDog ช่วยระบุคอขวดเหล่านี้ ทำให้สามารถพยายามปรับปรุงประสิทธิภาพได้ เช่น การบีบอัดรูปภาพและการใช้รูปแบบรูปภาพที่ทันสมัยอย่าง WebP

4. API Latency

API latency คือเวลาที่แอปพลิเคชันของคุณใช้ในการสื่อสารกับ API ของ backend ค่า API latency ที่สูงอาจส่งผลต่อประสิทธิภาพของแอปพลิเคชันของคุณ

ตัวอย่างสถานการณ์: หาก API endpoint ที่ให้บริการรายละเอียดสินค้าเกิดความล่าช้า หน้าสินค้าทั้งหมดจะโหลดช้าลง การตรวจสอบ API latency และเชื่อมโยงกับเมตริก frontend อื่นๆ (เช่น LCP) จะช่วยระบุแหล่งที่มาของปัญหาด้านประสิทธิภาพ

5. User Actions

การติดตามการกระทำของผู้ใช้ เช่น การคลิก, การส่งฟอร์ม และการเปลี่ยนหน้า สามารถให้ข้อมูลเชิงลึกที่มีค่าเกี่ยวกับพฤติกรรมของผู้ใช้และระบุส่วนที่ผู้ใช้ประสบปัญหา

ตัวอย่างสถานการณ์: การวิเคราะห์เวลาที่ผู้ใช้ใช้ในการทำกระบวนการชำระเงินให้เสร็จสิ้นสามารถเปิดเผยคอขวดในขั้นตอนการใช้งาน หากผู้ใช้ใช้เวลาส่วนใหญ่ในขั้นตอนใดขั้นตอนหนึ่ง อาจบ่งชี้ถึงปัญหาด้านการใช้งานหรือปัญหาทางเทคนิคที่ต้องแก้ไข

การตรวจสอบผู้ใช้จริง (RUM) ด้วย DataDog

Real User Monitoring (RUM) เป็นเทคนิคที่ทรงพลังในการทำความเข้าใจประสบการณ์ผู้ใช้จริงของเว็บแอปพลิเคชันของคุณ DataDog RUM รวบรวมข้อมูลจากผู้ใช้จริงที่กำลังเรียกดูเว็บไซต์หรือแอปพลิเคชันของคุณ ให้ข้อมูลเชิงลึกที่มีค่าเกี่ยวกับประสิทธิภาพ ข้อผิดพลาด และพฤติกรรมของผู้ใช้

ประโยชน์ของ RUM

• ระบุคอขวดด้านประสิทธิภาพ: RUM ช่วยให้คุณสามารถระบุส่วนที่ช้าที่สุดของแอปพลิเคชันของคุณและจัดลำดับความสำคัญของความพยายามในการเพิ่มประสิทธิภาพ
• ทำความเข้าใจพฤติกรรมของผู้ใช้: RUM ให้ข้อมูลเชิงลึกเกี่ยวกับวิธีที่ผู้ใช้โต้ตอบกับแอปพลิเคชันของคุณ ช่วยให้คุณระบุส่วนที่ผู้ใช้กำลังประสบปัญหา
• ติดตามอัตราข้อผิดพลาด: RUM จะจับและรายงานข้อผิดพลาดของ JavaScript โดยอัตโนมัติ ช่วยให้คุณระบุและแก้ไขข้อบกพร่องได้อย่างรวดเร็ว
• ตรวจสอบความพึงพอใจของผู้ใช้: โดยการติดตามเมตริกต่างๆ เช่น เวลาในการโหลดหน้าเว็บและอัตราข้อผิดพลาด คุณจะสามารถรับรู้ได้ว่าผู้ใช้พึงพอใจกับแอปพลิเคชันของคุณมากน้อยเพียงใด
• การวิเคราะห์ประสิทธิภาพตามภูมิศาสตร์: RUM ช่วยให้คุณสามารถวิเคราะห์ประสิทธิภาพตามตำแหน่งของผู้ใช้ เผยให้เห็นปัญหาที่อาจเกิดขึ้นกับการกำหนดค่า CDN หรือตำแหน่งของเซิร์ฟเวอร์

คุณสมบัติหลักของ RUM ใน DataDog

• Session Replay: บันทึกและเล่นซ้ำเซสชันของผู้ใช้เพื่อดูว่าผู้ใช้กำลังประสบกับอะไร นี่เป็นสิ่งล้ำค่าสำหรับการดีบักปัญหาและทำความเข้าใจพฤติกรรมของผู้ใช้
• Resource Timing: ติดตามเวลาในการโหลดของทรัพยากรแต่ละรายการ เช่น รูปภาพ, ไฟล์ CSS และไฟล์ JavaScript
• Error Tracking: จับและวิเคราะห์ข้อผิดพลาดของ JavaScript เพื่อระบุและแก้ไขข้อบกพร่องได้อย่างรวดเร็ว
• User Analytics: วิเคราะห์พฤติกรรมของผู้ใช้ เช่น การคลิก, การส่งฟอร์ม และการเปลี่ยนหน้า
• Custom Events: ติดตามเหตุการณ์ที่กำหนดเองเฉพาะสำหรับแอปพลิเคชันของคุณ

การใช้ Session Replay

Session Replay ช่วยให้คุณสามารถบันทึกและเล่นซ้ำเซสชันของผู้ใช้ ให้ภาพแทนของประสบการณ์ผู้ใช้ ซึ่งมีประโยชน์อย่างยิ่งสำหรับการดีบักปัญหาที่ยากต่อการทำซ้ำ

ในการเปิดใช้งาน Session Replay คุณต้องเริ่มต้น RUM SDK ด้วยตัวเลือก `premiumSampleRate` ที่ตั้งค่าเป็นค่าที่มากกว่า 0 ตัวอย่างเช่น หากต้องการบันทึก session replays สำหรับ 10% ของเซสชัน ให้ตั้งค่า `premiumSampleRate` เป็น 10:

            datadogRum.init({
  // ... other options
  premiumSampleRate: 10,
});

datadogRum.startSessionReplayRecording();

            

              
                Copy
              
            
          

เมื่อเปิดใช้งาน Session Replay แล้ว คุณสามารถดู session replays ได้ใน DataDog RUM Explorer เลือกเซสชันและคลิกปุ่ม "Replay Session" เพื่อดูการเล่นซ้ำ

การทดสอบสังเคราะห์ (Synthetic Testing) เพื่อการตรวจจับปัญหาเชิงรุก

การทดสอบสังเคราะห์เกี่ยวข้องกับการจำลองการโต้ตอบของผู้ใช้กับแอปพลิเคชันของคุณเพื่อระบุปัญหาด้านประสิทธิภาพและปัญหาความพร้อมใช้งานในเชิงรุก DataDog Synthetic Monitoring ช่วยให้คุณสามารถสร้างการทดสอบที่ทำงานโดยอัตโนมัติตามกำหนดเวลา แจ้งเตือนคุณถึงปัญหาก่อนที่จะส่งผลกระทบต่อผู้ใช้จริง

ประโยชน์ของการทดสอบสังเคราะห์

• การตรวจจับปัญหาเชิงรุก: ระบุปัญหาด้านประสิทธิภาพและความพร้อมใช้งานก่อนที่จะส่งผลกระทบต่อผู้ใช้จริง
• ความครอบคลุมทั่วโลก: ทดสอบแอปพลิเคชันของคุณจากสถานที่ต่างๆ ทั่วโลกเพื่อให้แน่ใจว่ามีประสิทธิภาพที่สอดคล้องกันสำหรับผู้ใช้ทุกคน
• การตรวจสอบ API: ตรวจสอบประสิทธิภาพและความพร้อมใช้งานของ API ของคุณ
• การทดสอบ Regression: ใช้การทดสอบสังเคราะห์เพื่อให้แน่ใจว่าการเปลี่ยนแปลงโค้ดใหม่จะไม่ทำให้ประสิทธิภาพถดถอย
• การตรวจสอบบริการของบุคคลที่สาม: ติดตามประสิทธิภาพของบริการของบุคคลที่สามที่แอปพลิเคชันของคุณต้องพึ่งพา

ประเภทของการทดสอบสังเคราะห์

DataDog มีการทดสอบสังเคราะห์หลายประเภท:

• Browser Tests: จำลองการโต้ตอบของผู้ใช้ในเบราว์เซอร์จริง ช่วยให้คุณสามารถทดสอบฟังก์ชันการทำงานแบบ end-to-end ของแอปพลิเคชันของคุณ การทดสอบเหล่านี้สามารถดำเนินการต่างๆ เช่น การคลิกปุ่ม, การกรอกฟอร์ม และการนำทางระหว่างหน้าต่างๆ
• API Tests: ทดสอบประสิทธิภาพและความพร้อมใช้งานของ API ของคุณโดยการส่งคำขอ HTTP และตรวจสอบการตอบสนอง
• SSL Certificate Tests: ตรวจสอบวันหมดอายุและความถูกต้องของใบรับรอง SSL ของคุณ
• DNS Tests: ตรวจสอบว่าระเบียน DNS ของคุณได้รับการกำหนดค่าอย่างถูกต้อง

การสร้าง Browser Test

ในการสร้าง browser test ให้ทำตามขั้นตอนเหล่านี้:

1. ใน UI ของ DataDog ไปที่ Synthetic Monitoring > New Test > Browser Test
2. ป้อน URL ของหน้าที่คุณต้องการทดสอบ
3. บันทึกขั้นตอนที่คุณต้องการจำลองโดยใช้ DataDog Recorder ตัว Recorder จะบันทึกการกระทำของคุณและสร้างโค้ดสำหรับการทดสอบ
4. กำหนดการตั้งค่าการทดสอบ เช่น สถานที่ที่จะทำการทดสอบ, ความถี่ของการทดสอบ และการแจ้งเตือนที่จะทริกเกอร์หากการทดสอบล้มเหลว
5. บันทึกการทดสอบ

ตัวอย่างสถานการณ์: ลองนึกภาพว่าคุณต้องการทดสอบกระบวนการชำระเงินของเว็บไซต์อีคอมเมิร์ซ คุณสามารถสร้าง browser test ที่จำลองผู้ใช้เพิ่มสินค้าลงในตะกร้า, ป้อนข้อมูลการจัดส่ง และทำการซื้อให้เสร็จสิ้น หากการทดสอบล้มเหลวในขั้นตอนใดขั้นตอนหนึ่ง คุณจะได้รับการแจ้งเตือน ทำให้คุณสามารถแก้ไขปัญหาได้ก่อนที่ผู้ใช้จริงจะได้รับผลกระทบ

การสร้าง API Test

ในการสร้าง API test ให้ทำตามขั้นตอนเหล่านี้:

1. ใน UI ของ DataDog ไปที่ Synthetic Monitoring > New Test > API Test
2. ป้อน URL ของ API endpoint ที่คุณต้องการทดสอบ
3. กำหนดค่าคำขอ HTTP รวมถึง method (GET, POST, PUT, DELETE), headers และ body
4. กำหนด assertions เพื่อตรวจสอบการตอบสนอง เช่น การตรวจสอบ status code, content type หรือการมีอยู่ของข้อมูลเฉพาะใน response body
5. กำหนดการตั้งค่าการทดสอบ เช่น สถานที่ที่จะทำการทดสอบ, ความถี่ของการทดสอบ และการแจ้งเตือนที่จะทริกเกอร์หากการทดสอบล้มเหลว
6. บันทึกการทดสอบ

ตัวอย่างสถานการณ์: คุณสามารถสร้าง API test เพื่อตรวจสอบความพร้อมใช้งานของ API endpoint ที่สำคัญซึ่ง frontend ของคุณต้องพึ่งพา การทดสอบสามารถส่งคำขอไปยัง endpoint และตรวจสอบว่ามันส่งคืน status code 200 OK และ response body มีข้อมูลที่คาดหวัง หากการทดสอบล้มเหลว คุณจะได้รับการแจ้งเตือน ทำให้คุณสามารถตรวจสอบปัญหาและป้องกันไม่ให้ส่งผลกระทบต่อผู้ใช้ของคุณ

แนวทางปฏิบัติที่ดีที่สุดสำหรับการเพิ่มประสิทธิภาพ Frontend ด้วยข้อมูลเชิงลึกจาก DataDog

เมื่อคุณตั้งค่า DataDog และกำลังรวบรวมข้อมูลแล้ว คุณสามารถใช้ข้อมูลเชิงลึกเพื่อเพิ่มประสิทธิภาพ frontend ของคุณได้ นี่คือแนวทางปฏิบัติที่ดีที่สุดบางประการ:

1. ปรับปรุงรูปภาพให้เหมาะสม

รูปภาพขนาดใหญ่ที่ไม่ได้ปรับให้เหมาะสมเป็นสาเหตุทั่วไปของเวลาในการโหลดหน้าเว็บที่ช้า ใช้ข้อมูล resource timing ของ DataDog เพื่อระบุรูปภาพขนาดใหญ่และปรับให้เหมาะสมโดย:

• การบีบอัดรูปภาพ: ใช้เครื่องมือบีบอัดรูปภาพเพื่อลดขนาดไฟล์ของรูปภาพโดยไม่สูญเสียคุณภาพ
• การใช้รูปแบบรูปภาพที่ทันสมัย: ใช้รูปแบบรูปภาพที่ทันสมัย เช่น WebP ซึ่งมีการบีบอัดที่ดีกว่ารูปแบบดั้งเดิมอย่าง JPEG และ PNG
• การปรับขนาดรูปภาพ: ปรับขนาดรูปภาพให้มีขนาดที่เหมาะสมสำหรับการแสดงผลที่จะแสดง หลีกเลี่ยงการให้บริการรูปภาพขนาดใหญ่ที่ถูกย่อขนาดโดยเบราว์เซอร์
• การใช้ lazy loading: โหลดรูปภาพเฉพาะเมื่อปรากฏใน viewport ซึ่งสามารถปรับปรุงเวลาในการโหลดหน้าเว็บเริ่มต้นได้อย่างมาก
• การใช้ CDN: ใช้ Content Delivery Network (CDN) เพื่อให้บริการรูปภาพจากเซิร์ฟเวอร์ที่อยู่ใกล้กับผู้ใช้ของคุณมากขึ้น

2. ย่อและรวมกลุ่ม CSS และ JavaScript

การย่อไฟล์ CSS และ JavaScript จะลบอักขระที่ไม่จำเป็นออกไป เช่น ช่องว่างและความคิดเห็น ซึ่งช่วยลดขนาดไฟล์ การรวมกลุ่มไฟล์ CSS และ JavaScript จะรวมไฟล์หลายไฟล์เป็นไฟล์เดียว ซึ่งช่วยลดจำนวนคำขอ HTTP ที่จำเป็นในการโหลดหน้าเว็บ

ใช้เครื่องมือเช่น Webpack, Parcel หรือ Rollup เพื่อย่อและรวมกลุ่มไฟล์ CSS และ JavaScript ของคุณ

3. ใช้ประโยชน์จาก Browser Caching

Browser caching ช่วยให้เบราว์เซอร์สามารถจัดเก็บสินทรัพย์คงที่ เช่น รูปภาพ, ไฟล์ CSS และไฟล์ JavaScript ไว้ในเครื่อง เมื่อผู้ใช้เยี่ยมชมเว็บไซต์ของคุณอีกครั้ง เบราว์เซอร์สามารถโหลดสินทรัพย์เหล่านี้จากแคชแทนการดาวน์โหลดจากเซิร์ฟเวอร์ ซึ่งส่งผลให้เวลาในการโหลดหน้าเว็บเร็วขึ้น

กำหนดค่าเว็บเซิร์ฟเวอร์ของคุณให้ตั้งค่า cache headers ที่เหมาะสมสำหรับสินทรัพย์คงที่ ใช้เวลาหมดอายุของแคชที่ยาวนานสำหรับสินทรัพย์ที่ไม่ค่อยมีการเปลี่ยนแปลง

4. ปรับปรุงประสิทธิภาพการเรนเดอร์

ประสิทธิภาพการเรนเดอร์ที่ช้าอาจนำไปสู่ประสบการณ์ผู้ใช้ที่ไม่ราบรื่น ใช้เมตริกประสิทธิภาพของ DataDog เพื่อระบุคอขวดในการเรนเดอร์และปรับปรุงโค้ดของคุณโดย:

• ลดความซับซ้อนของ DOM ของคุณ: ทำให้โครงสร้าง HTML ของคุณง่ายขึ้นเพื่อลดปริมาณงานที่เบราว์เซอร์ต้องทำเพื่อเรนเดอร์หน้าเว็บ
• หลีกเลี่ยง layout thrashing: หลีกเลี่ยงการอ่านและเขียนไปยัง DOM ในเฟรมเดียวกัน ซึ่งอาจทำให้เบราว์เซอร์คำนวณเค้าโครงใหม่หลายครั้ง นำไปสู่ประสิทธิภาพที่ไม่ดี
• ใช้ CSS transforms และ animations: ใช้ CSS transforms และ animations แทนแอนิเมชันที่ใช้ JavaScript แอนิเมชัน CSS โดยทั่วไปมีประสิทธิภาพมากกว่าเพราะถูกจัดการโดยเอนจิ้นการเรนเดอร์ของเบราว์เซอร์
• Debouncing และ throttling: ใช้ debouncing และ throttling เพื่อจำกัดความถี่ของการดำเนินการที่มีค่าใช้จ่ายสูง เช่น event handlers

5. ตรวจสอบบริการของบุคคลที่สาม

บริการของบุคคลที่สาม เช่น API, CDN และเครือข่ายโฆษณา อาจส่งผลต่อประสิทธิภาพของแอปพลิเคชันของคุณ ใช้ DataDog เพื่อตรวจสอบประสิทธิภาพและความพร้อมใช้งานของบริการเหล่านี้ หากบริการของบุคคลที่สามช้าหรือไม่พร้อมใช้งาน อาจส่งผลเสียต่อประสบการณ์ของผู้ใช้ของคุณ

ตัวอย่างสถานการณ์: หากเครือข่ายโฆษณาของบุคคลที่สามประสบปัญหา อาจทำให้หน้าเว็บของคุณโหลดช้าหรือแม้กระทั่งขัดข้อง การตรวจสอบประสิทธิภาพของบริการของบุคคลที่สามช่วยให้คุณสามารถระบุปัญหาเหล่านี้และดำเนินการได้ เช่น การปิดใช้งานบริการชั่วคราวหรือเปลี่ยนไปใช้ผู้ให้บริการรายอื่น

6. การนำ Code Splitting มาใช้

Code splitting ช่วยให้คุณสามารถแบ่งโค้ด JavaScript ของคุณออกเป็นส่วนเล็กๆ ที่สามารถโหลดได้ตามต้องการ ซึ่งสามารถปรับปรุงเวลาในการโหลดหน้าเว็บเริ่มต้นได้อย่างมากโดยการลดปริมาณ JavaScript ที่ต้องดาวน์โหลดและแยกวิเคราะห์

ใช้เครื่องมือเช่น Webpack หรือ Parcel เพื่อนำ code splitting มาใช้ในแอปพลิเคชันของคุณ

สรุป

การตรวจสอบโครงสร้างพื้นฐาน frontend เป็นสิ่งสำคัญสำหรับการมอบประสบการณ์เว็บแอปพลิเคชันที่ราบรื่นและมีประสิทธิภาพ DataDog มอบแพลตฟอร์มที่ครอบคลุมสำหรับการตรวจสอบโครงสร้างพื้นฐาน frontend ทั้งหมดของคุณ ตั้งแต่ประสิทธิภาพของเบราว์เซอร์ไปจนถึง API latency ด้วยการใช้ RUM, การทดสอบสังเคราะห์ และเมตริกประสิทธิภาพของ DataDog คุณสามารถระบุและแก้ไขปัญหาคอขวดด้านประสิทธิภาพ ป้องกันข้อผิดพลาด และรับประกันประสบการณ์ผู้ใช้ที่ราบรื่นสำหรับผู้ชมทั่วโลกของคุณ โดยการนำแนวทางปฏิบัติที่ดีที่สุดที่ระบุไว้ในคู่มือนี้ไปใช้ คุณสามารถเพิ่มประสิทธิภาพ frontend ของคุณและส่งมอบเว็บไซต์หรือแอปพลิเคชันที่ผู้ใช้ชื่นชอบได้

อย่าลืมตรวจสอบแดชบอร์ดและการแจ้งเตือนของ DataDog ของคุณเป็นประจำเพื่อติดตามประสิทธิภาพ frontend ของคุณและแก้ไขปัญหาที่เกิดขึ้นในเชิงรุก การตรวจสอบและเพิ่มประสิทธิภาพอย่างต่อเนื่องเป็นสิ่งจำเป็นสำหรับการรักษาประสบการณ์ผู้ใช้ที่มีคุณภาพสูง