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 ta 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 cách trang web của bạn có thể cải thiện dựa trên Chỉ số quan trọng về trang web.
Để ôn lại kiến thức về các công cụ, Lighthouse là một nguồn mở, tự động để nâng cao chất lượng trang web. Bạn có thể tìm thấy công cụ này trong Chrome Bộ công cụ gỡ lỗi và chạy Công cụ cho nhà phát triển nội dung đó với 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 Thông tin chi tiết, 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 bằng hình ảnh các phần của giao diện người dùng ảnh hưởng đến các chỉ số về trải nghiệm người dùng (ví dụ: những nút nào đóng góp vào bố cục shift).
Ngoài ra, 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 có thể dễ dàng phát hiện vấn đề đối với các lần chạy trang hiệu quả một lần.
Đ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 chỉ số Các chỉ số quan trọng về trang web, bao gồm Nội dung lớn nhất hiển thị, Tích luỹ Layout Shift 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 làm nổi bật trong tương lai của Các chỉ số quan trọng về trang web cũng có trong thư viện này.
"Chỉ số" của báo cáo Lighthouse bao gồm phiên bản trong phòng thí nghiệm của các chỉ số này. Bạn có thể sử dụng đây là bản tóm tắt về các 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 trải nghiệm người dùng trên Chrome Báo vi phạm hoặc RUM, không có điều này hạn chế và là một phần bổ sung quý giá cho dữ liệu phòng thí nghiệm vì chúng phản ánh trải nghiệm của người dùng thực có. 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, tay trong tay.
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. Thẻ này đánh dấu đ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ị với người dùng.
Lighthouse có "phần tử Nội dung lớn nhất hiển thị" quy trình kiểm tra xác định xem yếu tố nào là 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 đá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à gợi ý hữu ích mà bạn có thể muốn tối ưu hoá việc tải của hình ảnh này. Lighthouse cung cấp một số tính năng kiểm tra hoạt động tối ưu hoá hình ảnh để giúp bạn nắm được 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 thành một hình ảnh hiện đại tối ưu hơn .
Bạn cũng có thể tìm thấy LCP Dấu trang của Annie Sullivan hữu ích trong việc xác định nhanh phần tử LCP có 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 (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 nội dung chủ chốt nếu chúng bị trình duyệt phát hiện muộn. Việc phát hiện trễ có thể xảy ra nếu Gói JavaScript cần được tải trước khi có thể tìm thấy hình ảnh.
Chúng tôi thường đặt ra một số câu hỏi về việc tải trước hình ảnh LCP mà 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ó 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 sẽ làm nổi bật các cơ hội tải trước nếu hình ảnh LCP (Nội dung lớn nhất hiển thị) được xác định thông qua một CSS màu nền không? Có.
Mọi hình ảnh được gắn cờ là hình ảnh LCP (Nội dung lớn nhất hiển thị trong kết quả tìm kiếm) dù qua nền CSS hay <img> đều là ứng viên nếu đó là
được phát hiện ở độ sâu của thác nước từ ba 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 "Hình ảnh Nội dung lớn nhất được tải từng phần" kiểm tra:
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 xác định số lượng người dùng nội dung thay đổi về mặt hình ảnh. Lighthouse có một quy trình kiểm tra để gỡ lỗi CLS có tên là "Tránh lớn thay đổi 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 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à CLS (Mức thay đổi bố cục tích luỹ) tổng thể của chúng đóng góp của bạn.
Nhờ tính năng Ảnh chụp màn hình phần tử Lighthouse mới, cả hai chúng ta đều 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 khi tải, bạn có thể có giá trị trong việc trực quan hoá liên tục bằng các hình chữ nhật những yếu tố đóng góp nhiều nhất vào CLS (Mức thay đổi bố cục tích luỹ). Đâ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 Các chỉ số quan trọng về trang web của SpeedCurve và điều mà tôi thích khi sử dụng Ảnh GIF Layout Shift của Defaced Trình tạo cho:
Đối với chế độ xem trên toàn trang web về các vấn đề liên quan đến việc thay đổi bố cục, tôi đã khai thác được rất nhiều lợi ích từ Lõi của Search Console báo cáo Chỉ số quan trọng của trang web. Thông tin này cho phép tôi xem các loại trang trên trang web của tôi có CLS cao (trong trường hợp này giúp tự xác định mẫu nào một phần tôi cần dành thời gian của mình):
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 gây ra không có kích thước, hãy bao gồm thuộc tính kích thước chiều rộng và chiều cao trên các phần tử hình ảnh và video của bạn. Cách tiếp cận 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 trong khi hình ảnh đang tải.
Xem Đặt chiều cao và chiều rộng cho hình ảnh là quan trọng Một lần nữa để 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 của bạn, bao gồm cả đóng góp cho đến thay đổi bố cục và các tác vụ dài có thể thúc đẩy người dùng sử dụng được trang của bạn trong bao lâu. Ngang bằng 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 người đóng góp nhiều 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 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 khối lượng lớn Các tác vụ JavaScript đang khiến luồng chính luôn 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 không thể kết hợp ảnh động, Chrome sẽ báo cáo ảnh động đó tới một dấu vết trong Công cụ cho nhà phát triển Lighthouse đọc, cho phép công cụ này liệt kê những phần tử có ảnh động chưa được kết hợp và cho lý do gì. Bạn có thể tìm thấy chúng trong phần Tránh những từ khoá không phải từ khoá ảnh động.
Gỡ lỗi độ trễ đầu vào đầu tiên / Tổng thời gian chặn / Tác vụ dài
Mục nhập đầu tiên đo lường 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 một trang liên kết, nhấn vào một nút hoặc sử dụng chế độ điều khiển tuỳ chỉnh, hỗ trợ JavaScript) vào thời điểm khi 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 đó. JavaScript dài Tác vụ có thể tác độ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 bài kiểm tra Tránh các tác vụ dài trong luồng chính liệt kê công việc dài nhất trên luồng chính. Điều này có thể hữu ích cho việc xác định cộng tác viên kém nhất cho độ trễ đầu vào. Ở 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 luồng chính dài công việc.
Ở 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 Nhiệm vụ dài là những nhiệm vụ thực thi trong hơn 50 mili giây. Việc 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 việc giám sát các dịch vụ của bên thứ ba, tôi cũng khá thích thực thi luồng chính dòng thời gian trực quan của Calibre để trực quan hoá những chi phí này, trong đó nêu bật cả công việc của cha mẹ và con, góp phần các nhiệm vụ có ảnh hưởng đến tính 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ợ việc chặn mạng yêu cầu để xem tác động của việc từng tài nguyên bị xoá hoặc không sử dụng được. Thông tin này có thể hữu ích để tìm hiểu chi phí mà các 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) gây ra 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. Tìm hiểu sâu về mã chúng tôi nhận thấy trang web này tải một đoạn mã polyfill Observer Giao lộ trong Chrome 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ông cụ cho nhà phát triển và nhấp vào Block Request URL để chặn
nó. Ở đâ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 (400ms => 300ms).
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 . Theo mặc định, hầu hết các video 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 tác động tiêu cực đến trải nghiệm người dùng. Điều này là lãng phí nếu bên thứ ba không quan trọng (ví dụ: người dùng cần cuộn trước khi nhìn thấy quảng cáo).
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 trên người dùng tương tác. 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 gọn nhẹ của tiện ích (một 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 nó. 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ài đặt từng phần với 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 đ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 mới đâ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 độ của trang web chứa JavaScript các ứng dụng khác có thể tải nếu bạn đã bật bản đồ nguồn.
Những chính sách này bao gồm một tập hợp các cuộc kiểm tra ngày càng mở rộng nhằm giảm chi phí của JavaScript trong trang của bạn, chẳng hạn như 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 Lighthouse nhóm Twitter và Có gì mới trong Công cụ cho nhà phát triển.
Hình ảnh chính của Mercedes Mehling trên Unsplash.