Tìm kiếm cơ hội cải thiện trải nghiệm người dùng bằng công cụ web của Chrome.
Hôm nay, chúng tôi sẽ đề cập đến các tính năng công cụ mới trong Lighthouse, PageSpeed và Công cụ cho nhà phát triển để giúp xác định mức độ cải thiện cho trang web của bạn trên Các chỉ số quan trọng về trang web.
Hãy ôn lại kiến thức về các công cụ, Lighthouse là một công cụ nguồn mở, tự động giúp cải thiện chất lượng trang web. Bạn có thể tìm thấy công cụ này trong bộ công cụ gỡ lỗi Chrome DevTools và chạy công cụ này trên bất kỳ trang web nào, công khai hoặc yêu cầu xác thực. Bạn cũng có thể tìm thấy Lighthouse trong công cụ PageSpeed Insights, CI và WebPageTest.
Lighthouse 7.x bao gồm các tính năng mới như ảnh chụp màn hình phần tử, giúp bạn dễ dàng kiểm tra trực quan các phần trên giao diện người dùng có ảnh hưởng đến các chỉ số trải nghiệm người dùng (ví dụ: những nút nào đang góp phần vào việc thay đổi bố cục).
Chúng tôi cũng đã hỗ trợ ảnh chụp màn hình phần tử trên PageSpeed Insights, giúp bạn dễ dàng phát hiện các vấn đề hơn cho những lần chạy trang hiệu suất một lần.
Đo lường Các chỉ số quan trọng về trang web
Lighthouse có thể tổng hợp đo lường Các chỉ số quan trọng về trang web, bao gồm Nội dung lớn nhất hiển thị, Thay đổi bố cục tích luỹ và Tổng thời gian chặn (một proxy trong phòng thí nghiệm cho Độ trễ đầu vào đầu tiên). Các chỉ số này phản ánh khả năng tải, độ ổn định của bố cục và mức độ sẵn sàng tương tác. Các chỉ số khác như Nội dung đầu tiên hiển thị được nhấn mạnh trong tương lai của Các chỉ số quan trọng về trang web cũng có ở đó.
Mục "Chỉ số" trong báo cáo Lighthouse có các phiên bản phòng thí nghiệm của những chỉ số này. Bạn có thể sử dụng báo cáo này làm bản tóm tắt về những khía cạnh trong trải nghiệm người dùng cần bạn chú ý.
Các chỉ số trường (chẳng hạn như các chỉ số có trong Báo cáo trải nghiệm người dùng của Chrome hoặc RUM) không có giới hạn này và là một yếu tố bổ sung quý giá cho dữ liệu trong phòng thí nghiệm vì chúng phản ánh trải nghiệm thực tế của người dùng. Dữ liệu trường không thể cung cấp các loại thông tin chẩn đoán mà bạn nhận được trong phòng thí nghiệm, vì vậy, cả hai đều phải đi đôi với nhau.
Xác định những điểm bạn có thể cải thiện thông qua Chỉ số quan trọng của trang web
Xác định phần tử Thời gian hiển thị nội dung lớn nhất
LCP là chỉ số đo lường trải nghiệm tải mà người dùng nhận thấy. Thuộc tính này đánh dấu thời điểm tải trang khi nội dung chính (hoặc "lớn nhất") được tải và hiển thị cho người dùng.
Lighthouse có quy trình kiểm tra "phần tử Nội dung lớn nhất hiển thị" để xác định phần tử nào hiển thị nội dung lớn nhất. Khi bạn di chuột qua phần tử đó, phần tử đó sẽ được đánh dấu trong cửa sổ trình duyệt chính.
Nếu phần tử này là một hình ảnh, thì thông tin này sẽ là một gợi ý hữu ích mà bạn có thể muốn tối ưu hoá việc tải hình ảnh này. Lighthouse cung cấp một số bài kiểm tra hoạt động tối ưu hoá hình ảnh để giúp bạn biết liệu hình ảnh của bạn có thể được nén, đổi kích thước hoặc phân phối ở định dạng hình ảnh hiện đại tối ưu hơn hay không.
Bạn cũng có thể thấy Dấu trang LCP của Annie Sullivan hữu ích trong việc nhanh chóng xác định phần tử LCP có hình chữ nhật màu đỏ chỉ bằng một lượt nhấp.
Tải trước hình ảnh được phát hiện muộn để cải thiện LCP (Nội dung lớn nhất hiển thị)
Để cải thiện Nội dung lớn nhất hiển thị, hãy tải trước các hình ảnh chính quan trọng nếu trình duyệt phát hiện thấy chúng muộn. Việc phát hiện trễ có thể xảy ra nếu cần tải gói JavaScript trước khi có thể tìm thấy hình ảnh.
Có một số câu hỏi phổ biến mà chúng tôi được hỏi về việc tải trước hình ảnh LCP mà bạn nên đề cập ngắn gọn.
Bạn có thể tải trước hình ảnh thích ứng không? Có.
Giả sử chúng ta có một hình ảnh chính thích ứng như được chỉ định bằng srcset và sizes bên dưới:
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
Nhờ thêm các thuộc tính imagesrcset và imagesizes vào thuộc tính link, chúng ta có thể tải trước hình ảnh thích ứng bằng cách sử dụng cùng một logic lựa chọn hình ảnh mà srcset và sizes sử dụng:
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
Kết quả kiểm tra cũng nêu bật các cơ hội tải trước nếu hình ảnh LCP được xác định thông qua nền CSS? Có.
Mọi hình ảnh được gắn cờ là hình ảnh LCP (cho dù qua nền CSS hay <img>) đều là hình ảnh đề xuất nếu hệ thống phát hiện thấy hình ảnh đó ở độ sâu thác nước từ 3 trở lên.
Tải từng phần hình ảnh ngoài màn hình và tránh điều này đối với LCP
Những hình ảnh ngoài màn hình không quan trọng đối với trải nghiệm người dùng ban đầu có thể được tải từng phần. Đây là kỹ thuật trì hoãn việc tải hình ảnh xuống cho đến khi người dùng cuộn xuống gần hình ảnh. Kỹ thuật này có thể giảm tranh chấp mạng đối với các nội dung quan trọng và trong một số trường hợp có thể cải thiện LCP. Kiểm tra "Trì hoãn hình ảnh ngoài màn hình" có thể hữu ích trong trường hợp này:
Không nên tải từng phần các hình ảnh quan trọng trong màn hình đầu tiên, chẳng hạn như hình ảnh Nội dung lớn nhất hiển thị. Việc này có thể trì hoãn quá trình tải hình ảnh LCP. Lighthouse sẽ làm nổi bật nếu hình ảnh LCP được tải từng phần không chính xác thông qua quy trình kiểm tra "Hình ảnh có nội dung lớn nhất được tải từng phần":
Xác định mức đóng góp vào CLS
Điểm số tổng hợp về mức thay đổi bố cục là chỉ số đo lường độ ổn định của hình ảnh. Chỉ số này đo lường mức độ thay đổi về mặt trực quan của nội dung trên một trang. Lighthouse có một quy trình kiểm tra để gỡ lỗi CLS có tên là "Tránh thay đổi lớn về bố cục".
Kết quả kiểm tra này làm nổi bật những phần tử DOM góp phần nhiều nhất vào việc thay đổi trang. Trong cột Phần tử ở bên trái, bạn sẽ thấy danh sách các phần tử DOM này và ở bên phải là mức đóng góp CLS tổng thể của các phần tử đó.
Nhờ tính năng Ảnh chụp màn hình phần tử Lighthouse mới, chúng ta có thể xem trước hình ảnh của các phần tử chính được ghi chú trong quá trình kiểm tra cũng như nhấp để thu phóng để có chế độ xem rõ ràng hơn:
Đối với CLS sau tải, bạn có thể có giá trị trong việc liên tục trực quan hoá hình ảnh bằng các hình chữ nhật mà các phần tử đóng góp nhiều nhất vào CLS. Đây là một tính năng mà bạn sẽ tìm thấy trong các công cụ của bên thứ ba như trang tổng quan Core Web Vitals của SpeedCurve và tôi thích tính năng này khi sử dụng Trình tạo GIF của Layout Shift của Defaced cho:
Để có cái nhìn tổng quan về các vấn đề liên quan đến việc thay đổi bố cục trên toàn trang web, tôi đã khai thác được rất nhiều thông tin từ báo cáo Chỉ số quan trọng chính của trang web trong Search Console. Nhờ đó, tôi có thể xem các loại trang trên trang web có điểm CLS cao (trong trường hợp này là giúp tự xác định những mẫu mà tôi cần dành thời gian):
Xác định CLS (Mức thay đổi bố cục tích luỹ) qua những hình ảnh không có phương diện
Để hạn chế Mức thay đổi bố cục tích luỹ do hình ảnh không có kích thước, hãy thêm các thuộc tính kích thước chiều rộng và chiều cao vào các phần tử hình ảnh và video của bạn. Phương pháp này đảm bảo trình duyệt có thể phân bổ đúng lượng dung lượng trong tài liệu khi hình ảnh đang tải.
Hãy xem phần Đặt lại chiều cao và chiều rộng cho hình ảnh là một lần nữa quan trọng để có thông tin đầy đủ về tầm quan trọng của việc suy nghĩ về kích thước và tỷ lệ khung hình của hình ảnh.
Xác định CLS (Mức thay đổi bố cục tích luỹ) trong quảng cáo
Quảng cáo của nhà xuất bản cho Lighthouse giúp bạn tìm cơ hội cải thiện trải nghiệm tải quảng cáo trên trang của mình, bao gồm cả khả năng đóng góp cho việc thay đổi bố cục và những tác vụ dài có thể đẩy nhanh thời gian người dùng có thể sử dụng trang của bạn. Trong Lighthouse, bạn có thể bật điều này thông qua Trình bổ trợ cộng đồng.
Hãy nhớ rằng quảng cáo là một trong những yếu tố góp phần lớn nhất trong việc thay đổi bố cục trên web. Điều quan trọng là:
- Thận trọng khi đặt quảng cáo không cố định ở gần đầu khung nhìn
- Loại bỏ sự thay đổi bằng cách dành trước kích thước lớn nhất có thể cho vùng quảng cáo
Tránh dùng ảnh động không được ghép
Ảnh động không được kết hợp có thể tự thể hiện là bị giật trên các thiết bị cấp thấp hơn nếu các tác vụ JavaScript nặng đang khiến luồng chính bận. Các ảnh động như vậy có thể khiến bố cục thay đổi.
Nếu phát hiện thấy một ảnh động không thể được tổng hợp, Chrome sẽ báo cáo ảnh động đó qua một công cụ theo dõi của Công cụ cho nhà phát triển được đọc bằng Lighthouse, cho phép công cụ này liệt kê những phần tử có ảnh động chưa được tổng hợp và vì lý do gì. Bạn có thể tìm thấy các ảnh động này trong bài kiểm tra Tránh dùng ảnh động không kết hợp.
Gỡ lỗi độ trễ đầu vào đầu tiên / Tổng thời gian chặn / Tác vụ dài
Đầu vào đầu tiên đo thời gian kể từ khi người dùng tương tác lần đầu với một trang (ví dụ: khi họ nhấp vào đường liên kết, nhấn vào một nút hoặc sử dụng một chế độ điều khiển tuỳ chỉnh dựa trên JavaScript) đến thời điểm mà trình duyệt thực sự có thể bắt đầu xử lý trình xử lý sự kiện để phản hồi lượt tương tác đó. Tác vụ JavaScript dài có thể ảnh hưởng đến chỉ số này và proxy cho chỉ số này, Tổng thời gian chặn.
Lighthouse bao gồm một quy trình kiểm tra Tránh các tác vụ dài trong luồng chính, trong đó liệt kê những tác vụ dài nhất trên luồng chính. Điều này có thể hữu ích trong việc xác định những yếu tố góp phần gây ra độ trễ đầu vào lớn nhất. Ở cột bên trái, chúng ta có thể thấy URL của các tập lệnh chịu trách nhiệm về các tác vụ dài trong luồng chính.
Ở bên phải, chúng ta có thể thấy thời lượng của các tác vụ này. Xin lưu ý rằng Tác vụ dài là các tác vụ thực thi lâu hơn 50 mili giây. Điều này được coi là chặn luồng chính đủ lâu để tác động đến tốc độ khung hình hoặc độ trễ đầu vào.
Nếu cân nhắc theo dõi các dịch vụ của bên thứ ba, tôi cũng khá thích lịch trình thực thi luồng chính mà Calibre cung cấp để trực quan hoá các chi phí này, trong đó nêu bật cả tác vụ mẹ và tác vụ con góp phần vào các tác vụ dài ảnh hưởng đến khả năng tương tác.
Chặn các yêu cầu mạng để xem tác động trước/sau trong Lighthouse
Công cụ của Chrome cho nhà phát triển hỗ trợ chặn các yêu cầu mạng để xem tác động của việc từng tài nguyên bị xoá hoặc không sử dụng được. Điều này có thể giúp bạn nắm được chi phí của từng tập lệnh riêng lẻ (ví dụ: các lượt nhúng hoặc trình theo dõi của bên thứ ba) đối với các chỉ số như Tổng thời gian chặn (TBT) và Thời gian tương tác.
Tính năng chặn yêu cầu kết nối mạng cũng hoạt động với Lighthouse! Hãy cùng xem nhanh báo cáo Lighthouse cho một trang web. Điểm Perf là 63/100 với TBT là 400 mili giây. Chúng tôi thấy rằng trang web này tải một tệp polyfill Observer giao điểm trong Chrome và việc này là không cần thiết. Hãy cùng chặn nó!
Chúng ta có thể nhấp chuột phải vào một tập lệnh trong bảng điều khiển Mạng Công cụ cho nhà phát triển và nhấp vào Block Request URL để chặn tập lệnh đó. Ở đây chúng ta sẽ thực hiện việc này cho polyfill Observer giao lộ.
Tiếp theo, chúng ta có thể chạy lại Lighthouse. Lần này, chúng ta có thể thấy điểm hiệu suất đã cải thiện (70/100) vì có Tổng thời gian chặn (400 mili giây => 300 mili giây).
Thay thế các nội dung nhúng tốn kém của bên thứ ba bằng thành phần tượng trưng
Thông thường, bạn nên sử dụng tài nguyên của bên thứ ba để nhúng video, bài đăng trên mạng xã hội hoặc tiện ích vào các trang. Theo mặc định, hầu hết các nội dung nhúng đều tải ngay lập tức và có thể đi kèm với tải trọng tốn kém ảnh hưởng tiêu cực đến trải nghiệm người dùng. Điều này sẽ là lãng phí nếu bên thứ ba không quan trọng (ví dụ: nếu người dùng cần cuộn trước khi họ thấy ứng dụng đó).
Một cách để cải thiện hiệu suất của các tiện ích đó là tải từng phần khi người dùng tương tác. Bạn có thể thực hiện việc này bằng cách hiển thị bản xem trước nhẹ của tiện ích (mặt tiền) và chỉ tải phiên bản đầy đủ nếu người dùng tương tác với tiện ích đó. Lighthouse có một quy trình kiểm tra để đề xuất các tài nguyên của bên thứ ba có thể tải từng phần với thành phần tượng trưng, chẳng hạn như các nội dung nhúng video trên YouTube.
Xin lưu ý rằng Lighthouse sẽ làm nổi bật đoạn mã của bên thứ ba chặn luồng chính trong hơn 250 mili giây. Điều này có thể làm lộ mọi loại tập lệnh của bên thứ ba (bao gồm cả những tập lệnh do Google tạo) có thể đáng trì hoãn hoặc tải từng phần nếu nội dung chúng hiển thị yêu cầu phải di chuyển để xem tập lệnh đó.
Vượt ra ngoài các chỉ số quan trọng về trang web
Ngoài việc nêu bật Core Web Vitals, các phiên bản gần đây của Lighthouse và PageSpeed Insights cũng cố gắng cung cấp hướng dẫn cụ thể mà bạn có thể làm theo để cải thiện tốc độ tải của các ứng dụng web nặng JavaScript nếu bạn đã bật bản đồ nguồn.
Các tính năng này bao gồm một tập hợp ngày càng mở rộng của các bài kiểm tra để giảm chi phí JavaScript trên trang của bạn, chẳng hạn như giảm sự phụ thuộc vào các đoạn mã polyfill và trùng lặp có thể không cần thiết cho trải nghiệm người dùng.
Để biết thêm thông tin về công cụ Core Web Vitals, hãy theo dõi tài khoản Twitter của nhóm Lighthouse và Tính năng mới trong Công cụ cho nhà phát triển.
Hình ảnh chính của Mercedes Mehling trên Unsplash.