Lighthouse là một công cụ giúp bạn đo lường và tìm cách cải thiện hiệu suất của trang. Sau đây là quy trình làm việc chung về cách sử dụng Lighthouse:
- Bạn cho Lighthouse biết trang cần kiểm tra.
- Lighthouse sẽ tải trang đó và ghi lại thời gian trang cần để đạt được các mốc hiệu suất khác nhau. Các mốc này được gọi là chỉ số.
- Lighthouse sẽ cung cấp cho bạn một báo cáo về hiệu suất của trang. Báo cáo này cung cấp điểm số cho từng chỉ số và danh sách cơ hội. Nếu bạn triển khai các cơ hội này, trang sẽ tải nhanh hơn.
Nhiệm vụ của bạn là cải thiện điểm số của các chỉ số theo thời gian, hoặc ít nhất là đảm bảo rằng các chỉ số đó không bị giảm. Tuy nhiên, bạn không thể trực tiếp xử lý các chỉ số. Thay vào đó, bạn sẽ làm theo các cơ hội mà Lighthouse cung cấp. Việc xử lý những cơ hội đó sẽ giúp cải thiện điểm số của các chỉ số.
Chạy Lighthouse trên trang hồ sơ
Chạy Lighthouse từ trang hồ sơ web.dev:
Cung cấp URL bất kỳ và Lighthouse sẽ chạy một loạt quy trình kiểm tra để tạo báo cáo về hiệu suất của trang.
Xem báo cáo kiểm tra để xác định những khía cạnh mà bạn có thể cải thiện trang.
Đối với mỗi quy trình kiểm tra, bạn sẽ thấy hướng dẫn và các bước cần làm ngay để cải thiện điểm số.
Chạy Lighthouse từ Công cụ của Chrome cho nhà phát triển
Công cụ của Chrome cho nhà phát triển là một bộ các công cụ dành cho nhà phát triển web được tích hợp trực tiếp vào trình duyệt Google Chrome. Bạn không cần phải tải gì xuống để có được Công cụ cho nhà phát triển. Nếu có Chrome, tức là bạn có DevTools.
- Trong Chrome, hãy truy cập vào trang mà bạn muốn kiểm tra.
- Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
Nhấp vào thẻ Kiểm tra. Nếu bạn không thấy thẻ này, hãy nhấp vào biểu tượng » rồi chọn Kiểm tra trong danh sách. Lighthouse là công cụ hỗ trợ bảng điều khiển Kiểm tra. Đó là lý do bạn thấy hình ảnh một ngọn hải đăng.
- Đảm bảo bạn đã chọn nút chọn Điện thoại di động. Khi kiểm tra trang của bạn, Lighthouse sẽ mô phỏng khung nhìn và chuỗi tác nhân người dùng của thiết bị di động.
- Đảm bảo bạn đã bật hộp đánh dấu Hiệu suất. Bạn có thể bật hoặc tắt các hộp đánh dấu còn lại trong mục Kiểm tra. Nếu bật các tính năng này, bạn sẽ thấy nhiều cơ hội để cải thiện các khía cạnh khác của trang.
- Đảm bảo bạn đã chọn nút chọn Mô phỏng mạng 3G nhanh, giảm tốc CPU gấp 4 lần. Lighthouse không thực sự điều tiết mạng hoặc CPU trong khi tải trang. Thay vào đó, công cụ này xem xét thời gian tải trang trong điều kiện bình thường, sau đó ước tính thời gian tải trang trên mạng 3G tốc độ cao với CPU yếu hơn máy của bạn 4 lần.
- Đảm bảo bạn đã bật hộp đánh dấu Xoá bộ nhớ. Tuỳ chọn này buộc Lighthouse truy cập vào mạng cho mọi tài nguyên trên trang. Đây là cách khách truy cập lần đầu trải nghiệm trang.
- Nhấp vào Chạy quy trình kiểm tra. Sau 5 đến 10 giây, Lighthouse sẽ hiển thị cho bạn một báo cáo.
Ví dụ: nếu bạn chạy một số quy trình kiểm tra với Mạng 3G nhanh được mô phỏng, bật tính năng điều tiết Giảm tốc CPU gấp 4 lần, sau đó chạy các quy trình kiểm tra khác với tính năng điều tiết bị tắt, thì điểm số của các chỉ số sẽ thấp hơn đáng kể khi bạn bật tính năng điều tiết. Bạn có thể mất nhiều thời gian để tìm hiểu lý do trang của mình hiện chậm hơn nhiều, trong khi thực tế thì chỉ có cấu hình của bạn thay đổi.
Tìm hiểu báo cáo của bạn
Ở trên cùng bên phải báo cáo, bạn sẽ thấy điểm hiệu suất tổng thể. 100 là điểm tuyệt đối. Dưới điểm tổng thể là điểm của các chỉ số. Hướng dẫn tính điểm Lighthouse phiên bản 3 giải thích cách mỗi điểm số chỉ số đóng góp vào điểm số tổng thể.
Di chuột qua một chỉ số để tìm hiểu thêm về chỉ số đó. Nhấp vào Tìm hiểu thêm để đọc tài liệu về tính năng này.
Bên dưới điểm số của các chỉ số, bạn sẽ thấy ảnh chụp màn hình về giao diện của trang trong khi tải.
Bên dưới ảnh chụp màn hình, bạn sẽ thấy các cơ hội để cải thiện hiệu suất của trang.
Nhấp vào một cơ hội để tìm hiểu thêm về cơ hội đó.
Các bước tiếp theo
Hãy thử sử dụng Lighthouse để kiểm tra trang của bạn, từ trang hồ sơ hoặc từ Công cụ của Chrome cho nhà phát triển. Triển khai một trong các cơ hội, sau đó kiểm tra lại trang của bạn để xem thay đổi đó ảnh hưởng như thế nào đến báo cáo của bạn. Tốt nhất là điểm số của các chỉ số sẽ tốt hơn một chút và Lighthouse sẽ không còn gắn cờ cơ hội đó là một vấn đề cần giải quyết nữa.
Việc tự chạy Lighthouse rất phù hợp để kiểm tra nhanh các vấn đề, nhưng cuối cùng, bạn nên thiết lập tính năng giám sát liên tục để đảm bảo trang web của mình luôn hoạt động hiệu quả. Để theo dõi tiến trình của Lighthouse theo thời gian, hãy thêm trang web của bạn vào hồ sơ.