Tì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 ta sẽ tìm hiểu 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 cách trang web của bạn có thể cải thiện trên Các chỉ số quan trọng về trang web.
Để nhắc lại các công cụ này, Lighthouse là một công cụ nguồn mở, tự động giúp cải thiện chất lượng của trang web. Bạn có thể tìm thấy mã này trong bộ công cụ gỡ lỗi Công cụ cho nhà phát triển của Chrome 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 PageSpeed Insights, CI và WebPageTest.
Lighthouse 7.x có các tính năng mới như ảnh chụp màn hình thành phần, giúp bạn dễ dàng kiểm tra trực quan hơn 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 thay đổi bố cục).
Chúng tôi cũng đã hỗ trợ ảnh chụp màn hình thành phần trên PageSpeed Insights, giúp bạn dễ dàng phát hiện vấn đề hơn để các trang hoạt động với 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ố Các chỉ số quan trọng về trang web, bao gồm Thời gian hiển thị nội dung lớn nhất, Mức thay đổi bố cục tích lũy và Tổng thời gian chặn (một proxy thử nghiệm cho Thời gian phản hồi lần tương tác đầu tiên). Các chỉ số này phản ánh thời gian tải, độ ổn định về bố cục và mức độ sẵn sàng cho lượt tương tác. Các chỉ số khác như Thời gian hiển thị nội dung đầu tiên được làm nổi bật trong các chỉ số quan trọng về trang web sau này cũng được trình bày nổi bật.
Mục "Chỉ số" của báo cáo Lighthouse bao gồm 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 tính năng này dưới dạng chế độ xem tóm tắt về những khía cạnh của trải nghiệm người dùng cần bạn chú ý.
Các chỉ số thực tế (chẳng hạn như các chỉ số trong Báo cáo trải nghiệm người dùng của Chrome hoặc Mức độ chính xác theo thời gian thực) không có giới hạn này và là nguồn bổ sung quý giá cho dữ liệu 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 thực địa không thể cung cấp các loại thông tin chẩn đoán bạn nhận được trong phòng thí nghiệm, vì vậy, cả hai loại thông tin này phải luôn đi kèm với nhau.
Xác định những khía cạnh mà bạn có thể cải thiện trong Các chỉ số quan trọng về trang web
Xác định thành phần 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. Mã này đánh dấu thời điểm trong quá trình tải trang khi nội dung chính (hoặc "lớn nhất") được tải và người dùng có thể nhìn thấy.
Lighthouse có quy trình kiểm tra "phần tử Thời gian hiển thị nội dung lớn nhất" giúp xác định phần tử nào là thời gian hiển thị nội dung lớn nhất. Khi bạn di chuột qua thành phần này, thành phần đó sẽ được làm nổi bật 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 nên tối ưu hoá việc tải hình ảnh. Lighthouse bao gồm một số quy trình kiểm tra việc tối ưu hóa hình ảnh để giúp bạn biết liệu hình ảnh của mình có thể 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 xác định nhanh thành phần LCP bằng hình chữ nhật màu đỏ chỉ bằng một lần nhấp.
Tải trước hình ảnh phát hiện muộn để cải thiện LCP
Để cải thiện Thời gian hiển thị nội dung lớn nhất, hãy tải trước hình ảnh chính quan trọng nếu trình duyệt phát hiện thấy các hình ảnh đó muộn. Quá trình khám phá muộn có thể xảy ra nếu bạn cần tải gói JavaScript trước khi người dùng có thể tìm thấy hình ảnh.
Chúng tôi nhận được một số câu hỏi phổ biến về việc tải trước hình ảnh LCP mà bạn cũng có thể trình bày 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ó 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ờ các thuộc tính imagesrcset và imagesizes đã thêm 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 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">
Quá trình kiểm tra có làm nổi bật các cơ hội tải trước nếu hình ảnh LCP được xác định qua nền CSS không? Có.
Mọi hình ảnh bị gắn cờ là hình ảnh LCP cho dù thông qua nền CSS hay <img> đều là hình ảnh ứng cử viên 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 cho LCP
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 gần hình ảnh đó, giúp giảm tình trạng 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òn cải thiện LCP. Quy trình kiểm tra "Trì hoãn hình ảnh ngoài màn hình" có thể giúp bạn giải quyết vấn đề này:
Không được tải từng phần hình ảnh quan trọng trong màn hình đầu tiên (chẳng hạn như hình ảnh Thời gian hiển thị nội dung lớn nhất). 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 một hình ảnh LCP đang đượ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 thời gian hiển thị nội dung lớn nhất đã được tải từng phần":
Xác định nội dung đóng góp cho CLS (Điểm số tổng hợp về mức thay đổi bố cục)
Điểm số tổng hợp về mức thay đổi bố cục là phép đo về độ ổn định của hình ảnh. Chỉ số này xác định mức độ thay đổi hình ảnh của nội dung trên một trang. Lighthouse có một quy trình kiểm tra để gỡ lỗi CLS là "Tránh thay đổi bố cục lớn".
Quá trình kiểm tra này làm nổi bật những thành phần DOM đóng góp nhiều nhất vào những thay đổi của 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 tổng thể của CLS (Điểm số tổng hợp về mức thay đổi bố cục).
Nhờ tính năng Ảnh chụp màn hình phần tử Lighthouse mới nhất, cả hai chúng ta đều có thể xem trước trực quan các thành phần chính được ghi chú trong quá trình kiểm tra cũng như thao tác nhấp để thu phóng để xem rõ hơn:
Đối với CLS sau khi tải, bạn có thể thấy giá trị trong việc trực quan hoá liên tục bằng các hình chữ nhật là những phần tử đóng góp nhiều nhất vào CLS. Đây là một tính năng mà bạn có thể tìm thấy trong các công cụ của bên thứ ba như trang tổng quan Các chỉ số quan trọng về trang web của SpeedCurve. Đây là tính năng tôi rất thích khi sử dụng Trình tạo GIF của Layout Shift cho:
Đối với góc nhìn trên toàn trang web về các vấn đề liên quan đến việc thay đổi bố cục, tôi đã nắm bắt được rất nhiều thông tin từ báo cáo Các chỉ số quan trọng về trang web của Search Console. Điều này giúp tôi xem những loại trang trên trang web có CLS cao (trong trường hợp này giúp tự xác định những phần mẫu mà tôi cần dành thời gian để xử lý):
Xác định CLS (Điểm số tổng hợp về mức thay đổi bố cục) qua những hình ảnh không có kích thước
Để giới hạn Điểm số tổng hợp về mức thay đổi bố cục do hình ảnh không có kích thước gây ra, hãy thêm các thuộc tính kích thước chiều rộng và chiều cao trên hình ảnh và phần tử video của bạn. Phương pháp này đảm bảo rằng trình duyệt có thể phân bổ đúng lượng không gian trong tài liệu khi hình ảnh đang tải.
Vui lòng xem bài viết Đặt chiều cao và chiều rộng trên hình ảnh cũng quan trọng để có được thông tin tóm tắt 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 (Điểm số tổng hợp về mức thay đổi bố cục) từ quảng cáo
Quảng cáo của nhà xuất bản cho Lighthouse cho phé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ả nội dung đóng góp cho việc thay đổi bố cục và các tác vụ dài có thể cho biết thời điểm mà người dùng có thể sử dụng trang của bạn. Trong Lighthouse, bạn có thể bật tính năng này thông qua Trình bổ trợ cho cộng đồng.
Hãy nhớ rằng quảng cáo là một trong những yếu tố lớn nhất đối với việc thay đổi bố cục trên web. Điều quan trọng là bạn cần:
- Hãy cẩn thận 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 đặt trước kích thước lớn nhất có thể cho vùng quảng cáo
Tránh các ảnh động không được ghép
Ảnh động không được ghép có thể tự hiển thị 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 nề làm cho luồng chính bận rộn. Những ảnh động như vậy có thể làm thay đổi bố cục.
Nếu phát hiện thấy một ảnh động không thể kết hợp được, thì Chrome sẽ báo cáo dấu vết đó bằng dấu vết Công cụ cho nhà phát triển. Lighthouse sẽ đọc, cho phép Chrome liệt kê những thành phần có ảnh động không được kết 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 ảnh động không được ghép.
Gỡ lỗi thời gian phản hồi lần tương tác đầu tiên / Tổng thời gian chặn / Tác vụ dài
Phương thức nhập đầu tiên đo lường thời gian 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 một đường liên kết, nhấn vào một nút hoặc sử dụng một thành phần điều khiển tuỳ chỉnh chạy JavaScript) đến thời điểm trình duyệt thực sự có thể bắt đầu xử lý các 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 quy trình kiểm tra Tránh tác vụ dài trên luồng chính, trong đó liệt kê các tác vụ dài nhất trên luồng chính. Việc này có thể giúp xác định những yếu tố gây ra độ trễ đầu vào thấp 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 chuỗi 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 nhắc lại, tác vụ dài là những tác vụ thực thi trong thời gian dài hơn 50 mili giây. Hành động 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 xem xét các dịch vụ giám sát của bên thứ ba, tôi cũng khá giống với tiến trình thực thi luồng chính trực quan của Calibre để trực quan hoá các chi phí này, trong đó làm nổi bật cả nhiệm vụ mẹ 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 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 có sẵn. Điều này có thể giúp bạn hiểu được chi phí của từng tập lệnh riêng lẻ (ví dụ: trình theo dõi hoặc nhúng của bên thứ ba) có trên 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 mạng cũng hoạt động với Lighthouse! Hãy 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. Đi sâu vào mã này, chúng tôi nhận thấy trang web này sẽ tải một polyfill của Intersection Observer trong Chrome nhưng không cần thiết. Hãy 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 cho nhà phát triển và nhấp vào Block Request URL để chặn tập lệnh đó. Tại đây, chúng ta sẽ thực hiện việc này đối với polyfill của Intersection Observer.
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ười dùng 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 lượt nhúng sẽ tải ngay lập tức và có thể đi kèm các 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ã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 thấy nội dung đó).
Một mẫu để cải thiện hiệu suất của các tiện ích như vậy là tải từng tiện ích khi tương tác của người dùng. Bạn có thể thực hiện việc này bằng cách kết xuất bản xem trước nhẹ của tiện ích (thành phần tượng trưng) 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ư tính năng nhúng video trên YouTube.
Xin lưu ý rằng Lighthouse sẽ làm nổi bật mã của bên thứ ba đang chặn luồng chính trong hơn 250 mili giây. Việc này có thể hiển thị tất cả các loại tập lệnh của bên thứ ba (bao gồm cả các tập lệnh do Google tạo ra) mà có thể nên trì hoãn hoặc tải từng phần một cách hiệu quả hơn nếu những tập lệnh này yêu cầu cuộn để xem được.
Ngoài Các chỉ số quan trọng về trang web
Ngoài việc nêu bật Các chỉ số quan trọng về trang web, các phiên bản mới 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 về JavaScript nếu bật bản đồ nguồn.
Các biện pháp này bao gồm tập hợp ngày càng nhiều các quy trình kiểm tra giúp 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à nội dung 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ụ Các chỉ số quan trọng về trang web, 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.