Frontend Lighthouse CI: การตรวจสอบประสิทธิภาพเว็บแอปพลิเคชันอย่างต่อเนื่อง

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

Lighthouse CI คืออะไร?

Lighthouse CI เป็นเครื่องมือทดสอบประสิทธิภาพอัตโนมัติแบบโอเพนซอร์สที่ผสานรวมเข้ากับไปป์ไลน์ Continuous Integration และ Continuous Delivery (CI/CD) ของคุณได้อย่างราบรื่น โดยใช้เครื่องมือตรวจสอบ Lighthouse ของ Google เพื่อให้ข้อมูลเชิงลึกที่นำไปปฏิบัติได้เกี่ยวกับประสิทธิภาพ การเข้าถึง SEO และแนวทางปฏิบัติที่ดีที่สุดของเว็บไซต์ของคุณ การนำ Lighthouse CI มาใช้ในกระบวนการทำงานของคุณจะช่วยให้คุณสามารถตรวจสอบประสิทธิภาพของเว็บไซต์ได้อย่างต่อเนื่อง ติดตามการถดถอย (regressions) และมั่นใจได้ว่าทุกการเปลี่ยนแปลงโค้ดจะช่วยสร้างประสบการณ์ผู้ใช้ที่ดีขึ้น Lighthouse CI ไม่ได้ผูกติดกับผู้ให้บริการคลาวด์รายใดรายหนึ่งและสามารถใช้กับการตั้งค่าที่แตกต่างกันได้ ตัวอย่างเช่น สามารถทำงานภายใน Docker container บนบริการต่างๆ เช่น Github Actions, Jenkins, CircleCI และอื่นๆ อีกมากมาย

ทำไมต้องใช้ Lighthouse CI?

การนำ Lighthouse CI มาใช้มีประโยชน์มากมาย:

• การตรวจจับการถดถอยของประสิทธิภาพตั้งแต่เนิ่นๆ: ระบุปัญหาด้านประสิทธิภาพที่เกิดจากการเปลี่ยนแปลงโค้ดใหม่ก่อนที่จะไปถึงเวอร์ชันใช้งานจริง
• ปรับปรุงประสิทธิภาพเว็บไซต์: รับข้อมูลเชิงลึกที่นำไปปฏิบัติได้เกี่ยวกับวิธีเพิ่มประสิทธิภาพเว็บไซต์ของคุณในด้านความเร็ว การเข้าถึง และ SEO
• ยกระดับประสบการณ์ผู้ใช้: นำเสนอเว็บไซต์ที่รวดเร็วและเป็นมิตรต่อผู้ใช้มากขึ้น ซึ่งจะช่วยรักษาการมีส่วนร่วมของผู้เข้าชม
• ลดอัตราการตีกลับ (Bounce Rate): เพิ่มประสิทธิภาพเวลาในการโหลดเพื่อลดความหงุดหงิดของผู้ใช้และป้องกันไม่ให้พวกเขาออกจากเว็บไซต์ของคุณ
• เพิ่มอัตราการแปลง (Conversion Rates): โดยทั่วไปแล้วเว็บไซต์ที่เร็วขึ้นจะนำไปสู่อัตราการแปลงที่สูงขึ้นและผลลัพธ์ทางธุรกิจที่ดีขึ้น
• การทดสอบประสิทธิภาพอัตโนมัติ: ผสานรวมการทดสอบประสิทธิภาพเข้ากับไปป์ไลน์ CI/CD ของคุณเพื่อการตรวจสอบอย่างต่อเนื่อง
• การตัดสินใจที่ขับเคลื่อนด้วยข้อมูล: วางแผนการเพิ่มประสิทธิภาพของคุณโดยอิงตามตัวชี้วัดและข้อมูลเชิงลึกด้านประสิทธิภาพที่เป็นรูปธรรม
• การติดตามประสิทธิภาพในระยะยาว: ตรวจสอบประสิทธิภาพของเว็บไซต์ของคุณเมื่อเวลาผ่านไปเพื่อระบุแนวโน้มและวัดผลกระทบของการเพิ่มประสิทธิภาพของคุณ

คุณสมบัติหลักของ Lighthouse CI

