การทดสอบประสิทธิภาพ Frontend: การผสาน Lighthouse CI เพื่อการปรับปรุงอย่างต่อเนื่อง

ในโลกดิจิทัลปัจจุบัน ประสิทธิภาพของเว็บไซต์มีความสำคัญสูงสุด เวลาในการโหลดที่ช้า ปัญหาการเข้าถึง และ SEO ที่ไม่ดีอาจส่งผลกระทบอย่างมีนัยสำคัญต่อประสบการณ์ของผู้ใช้ และส่งผลต่อผลลัพธ์ทางธุรกิจในที่สุด การทดสอบประสิทธิภาพ Frontend ได้กลายเป็นส่วนสำคัญของวงจรการพัฒนาซอฟต์แวร์สมัยใหม่ เพื่อให้แน่ใจว่าเว็บไซต์และเว็บแอปพลิเคชันนั้นรวดเร็ว เชื่อถือได้ และเป็นมิตรต่อผู้ใช้สำหรับผู้ชมทั่วโลก บทความนี้จะเจาะลึกถึงการผสาน Lighthouse CI ซึ่งเป็นเครื่องมือโอเพนซอร์สที่ทรงพลัง เข้ากับ continuous integration (CI) pipeline ของคุณเพื่อทำการทดสอบประสิทธิภาพ frontend โดยอัตโนมัติและขับเคลื่อนการปรับปรุงอย่างต่อเนื่อง

ทำไมการทดสอบประสิทธิภาพ Frontend จึงมีความสำคัญ?

ก่อนที่จะลงลึกเกี่ยวกับ Lighthouse CI เรามาทำความเข้าใจกันก่อนว่าทำไมการทดสอบประสิทธิภาพ Frontend จึงมีความสำคัญอย่างยิ่ง:

• ประสบการณ์ผู้ใช้: เว็บไซต์ที่รวดเร็วและตอบสนองได้ดีจะมอบประสบการณ์ผู้ใช้ที่ดีขึ้น นำไปสู่การมีส่วนร่วมที่เพิ่มขึ้นและลดอัตราการออกจากหน้าเว็บ (bounce rates) ลองนึกภาพลูกค้าเป้าหมายในโตเกียว ประเทศญี่ปุ่น ที่พยายามซื้อสินค้าบนเว็บไซต์อีคอมเมิร์ซที่โหลดช้า พวกเขามีแนวโน้มที่จะออกจากเว็บไซต์และมองหาทางเลือกอื่น
• อันดับ SEO: เครื่องมือค้นหาอย่าง Google พิจารณาความเร็วและประสิทธิภาพของเว็บไซต์เป็นปัจจัยในการจัดอันดับ เว็บไซต์ที่เร็วขึ้นมักจะได้รับการจัดอันดับสูงขึ้นในผลการค้นหา ซึ่งช่วยเพิ่มปริมาณการเข้าชมแบบออร์แกนิก โครงการ Core Web Vitals ของ Google เน้นย้ำถึงความสำคัญของปัจจัยต่างๆ เช่น Largest Contentful Paint (LCP), First Input Delay (FID) และ Cumulative Layout Shift (CLS) สำหรับ SEO
• การเข้าถึง (Accessibility): การปรับปรุงประสิทธิภาพมักนำไปสู่การเข้าถึงที่ดีขึ้นสำหรับผู้ใช้ที่มีความพิการ โค้ดและรูปภาพที่ได้รับการปรับให้เหมาะสมสามารถปรับปรุงประสบการณ์สำหรับผู้ใช้ที่ต้องพึ่งพาโปรแกรมอ่านหน้าจอ (screen readers) หรือผู้ที่มีแบนด์วิดท์จำกัด
• อัตราการแปลง (Conversion Rates): เว็บไซต์ที่เร็วขึ้นสามารถส่งผลกระทบโดยตรงต่ออัตราการแปลง การศึกษาแสดงให้เห็นว่าแม้แต่ความล่าช้าในการโหลดหน้าเว็บเพียงหนึ่งวินาทีก็สามารถนำไปสู่การลดลงอย่างมีนัยสำคัญของ Conversion ลองนึกถึงผู้ใช้ในมุมไบ ประเทศอินเดีย ที่พยายามจองเที่ยวบิน กระบวนการจองที่ช้าอาจทำให้พวกเขายกเลิกการซื้อและเลือกคู่แข่งแทน
• การเพิ่มประสิทธิภาพทรัพยากร: การทดสอบประสิทธิภาพช่วยระบุส่วนที่สามารถปรับปรุงทรัพยากรให้มีประสิทธิภาพสูงสุดได้ ซึ่งนำไปสู่การประหยัดต้นทุนในด้านโครงสร้างพื้นฐานของเซิร์ฟเวอร์และการใช้แบนด์วิดท์

แนะนำ Lighthouse CI

Lighthouse CI เป็นเครื่องมือโอเพนซอร์สอัตโนมัติที่ออกแบบมาเพื่อผสานเข้ากับ CI/CD pipeline ของคุณได้อย่างราบรื่น โดยจะรัน Lighthouse ซึ่งเป็นเครื่องมือตรวจสอบยอดนิยมที่พัฒนาโดย Google และให้ข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพของเว็บไซต์ การเข้าถึง SEO แนวทางปฏิบัติที่ดีที่สุด และการปฏิบัติตามข้อกำหนดของ Progressive Web App (PWA) Lighthouse CI ช่วยให้คุณ:

• ตรวจสอบประสิทธิภาพโดยอัตโนมัติ: รันการตรวจสอบของ Lighthouse โดยอัตโนมัติในทุก commit หรือ pull request
• ติดตามประสิทธิภาพเมื่อเวลาผ่านไป: ติดตามตัวชี้วัดประสิทธิภาพเมื่อเวลาผ่านไปและระบุการถดถอยได้ตั้งแต่เนิ่นๆ
• ตั้งค่างบประมาณประสิทธิภาพ (Performance Budgets): กำหนดงบประมาณประสิทธิภาพและทำให้ build ล้มเหลวหากเกินงบประมาณ
• ผสานกับระบบ CI/CD: ผสานกับระบบ CI/CD ยอดนิยม เช่น GitHub Actions, GitLab CI, CircleCI และ Jenkins
• ทำงานร่วมกันในประเด็นด้านประสิทธิภาพ: แบ่งปันรายงาน Lighthouse และทำงานร่วมกับทีมของคุณเพื่อแก้ไขปัญหาด้านประสิทธิภาพ

การติดตั้ง Lighthouse CI

นี่คือคำแนะนำทีละขั้นตอนในการติดตั้ง Lighthouse CI ในโปรเจกต์ของคุณ:

1. ติดตั้ง Lighthouse CI

ติดตั้ง Lighthouse CI CLI แบบ global โดยใช้ npm หรือ yarn:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. กำหนดค่า Lighthouse CI

สร้างไฟล์ lighthouserc.js ในไดเรกทอรีรากของโปรเจกต์ของคุณเพื่อกำหนดค่า Lighthouse CI นี่คือตัวอย่างการกำหนดค่า:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

เรามาดูรายละเอียดการกำหนดค่านี้กัน:

• collect.url: อาร์เรย์ของ URL ที่จะตรวจสอบ ตัวอย่างนี้ตรวจสอบหน้าแรกและหน้าเกี่ยวกับ คุณควรใส่หน้าสำคัญทั้งหมดของเว็บไซต์ของคุณ โดยพิจารณาจากกรณีการใช้งานที่แตกต่างกัน ตัวอย่างเช่น เว็บไซต์อีคอมเมิร์ซอาจรวมถึงหน้าแรก หน้ารายการสินค้า หน้ารายละเอียดสินค้า และกระบวนการชำระเงิน
• collect.startServerCommand: คำสั่งสำหรับเริ่มเซิร์ฟเวอร์การพัฒนาของคุณ ซึ่งจำเป็นหาก Lighthouse CI ต้องการทำงานกับสภาพแวดล้อมการพัฒนาในเครื่อง
• collect.numberOfRuns: จำนวนครั้งที่จะรันการตรวจสอบ Lighthouse สำหรับแต่ละ URL การรันการตรวจสอบหลายครั้งช่วยลดความผันผวนของสภาพเครือข่ายและปัจจัยอื่นๆ
• assert.assertions: ชุดของการยืนยันเพื่อตรวจสอบผลการตรวจสอบของ Lighthouse การยืนยันแต่ละรายการจะระบุตัวชี้วัดหรือหมวดหมู่และเกณฑ์ขั้นต่ำ หากไม่ผ่านเกณฑ์ build จะล้มเหลว ตัวอย่างนี้ตั้งค่าเกณฑ์สำหรับหมวดหมู่ประสิทธิภาพ การเข้าถึง แนวทางปฏิบัติที่ดีที่สุด และ SEO นอกจากนี้ยังตั้งค่าเกณฑ์สำหรับตัวชี้วัดเฉพาะ เช่น First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) และ Cumulative Layout Shift (CLS)
• upload.target: ระบุตำแหน่งที่จะอัปโหลดรายงาน Lighthouse temporary-redirect จะอัปโหลดรายงานไปยังที่จัดเก็บชั่วคราวและให้ URL เพื่อเข้าถึงรายงาน ตัวเลือกอื่นๆ ได้แก่ การใช้เซิร์ฟเวอร์ Lighthouse CI หรือโซลูชันการจัดเก็บข้อมูลบนคลาวด์ เช่น Google Cloud Storage หรือ Amazon S3

