Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Theo dõi hiệu suất với Lighthouse CI

Cách thêm Lighthouse vào hệ thống tích hợp liên tục, chẳng hạn như GitHub Actions.

Katie Hempenius

Lighthouse CI là một bộ công cụ để sử dụng Lighthouse trong quá trình tích hợp liên tục. Bạn có thể kết hợp Lighthouse CI vào quy trình làm việc của nhà phát triển theo nhiều cách. Hướng dẫn này đề cập đến các chủ đề sau:

Sử dụng Lighthouse CI CLI.
Định cấu hình nhà cung cấp CI để chạy Lighthouse CI.
Thiết lập GitHub Action và kiểm tra trạng thái cho Lighthouse CI. Thao tác này sẽ tự động hiển thị kết quả của Lighthouse trên các yêu cầu kéo của GitHub.
Xây dựng trang tổng quan về hiệu suất và kho dữ liệu cho báo cáo Lighthouse.

Tổng quan

Lighthouse CI là một bộ công cụ miễn phí hỗ trợ việc sử dụng Lighthouse để giám sát hiệu suất. Một báo cáo Lighthouse duy nhất cung cấp thông tin tổng quan nhanh về hiệu suất của một trang web tại thời điểm chạy; Lighthouse CI cho thấy những kết quả này đã thay đổi như thế nào theo thời gian. Bạn có thể dùng thông tin này để xác định tác động của các thay đổi cụ thể về mã hoặc đảm bảo đáp ứng ngưỡng hiệu suất trong quá trình tích hợp liên tục. Mặc dù giám sát hiệu suất là trường hợp sử dụng phổ biến nhất cho Lighthouse CI, nhưng bạn có thể dùng công cụ này để giám sát các khía cạnh khác của báo cáo Lighthouse, chẳng hạn như SEO hoặc khả năng hỗ trợ tiếp cận.

Chức năng cốt lõi của Lighthouse CI được cung cấp bởi giao diện dòng lệnh Lighthouse CI. (Lưu ý: Đây là một công cụ riêng biệt với Lighthouse CLI.) Lighthouse CI CLI cung cấp một tập hợp các lệnh để sử dụng Lighthouse CI. Ví dụ: lệnh autorun thực thi nhiều lần chạy Lighthouse, xác định báo cáo Lighthouse trung bình và tải báo cáo lên để lưu trữ. Bạn có thể tuỳ chỉnh hành vi này bằng cách truyền thêm cờ hoặc tuỳ chỉnh tệp cấu hình của Lighthouse CI, lighthouserc.js.

Mặc dù chức năng cốt lõi của Lighthouse CI chủ yếu được gói gọn trong Lighthouse CI CLI, nhưng Lighthouse CI thường được sử dụng thông qua một trong các phương pháp sau:

Chạy Lighthouse CI trong quy trình tích hợp liên tục
Sử dụng Lighthouse CI GitHub Action để chạy và nhận xét về mọi yêu cầu kéo
Theo dõi hiệu suất theo thời gian thông qua trang tổng quan do Lighthouse Server cung cấp.

Tất cả các phương pháp này đều được xây dựng dựa trên Lighthouse CI CLI.

Các giải pháp thay thế cho Lighthouse CI bao gồm các dịch vụ giám sát hiệu suất của bên thứ ba hoặc viết tập lệnh của riêng bạn để thu thập dữ liệu hiệu suất trong quá trình CI. Bạn nên cân nhắc sử dụng dịch vụ của bên thứ ba nếu muốn để người khác quản lý máy chủ giám sát hiệu suất và thiết bị kiểm thử, hoặc nếu bạn muốn có chức năng thông báo (chẳng hạn như tích hợp email hoặc Slack) mà không cần phải tự xây dựng các tính năng này.

Sử dụng Lighthouse CI trên máy

