Lighthouse là một công cụ tự động giúp cải thiện chất lượng trang web của bạn. Bạn cấp cho URL này một URL và trang này cung cấp danh sách đề xuất về cách cải thiện hiệu suất của trang, giúp trang dễ truy cập hơn, tuân thủ các phương pháp hay nhất và nhiều việc khác. Bạn có thể chạy ứng dụng này từ trong Công cụ của Chrome cho nhà phát triển, dưới dạng một Tiện ích của Chrome hoặc thậm chí là dưới dạng mô-đun nút, rất hữu ích cho việc tích hợp liên tục.
Thời gian vừa qua, Lighthouse đã cung cấp nhiều mẹo giúp cải thiện hiệu suất tải trang, chẳng hạn như bật tính năng nén văn bản hoặc giảm tập lệnh chặn hiển thị. Nhóm Lighthouse tiếp tục gửi các lượt kiểm tra mới để đưa ra cho bạn lời khuyên hữu ích hơn nữa nhằm giúp trang web của bạn nhanh hơn. Bài đăng này là một bản tóm tắt các bài kiểm tra hiệu suất hữu ích mà có thể bạn chưa biết, chẳng hạn như:
- Bảng chi tiết công việc theo luồng chính
- Tải trước các yêu cầu chính
- Thời gian khởi động JavaScript cao
- Tránh chuyển hướng trang
- JavaScript không dùng
- Sử dụng chính sách bộ nhớ đệm không hiệu quả đối với tài sản tĩnh
- Tránh chuyến bay khứ hồi tốn kém đến bất kỳ điểm khởi hành nào
- Sử dụng định dạng video cho nội dung ảnh động
- Tất cả văn bản vẫn hiển thị trong khi tải phông chữ web
- CSS và JavaScript không được giảm thiểu
- Các quy tắc CSS không dùng
Phân tích công việc theo chuỗi chính
Nếu đã từng sử dụng bảng điều khiển hiệu suất trong Công cụ cho nhà phát triển, bạn biết rằng việc phân tích thời gian CPU dành cho việc tải một trang có thể chỉ là công việc nhỏ. Chúng tôi vui mừng thông báo rằng thông tin này hiện đã được cung cấp sẵn và thuận tiện thông qua quy trình kiểm tra mới có tên là Phân tích công việc theo luồng chính.
Thông tin chẩn đoán mới này đánh giá mức độ và loại hoạt động xảy ra trong quá trình tải trang. Bạn có thể sử dụng hoạt động này để xử lý các vấn đề về hiệu suất tải liên quan đến bố cục, eval tập lệnh, phân tích cú pháp và các hoạt động khác.
Tải trước các yêu cầu chính
Khi truy xuất tài nguyên, các trình duyệt sẽ thực hiện việc này khi tìm thấy tệp tham chiếu đến tài nguyên đó trong tài liệu và các tài nguyên phụ của tài liệu đó. Đôi khi, việc này có thể chưa tối ưu vì một số tài nguyên quan trọng được phát hiện khá muộn trong quá trình tải trang. Rất may, rel=preload cho phép nhà phát triển gợi ý cho các trình duyệt tuân thủ về tài nguyên cần tìm nạp sớm nhất có thể. Quy trình kiểm tra Tải trước các yêu cầu chính mới giúp nhà phát triển biết được những tài nguyên nào có thể hưởng lợi khi được rel=preload tải sớm hơn.
Bạn nên kiểm thử và so sánh các thay đổi về hiệu suất khi có và không có rel=preload, vì các thay đổi này có thể ảnh hưởng đến hiệu suất tải theo những cách mà bạn có thể không mong đợi. Ví dụ: việc tải trước một hình ảnh lớn có thể trì hoãn quá trình kết xuất ban đầu, nhưng đổi lại là hình ảnh tải trước sẽ xuất hiện sớm hơn trong bố cục.
Luôn đảm bảo bạn hài lòng với kết quả!
Thời gian khởi động JavaScript cao
Khi quá nhiều JavaScript được tải, trang có thể không phản hồi khi trình duyệt phân tích cú pháp, biên dịch và thực thi. Các tập lệnh và quảng cáo của bên thứ ba là nguồn cụ thể dẫn đến hoạt động tập lệnh quá mức, có thể làm hỏng ngay cả các thiết bị mạnh mẽ. Kiểm tra Thời gian khởi động JavaScript cao mới cho thấy thời gian CPU mà mỗi tập lệnh trên trang sử dụng, cùng với URL của tập lệnh đó:
Khi thực hiện quy trình kiểm tra này, bạn cũng có thể bật huy hiệu của bên thứ ba trong bảng điều khiển mạng và lọc danh sách để xác định tài nguyên tập lệnh của bên thứ ba. Với dữ liệu từ quá trình kiểm tra này, bạn sẽ trang bị tốt hơn để tìm các nguồn hoạt động JavaScript quá mức khiến các trang chuyển từ nhanh thành chậm. Đối với các tập lệnh dành riêng cho ứng dụng, bạn có thể sử dụng các kỹ thuật như phân tách mã và lắc cây để giới hạn số lượng JavaScript trên mỗi trang của trang web.
Tránh chuyển hướng trang
Đôi khi, trình duyệt yêu cầu một URL, máy chủ có thể phản hồi bằng mã trạng thái cấp 300. Điều này khiến trình duyệt chuyển hướng đến một URL khác. Mặc dù cần thiết phải chuyển hướng để tối ưu hoá cho công cụ tìm kiếm và cho mục đích thuận tiện, nhưng các lệnh chuyển hướng này sẽ làm tăng độ trễ vào các yêu cầu. Điều này đặc biệt đúng nếu các nguồn đó chuyển hướng đến các nguồn gốc khác, điều này có thể làm phát sinh thêm thời gian thương lượng TLS và tra cứu DNS.
Bạn không nên sử dụng lệnh chuyển hướng cho các trang đích trên trang web của mình. Để giúp bạn giảm độ trễ và cải thiện hiệu suất tải, Lighthouse hiện cung cấp tính năng kiểm tra Tránh chuyển hướng trang. Tính năng này cho bạn biết thời điểm một thành phần điều hướng kích hoạt bất kỳ lệnh chuyển hướng nào.
Xin lưu ý rằng quá trình kiểm tra này khó kích hoạt trong phiên bản Lighthouse cho Công cụ cho nhà phát triển, vì quy trình này phân tích URL hiện tại trên thanh địa chỉ của trang và phản ánh độ phân giải của tất cả các lệnh chuyển hướng. Bạn sẽ dễ dàng thấy hoạt động kiểm tra này được điền trong Nút CLI nhất.
JavaScript không dùng đến
Mã tắt có thể là một vấn đề nghiêm trọng trong các ứng dụng nặng JavaScript. Mặc dù phương thức này không gây ra chi phí thực thi vì chưa bao giờ được gọi, nhưng phương pháp này có những tác động không mong muốn khác. Mã chết vẫn được trình duyệt tải xuống, phân tích cú pháp và biên dịch. Điều này ảnh hưởng đến hiệu suất tải và thời gian khởi động JavaScript. Tương tự như bảng điều khiển mức độ sử dụng trong Công cụ cho nhà phát triển, quá trình kiểm tra JavaScript không sử dụng cho thấy JavaScript được tải xuống bởi trang hiện tại nhưng không bao giờ được sử dụng.
Với quy trình kiểm tra này, bạn có thể xác định mã chết trong ứng dụng của mình và xoá mã đó để cải thiện hiệu suất tải và giảm mức sử dụng tài nguyên hệ thống. Mẹo nâng cao: Bạn cũng có thể sử dụng bảng mức độ sử dụng mã trong Công cụ cho nhà phát triển của Chrome để tìm thông tin này!
Sử dụng chính sách bộ nhớ đệm không hiệu quả đối với tài sản tĩnh
Mặc dù nhiều lời khuyên về hiệu suất thường tập trung vào việc tăng tốc độ của trang web cho những người dùng lần đầu, nhưng bạn cũng nên sử dụng chức năng lưu vào bộ nhớ đệm để cải thiện hiệu suất tải cho người dùng cũ. Chính sách về việc sử dụng bộ nhớ đệm không hiệu quả cho tài sản tĩnh sẽ kiểm tra các tiêu đề lưu vào bộ nhớ đệm đối với tài nguyên mạng và thông báo cho bạn nếu chính sách bộ nhớ đệm dành cho tài nguyên tĩnh không đạt tiêu chuẩn.
Với sự trợ giúp của quy trình kiểm tra này, bạn sẽ có thể dễ dàng tìm thấy và khắc phục các sự cố với chính sách bộ nhớ đệm hiện tại. Điều này sẽ giúp cải thiện hiệu suất đáng kể cho người dùng cũ và họ sẽ đánh giá cao tốc độ bổ sung đó!
Tránh chuyến đi khứ hồi tốn kém đến bất kỳ điểm khởi hành nào
Khi các trình duyệt truy xuất tài nguyên từ một máy chủ, có thể mất một thời gian đáng kể để thực hiện hoạt động tra cứu DNS và thiết lập kết nối với một máy chủ.
rel=preconnect cho phép nhà phát triển che giấu độ trễ này bằng cách thiết lập kết nối với các máy chủ khác trước khi trình duyệt đến hạn. Quy trình kiểm tra Tránh việc phải trải qua nhiều chuyến đi khứ hồi tốn kém đến bất kỳ điểm khởi hành nào sẽ giúp bạn khám phá các cơ hội sử dụng rel=preconnect!
rel=preconnect trong Lighthouse.Khi độ trễ cho các thành phần trên nhiều nguồn gốc giảm, người dùng sẽ nhận thấy mọi thứ đang diễn ra nhanh hơn một chút. Thông qua bài kiểm tra Lighthouse mới này, bạn sẽ tìm hiểu các cơ hội mới để sử dụng rel=preconnect để thực hiện điều đó.
Sử dụng định dạng video cho nội dung động
Ảnh GIF động có kích thước rất lớn, thường tiêu tốn ít nhất vài trăm kilobyte nếu không phải là vài megabyte dữ liệu. Nếu bạn quan tâm đến hiệu suất tải, chuyển đổi các ảnh GIF đó thành video là cách hay. Rất may là bài kiểm tra Sử dụng định dạng video cho nội dung động sẽ hỗ trợ bạn.
Nếu trang web của bạn có bất kỳ ảnh GIF nào có kích thước trên 100 KB, quá trình kiểm tra này sẽ tự động gắn cờ ảnh và hướng dẫn bạn đến cách chuyển đổi ảnh GIF thành video và nhúng ảnh. Các trang web như Imgur đã cải thiện đáng kể hiệu suất tải bằng cách chuyển đổi GIF thành video. Ngoài ra, nếu trang web của bạn sử dụng gói lưu trữ với băng thông có đo lượng dữ liệu, thì chỉ riêng khoản tiết kiệm chi phí tiềm năng cũng đủ để thuyết phục bạn!
Tất cả văn bản vẫn hiển thị trong khi tải phông chữ web
Khi chúng ta tải phông chữ trên web cho các trang, trình duyệt thường hiển thị văn bản không hiển thị cho đến khi phông chữ tải được. Hiện tượng này, được gọi là Đèn flash của văn bản ẩn (FOIT), có thể phù hợp với bạn hơn từ góc độ thiết kế, nhưng thực ra đây là một vấn đề. Bạn không thể đọc văn bản bị chặn kết xuất cho đến khi văn bản đó hiển thị. Trên các kết nối có độ trễ cao và/hoặc băng thông cao, điều này có nghĩa là bạn bị thiếu phần cốt lõi trong trải nghiệm người dùng. Đây cũng có thể là một loại vấn đề về hiệu suất cảm tính, trong đó trang không hiển thị nội dung có ý nghĩa nhanh như có thể. Rất may là quy trình kiểm tra Tất cả văn bản vẫn hiển thị trong quá trình tải phông chữ của web giúp bạn tìm thấy cơ hội khắc phục vấn đề này trên trang web của mình!
Nếu Lighthouse tìm thấy các phông chữ web đang làm chậm quá trình hiển thị văn bản trong ứng dụng của bạn, thì bạn có thể áp dụng một số biện pháp khắc phục. Bạn có thể kiểm soát việc hiển thị văn bản bằng thuộc tính CSS font-display và/hoặc API Tải phông chữ.
Nếu bạn muốn tìm hiểu sâu hơn, hãy cân nhắc đọc Hướng dẫn toàn diện về các chiến lược tải phông chữ, một hướng dẫn rất xuất sắc của Zach daman, là một tài nguyên tuyệt vời để tải phông chữ tối ưu.
CSS và JavaScript không được ưu tiên
Rút gọn đã là một kỹ thuật được đề xuất vì hiệu suất web đã là một yếu tố vì lý do chính đáng. Tính năng này làm giảm đáng kể kích thước của các tài nguyên dựa trên văn bản, nhờ đó cải thiện hiệu suất tải. Tuy nhiên, bạn có thể dễ dàng bỏ qua việc tối ưu hoá này, đặc biệt là khi các quy trình xây dựng không xử lý được vấn đề này. Các bài kiểm tra Rút gọn CSS và Rút gọn JavaScript sẽ tổng hợp một danh sách các tài nguyên chưa được rút gọn tìm thấy trên trang hiện tại. Từ đó, bạn có thể tiến hành giảm kích thước các tệp đó theo cách thủ công hoặc tăng cường hệ thống xây dựng để làm việc đó cho bạn.
Các quy tắc CSS không dùng đến
Khi một trang web đã tồn tại quá dài, không thể tránh khỏi việc nội dung còn sót lại do quá trình tái cấu trúc bắt đầu hình thành. Một trong những nguồn gốc như vậy là dưới dạng các quy tắc CSS không dùng đến. Các quy tắc này không còn cần thiết để trang web hoạt động, nhưng vẫn tiêu tốn băng thông. Để thuận tiện cho bạn, quy trình kiểm tra Quy tắc CSS không sử dụng sẽ cho biết những tài nguyên CSS nào trên trang có chứa CSS không được sử dụng.
Nếu Lighthouse tìm thấy CSS không sử dụng trên trang, có nhiều cách để loại bỏ CSS đó. UnCSS là một tiện ích như vậy, tự động thực hiện việc này cho bạn (mặc dù bạn phải sử dụng cẩn thận). Một phương thức thủ công hơn có liên quan đến việc sử dụng bảng mức độ sử dụng mã trong Công cụ cho nhà phát triển. Tuy nhiên, hãy nhớ rằng có thể cần đến một CSS không được sử dụng trên một trang khác. Một phương pháp khác có thể là chia CSS của bạn thành các tệp dành riêng cho mẫu và chỉ tải khi cần thiết. Dù bạn quyết định làm gì, Lighthouse vẫn sẽ xuất hiện để cho bạn biết liệu CSS của bạn có đang hoạt động nhiều hay không.
Hãy thử Lighthouse!
Nếu bạn quan tâm đến những quy trình kiểm tra mới này, hãy cập nhật Lighthouse và dùng thử!
- Tiện ích Lighthouse cho Chrome sẽ tự động cập nhật, nhưng bạn có thể cập nhật tiện ích này theo cách thủ công qua
chrome://extensions. - Trong Công cụ cho nhà phát triển, bạn có thể chạy Lighthouse trong bảng điều khiển kiểm tra. Chrome cập nhật lên phiên bản mới khoảng 6 tuần một lần, vì vậy, một số quy trình kiểm tra mới có thể không thực hiện được. Nếu muốn sử dụng các quy trình kiểm tra mới nhất hiện có, bạn có thể chạy mã Chrome mới nhất bằng cách tải Chrome Canary xuống.
- Đối với người dùng Nút: Hãy chạy
npm update lighthousehoặcnpm update lighthouse -gnếu bạn đã cài đặt Lighthouse trên toàn cầu.
Xin đặc biệt cảm ơn Kayce Basques, Patrick Hulce, Addy OSmani và Vinamrata Singal vì đã có ý kiến phản hồi quý báu, giúp cải thiện đáng kể chất lượng của bài viết này.