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.
Ngày xuất bản: 11 tháng 5 năm 2021
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.
Để 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 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 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 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ú ý.
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 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. 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 "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 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 sẽ là gợi ý hữu ích mà bạn có thể muốn tối ưu hoá việc tải hình ảnh. Lighthouse có một số quy trình kiểm tra tối ưu hoá hình ảnh để giúp bạn hiểu 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 (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 đượ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">
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 điều 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. 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 đượ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
Để 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 rằng trình duyệt có thể phân bổ đúng lượng dung lượng trong tài liệu trong khi hình ảnh đang tải.
Hãy xem phần Việc đặt lại chiều cao và chiều rộng cho hình ảnh là 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 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 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 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 đầu nhập đ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à chỉ số đại diện 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 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ể giúp bạn nắm được chi phí của từng tập lệnh riêng lẻ (ví dụ như 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 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 thành phần tượng trưng
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 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 hiển thị của các tập lệnh đó yêu cầu cuộn để xem.
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 cuộc 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 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à bài viết Tính năng mới trong DevTools.
Hình ảnh chính của Mercedes Mehling trên Unsplash.