• การตรวจสอบอัตโนมัติ: รันการตรวจสอบของ Lighthouse โดยอัตโนมัติซึ่งเป็นส่วนหนึ่งของกระบวนการ CI/CD ของคุณ
• งบประมาณด้านประสิทธิภาพ (Performance Budgets): กำหนดงบประมาณด้านประสิทธิภาพเพื่อให้แน่ใจว่าเว็บไซต์ของคุณยังคงอยู่ในเกณฑ์ประสิทธิภาพที่ยอมรับได้
• การติดตามการถดถอย (Regression Tracking): ติดตามการถดถอยของประสิทธิภาพเมื่อเวลาผ่านไป ช่วยให้คุณสามารถระบุการเปลี่ยนแปลงโค้ดที่ทำให้เกิดปัญหาได้
• ข้อมูลเชิงลึกที่นำไปปฏิบัติได้: ให้รายงานโดยละเอียดพร้อมคำแนะนำที่นำไปปฏิบัติได้เกี่ยวกับวิธีปรับปรุงประสิทธิภาพเว็บไซต์ของคุณ
• การกำหนดค่าที่ปรับแต่งได้: กำหนดค่า Lighthouse CI เพื่อตอบสนองความต้องการและข้อกำหนดเฉพาะของคุณ
• การผสานรวมกับเครื่องมือ CI/CD: ผสานรวมกับเครื่องมือ CI/CD ยอดนิยมอย่าง Jenkins, CircleCI, GitHub Actions และ GitLab CI ได้อย่างราบรื่น
• โอเพนซอร์ส: Lighthouse CI เป็นโปรเจกต์โอเพนซอร์ส ซึ่งหมายความว่าสามารถใช้งานและแก้ไขได้ฟรี

การตั้งค่า Lighthouse CI: คำแนะนำทีละขั้นตอน

นี่คือคำแนะนำที่ครอบคลุมเกี่ยวกับการตั้งค่า Lighthouse CI สำหรับโปรเจกต์ของคุณ:

1. ติดตั้ง Lighthouse CI CLI

ขั้นแรก คุณต้องติดตั้ง Lighthouse CI command-line interface (CLI) แบบ global โดยใช้ npm หรือ yarn:

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

              
                Copy
              
            
          

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

สร้างไฟล์ lighthouserc.js ที่ root ของโปรเจกต์ของคุณเพื่อกำหนดค่า Lighthouse CI ไฟล์นี้จะกำหนด URL ที่จะตรวจสอบ กฎการยืนยัน (assertion) และตัวเลือกการกำหนดค่าอื่นๆ

นี่คือตัวอย่างพื้นฐานของไฟล์ lighthouserc.js:

            module.exports = {
  ci:
   {
    collect: {
      url: ['http://localhost:3000', 'http://localhost:3000/about']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'temporary-public-storage'
    },
  },
};

            

              
                Copy
              
            
          

คำอธิบาย:

• collect.url: ระบุ URL ที่จะถูกตรวจสอบโดย Lighthouse ในตัวอย่างนี้ เรากำลังตรวจสอบหน้าโฮมเพจและหน้า "เกี่ยวกับ" ของเว็บไซต์ที่ทำงานบน localhost:3000 อย่าลืมแทนที่ด้วย URL ที่เกี่ยวข้องกับโปรเจกต์ *ของคุณ* ซึ่งอาจรวมถึงสภาพแวดล้อม staging ด้วย
• assert.preset: ใช้ค่าที่ตั้งไว้ล่วงหน้า lighthouse:recommended ซึ่งใช้ชุดการยืนยันที่กำหนดไว้ล่วงหน้าตามคำแนะนำของ Lighthouse นี่เป็นจุดเริ่มต้นที่ดี แต่คุณสามารถปรับแต่งการยืนยันเหล่านี้ได้ตามต้องการ
• upload.target: กำหนดค่าว่าจะอัปโหลดผลลัพธ์ Lighthouse CI ไปที่ใด temporary-public-storage มีประโยชน์สำหรับการทดสอบและพัฒนา แต่สำหรับสภาพแวดล้อมการใช้งานจริง โดยทั่วไปคุณจะต้องการใช้โซลูชันการจัดเก็บข้อมูลที่ถาวรกว่า (จะกล่าวถึงในภายหลัง)

3. ผสานรวม Lighthouse CI เข้ากับไปป์ไลน์ CI/CD ของคุณ

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

ตัวอย่างการใช้ GitHub Actions:

สร้างไฟล์ชื่อ .github/workflows/lighthouse-ci.yml ใน repository ของคุณพร้อมเนื้อหาต่อไปนี้:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'
      - name: Install dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.11.x
          lhci autorun

            

              
                Copy
              
            
          