Phần này giải thích cách chạy và cài đặt Lighthouse CI CLI trên máy và cách định cấu hình lighthouserc.js. Chạy Lighthouse CI CLI trên máy là cách dễ nhất để đảm bảo rằng lighthouserc.js của bạn được định cấu hình chính xác.

Cài đặt Lighthouse CI CLI.
```
npm install -g @lhci/cli
```
Lighthouse CI được định cấu hình bằng cách đặt tệp lighthouserc.js vào thư mục gốc của kho lưu trữ dự án. Tệp này là bắt buộc và sẽ chứa thông tin cấu hình liên quan đến Lighthouse CI. Mặc dù Lighthouse CI có thể được định cấu hình để sử dụng mà không cần kho lưu trữ git, nhưng hướng dẫn trong bài viết này giả định rằng kho lưu trữ dự án của bạn được định cấu hình để sử dụng git.
Trong thư mục gốc của kho lưu trữ, hãy tạo một tệp cấu hình lighthouserc.js.
```
touch lighthouserc.js
```

Thêm mã sau vào lighthouserc.js. Mã này là một cấu hình Lighthouse CI trống. Bạn sẽ thêm vào cấu hình này trong các bước sau.

module.exports = {
  ci: {
    collect: {
      /* Add configuration here */
    },
    upload: {
      /* Add configuration here */
    },
  },
};

Mỗi khi Lighthouse CI chạy, công cụ này sẽ khởi động một máy chủ để phân phát trang web của bạn. Máy chủ này là thứ cho phép Lighthouse tải trang web của bạn ngay cả khi không có máy chủ nào khác đang chạy. Khi Lighthouse CI chạy xong, máy chủ sẽ tự động tắt. Để đảm bảo việc phân phát hoạt động chính xác, bạn nên định cấu hình thuộc tính staticDistDir hoặc startServerCommand.

Nếu trang web của bạn là trang tĩnh, hãy thêm thuộc tính staticDistDir vào đối tượng ci.collect để cho biết vị trí của các tệp tĩnh. Lighthouse CI sẽ sử dụng máy chủ riêng để phân phát các tệp này trong khi kiểm thử trang web của bạn. Nếu trang web của bạn không phải là trang web tĩnh, hãy thêm thuộc tính startServerCommand vào đối tượng ci.collect để cho biết lệnh khởi động máy chủ. Lighthouse CI sẽ bắt đầu một quy trình máy chủ mới trong quá trình kiểm thử và tắt quy trình đó sau đó.
```
// Static site example
collect: {
  staticDistDir: './public',
}
```
```
// Dynamic site example
collect: {
  startServerCommand: 'npm run start',
}
```
Thêm thuộc tính url vào đối tượng ci.collect để cho biết(các) URL mà Lighthouse CI nên chạy Lighthouse. Giá trị của thuộc tính url phải được cung cấp dưới dạng một mảng URL; mảng này có thể chứa một hoặc nhiều URL. Theo mặc định, Lighthouse CI sẽ chạy Lighthouse ba lần cho mỗi URL.
```
collect: {
  // ...
  url: ['http://localhost:8080']
}
```
Lưu ý: Máy chủ mà bạn đã định cấu hình ở bước trước phải phân phát được các URL này. Do đó, nếu bạn đang chạy Lighthouse CI trên máy, thì các URL này có thể phải bao gồm localhost thay vì máy chủ lưu trữ chính thức của bạn.
Thêm thuộc tính target vào đối tượng ci.upload và đặt giá trị thành 'temporary-public-storage'. (Các) báo cáo Lighthouse do Lighthouse CI thu thập sẽ được tải lên bộ nhớ công khai tạm thời. Báo cáo sẽ được lưu ở đó trong 7 ngày rồi tự động bị xoá. Hướng dẫn thiết lập này sử dụng tuỳ chọn tải lên "bộ nhớ công khai tạm thời" vì tuỳ chọn này giúp thiết lập nhanh chóng. Để biết thông tin về các cách khác để lưu trữ báo cáo Lighthouse, hãy tham khảo tài liệu.
```
upload: {
  target: 'temporary-public-storage',
}
```
Vị trí lưu trữ của báo cáo sẽ tương tự như sau:
```
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
```
(URL này sẽ không hoạt động vì báo cáo đã bị xoá.)
Chạy Lighthouse CI CLI từ dòng lệnh bằng lệnh autorun. Thao tác này sẽ chạy Lighthouse ba lần và tải báo cáo Lighthouse trung bình lên.
```
lhci autorun
```
Nếu bạn đã định cấu hình đúng cách Lighthouse CI, thì việc chạy lệnh này sẽ tạo ra kết quả tương tự như sau:
```
✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Started a web server on port 65324...
Running Lighthouse 3 time(s) on http://localhost:65324/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:65324/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.
```
Bạn có thể bỏ qua thông báo GitHub token not set trong kết quả của bảng điều khiển. Mã thông báo GitHub chỉ cần thiết nếu bạn muốn sử dụng Lighthouse CI với GitHub Action. Cách thiết lập GitHub Action sẽ được giải thích ở phần sau của bài viết này.

Khi nhấp vào đường liên kết trong kết quả bắt đầu bằng https://storage.googleapis.com..., bạn sẽ được chuyển đến báo cáo Lighthouse tương ứng với lần chạy Lighthouse trung bình.

Bạn có thể ghi đè các giá trị mặc định mà autorun sử dụng thông qua dòng lệnh hoặc lighthouserc.js. Ví dụ: cấu hình lighthouserc.js bên dưới cho biết rằng 5 lần chạy Lighthouse sẽ được thu thập mỗi khi autorun thực thi.

Cập nhật lighthouserc.js để sử dụng thuộc tính numberOfRuns:

module.exports = {
    // ...
    collect: {
      numberOfRuns: 5
    },
  // ...
  },
};

Chạy lại lệnh autorun:

lhci autorun

Kết quả của thiết bị đầu cuối sẽ cho thấy Lighthouse đã chạy 5 lần thay vì 3 lần như mặc định:

✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Automatically determined ./dist as `staticDistDir`.
Set it explicitly in lighthouserc.json if incorrect.

Started a web server on port 64444...
Running Lighthouse 5 time(s) on http://localhost:64444/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Run #4...done.
Run #5...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:64444/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591716944028-6048.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.

Để tìm hiểu về các lựa chọn cấu hình khác, hãy tham khảo tài liệu về cấu hình của Lighthouse CI.

Thiết lập quy trình CI để chạy Lighthouse CI

Bạn có thể sử dụng Lighthouse CI với công cụ CI mà bạn yêu thích. Phần Định cấu hình nhà cung cấp CI trong tài liệu về Lighthouse CI có chứa các mã mẫu cho biết cách kết hợp Lighthouse CI vào tệp cấu hình của các công cụ CI phổ biến. Cụ thể, các mã mẫu này cho thấy cách chạy Lighthouse CI để thu thập các phép đo hiệu suất trong quá trình CI.

Sử dụng Lighthouse CI để thu thập kết quả đo lường hiệu suất là một điểm khởi đầu tốt để giám sát hiệu suất. Tuy nhiên, người dùng nâng cao có thể muốn tiến thêm một bước và sử dụng Lighthouse CI để không tạo bản dựng nếu không đáp ứng các tiêu chí được xác định trước, chẳng hạn như vượt qua các quy trình kiểm tra cụ thể của Lighthouse hoặc đáp ứng tất cả ngân sách hiệu suất. Hành vi này được định cấu hình thông qua thuộc tính assert của tệp lighthouserc.js.

Lighthouse CI hỗ trợ 3 cấp độ xác nhận:

off: bỏ qua câu nhận định
warn: in lỗi ra stderr
error: in lỗi ra stderr và thoát khỏi Lighthouse CI bằng một mã thoát khác 0

