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.
Ngày xuất bản: 11 tháng 5 năm 2021
Hôm nay, chúng tôi sẽ giới thiệu các tính năng công cụ mới trong Lighthouse, PageSpeed và DevTools để giúp xác định cách cải thiện trang web của bạn về Các chỉ số quan trọng về trang web.
Để làm mới kiến thức về các công cụ này, xin lưu ý rằng Lighthouse là một công cụ tự động, nguồn mở giúp cải thiện chất lượng của các 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 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 phần tử để dễ dàng kiểm tra trực quan các phần giao diện người dùng ả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 làm 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 khi chạy hiệu suất một lần cho các trang.
Đo lường Các chỉ số quan trọng về trang web
Lighthouse có thể đo lường các chỉ số quan trọng chính của trang web theo cách tổng hợp, 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 luỹ và Tổng thời gian chặn (một proxy trong phòng 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 tốc độ tải, độ ổn định của bố cục và khả năng tương tác. Các chỉ số khác như Hiển thị nội dung đầu tiên được nêu trong tương lai của Các chỉ số quan trọng chính của trang web cũng có trong đó.
Phần "Chỉ số" của báo cáo Lighthouse bao gồm các phiên bản 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 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 được chú ý.
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 trên Chrome hoặc RUM, không có giới hạn này và là dữ liệu bổ sung có giá trị 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 thực địa 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, hai loại dữ liệu này đi liền với nhau.
Xác định những điểm bạn có thể cải thiện về Web Vitals
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 cảm nhận được. Chỉ số 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") đã tải và hiển thị cho người dùng.
Lighthouse có quy trình kiểm tra "Thành phần Thời gian hiển thị nội dung lớn nhất" để xác định thành phần nào là thành phần thời gian hiển thị nội dung lớn nhất. Khi di chuột qua phần tử, phần tử đó 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à hình ảnh, thì thông tin này 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 có một số quy trình kiểm tra tối ưu hoá hình ảnh để giúp bạn biết liệu hình ảnh của mình có thể được nén, đổi kích thước hoặc phân phối hiệu quả hơn ở định dạng hình ảnh hiện đại hơn hay không.
Bạn cũng có thể thấy Dấu trang LCP của Annie Sullivan hữu ích để nhanh chóng xác định phần tử 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 được 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 muộn. Quá trình khám phá có thể bị trễ nếu cần tải một gói JavaScript trước khi có thể khám phá hình ảnh.
Có một vài câu hỏi thường gặp mà chúng tôi nhận được về việc tải trước hình ảnh LCP cũng có thể đáng để đề 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 đượ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
được 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 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">
Quy trình kiểm tra có 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 không? Có.
Mọi hình ảnh được gắn cờ là hình ảnh LCP, cho dù thông qua nền CSS hay <img>
, đều là hình ảnh đề xuất nếu được phát hiện ở độ 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 việc này đối với LCP
Hình ảnh ngoài màn hình không quan trọng đối với trải nghiệm ban đầu của người dùng có thể được tải lười. Đây là một kỹ thuật trì hoãn việc tải hình ảnh xuống cho đến khi người dùng cuộn đến gần hình ảnh đó. Kỹ thuật này có thể làm giảm tình trạng tranh chấp mạng đối với các thành phần quan trọng và trong một số trường hợp, 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 ở đây:
Không được 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 Thời gian hiển thị nội dung lớn nhất. Việc này có thể làm chậm quá trình tải hình ảnh LCP. Lighthouse sẽ làm nổi bật nếu 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 các nội dung đóng góp cho CLS
Điểm số tổng hợp về mức thay đổi bố cục là một chỉ số đo lường độ ổn định của hình ảnh. Chỉ số này định lượng mức độ thay đổi về mặt hình ảnh của nội dung trên trang. Lighthouse có một quy trình kiểm tra để gỡ lỗi CLS có tên là "Tránh các thay đổi lớn về bố cục".
Quy trình kiểm tra này làm nổi bật các phần tử DOM đóng góp 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 tổng thể của các phần tử này đối với CLS.
Nhờ tính năng Ảnh chụp màn hình thành phần mới của Lighthouse, cả hai chúng ta đều có thể xem bản xem trước trực quan của các thành phần chính được ghi nhận trong quy trình kiểm tra, cũng như nhấp để phóng to để xem rõ hơn:
Đối với CLS sau khi tải, bạn có thể liên tục trực quan hoá bằng hình chữ nhật 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 sẽ thấy trong các công cụ của bên thứ ba như Bảng điều khiển Core Web Vitals của SpeedCurve và tôi thích sử dụng Trình tạo ảnh GIF về sự thay đổi bố cục của Defaced để:
Để xem các vấn đề về thay đổi bố cục trên toàn trang web, tôi đã khai thá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 cho phép tôi xem các loại trang trên trang web của mình 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 cho):
Xác định CLS từ hình ảnh không có kích thước
Để giới hạn Lỗi thay đổi bố cục tích luỹ 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 vào hình ảnh và phần tử video. Phương pháp này đảm bảo rằng trình duyệt có thể phân bổ đúng dung lượng trong tài liệu trong khi hình ảnh đang tải.
Hãy xem bài viết Việc đặt chiều cao và chiều rộng trên hình ảnh lại quan trọng để biết thêm thông tin về tầm quan trọng của việc cân nhắc kích thước hình ảnh và tỷ lệ khung hình.
Xác định CLS 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, bao gồm cả những đóng góp cho việc thay đổi bố cục và các tác vụ dài có thể làm chậm 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 tính năng 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ố lớn nhất góp phần tạo ra sự thay đổi về bố cục trên web. Bạn cần phải:
- 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ị trí quảng cáo
Tránh dùng các ảnh động không được ghép
Ảnh động không được kết hợp có thể xuất hiện dưới dạng giật trên các thiết bị cấp thấp nếu các tác vụ JavaScript nặng đang làm luồng chính bị bận. Những ảnh động như vậy có thể gây ra sự thay đổi bố cục.
Nếu phát hiện một ảnh động không thể kết hợp, Chrome sẽ báo cáo ảnh động đó cho một dấu vết DevTools mà Lighthouse đọc được, cho phép liệt kê những phần tử có ảnh động không được kết hợp và lý do. Bạn có thể tìm thấy các lỗi này trong quy trình kiểm tra Tránh ảnh động không được 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
Lần 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 tùy chọn kiểm soát 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 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 có quy trình kiểm tra Tránh những việc cần nhiều thời gian thực hiện trong chuỗi chính. Quy trình này liệt kê những việc cần nhiều thời gian thực hiện nhất trong chuỗi chính. Thông tin này có thể hữu ích trong việc xác định những thành phần có thời gian phản hồi tương tác chậm nhất. Trong 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ụ luồng chính dài.
Ở 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à những tác vụ thực thi trong hơn 50 mili giây. Điều này được coi là chặn luồng chính đủ lâu để ảnh hưởng đến tốc độ khung hình hoặc độ trễ đầu vào.
Nếu cân nhắc sử dụng các dịch vụ của bên thứ ba để giám sát, tôi cũng khá thích tiến trình thực thi luồng chính trực quan mà Calibre có để 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 đóng góp 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 mức 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 xoá hoặc không có các tài nguyên riêng lẻ. Điều này có thể hữu ích để hiểu được chi phí của từng tập lệnh (chẳng hạn như các trình theo dõi hoặc trình nhúng 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 phản hồi.
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 xem nhanh báo cáo Lighthouse cho một trang web. Điểm hiệu suất là 63/100 với TBT là 400 mili giây. Khi tìm hiểu mã, chúng ta thấy trang web này tải một polyfill Intersection Observer trong Chrome không cần thiết. Hãy chặn ứng dụng đó!
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ủa DevTools rồi 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 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ì 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 một giao diện
Thông thường, bạn sẽ 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 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ẽ gây 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 lười các tiện ích đó 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 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 sẽ đề xuất các tài nguyên của bên thứ ba có thể được tải từng phần bằng một thành phần tượng trưng, chẳng hạn như các video được nhúng trên YouTube.
Xin lưu ý rằng Lighthouse sẽ nêu rõ 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ể 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) mà bạn nên trì hoãn hoặc tải lười hơn nếu nội dung mà các tập lệnh này hiển thị yêu cầu cuộn để xem.
Ngoài các chỉ số quan trọng về trang web
Ngoài việc làm nổi bật các Chỉ số quan trọng chính của trang web, 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 về JavaScript nếu bạn đã bật bản đồ nguồn.
Các báo cáo này bao gồm một bộ sưu tập ngày càng tăng các quy trình kiểm tra để giảm chi phí JavaScript trong trang của bạn, chẳng hạn như giảm sự phụ thuộc vào 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ụ Core Web Vitals, hãy theo dõi tài khoản Twitter của nhóm Lighthouse và bài viết Tính năng mới trong DevTools.
Hình ảnh chính của Mercedes Mehling trên Unsplash.