คำอธิบาย:

• on.push.branches: ทริกเกอร์ workflow เมื่อมีการ push ไปยัง branch main
• on.pull_request: ทริกเกอร์ workflow เมื่อมีการสร้าง pull request
• jobs.lighthouse.runs-on: ระบุระบบปฏิบัติการที่จะใช้สำหรับ job (ในกรณีนี้คือ Ubuntu)
• steps: กำหนดขั้นตอนที่จะดำเนินการใน job:
• actions/checkout@v3: เช็คเอาต์ repository
• actions/setup-node@v3: ตั้งค่า Node.js
• npm ci: ติดตั้ง dependencies
• Run Lighthouse CI: รันคำสั่ง Lighthouse CI:
• npm install -g @lhci/cli@0.11.x: ติดตั้ง Lighthouse CI CLI แบบ global *สำคัญ*: ขอแนะนำให้ล็อกเวอร์ชันที่เฉพาะเจาะจงเสมอ
• lhci autorun: รัน Lighthouse CI ในโหมด "autorun" ซึ่งจะรวบรวมการตรวจสอบ ยืนยันงบประมาณด้านประสิทธิภาพ และอัปโหลดผลลัพธ์โดยอัตโนมัติ

ข้อควรพิจารณาที่สำคัญสำหรับการผสานรวม CI/CD:

• การสตาร์ทเซิร์ฟเวอร์: ก่อนที่จะรัน lhci autorun ตรวจสอบให้แน่ใจว่าเว็บเซิร์ฟเวอร์ของคุณกำลังทำงานอยู่ (เช่น npm start) คุณอาจต้องเพิ่มขั้นตอนในการกำหนดค่า CI/CD ของคุณเพื่อสตาร์ทเซิร์ฟเวอร์ในพื้นหลัง
• การย้ายฐานข้อมูล (Database Migrations): หากแอปพลิเคชันของคุณต้องใช้ฐานข้อมูล ตรวจสอบให้แน่ใจว่าการย้ายฐานข้อมูลได้ทำงานเป็นส่วนหนึ่งของกระบวนการ CI/CD ของคุณ *ก่อน* ที่จะรัน Lighthouse CI
• ตัวแปรสภาพแวดล้อม (Environment Variables): หากแอปพลิเคชันของคุณต้องการตัวแปรสภาพแวดล้อม ตรวจสอบให้แน่ใจว่าสิ่งเหล่านี้ได้รับการกำหนดค่าอย่างถูกต้องในสภาพแวดล้อม CI/CD ของคุณ

4. รัน Lighthouse CI

ตอนนี้ เมื่อใดก็ตามที่คุณ push การเปลี่ยนแปลงไปยัง branch main หรือสร้าง pull request เวิร์กโฟลว์ Lighthouse CI จะทำงานโดยอัตโนมัติ ผลลัพธ์จะพร้อมใช้งานในอินเทอร์เฟซของ GitHub Actions

5. ดูผลลัพธ์ของ Lighthouse CI

ผลลัพธ์ของ Lighthouse CI จะถูกอัปโหลดไปยังตำแหน่งที่ระบุในไฟล์ lighthouserc.js ของคุณ (เช่น temporary-public-storage) คุณสามารถเข้าถึงผลลัพธ์เหล่านี้ได้โดยไปที่ลิงก์ที่ให้ไว้ในเอาต์พุตของ CI/CD ผลลัพธ์เหล่านี้ให้ข้อมูลโดยละเอียดเกี่ยวกับประสิทธิภาพ การเข้าถึง SEO และแนวทางปฏิบัติที่ดีที่สุดของเว็บไซต์ของคุณ

การกำหนดค่าการยืนยันและงบประมาณด้านประสิทธิภาพ

Lighthouse CI ช่วยให้คุณสามารถกำหนดค่าการยืนยัน (assertions) และงบประมาณด้านประสิทธิภาพ (performance budgets) เพื่อให้แน่ใจว่าเว็บไซต์ของคุณบรรลุเป้าหมายด้านประสิทธิภาพ การยืนยันคือกฎที่ตรวจสอบตัวชี้วัดประสิทธิภาพเฉพาะ (เช่น First Contentful Paint, Largest Contentful Paint) เทียบกับเกณฑ์ที่กำหนดไว้ล่วงหน้า งบประมาณด้านประสิทธิภาพจะกำหนดขีดจำกัดที่ยอมรับได้สำหรับตัวชี้วัดประสิทธิภาพต่างๆ

