Posted inDevelopment

Chặn đứng code ‘rùa bò’ bằng Lighthouse CI và GitHub Actions

Development tutorial - IT technology blog
Development tutorial - IT technology blog

Chuyện thật: Codebase 50k dòng và cú trượt điểm Performance không phanh

Mình từng quản lý một dự án thương mại điện tử với hơn 50.000 dòng code. Lúc đầu, mọi thứ vẫn nằm trong tầm kiểm soát, điểm Lighthouse luôn duy trì ở mức 90+. Thế nhưng, chỉ sau một đợt refactor và thêm vài script tracking từ bên Marketing, điểm Performance tụt một mạch xuống còn 40. Đau lòng hơn, thứ hạng từ khóa trên Google Search Console cũng rơi tự do ngay sau đó.

Sai lầm của mình lúc đó là quá tin vào cảm giác “chạy nhanh trên máy mình”. Thực tế, hiệu suất web cần được định lượng bằng con số. Bạn phải kiểm tra nó liên tục trong quy trình CI/CD, giống như cách chúng ta viết Unit Test vậy.

3 “hung thủ” âm thầm giết chết tốc độ website

Qua nhiều dự án, mình nhận thấy điểm số thường đi xuống vì ba lý do điển hình:

  • Thư viện quá khổ: Một bạn dev vô tình cài thêm Moment.js (nặng khoảng 280KB) chỉ để format một dòng ngày tháng, trong khi dayjs chỉ tốn 2KB.
  • Ảnh chưa qua xử lý: Team nội dung đẩy trực tiếp ảnh banner 5MB lên CMS thay vì dùng định dạng WebP 200KB.
  • Script chặn render: Các đoạn mã tracking đặt sai vị trí khiến trình duyệt mất thêm 2-3 giây chỉ để hiển thị khung hình đầu tiên.

Nếu chỉ dùng Lighthouse thủ công trong Chrome DevTools, bạn rất dễ bỏ lọt lỗi. Khi làm việc nhóm, việc ai đó vô tình commit code làm hỏng Core Web Vitals là chuyện xảy ra như cơm bữa.

Tại sao Lighthouse CI (LHCI) là “chân ái”?

Trước khi chốt phương án dùng LHCI, mình đã thử qua vài cách nhưng đều có nhược điểm:

  1. Check thủ công: Mở Chrome, bấm Generate Report. Cách này cực kỳ mất thời gian và dễ quên.
  2. Dùng PageSpeed Insights API: Viết script quét định kỳ. Tuy nhiên, nó chỉ báo cáo khi code đã lên Production. Lúc này “mất bò mới lo làm chuồng”.
  3. Lighthouse CI: Đây là giải pháp chủ động. Nó chặn ngay code xấu từ vòng gửi xe (Pull Request). Nếu không đạt điểm tối thiểu, GitHub sẽ không cho phép merge code.

Hướng dẫn tích hợp LHCI vào GitHub Actions

Để bắt đầu, bạn cần một dự án web đã đẩy lên GitHub. Quy trình này áp dụng được cho cả React, Next.js, Vue hay thậm chí là web HTML tĩnh.

Bước 1: Cài đặt CLI

Hãy cài gói CLI của Lighthouse vào project để test thử ở môi trường local trước.

npm install -g @lhci/[email protected]

Bước 2: Thiết lập “luật chơi” với lighthouserc.js

Tạo file lighthouserc.js ở thư mục gốc. Đây là nơi bạn định nghĩa các tiêu chuẩn mà code mới phải vượt qua.

module.exports = {
  ci: {
    collect: {
      numberOfRuns: 3, // Chạy 3 lần để lấy kết quả trung bình, tránh sai số
      staticDistDir: './dist', 
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }], 
        'categories:accessibility': ['error', { minScore: 0.8 }], 
        'categories:best-practices': ['error', { minScore: 0.9 }],
        'categories:seo': ['error', { minScore: 0.9 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }], // Chặn lỗi nhảy khung hình
      },
    },
    upload: {
      target: 'temporary-public-storage', 
    },
  },
};

Bước 3: Tự động hóa với GitHub Actions

Tạo file .github/workflows/lighthouse.yml. GitHub sẽ tự chạy script này mỗi khi có ai đó push code.

name: Lighthouse CI
on: [push, 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: 18
      - run: npm install && npm run build
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/[email protected]
          lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

Kinh nghiệm thực tế: Đừng quá cứng nhắc với con số 100

Nhiều bạn mới áp dụng thường bị ám ảnh bởi điểm tuyệt đối. Thực tế, server CI của GitHub (thường là Ubuntu) có cấu hình yếu hơn máy cá nhân. Vì vậy, điểm số trên CI thường thấp hơn khoảng 5-10 điểm.

Thay vì đặt mục tiêu 100, hãy tập trung vào tính ổn định. Nếu điểm trung bình dự án đang là 85, hãy đặt ngưỡng chặn (assertion) ở mức 80. Nếu một commit kéo điểm xuống còn 60, hệ thống sẽ “gào lên” ngay lập tức. Đó có thể là do một tấm ảnh PNG 2MB mới xuất hiện hoặc một script lạ đang chặn main thread.

Kết luận

Cài đặt Lighthouse CI chỉ tốn khoảng 20 phút nhưng lợi ích mang lại rất dài hạn. Nó giống như một người gác cổng mẫn cán, đảm bảo trải nghiệm người dùng không bị xuống cấp theo thời gian. Đừng đợi đến khi rớt hạng SEO mới đi tối ưu. Hãy tích hợp LHCI ngay hôm nay để yên tâm ngủ ngon sau mỗi lần nhấn nút Merge.

Share:
Tags: