Tìm hiểu cách triển khai Frontend Lighthouse CI để giám sát hiệu suất liên tục, đảm bảo tốc độ và trải nghiệm người dùng tối ưu cho các ứng dụng web của bạn.
Frontend Lighthouse CI: Giám sát Hiệu suất Liên tục cho Ứng dụng Web
Trong bối cảnh kỹ thuật số phát triển nhanh chóng ngày nay, hiệu suất trang web là yếu tố tối quan trọng. Một trang web tải chậm hoặc được tối ưu hóa kém có thể dẫn đến người dùng thất vọng, giảm tương tác và cuối cùng là tác động tiêu cực đến doanh nghiệp của bạn. Đó là lúc Lighthouse CI phát huy tác dụng. Hướng dẫn này sẽ chỉ cho bạn cách triển khai Lighthouse CI để giám sát hiệu suất liên tục, giúp bạn chủ động xác định và giải quyết các điểm nghẽn về hiệu suất trước khi chúng ảnh hưởng đến người dùng của bạn.
Lighthouse CI là gì?
Lighthouse CI là một công cụ kiểm thử hiệu suất tự động, mã nguồn mở, tích hợp liền mạch vào quy trình Tích hợp Liên tục và Phân phối Liên tục (CI/CD) của bạn. Nó tận dụng công cụ kiểm định Lighthouse của Google để cung cấp những thông tin chi tiết hữu ích về hiệu suất, khả năng truy cập, SEO và các phương pháp hay nhất của trang web. Bằng cách tích hợp Lighthouse CI vào quy trình làm việc của mình, bạn có thể liên tục giám sát hiệu suất trang web, theo dõi các sự suy giảm hiệu suất và đảm bảo rằng mọi thay đổi mã nguồn đều góp phần mang lại trải nghiệm người dùng tốt hơn. Lighthouse CI không bị ràng buộc với một nhà cung cấp đám mây cụ thể nào và có thể được sử dụng với nhiều thiết lập khác nhau. Ví dụ, nó có thể chạy bên trong một Docker container trên các dịch vụ như Github Actions, Jenkins, CircleCI và nhiều dịch vụ khác.
Tại sao nên sử dụng Lighthouse CI?
Triển khai Lighthouse CI mang lại rất nhiều lợi ích:
- Phát hiện sớm sự suy giảm hiệu suất: Xác định các vấn đề về hiệu suất do các thay đổi mã nguồn mới gây ra trước khi chúng được đưa lên môi trường production.
- Cải thiện hiệu suất trang web: Nhận được những thông tin chi tiết hữu ích về cách tối ưu hóa tốc độ, khả năng truy cập và SEO cho trang web của bạn.
- Nâng cao trải nghiệm người dùng: Cung cấp một trang web nhanh hơn và thân thiện hơn với người dùng, giữ chân khách truy cập.
- Giảm tỷ lệ thoát trang: Tối ưu hóa thời gian tải để giảm sự thất vọng của người dùng và ngăn họ rời khỏi trang web của bạn.
- Tăng tỷ lệ chuyển đổi: Một trang web nhanh hơn thường dẫn đến tỷ lệ chuyển đổi cao hơn và kết quả kinh doanh tốt hơn.
- Kiểm thử hiệu suất tự động: Tích hợp kiểm thử hiệu suất vào quy trình CI/CD của bạn để giám sát liên tục.
- Ra quyết định dựa trên dữ liệu: Dựa vào các chỉ số và thông tin chi tiết về hiệu suất cụ thể để thực hiện các nỗ lực tối ưu hóa.
- Theo dõi hiệu suất dài hạn: Giám sát hiệu suất trang web của bạn theo thời gian để xác định các xu hướng và đo lường tác động của các hoạt động tối ưu hóa.
Các tính năng chính của Lighthouse CI
- Kiểm định tự động: Chạy các kiểm định Lighthouse tự động như một phần của quy trình CI/CD.
- Ngân sách hiệu suất: Đặt ngân sách hiệu suất để đảm bảo trang web của bạn luôn nằm trong ngưỡng hiệu suất chấp nhận được.
- Theo dõi sự suy giảm hiệu suất: Theo dõi sự suy giảm hiệu suất theo thời gian, cho phép bạn xác định những thay đổi mã nguồn đã gây ra chúng.
- Thông tin chi tiết hữu ích: Cung cấp các báo cáo chi tiết với các đề xuất hữu ích về cách cải thiện hiệu suất trang web của bạn.
- Cấu hình tùy chỉnh: Cấu hình Lighthouse CI để đáp ứng các nhu cầu và yêu cầu cụ thể của bạn.
- Tích hợp với các công cụ CI/CD: Tích hợp liền mạch với các công cụ CI/CD phổ biến như Jenkins, CircleCI, GitHub Actions và GitLab CI.
- Mã nguồn mở: Lighthouse CI là một dự án mã nguồn mở, có nghĩa là nó miễn phí để sử dụng và sửa đổi.
Thiết lập Lighthouse CI: Hướng dẫn từng bước
Dưới đây là hướng dẫn toàn diện để thiết lập Lighthouse CI cho dự án của bạn:
1. Cài đặt Lighthouse CI CLI
Đầu tiên, bạn cần cài đặt giao diện dòng lệnh (CLI) của Lighthouse CI trên toàn cục bằng npm hoặc yarn:
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Cấu hình Lighthouse CI
Tạo một tệp lighthouserc.js trong thư mục gốc của dự án để cấu hình Lighthouse CI. Tệp này xác định các URL cần kiểm định, các quy tắc xác nhận (assertion), và các tùy chọn cấu hình khác.
Dưới đây là một ví dụ cơ bản về tệp lighthouserc.js:
module.exports = {
ci:
{
collect: {
url: ['http://localhost:3000', 'http://localhost:3000/about']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'temporary-public-storage'
},
},
};
Giải thích:
collect.url: Chỉ định các URL sẽ được Lighthouse kiểm định. Trong ví dụ này, chúng tôi đang kiểm định trang chủ và trang "about" của một trang web chạy trênlocalhost:3000. Hãy nhớ thay thế điều này bằng các URL liên quan đến dự án *của bạn*, có thể bao gồm các môi trường staging.assert.preset: Sử dụng presetlighthouse:recommended, áp dụng một tập hợp các xác nhận được định sẵn dựa trên các khuyến nghị của Lighthouse. Đây là một điểm khởi đầu tốt, nhưng bạn có thể tùy chỉnh các xác nhận này khi cần thiết.upload.target: Cấu hình nơi kết quả Lighthouse CI sẽ được tải lên.temporary-public-storagerất hữu ích cho việc kiểm thử và phát triển, nhưng đối với môi trường production, bạn thường sẽ muốn sử dụng một giải pháp lưu trữ lâu dài hơn (sẽ được thảo luận sau).
3. Tích hợp Lighthouse CI vào quy trình CI/CD của bạn
Bước tiếp theo là tích hợp Lighthouse CI vào quy trình CI/CD của bạn. Các bước chính xác sẽ khác nhau tùy thuộc vào nhà cung cấp CI/CD của bạn, nhưng quy trình chung bao gồm việc thêm một kịch bản vào cấu hình CI/CD của bạn để chạy các lệnh Lighthouse CI.
Ví dụ sử dụng GitHub Actions:
Tạo một tệp có tên .github/workflows/lighthouse-ci.yml trong kho lưu trữ của bạn với nội dung sau:
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
Giải thích:
on.push.branches: Kích hoạt quy trình làm việc khi có push lên nhánhmain.on.pull_request: Kích hoạt quy trình làm việc khi có pull request.jobs.lighthouse.runs-on: Chỉ định hệ điều hành để sử dụng cho công việc (Ubuntu trong trường hợp này).steps: Xác định các bước sẽ được thực thi trong công việc:actions/checkout@v3: Checkout kho lưu trữ.actions/setup-node@v3: Thiết lập Node.js.npm ci: Cài đặt các dependency.Run Lighthouse CI: Chạy các lệnh Lighthouse CI:npm install -g @lhci/cli@0.11.x: Cài đặt Lighthouse CI CLI trên toàn cục. *Quan trọng*: Luôn khuyến khích khóa một phiên bản cụ thể.lhci autorun: Chạy Lighthouse CI ở chế độ "autorun", chế độ này sẽ tự động thu thập các kiểm định, xác nhận ngân sách hiệu suất và tải lên kết quả.
Những lưu ý quan trọng khi tích hợp CI/CD:
- Khởi động máy chủ: Trước khi chạy
lhci autorun, hãy đảm bảo máy chủ web của bạn đang chạy (ví dụ:npm start). Bạn có thể cần thêm một bước vào cấu hình CI/CD của mình để khởi động máy chủ ở chế độ nền. - Database Migrations: Nếu ứng dụng của bạn phụ thuộc vào cơ sở dữ liệu, hãy đảm bảo rằng các migration cơ sở dữ liệu được chạy như một phần của quy trình CI/CD *trước khi* chạy Lighthouse CI.
- Biến môi trường: Nếu ứng dụng của bạn yêu cầu các biến môi trường, hãy đảm bảo rằng chúng được cấu hình đúng trong môi trường CI/CD của bạn.
4. Chạy Lighthouse CI
Bây giờ, bất cứ khi nào bạn đẩy các thay đổi lên nhánh main hoặc tạo một pull request, quy trình làm việc Lighthouse CI sẽ tự động chạy. Kết quả sẽ có sẵn trong giao diện GitHub Actions.
5. Xem kết quả Lighthouse CI
Kết quả Lighthouse CI sẽ được tải lên vị trí được chỉ định trong tệp lighthouserc.js của bạn (ví dụ: temporary-public-storage). Bạn có thể truy cập các kết quả này bằng cách theo liên kết được cung cấp trong đầu ra của CI/CD. Những kết quả này cung cấp thông tin chi tiết về hiệu suất, khả năng truy cập, SEO và các phương pháp hay nhất của trang web của bạn.
Cấu hình Assertions và Ngân sách Hiệu suất
Lighthouse CI cho phép bạn cấu hình các xác nhận (assertions) và ngân sách hiệu suất để đảm bảo rằng trang web của bạn đáp ứng các mục tiêu hiệu suất. Assertions là các quy tắc kiểm tra các chỉ số hiệu suất cụ thể (ví dụ: First Contentful Paint, Largest Contentful Paint) so với các ngưỡng được định sẵn. Ngân sách hiệu suất xác định các giới hạn chấp nhận được cho các chỉ số hiệu suất khác nhau.
Đây là một ví dụ về cách cấu hình assertions trong tệp lighthouserc.js của bạn:
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'
},
}
};
Giải thích:
first-contentful-paint: Đặt ngưỡng cảnh báo cho First Contentful Paint (FCP) là 2000ms.largest-contentful-paint: Đặt ngưỡng cảnh báo cho Largest Contentful Paint (LCP) là 2500ms.cumulative-layout-shift: Đặt ngưỡng cảnh báo cho Cumulative Layout Shift (CLS) là 0.1.total-blocking-time: Đặt ngưỡng cảnh báo cho Total Blocking Time (TBT) là 500ms.categories:performance: Đặt ngưỡng cảnh báo cho điểm số tổng thể của danh mục Hiệu suất là 0.9.categories:accessibility: Đặt ngưỡng lỗi cho điểm số tổng thể của danh mục Khả năng truy cập là 0.8.
Các cấp độ Assertion:
off: Vô hiệu hóa assertion.warn: Hiển thị cảnh báo nếu assertion thất bại.error: Gây ra lỗi cho lần chạy Lighthouse CI nếu assertion thất bại.
Tùy chỉnh Assertions:
Bạn có thể tùy chỉnh các assertion để đáp ứng nhu cầu cụ thể của mình. Ví dụ, bạn có thể muốn đặt các ngưỡng nghiêm ngặt hơn cho các chỉ số hiệu suất quan trọng hoặc vô hiệu hóa các assertion không liên quan đến ứng dụng của bạn.
Chọn mục tiêu tải lên cho Lighthouse CI
Tùy chọn upload.target trong tệp lighthouserc.js của bạn chỉ định nơi kết quả Lighthouse CI sẽ được tải lên. Mục tiêu temporary-public-storage tiện lợi cho việc kiểm thử và phát triển, nhưng nó không phù hợp cho môi trường production vì dữ liệu không được lưu trữ lâu dài.
Dưới đây là một số mục tiêu tải lên thay thế:
- Lighthouse CI Server: Phương pháp được khuyến nghị cho môi trường production là sử dụng Lighthouse CI server. Lighthouse CI server cung cấp một giải pháp lưu trữ lâu dài cho kết quả Lighthouse CI của bạn, cũng như giao diện người dùng để xem và phân tích dữ liệu. Nó có thể được triển khai trên các nhà cung cấp đám mây khác nhau hoặc tự host trên cơ sở hạ tầng của bạn.
- Google Cloud Storage: Bạn có thể tải kết quả Lighthouse CI của mình lên một bucket Google Cloud Storage. Đây là một giải pháp hiệu quả về chi phí và có khả năng mở rộng để lưu trữ dữ liệu của bạn.
- Amazon S3: Tương tự như Google Cloud Storage, bạn có thể tải kết quả Lighthouse CI của mình lên một bucket Amazon S3.
Thiết lập Lighthouse CI Server:
Thiết lập Lighthouse CI server bao gồm các bước sau:
- Cài đặt Lighthouse CI Server: Bạn có thể cài đặt Lighthouse CI server bằng npm hoặc yarn:
- Cấu hình cơ sở dữ liệu: Lighthouse CI server yêu cầu một cơ sở dữ liệu để lưu trữ dữ liệu. Bạn có thể sử dụng nhiều loại cơ sở dữ liệu khác nhau, bao gồm PostgreSQL, MySQL và SQLite. Cấu hình các thiết lập kết nối cơ sở dữ liệu trong tệp
.env. - Khởi động Lighthouse CI Server: Khởi động Lighthouse CI server bằng lệnh
lhci server. - Cấu hình Lighthouse CI CLI để sử dụng Server: Cập nhật tệp
lighthouserc.jscủa bạn để sử dụng Lighthouse CI server làm mục tiêu tải lên:
npm install -g @lhci/server
yarn global add @lhci/server
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'
},
}
};
Thay thế http://your-lhci-server.com bằng URL của Lighthouse CI server của bạn và YOUR_LHCI_TOKEN bằng token truy cập cho dự án của bạn.
Các phương pháp hay nhất khi sử dụng Lighthouse CI
Để tận dụng tối đa Lighthouse CI, hãy tuân theo các phương pháp hay nhất sau:
- Chạy Lighthouse CI trên mỗi thay đổi mã nguồn: Tích hợp Lighthouse CI vào quy trình CI/CD của bạn để chạy kiểm định trên mỗi thay đổi mã nguồn. Điều này sẽ giúp bạn phát hiện sớm các sự suy giảm hiệu suất.
- Đặt ngân sách hiệu suất: Xác định ngân sách hiệu suất để đảm bảo rằng trang web của bạn luôn nằm trong ngưỡng hiệu suất chấp nhận được.
- Theo dõi xu hướng hiệu suất: Theo dõi hiệu suất trang web của bạn theo thời gian để xác định các xu hướng và đo lường tác động của các hoạt động tối ưu hóa.
- Ưu tiên các nỗ lực tối ưu hóa: Tập trung vào việc tối ưu hóa các chỉ số hiệu suất quan trọng nhất trước tiên.
- Sử dụng dữ liệu thực tế: Sử dụng dữ liệu thực tế để định hướng các nỗ lực tối ưu hóa của bạn. Ví dụ, bạn có thể sử dụng Google Analytics để xác định các trang được người dùng truy cập thường xuyên nhất.
- Kiểm thử trên thiết bị thật: Kiểm thử trang web của bạn trên các thiết bị thật để đảm bảo rằng nó hoạt động tốt trong điều kiện thực tế.
- Thường xuyên xem xét kết quả Lighthouse CI: Đảm bảo thường xuyên xem xét kết quả Lighthouse CI và hành động để giải quyết bất kỳ vấn đề hiệu suất nào được xác định.
- Tối ưu hóa hình ảnh: Tối ưu hóa hình ảnh của bạn để giảm kích thước tệp mà không làm giảm chất lượng. Các công cụ như ImageOptim (macOS), TinyPNG và ImageKit rất hữu ích cho việc này.
- Nén CSS và JavaScript: Nén các tệp CSS và JavaScript của bạn để giảm kích thước. Các công cụ như UglifyJS và CSSNano có thể giúp ích.
- Tận dụng bộ nhớ đệm của trình duyệt: Tận dụng bộ nhớ đệm của trình duyệt để giảm số lượng yêu cầu mà trang web của bạn gửi đến máy chủ.
- Sử dụng Mạng phân phối nội dung (CDN): Sử dụng CDN để phân phối nội dung trang web của bạn đến các máy chủ trên toàn thế giới. Điều này có thể cải thiện thời gian tải cho người dùng ở các vị trí địa lý khác nhau. Các dịch vụ như Cloudflare và Amazon CloudFront là những CDN phổ biến.
- Trì hoãn tải hình ảnh ngoài màn hình: Triển khai lazy loading cho các hình ảnh không hiển thị ngay lập tức trên màn hình. Điều này có thể cải thiện đáng kể thời gian tải trang ban đầu. Thuộc tính
loading="lazy"có thể được sử dụng để lazy loading đơn giản. - Loại bỏ các tài nguyên chặn hiển thị: Xác định và loại bỏ các tài nguyên đang chặn việc hiển thị trang của bạn. Điều này thường bao gồm việc chèn CSS quan trọng vào HTML (inlining) và trì hoãn tải CSS và JavaScript không quan trọng.
- Giảm thời gian thực thi JavaScript: Phân tích mã JavaScript của bạn để xác định và tối ưu hóa các hàm chạy chậm. Các kỹ thuật như code splitting và tree shaking có thể giúp giảm lượng JavaScript cần tải xuống và thực thi.
Các kỹ thuật Lighthouse CI nâng cao
Khi bạn đã quen với những kiến thức cơ bản về Lighthouse CI, bạn có thể khám phá một số kỹ thuật nâng cao để cải thiện hơn nữa việc giám sát hiệu suất của mình:
- Kiểm định Lighthouse tùy chỉnh: Bạn có thể tạo các kiểm định Lighthouse tùy chỉnh để kiểm tra các vấn đề hiệu suất cụ thể liên quan đến ứng dụng của bạn.
- Cấu hình Headless Chrome: Cấu hình Headless Chrome để sử dụng các giả lập thiết bị cụ thể hoặc cài đặt điều tiết mạng.
- Tích hợp với các công cụ giám sát: Tích hợp Lighthouse CI với các công cụ giám sát hiện có của bạn (ví dụ: New Relic, Datadog) để có cái nhìn toàn diện hơn về hiệu suất trang web.
- Kiểm thử hồi quy trực quan (Visual Regression Testing): Kết hợp Lighthouse CI với các công cụ kiểm thử hồi quy trực quan để phát hiện các thay đổi về giao diện có thể ảnh hưởng đến hiệu suất.
Lighthouse CI cho khán giả toàn cầu: Những lưu ý cho các trang web quốc tế
Khi sử dụng Lighthouse CI cho các trang web nhắm đến khán giả toàn cầu, hãy xem xét những điều sau:
- Kiểm tra từ nhiều vị trí: Thời gian phản hồi của máy chủ có thể khác nhau đáng kể dựa trên vị trí của người dùng. Sử dụng CDN (Mạng phân phối nội dung) và xem xét việc chạy các kiểm định Lighthouse CI từ các khu vực địa lý khác nhau để có được bức tranh chính xác hơn về hiệu suất cho người dùng quốc tế của bạn. Một số nhà cung cấp CI/CD cung cấp các tùy chọn để chỉ định vị trí địa lý của trình chạy.
- Tính đến các điều kiện mạng: Tốc độ và độ trễ mạng rất khác nhau trên toàn cầu. Mô phỏng các điều kiện mạng khác nhau trong các lần kiểm định Lighthouse CI của bạn để hiểu cách trang web của bạn hoạt động dưới nhiều ràng buộc khác nhau. Lighthouse cho phép bạn điều tiết kết nối mạng, mô phỏng các kết nối chậm hơn như 3G.
- Bản địa hóa nội dung: Đảm bảo rằng nội dung được bản địa hóa của bạn được tối ưu hóa đúng cách. Điều này bao gồm tối ưu hóa hình ảnh cho các ngôn ngữ và bộ ký tự khác nhau, và mã hóa phù hợp để tránh các vấn đề hiển thị.
- Tải phông chữ: Tối ưu hóa việc tải phông chữ cho các ngôn ngữ khác nhau. Xem xét sử dụng font-display: swap để ngăn văn bản bị ẩn trong khi tải phông chữ.
- Các kịch bản của bên thứ ba: Lưu ý đến các kịch bản của bên thứ ba, vì chúng có thể ảnh hưởng đáng kể đến hiệu suất, đặc biệt là đối với người dùng ở các khu vực có kết nối mạng chậm hơn. Thường xuyên kiểm định hiệu suất của các kịch bản bên thứ ba và xem xét việc sử dụng tải không đồng bộ hoặc tự host các kịch bản quan trọng.
- Tối ưu hóa cho thiết bị di động: Việc sử dụng thiết bị di động rất phổ biến ở nhiều nơi trên thế giới. Đảm bảo rằng trang web của bạn được tối ưu hóa cho thiết bị di động và các lần kiểm định Lighthouse CI của bạn bao gồm các bài kiểm tra dành riêng cho thiết bị di động.
Xử lý các sự cố thường gặp với Lighthouse CI
Dưới đây là một số sự cố phổ biến bạn có thể gặp phải khi sử dụng Lighthouse CI và cách khắc phục chúng:
- Lighthouse CI thất bại với lỗi "Timeout": Điều này có thể xảy ra nếu trang web của bạn mất quá nhiều thời gian để tải hoặc nếu Lighthouse CI không thể kết nối với trang web của bạn. Hãy thử tăng giá trị timeout trong tệp
lighthouserc.jscủa bạn hoặc kiểm tra nhật ký máy chủ của trang web để tìm lỗi. - Lighthouse CI báo cáo kết quả không nhất quán: Kết quả của Lighthouse có thể thay đổi một chút giữa các lần chạy do điều kiện mạng hoặc các yếu tố khác. Chạy nhiều lần kiểm định để có được kết quả trung bình ổn định hơn.
- Lighthouse CI không thể tải lên kết quả: Kiểm tra cấu hình
upload.targetcủa bạn và đảm bảo rằng Lighthouse CI server của bạn đang chạy và có thể truy cập được. Đồng thời, xác minh rằng bạn đã cấu hình đúng token truy cập. - Lighthouse CI báo cáo sự suy giảm hiệu suất bất ngờ: Điều tra các thay đổi mã nguồn đã được thực hiện trước khi sự suy giảm được phát hiện. Sử dụng các báo cáo của Lighthouse CI để xác định các chỉ số hiệu suất cụ thể đã bị suy giảm và tập trung nỗ lực tối ưu hóa của bạn vào các lĩnh vực đó.
Kết luận
Frontend Lighthouse CI là một công cụ mạnh mẽ để giám sát hiệu suất liên tục của các ứng dụng web. Bằng cách tích hợp Lighthouse CI vào quy trình CI/CD, bạn có thể chủ động xác định và giải quyết các vấn đề về hiệu suất, đảm bảo rằng trang web của bạn mang lại trải nghiệm người dùng tối ưu. Hãy nhớ điều chỉnh thiết lập, các quy tắc xác nhận và vị trí kiểm thử cho khán giả toàn cầu để tạo ra trải nghiệm tốt nhất có thể cho người dùng trên toàn thế giới.
Bằng cách tuân theo các bước và phương pháp hay nhất được nêu trong hướng dẫn này, bạn có thể cải thiện đáng kể hiệu suất trang web của mình, giảm tỷ lệ thoát trang, tăng tỷ lệ chuyển đổi và cuối cùng là đạt được các mục tiêu kinh doanh của mình. Hãy bắt đầu triển khai Lighthouse CI ngay hôm nay và khai thác toàn bộ tiềm năng của các ứng dụng web của bạn.