นี่คือตัวอย่างวิธีการกำหนดค่าการยืนยันในไฟล์ lighthouserc.js ของคุณ:

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      assertions: {
        'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
        'total-blocking-time': ['warn', { maxNumericValue: 500 }],
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.8 }],
      }
    },
   upload: {
      target: 'temporary-public-storage'
    },
  }
};

            

              
                Copy
              
            
          

คำอธิบาย:

• first-contentful-paint: ตั้งค่าเกณฑ์คำเตือนสำหรับ First Contentful Paint (FCP) ที่ 2000ms
• largest-contentful-paint: ตั้งค่าเกณฑ์คำเตือนสำหรับ Largest Contentful Paint (LCP) ที่ 2500ms
• cumulative-layout-shift: ตั้งค่าเกณฑ์คำเตือนสำหรับ Cumulative Layout Shift (CLS) ที่ 0.1
• total-blocking-time: ตั้งค่าเกณฑ์คำเตือนสำหรับ Total Blocking Time (TBT) ที่ 500ms
• categories:performance: ตั้งค่าเกณฑ์คำเตือนสำหรับคะแนนหมวดหมู่ประสิทธิภาพโดยรวมที่ 0.9
• categories:accessibility: ตั้งค่าเกณฑ์ข้อผิดพลาดสำหรับคะแนนหมวดหมู่การเข้าถึงโดยรวมที่ 0.8

ระดับการยืนยัน:

• off: ปิดใช้งานการยืนยัน
• warn: แสดงคำเตือนหากการยืนยันล้มเหลว
• error: ทำให้การรัน Lighthouse CI ล้มเหลวหากการยืนยันล้มเหลว

การปรับแต่งการยืนยัน:

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

การเลือกเป้าหมายการอัปโหลดของ Lighthouse CI

ตัวเลือก upload.target ในไฟล์ lighthouserc.js ของคุณจะระบุว่าผลลัพธ์ของ Lighthouse CI จะถูกอัปโหลดไปที่ใด เป้าหมาย temporary-public-storage สะดวกสำหรับการทดสอบและพัฒนา แต่ไม่เหมาะสำหรับสภาพแวดล้อมการใช้งานจริงเนื่องจากข้อมูลไม่ถาวร

นี่คือเป้าหมายการอัปโหลดทางเลือกบางส่วน:

• เซิร์ฟเวอร์ Lighthouse CI: แนวทางที่แนะนำสำหรับสภาพแวดล้อมการใช้งานจริงคือการใช้เซิร์ฟเวอร์ Lighthouse CI เซิร์ฟเวอร์ Lighthouse CI ให้บริการโซลูชันการจัดเก็บข้อมูลแบบถาวรสำหรับผลลัพธ์ Lighthouse CI ของคุณ รวมถึงอินเทอร์เฟซผู้ใช้สำหรับดูและวิเคราะห์ข้อมูลของคุณ สามารถปรับใช้กับผู้ให้บริการคลาวด์ต่างๆ หรือโฮสต์บนโครงสร้างพื้นฐานของคุณเองได้
• Google Cloud Storage: คุณสามารถอัปโหลดผลลัพธ์ Lighthouse CI ของคุณไปยัง bucket ของ Google Cloud Storage ได้ นี่เป็นโซลูชันที่คุ้มค่าและปรับขนาดได้สำหรับการจัดเก็บข้อมูลของคุณ
• Amazon S3: เช่นเดียวกับ Google Cloud Storage คุณสามารถอัปโหลดผลลัพธ์ Lighthouse CI ของคุณไปยัง bucket ของ Amazon S3 ได้

การตั้งค่าเซิร์ฟเวอร์ Lighthouse CI:

การตั้งค่าเซิร์ฟเวอร์ Lighthouse CI ประกอบด้วยขั้นตอนต่อไปนี้:

1. ติดตั้งเซิร์ฟเวอร์ Lighthouse CI: คุณสามารถติดตั้งเซิร์ฟเวอร์ Lighthouse CI โดยใช้ npm หรือ yarn:

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

              
                Copy
              
            
          

