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