Dưới đây là ví dụ về cấu hình lighthouserc.js bao gồm các câu nhận định. Nó đặt các câu nhận định cho điểm số của các danh mục hiệu suất và khả năng hỗ trợ tiếp cận của Lighthouse. Để thử tính năng này, hãy thêm các câu nhận định dưới đây vào tệp lighthouserc.js, sau đó chạy lại Lighthouse CI.

module.exports = {
  ci: {
    collect: {
      // ...
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', {minScore: 1}],
        'categories:accessibility': ['error', {minScore: 1}]
      }
    },
    upload: {
      // ...
    },
  },
};

Kết quả xuất ra trên bảng điều khiển có dạng như sau:

Ảnh chụp màn hình thông báo cảnh báo do Lighthouse CI tạo

Để biết thêm thông tin về câu nhận định của Lighthouse CI, hãy tham khảo tài liệu.

Thiết lập GitHub Action để chạy Lighthouse CI

Bạn có thể dùng GitHub Action để chạy Lighthouse CI. Thao tác này sẽ tạo một báo cáo Lighthouse mới mỗi khi có thay đổi về mã được đẩy vào bất kỳ nhánh nào của kho lưu trữ GitHub. Hãy sử dụng tính năng này cùng với một quy trình kiểm tra trạng thái để hiển thị các kết quả này trên mỗi yêu cầu lấy dữ liệu.

Ảnh chụp màn hình của một quy trình kiểm tra trạng thái trên GitHub

Trong thư mục gốc của kho lưu trữ, hãy tạo một thư mục có tên là .github/workflows. Quy trình công việc cho dự án của bạn sẽ nằm trong thư mục này. Quy trình công việc là một quy trình chạy vào thời điểm định trước (ví dụ: khi mã được đẩy) và bao gồm một hoặc nhiều hành động.
```
mkdir .github
mkdir .github/workflows
```
Trong .github/workflows, hãy tạo một tệp có tên là lighthouse-ci.yaml. Tệp này sẽ lưu giữ cấu hình cho một quy trình công việc mới.
```
touch lighthouse-ci.yaml
```

Thêm văn bản sau vào lighthouse-ci.yaml.

name: Build project and run Lighthouse CI
on: [push]
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: 10.x
      - name: npm install
        run: |
          npm install
      - name: run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.3.x
          lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"

Cấu hình này thiết lập một quy trình công việc bao gồm một công việc duy nhất sẽ chạy bất cứ khi nào mã mới được đẩy vào kho lưu trữ. Công việc này có 4 bước:

Kiểm tra kho lưu trữ mà Lighthouse CI sẽ chạy
Cài đặt và định cấu hình Node
Cài đặt các gói npm bắt buộc
Chạy Lighthouse CI và tải kết quả lên bộ nhớ công khai tạm thời.

Xác nhận những thay đổi này và đẩy chúng lên GitHub. Nếu bạn đã làm đúng theo các bước ở trên, thì việc đẩy mã lên GitHub sẽ kích hoạt quy trình công việc mà bạn vừa thêm.
Để xác nhận rằng Lighthouse CI đã kích hoạt và xem báo cáo mà công cụ này tạo, hãy chuyển đến thẻ Actions (Hành động) của dự án. Bạn sẽ thấy quy trình công việc Build project and Run Lighthouse CI (Tạo bản dựng dự án và Chạy Lighthouse CI) được liệt kê trong phần cam kết gần đây nhất.

Bạn có thể chuyển đến báo cáo Lighthouse tương ứng với một cam kết cụ thể từ thẻ Actions (Hành động). Nhấp vào thay đổi, nhấp vào bước quy trình làm việc Lighthouse CI, sau đó mở rộng kết quả của bước chạy Lighthouse CI.

Bạn vừa thiết lập một Hành động GitHub để chạy Lighthouse CI. Điều này sẽ hữu ích nhất khi được sử dụng cùng với kiểm tra trạng thái của GitHub.