2. กำหนดค่าฐานข้อมูล: เซิร์ฟเวอร์ Lighthouse CI ต้องการฐานข้อมูลเพื่อจัดเก็บข้อมูล คุณสามารถใช้ฐานข้อมูลได้หลากหลาย รวมถึง PostgreSQL, MySQL และ SQLite กำหนดค่าการเชื่อมต่อฐานข้อมูลในไฟล์ .env
3. เริ่มเซิร์ฟเวอร์ Lighthouse CI: เริ่มเซิร์ฟเวอร์ Lighthouse CI โดยใช้คำสั่ง lhci server
4. กำหนดค่า Lighthouse CI CLI เพื่อใช้เซิร์ฟเวอร์: อัปเดตไฟล์ lighthouserc.js ของคุณเพื่อใช้เซิร์ฟเวอร์ Lighthouse CI เป็นเป้าหมายการอัปโหลด:

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'lhci',
      serverBaseUrl: 'http://your-lhci-server.com',
      token: 'YOUR_LHCI_TOKEN'
    },
  }
};

            

              
                Copy
              
            
          

แทนที่ http://your-lhci-server.com ด้วย URL ของเซิร์ฟเวอร์ Lighthouse CI ของคุณ และ YOUR_LHCI_TOKEN ด้วยโทเค็นการเข้าถึงสำหรับโปรเจกต์ของคุณ

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ Lighthouse CI

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

• รัน Lighthouse CI ทุกครั้งที่มีการเปลี่ยนแปลงโค้ด: ผสานรวม Lighthouse CI เข้ากับไปป์ไลน์ CI/CD ของคุณเพื่อรันการตรวจสอบทุกครั้งที่มีการเปลี่ยนแปลงโค้ด ซึ่งจะช่วยให้คุณตรวจจับการถดถอยของประสิทธิภาพได้ตั้งแต่เนิ่นๆ
• ตั้งค่างบประมาณด้านประสิทธิภาพ: กำหนดงบประมาณด้านประสิทธิภาพเพื่อให้แน่ใจว่าเว็บไซต์ของคุณยังคงอยู่ในเกณฑ์ประสิทธิภาพที่ยอมรับได้
• ตรวจสอบแนวโน้มประสิทธิภาพ: ติดตามประสิทธิภาพของเว็บไซต์ของคุณเมื่อเวลาผ่านไปเพื่อระบุแนวโน้มและวัดผลกระทบของการเพิ่มประสิทธิภาพของคุณ
• จัดลำดับความสำคัญของความพยายามในการเพิ่มประสิทธิภาพ: มุ่งเน้นไปที่การเพิ่มประสิทธิภาพตัวชี้วัดประสิทธิภาพที่สำคัญที่สุดก่อน
• ใช้ข้อมูลในโลกแห่งความเป็นจริง: ใช้ข้อมูลในโลกแห่งความเป็นจริงเพื่อเป็นแนวทางในการเพิ่มประสิทธิภาพของคุณ ตัวอย่างเช่น คุณสามารถใช้ Google Analytics เพื่อระบุหน้าที่ผู้ใช้ของคุณเข้าชมบ่อยที่สุด
• ทดสอบบนอุปกรณ์จริง: ทดสอบเว็บไซต์ของคุณบนอุปกรณ์จริงเพื่อให้แน่ใจว่าทำงานได้ดีในสภาวะจริง
• ตรวจสอบผลลัพธ์ Lighthouse CI อย่างสม่ำเสมอ: ตรวจสอบให้แน่ใจว่าได้ตรวจสอบผลลัพธ์ของ Lighthouse CI อย่างสม่ำเสมอและดำเนินการเพื่อแก้ไขปัญหาด้านประสิทธิภาพที่ตรวจพบ
• ปรับปรุงรูปภาพ: ปรับปรุงรูปภาพของคุณเพื่อลดขนาดไฟล์โดยไม่ลดทอนคุณภาพ เครื่องมือเช่น ImageOptim (macOS), TinyPNG และ ImageKit มีประโยชน์สำหรับสิ่งนี้
• ย่อขนาด CSS และ JavaScript: ย่อขนาดไฟล์ CSS และ JavaScript ของคุณเพื่อลดขนาดไฟล์ เครื่องมือเช่น UglifyJS และ CSSNano สามารถช่วยในเรื่องนี้ได้
• ใช้ประโยชน์จากแคชของเบราว์เซอร์: ใช้ประโยชน์จากแคชของเบราว์เซอร์เพื่อลดจำนวนคำขอที่เว็บไซต์ของคุณส่งไปยังเซิร์ฟเวอร์
• ใช้ Content Delivery Network (CDN): ใช้ CDN เพื่อกระจายเนื้อหาของเว็บไซต์ของคุณไปยังเซิร์ฟเวอร์ทั่วโลก ซึ่งสามารถปรับปรุงเวลาในการโหลดสำหรับผู้ใช้ในตำแหน่งทางภูมิศาสตร์ที่แตกต่างกันได้ บริการอย่าง Cloudflare และ Amazon CloudFront เป็น CDN ที่ได้รับความนิยม
• เลื่อนการโหลดรูปภาพที่อยู่นอกหน้าจอ: ใช้ lazy loading สำหรับรูปภาพที่มองไม่เห็นบนหน้าจอในทันที ซึ่งสามารถปรับปรุงเวลาในการโหลดหน้าเริ่มต้นได้อย่างมาก สามารถใช้ attribute loading="lazy" สำหรับ lazy loading แบบง่ายได้
• กำจัดทรัพยากรที่บล็อกการเรนเดอร์: ระบุและกำจัดทรัพยากรที่กำลังบล็อกการเรนเดอร์ของหน้าของคุณ ซึ่งมักเกี่ยวข้องกับการทำ inlining CSS ที่สำคัญ และเลื่อนการโหลด CSS และ JavaScript ที่ไม่สำคัญออกไป
• ลดเวลาในการประมวลผล JavaScript: โปรไฟล์โค้ด JavaScript ของคุณเพื่อระบุและเพิ่มประสิทธิภาพฟังก์ชันที่ทำงานช้า เทคนิคต่างๆ เช่น code splitting และ tree shaking สามารถช่วยลดปริมาณ JavaScript ที่ต้องดาวน์โหลดและประมวลผลได้

