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 ta sẽ tìm hiểu các tính năng mới của công cụ 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 Các chỉ số quan trọng về trang web.
Để nhắc lại về các công cụ, Lighthouse là một công cụ nguồn mở, tự động giúp nâng cao 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, dù là trang công khai hay trang 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 bao gồm các tính năng mới như ảnh chụp màn hình phần tử, giúp dễ dàng kiểm tra trực quan các phần trong giao diện người dùng ảnh hưởng đến chỉ số trải nghiệm người dùng (ví dụ: 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 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 một cách tổng hợp Core Web Vitals, bao gồm Nội dung lớn nhất hiển thị, Mức thay đổi bố cục tích luỹ và Tổng thời gian chặn (một proxy phòng thí nghiệm cho Độ trễ đầu vào đầu tiên). Các chỉ số này phản ánh thời gian tải, độ ổn định của bố cục và khả năng 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 nêu bật trong bài viết Tương lai của Core Web Vitals cũng có trong báo cáo này.
Mục "Chỉ số" trong 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 mà bạn cần chú ý.
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 trên Chrome hoặc RUM, không có giới hạn này và là một phần bổ sung có giá trị cho dữ liệu phòng thí nghiệm vì các chỉ số này phản ánh trải nghiệm thực tế của người dùng. Dữ liệu thực tế không thể cung cấp 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 đi kèm với nhau.
Xác định những điểm bạn có thể cải thiện trên Web Vitals
Xác định thành phần Thời gian hiển thị nội dung lớn nhất
LCP là một 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à người dùng có thể nhìn thấy.
Lighthouse có một 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 là phần tử có nội dung lớn nhất hiển thị. Khi bạn 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à một hình ảnh, thì thông tin này là một gợi ý hữu ích cho thấy bạn nê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 hiểu 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 tốt hơn ở đị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 LCP Bookmarklet của Annie Sullivan hữu ích trong việc nhanh chóng xác định phần tử LCP bằng hình chữ nhật màu đỏ chỉ bằng một cú nhấp chuột.
Tải trước hình ảnh được phát hiện muộn để cải thiện LCP
Để cải thiện chỉ số Nội dung lớn nhất hiển thị, 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 hình ảnh đó muộn. Việc phát hiện muộn có thể xảy ra nếu một gói JavaScript cần được tải trước khi hình ảnh có thể được phát hiện.
Có một vài câu hỏi thường gặp về việc tải trước hình ảnh LCP mà chúng ta cũng 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ờ 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">
Liệu 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ó.
Bất kỳ hình ảnh nào được gắn cờ là hình ảnh LCP (cho dù thông qua nền CSS hay <img>) đều là một đề xuất nếu hình ảnh đó được phát hiện ở độ sâu thác nước từ ba trở lên.
Tải chậm hình ảnh ngoài màn hình và tránh làm việc này cho LCP (Nội dung lớn nhất hiển thị)
Bạn có thể tải từng phần những 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. Đâ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 đế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 tài nguyên quan trọng và trong một số trường hợp, có thể cải thiện LCP. Quá trình kiểm tra "Trì hoãn hình ảnh ngoài màn hình" có thể giúp ích trong trường hợp này:
Không nên tải chậm 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ể làm chậm quá trình tải hình ảnh LCP. Lighthouse sẽ làm nổi bật nếu một hình ảnh Nội dung lớn nhất hiển thị đang được tải chậm không chính xác thông qua quy trình kiểm tra "Hình ảnh Nội dung lớn nhất hiển thị đã được tải chậm":
Xác định các yếu tố đóng góp vào CLS
Mức thay đổi bố cục tích luỹ là chỉ số đo lường độ ổn định về 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 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 bố cục lớn".
Quá 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 sự 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, 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ử mới của Lighthouse, chúng ta có thể xem trước hình ảnh của các phần tử chính được ghi chú trong quy trình kiểm tra, cũng như nhấp để thu phóng để 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 các hình chữ nhật để biết những phần tử nào đó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ư bảng điều khiển Core Web Vitals của SpeedCurve và tôi thích sử dụng Layout Shift GIF Generator của Defaced để:
Để xem các vấn đề về thay đổi bố cục trên toàn trang web, tôi thường dùng 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 thấy được 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):
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 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 các phần tử hình ảnh và video. Phương pháp này đảm bảo rằng trình duyệt có thể phân bổ không gian phù hợp trong tài liệu trong khi hình ảnh đang tải.
Hãy xem bài viết Setting Height And Width On Images Is Important Again (Tầm quan trọng của việc đặt chiều cao và chiều rộng cho hình ảnh) để 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 và tỷ lệ khung hình của hình ả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ả việc đóng góp vào bố cục và các tác vụ cần nhiều thời gian 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 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ố góp phần lớn nhất vào sự thay đổi 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 ảnh động không ghép
Ảnh động không được kết hợp có thể bị giật trên các thiết bị cấp thấp nếu các tác vụ JavaScript nặng khiến luồng chính bận rộ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 thấy 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 của Công cụ cho nhà phát triển mà Lighthouse đọc, cho phép Lighthouse 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 những ảnh động này trong quy trình kiểm tra Tránh ảnh động không được ghép.
Gỡ lỗi Độ trễ đầu vào đầu tiên/Tổng thời gian chặn/Tác vụ cần nhiều thời gian
Lượt tương tác đầ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 chế độ điều khiển tuỳ chỉnh, dựa trên JavaScript) đến thời điể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 hoạt động tương tác đó. Cá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ức là Tổng thời gian chặn.
Lighthouse có một quy trình kiểm tra Tránh các 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. Thông tin này có thể giúp bạn 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 cho các tác vụ dài trên luồng chính.
Ở bên phải, chúng ta có thể thấy thời lượng của những việc cần làm này. Xin lưu ý rằng Tác vụ cần nhiều thời gian là những 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 để ảnh hưởng đến tốc độ khung hình hoặc độ trễ đầu vào.
Nếu xem xét 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 mà Calibre có để trực quan hoá các chi phí này, giúp làm nổi 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
Chrome DevTools hỗ trợ chặn yêu cầu mạng để xem tác động của việc xoá hoặc không có tài nguyên riêng lẻ. Điều này có thể giúp bạn hiểu được chi phí mà từng tập lệnh (ví dụ: nội dung nhúng hoặc trình theo dõi của bên thứ ba) phải trả cho 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 hiệu suất là 63/100 với TBT là 400 mili giây. Khi tìm hiểu kỹ mã, chúng tôi nhận thấy trang web này tải một polyfill Intersection Observer trong Chrome, điều này là 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 của Công cụ cho nhà phát triển rồi nhấp vào Block Request URL để chặn tập lệnh đó. Ở đây, chúng ta sẽ làm 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 cải thiện (70/100) cũng như Tổng thời gian chặn (400 mili giây => 300 mili giây).
Thay thế 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
Việc 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 là rất phổ biến. 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 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 nhìn thấy).
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 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 gọn 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 bằng thành phần tượng trưng, chẳng hạn như video nhúng trên YouTube.
Xin lưu ý rằng Lighthouse sẽ làm nổi bật 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ộ tất cả các 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 chậm nếu nội dung mà các tập lệnh đó hiển thị yêu cầu người dùng phải cuộn để xem.
Ngoài Core Web Vitals
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 có nhiều JavaScript nếu bạn đã bật bản đồ nguồn.
Trong đó có một tập hợp ngày càng nhiều 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à các bản sao 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.