Thiết lập quy trình kiểm tra trạng thái trên GitHub

Nếu được định cấu hình, quy trình kiểm tra trạng thái sẽ là một thông báo xuất hiện trên mọi yêu cầu kéo và thường bao gồm thông tin như kết quả kiểm thử hoặc mức độ thành công của một bản dựng.

Ảnh chụp màn hình thẻ "Settings" (Cài đặt) trên GitHub

Các bước dưới đây giải thích cách thiết lập quy trình kiểm tra trạng thái cho Lighthouse CI.

Chuyển đến trang Ứng dụng GitHub Lighthouse CI rồi nhấp vào Configure (Định cấu hình).
(Không bắt buộc) Nếu bạn thuộc nhiều tổ chức trên GitHub, hãy chọn tổ chức sở hữu kho lưu trữ mà bạn muốn sử dụng Lighthouse CI.
Chọn All repositories (Tất cả kho lưu trữ) nếu bạn muốn bật Lighthouse CI trong tất cả kho lưu trữ hoặc chọn Only select repositories (Chỉ chọn kho lưu trữ) nếu bạn chỉ muốn sử dụng Lighthouse CI trong một số kho lưu trữ cụ thể, sau đó chọn kho lưu trữ. Sau đó, nhấp vào Cài đặt và uỷ quyền.
Sao chép mã thông báo xuất hiện. Bạn sẽ sử dụng mã này trong bước tiếp theo.
Để thêm mã thông báo, hãy chuyển đến trang Settings (Cài đặt) của kho lưu trữ GitHub, nhấp vào Secrets (Bí mật), sau đó nhấp vào Add a new secret (Thêm bí mật mới).
Đặt trường Name (Tên) thành LHCI_GITHUB_APP_TOKEN và đặt trường Value (Giá trị) thành mã thông báo mà bạn đã sao chép ở bước cuối cùng, sau đó nhấp vào nút Add secret (Thêm khoá bí mật).
Chuyển đến tệp lighthouse-ci.yaml rồi thêm khoá bí mật mới của môi trường vào lệnh "run Lighthouse CI" (chạy Lighthouse CI).

-           name: run Lighthouse CI
            run: |
              npm install -g @lhci/cli@0.3.x
              lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
+            env:
+              LHCI_GITHUB_APP_TOKEN: $

Bước kiểm tra trạng thái đã sẵn sàng để sử dụng. Để kiểm thử, hãy tạo một yêu cầu kéo mới hoặc đẩy một thay đổi vào một yêu cầu kéo hiện có.

Thiết lập máy chủ Lighthouse CI

Máy chủ Lighthouse CI cung cấp một trang tổng quan để khám phá báo cáo Lighthouse trước đây. Công cụ này cũng có thể đóng vai trò là kho dữ liệu riêng tư, dài hạn cho báo cáo Lighthouse.

Ảnh chụp màn hình trang tổng quan của Máy chủ Lighthouse CI

Ảnh chụp màn hình so sánh hai báo cáo Lighthouse trong Lighthouse CI Server

Chọn các thay đổi cần so sánh.
Mức thay đổi của điểm Lighthouse giữa hai lần xác nhận.
Phần này chỉ cho thấy các chỉ số đã thay đổi giữa hai lần xác nhận.
Các điểm hồi quy được đánh dấu bằng màu hồng.
Các điểm cải tiến được đánh dấu bằng màu xanh dương.

Máy chủ Lighthouse CI phù hợp nhất với những người dùng có thể tự triển khai và quản lý cơ sở hạ tầng của riêng họ.

Để biết thông tin về cách thiết lập máy chủ Lighthouse CI, bao gồm cả công thức sử dụng Heroku và Docker để triển khai, hãy tham khảo hướng dẫn này.

Tìm hiểu thêm

Kho lưu trữ GitHub của Lighthouse CI