เทคนิคขั้นสูงของ Lighthouse CI

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

• การตรวจสอบ Lighthouse แบบกำหนดเอง: คุณสามารถสร้างการตรวจสอบ Lighthouse แบบกำหนดเองเพื่อทดสอบปัญหาประสิทธิภาพเฉพาะที่เกี่ยวข้องกับแอปพลิเคชันของคุณ
• การกำหนดค่า Headless Chrome: กำหนดค่า Headless Chrome เพื่อใช้การจำลองอุปกรณ์เฉพาะหรือการตั้งค่าการควบคุมปริมาณเครือข่าย
• การผสานรวมกับเครื่องมือตรวจสอบ: ผสานรวม Lighthouse CI กับเครื่องมือตรวจสอบที่คุณมีอยู่ (เช่น New Relic, Datadog) เพื่อให้ได้มุมมองที่ครอบคลุมยิ่งขึ้นเกี่ยวกับประสิทธิภาพของเว็บไซต์ของคุณ
• การทดสอบการถดถอยทางภาพ (Visual Regression Testing): รวม Lighthouse CI เข้ากับเครื่องมือทดสอบการถดถอยทางภาพเพื่อตรวจจับการเปลี่ยนแปลงทางภาพที่อาจส่งผลต่อประสิทธิภาพ

Lighthouse CI สำหรับผู้ชมทั่วโลก: ข้อควรพิจารณาสำหรับเว็บไซต์ระหว่างประเทศ

เมื่อใช้ Lighthouse CI สำหรับเว็บไซต์ที่มุ่งเป้าไปที่ผู้ชมทั่วโลก ให้พิจารณาสิ่งต่อไปนี้:

• ทดสอบจากหลายตำแหน่ง: เวลาตอบสนองของเซิร์ฟเวอร์อาจแตกต่างกันอย่างมากตามตำแหน่งของผู้ใช้ ใช้ CDN (Content Delivery Network) และพิจารณารันการตรวจสอบ Lighthouse CI จากภูมิภาคทางภูมิศาสตร์ต่างๆ เพื่อให้ได้ภาพประสิทธิภาพที่แม่นยำยิ่งขึ้นสำหรับผู้ใช้ต่างประเทศของคุณ ผู้ให้บริการ CI/CD บางรายมีตัวเลือกในการระบุตำแหน่งทางภูมิศาสตร์ของ runner
• คำนึงถึงสภาพเครือข่าย: ความเร็วของเครือข่ายและเวลาแฝง (latency) แตกต่างกันอย่างมากทั่วโลก จำลองสภาพเครือข่ายที่แตกต่างกันระหว่างการตรวจสอบ Lighthouse CI ของคุณเพื่อทำความเข้าใจว่าเว็บไซต์ของคุณทำงานอย่างไรภายใต้ข้อจำกัดต่างๆ Lighthouse ช่วยให้คุณสามารถควบคุมปริมาณการเชื่อมต่อเครือข่ายเพื่อจำลองการเชื่อมต่อที่ช้าลง เช่น 3G
• การปรับเนื้อหาให้เข้ากับท้องถิ่น (Content Localization): ตรวจสอบให้แน่ใจว่าเนื้อหาที่แปลเป็นภาษาท้องถิ่นของคุณได้รับการปรับให้เหมาะสมอย่างถูกต้อง ซึ่งรวมถึงการปรับปรุงรูปภาพสำหรับภาษาและชุดอักขระต่างๆ และการเข้ารหัสที่เหมาะสมเพื่อหลีกเลี่ยงปัญหาการแสดงผล
• การโหลดฟอนต์: ปรับปรุงการโหลดฟอนต์สำหรับภาษาต่างๆ พิจารณาใช้ font-display: swap เพื่อป้องกันไม่ให้ข้อความมองไม่เห็นระหว่างการโหลดฟอนต์
• สคริปต์ของบุคคลที่สาม: ระวังสคริปต์ของบุคคลที่สาม เนื่องจากอาจส่งผลกระทบอย่างมากต่อประสิทธิภาพ โดยเฉพาะสำหรับผู้ใช้ในภูมิภาคที่มีการเชื่อมต่อเครือข่ายที่ช้ากว่า ตรวจสอบประสิทธิภาพของสคริปต์ของบุคคลที่สามอย่างสม่ำเสมอ และพิจารณาใช้การโหลดแบบอะซิงโครนัสหรือโฮสต์สคริปต์ที่สำคัญด้วยตนเอง
• การปรับให้เหมาะกับมือถือ: การใช้งานบนมือถือเป็นที่แพร่หลายในหลายส่วนของโลก ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณได้รับการปรับให้เหมาะกับอุปกรณ์มือถือ และการตรวจสอบ Lighthouse CI ของคุณรวมถึงการทดสอบเฉพาะสำหรับมือถือด้วย

การแก้ไขปัญหาทั่วไปของ Lighthouse CI

นี่คือปัญหาทั่วไปบางส่วนที่คุณอาจพบเมื่อใช้ Lighthouse CI และวิธีแก้ไข:

• Lighthouse CI ล้มเหลวพร้อมข้อผิดพลาด "Timeout": สิ่งนี้อาจเกิดขึ้นหากเว็บไซต์ของคุณใช้เวลาในการโหลดนานเกินไป หรือหาก Lighthouse CI ไม่สามารถเชื่อมต่อกับเว็บไซต์ของคุณได้ ลองเพิ่มค่า timeout ในไฟล์ lighthouserc.js ของคุณ หรือตรวจสอบบันทึก (logs) ของเซิร์ฟเวอร์เว็บไซต์ของคุณเพื่อหาข้อผิดพลาด
• Lighthouse CI รายงานผลลัพธ์ที่ไม่สอดคล้องกัน: ผลลัพธ์ของ Lighthouse อาจแตกต่างกันเล็กน้อยในแต่ละครั้งที่รันเนื่องจากสภาพเครือข่ายหรือปัจจัยอื่นๆ รันการตรวจสอบหลายครั้งเพื่อให้ได้ค่าเฉลี่ยที่เสถียรยิ่งขึ้น
• Lighthouse CI ไม่สามารถอัปโหลดผลลัพธ์ได้: ตรวจสอบการกำหนดค่า upload.target ของคุณ และตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ Lighthouse CI ของคุณกำลังทำงานและสามารถเข้าถึงได้ นอกจากนี้ ให้ตรวจสอบว่าคุณได้กำหนดค่าโทเค็นการเข้าถึงที่ถูกต้องแล้ว
• Lighthouse CI รายงานการถดถอยของประสิทธิภาพที่ไม่คาดคิด: ตรวจสอบการเปลี่ยนแปลงโค้ดที่เกิดขึ้นก่อนที่จะตรวจพบการถดถอย ใช้รายงานของ Lighthouse CI เพื่อระบุตัวชี้วัดประสิทธิภาพเฉพาะที่ถดถอยและมุ่งเน้นความพยายามในการเพิ่มประสิทธิภาพของคุณไปยังพื้นที่เหล่านั้น

สรุป

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

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