3. ผสานเข้ากับระบบ CI/CD ของคุณ

ขั้นตอนต่อไปคือการผสาน Lighthouse CI เข้ากับ CI/CD pipeline ของคุณ นี่คือตัวอย่างวิธีการผสานกับ GitHub Actions:

สร้างไฟล์ .github/workflows/lighthouse.yml ใน repository ของคุณ:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

Workflow นี้จะทำตามขั้นตอนต่อไปนี้:

• ดึงโค้ดล่าสุด (Checks out the code)
• ตั้งค่า Node.js
• ติดตั้ง dependencies
• รัน Lighthouse CI ขั้นตอนนี้จะ build แอปพลิเคชันก่อน (npm run build) จากนั้นรัน lhci autorun ซึ่งจะดำเนินการตรวจสอบของ Lighthouse และยืนยันผลลัพธ์กับเกณฑ์ที่กำหนดค่าไว้

ปรับ workflow นี้ให้เข้ากับระบบ CI/CD และข้อกำหนดของโปรเจกต์ของคุณโดยเฉพาะ ตัวอย่างเช่น หากคุณใช้ GitLab CI คุณจะต้องกำหนดค่าไฟล์ .gitlab-ci.yml ด้วยขั้นตอนที่คล้ายกัน

4. เรียกใช้ Lighthouse CI

Commit การเปลี่ยนแปลงของคุณและ push ไปยัง repository ของคุณ CI/CD pipeline จะรัน Lighthouse CI โดยอัตโนมัติ หากการยืนยันใดๆ ล้มเหลว build ก็จะล้มเหลว ซึ่งเป็นการให้ข้อเสนอแนะที่มีค่าแก่นักพัฒนา รายงาน Lighthouse CI จะพร้อมใช้งานที่ URL ที่ระบบ CI/CD ให้ไว้

การกำหนดค่าขั้นสูงและการปรับแต่ง

Lighthouse CI มีตัวเลือกการกำหนดค่าและความเป็นไปได้ในการปรับแต่งที่หลากหลาย นี่คือคุณสมบัติขั้นสูงบางอย่าง:

1. การใช้ Lighthouse CI Server

Lighthouse CI server มีแดชบอร์ดส่วนกลางสำหรับติดตามตัวชี้วัดประสิทธิภาพเมื่อเวลาผ่านไป จัดการโปรเจกต์ และทำงานร่วมกันในประเด็นด้านประสิทธิภาพ หากต้องการใช้ Lighthouse CI server คุณต้องตั้งค่า instance และกำหนดค่าไฟล์ lighthouserc.js ของคุณเพื่ออัปโหลดรายงานไปยังเซิร์ฟเวอร์

ขั้นแรก ให้ deploy เซิร์ฟเวอร์ มีตัวเลือกการ deploy ที่หลากหลาย เช่น Docker, Heroku และผู้ให้บริการคลาวด์อย่าง AWS และ Google Cloud โปรดดูเอกสารประกอบของ Lighthouse CI สำหรับคำแนะนำโดยละเอียดเกี่ยวกับการ deploy เซิร์ฟเวอร์

เมื่อเซิร์ฟเวอร์ทำงานแล้ว ให้อัปเดตไฟล์ lighthouserc.js ของคุณเพื่อชี้ไปยังเซิร์ฟเวอร์:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

แทนที่ YOUR_LHCI_SERVER_URL ด้วย URL ของเซิร์ฟเวอร์ Lighthouse CI ของคุณ และ YOUR_LHCI_SERVER_TOKEN ด้วย token ที่สร้างโดยเซิร์ฟเวอร์ token นี้ใช้เพื่อยืนยันตัวตนของ CI pipeline ของคุณกับเซิร์ฟเวอร์

2. การตั้งค่างบประมาณประสิทธิภาพ (Performance Budgets)

งบประมาณประสิทธิภาพกำหนดเกณฑ์ที่ยอมรับได้สำหรับตัวชี้วัดเฉพาะ Lighthouse CI ช่วยให้คุณสามารถตั้งค่างบประมาณประสิทธิภาพและทำให้ build ล้มเหลวหากเกินงบประมาณเหล่านั้น ซึ่งจะช่วยป้องกันการถดถอยของประสิทธิภาพและทำให้แน่ใจว่าเว็บไซต์ของคุณอยู่ภายในขีดจำกัดประสิทธิภาพที่ยอมรับได้

คุณสามารถกำหนดงบประมาณประสิทธิภาพในไฟล์ lighthouserc.js ของคุณโดยใช้คุณสมบัติ assert.assertions ตัวอย่างเช่น หากต้องการตั้งงบประมาณประสิทธิภาพสำหรับ First Contentful Paint (FCP) คุณสามารถเพิ่มการยืนยันต่อไปนี้:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

การยืนยันนี้จะทำให้ build ล้มเหลวหาก FCP มากกว่า 2500 มิลลิวินาที

3. การปรับแต่งการกำหนดค่า Lighthouse

Lighthouse CI ช่วยให้คุณสามารถปรับแต่งการกำหนดค่า Lighthouse ให้เหมาะกับความต้องการเฉพาะของคุณได้ คุณสามารถกำหนดค่าการตั้งค่าต่างๆ ของ Lighthouse ได้ เช่น:

• onlyAudits: ระบุรายการการตรวจสอบที่จะรัน
• skipAudits: ระบุรายการการตรวจสอบที่จะข้าม
• throttling: กำหนดค่าการจำกัดความเร็วเครือข่ายเพื่อจำลองสภาพเครือข่ายที่แตกต่างกัน
• formFactor: ระบุ form factor (เดสก์ท็อปหรือมือถือ) ที่จะจำลอง
• screenEmulation: กำหนดค่าการจำลองหน้าจอ

หากต้องการปรับแต่งการกำหนดค่า Lighthouse คุณสามารถส่ง flag --config-path ไปยังคำสั่ง lhci autorun โดยชี้ไปยังไฟล์การกำหนดค่า Lighthouse ที่กำหนดเอง โปรดดูเอกสารประกอบของ Lighthouse สำหรับรายการตัวเลือกการกำหนดค่าทั้งหมด

4. การตรวจสอบเพจที่ต้องมีการยืนยันตัวตน

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

วิธีที่พบบ่อยวิธีหนึ่งคือการใช้ flag --extra-headers เพื่อส่งคุกกี้การยืนยันตัวตนไปยัง Lighthouse CI คุณสามารถรับคุกกี้ได้จากเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ของคุณหลังจากเข้าสู่ระบบเว็บไซต์แล้ว

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

เพื่อเพิ่มประโยชน์สูงสุดจาก Lighthouse CI ให้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:

• รัน Lighthouse CI เป็นประจำ: ผสาน Lighthouse CI เข้ากับ CI/CD pipeline ของคุณเพื่อทำการตรวจสอบโดยอัตโนมัติในทุก commit หรือ pull request เพื่อให้แน่ใจว่าการถดถอยของประสิทธิภาพจะถูกตรวจพบและแก้ไขได้ทันท่วงที
• ตั้งงบประมาณประสิทธิภาพที่สมจริง: กำหนดงบประมาณประสิทธิภาพที่ท้าทายแต่สามารถทำได้ เริ่มต้นด้วยงบประมาณที่ไม่เข้มงวดเกินไปและค่อยๆ ทำให้เข้มงวดขึ้นเมื่อประสิทธิภาพของเว็บไซต์ของคุณดีขึ้น พิจารณาตั้งงบประมาณที่แตกต่างกันสำหรับเพจประเภทต่างๆ ขึ้นอยู่กับความซับซ้อนและความสำคัญ
• มุ่งเน้นที่ตัวชี้วัดหลัก: จัดลำดับความสำคัญของตัวชี้วัดประสิทธิภาพหลักที่มีผลกระทบมากที่สุดต่อประสบการณ์ของผู้ใช้และผลลัพธ์ทางธุรกิจ Core Web Vitals ของ Google (LCP, FID และ CLS) เป็นจุดเริ่มต้นที่ดี
• ตรวจสอบและแก้ไขปัญหาด้านประสิทธิภาพ: เมื่อ Lighthouse CI ระบุปัญหาด้านประสิทธิภาพ ให้ตรวจสอบอย่างละเอียดและนำโซลูชันที่เหมาะสมมาใช้ ใช้รายงาน Lighthouse เพื่อระบุสาเหตุที่แท้จริงของปัญหาและจัดลำดับความสำคัญของการแก้ไขที่มีผลกระทบมากที่สุด
• ติดตามประสิทธิภาพเมื่อเวลาผ่านไป: ติดตามตัวชี้วัดประสิทธิภาพเมื่อเวลาผ่านไปเพื่อระบุแนวโน้มและรูปแบบต่างๆ ใช้เซิร์ฟเวอร์ Lighthouse CI หรือเครื่องมือตรวจสอบอื่นๆ เพื่อแสดงข้อมูลประสิทธิภาพและระบุส่วนที่ต้องปรับปรุง
• ให้ความรู้แก่ทีมของคุณ: ตรวจสอบให้แน่ใจว่าทีมของคุณเข้าใจถึงความสำคัญของประสิทธิภาพ frontend และวิธีใช้ Lighthouse CI อย่างมีประสิทธิภาพ จัดให้มีการฝึกอบรมและทรัพยากรเพื่อช่วยให้พวกเขาพัฒนาทักษะและความรู้
• พิจารณาสภาพเครือข่ายทั่วโลก: เมื่อตั้งงบประมาณประสิทธิภาพ ให้พิจารณาสภาพเครือข่ายในส่วนต่างๆ ของโลก ผู้ใช้ในพื้นที่ที่มีความเร็วอินเทอร์เน็ตช้าอาจมีประสบการณ์ที่แตกต่างจากผู้ใช้ในพื้นที่ที่มีความเร็วสูงกว่า ใช้เครื่องมือเพื่อจำลองสภาพเครือข่ายที่แตกต่างกันระหว่างการทดสอบ
• ปรับแต่งรูปภาพให้เหมาะสม: การปรับแต่งรูปภาพเป็นส่วนสำคัญของประสิทธิภาพ frontend ใช้เครื่องมือเช่น ImageOptim, TinyPNG หรือตัวแปลงออนไลน์เพื่อบีบอัดและปรับแต่งรูปภาพโดยไม่สูญเสียคุณภาพ ใช้รูปแบบรูปภาพที่ทันสมัยเช่น WebP ซึ่งให้การบีบอัดและคุณภาพที่ดีกว่ารูปแบบดั้งเดิมเช่น JPEG และ PNG ใช้ lazy loading สำหรับรูปภาพที่มองไม่เห็นใน viewport ทันที
• ลดขนาดและบีบอัดโค้ด: ลดขนาด (Minify) โค้ด HTML, CSS และ JavaScript ของคุณเพื่อลดขนาดไฟล์ ใช้เครื่องมือเช่น UglifyJS, Terser หรือ minifiers ออนไลน์ เปิดใช้งานการบีบอัด Gzip หรือ Brotli บนเซิร์ฟเวอร์ของคุณเพื่อลดขนาดของไฟล์ที่ถ่ายโอนเพิ่มเติม
• ใช้ประโยชน์จากแคชของเบราว์เซอร์: กำหนดค่าเซิร์ฟเวอร์ของคุณเพื่อตั้งค่า cache headers ที่เหมาะสมสำหรับ static assets เช่น รูปภาพ, ไฟล์ CSS และ JavaScript สิ่งนี้ช่วยให้เบราว์เซอร์สามารถแคช assets เหล่านี้และหลีกเลี่ยงการดาวน์โหลดซ้ำๆ

สรุป

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