Fetchpriority attribute – Tính năng đáng chú ý trên WordPress 6.3
Sơ đồ trang
WordPress 6.3 giúp cải thiện hiệu suất rất đáng kể mà bạn nên nâng cấp ngay, trong list cải tiến hiệu suất có phần Fetchpriority attribute (Thuộc tính được ưu tiên tìm nạp) khá đáng chú ý.
Mặc dù tốc độ trang không phải là yếu tố xếp hạng quan trọng nhất trong SEO nhưng tốc độ tải trang rất quan trọng vì nó dẫn đến doanh thu cao hơn, đồng thời tăng lượt xem và nhấp vào quảng cáo.
Với tư cách là người quản lý trang web, việc tập trung vào trải nghiệm người dùng có thể giúp xác định thời điểm người dùng tương tác với một trang web, liệu họ có đề xuất trang web đó hay không và liệu họ có quay lại nhiều lần hay không.
Ưu tiên tìm nạp là gì?
Tìm nạp ưu tiên là một thuộc tính HTML cho phép bạn gợi ý về mức độ ưu tiên của tài nguyên, chẳng hạn như high hoặc low. Nó tương tự như tải trước nhưng điểm khác là vẫn cho phép trình duyệt vẫn ưu tiên các tài nguyên khác khi thấy phù hợp, trong khi tải trước luôn đặt ưu tiên tải lên hàng đầu.
Mục đích của tính ưu tiên tìm nạp là báo cho trình duyệt biết tài nguyên trang web nào cần được tải xuống nhanh nhất để hiển thị nội dung mà khách truy cập trang web nhìn thấy trong trình duyệt.
Ví dụ hình ảnh nổi bật trên một bài đăng trên blog. Chúng thường được gắn cờ là phần tử LCP. Lý tưởng nhất là bạn muốn hình ảnh đó tải trong một vài yêu cầu đầu tiên. Tuy nhiên, nhiều khi điều đó không đơn giản là do cách cấu trúc các theme hoặc trình tạo trang.
Đó là lúc ưu tiên tìm nạp phát huy tác dụng. Bạn có thể thêm fetchpriority=”high” vào hình ảnh nổi bật hoặc bất kỳ tài nguyên nào để ưu tiên nó ( xem hỗ trợ trình duyệt ). Các tài nguyên có cùng mức độ ưu tiên thường được tải theo thứ tự chúng được đọc tới.
Nội dung không có trong chế độ xem (nghĩa là nội dung mà người dùng phải cuộn xuống trang để xem) có mức độ ưu tiên thấp hơn nội dung ở đầu trang và trong chế độ xem của khách truy cập trang.
Nhận dạng được phần ưu tiên cho phép nhà xuất bản kiểm soát tài nguyên nào có mức độ ưu tiên cao và tài nguyên nào có mức độ ưu tiên thấp.
WordPress 6.3 bao gồm một tính năng mới bổ sung thuộc tính tìm nạp cho những hình ảnh có nhiều khả năng xuất hiện nhất trong chế độ xem của khách truy cập trang web.
WordPress hiện tự động thêm thuộc tính tìm nạp có giá trị fetchpriority="high" vào hình ảnh mà nó xác định có nhiều khả năng là “hình ảnh LCP”, tức là hình ảnh của thành phần nội dung lớn nhất trong chế độ xem.
<img src="/lcp.jpg" alt="A dog" fetchpriority="high" />
Thuộc tính này yêu cầu trình duyệt ưu tiên cho hình ảnh này, ngay cả trước khi bố cục được tính toán, điều này thường làm tăng LCP lên 5-10%”
Một trong những điều thú vị mà WordPress thực hiện với tính ưu tiên tìm nạp là nó chỉ áp dụng cho những hình ảnh có ngưỡng kích thước tối thiểu. Có nghĩa là thuộc tính ưu tiên tìm nạp sẽ không được áp dụng cho các tài nguyên nhỏ, chẳng hạn như các nút điều hướng.
Một tính năng khác của ưu tiên tìm nạp tự động của WordPress là nó không ghi đè lên các thuộc tính ưu tiên tìm nạp hiện có.
Lưu ý: Thuộc tính tìm nạp là một gợi ý, không phải là lệnh. Các trình duyệt cố gắng tôn trọng tùy chọn của nhà phát triển càng nhiều càng tốt và cũng có thể áp dụng tùy chọn của họ cho các ưu tiên tài nguyên nếu cần. Không nên nhầm lẫn gợi ý mức độ ưu tiên với tải trước, cả hai đều khác nhau vì: Tải trước là tìm nạp bắt buộc chứ không phải gợi ý.
Thứ tự ưu tiên các thuộc tính
WordPress tự động thêm thuộc tính fetchpriority nhưng bạn có thể hiểu, custom và áp dụng fetchpriority cho phù hợp với dự án của mình, dưới đây là sự ưu tiên thuộc tính tôi hay sử dụng.
<!-- Tăng mức độ ưu tiên của hình ảnh to - hero image -->
<img src="hero-image.jpg" fetchpriority="high" alt="Hero">
<!-- Giảm mức độ ưu tiên cho hình ảnh trong màn hình đầu tiên - above-the-fold image -->
<img src="happy-cats.avif" fetchpriority="low" alt="Cat">
<!-- Nội dung bên thứ ba của khung nội tuyến này tải với mức độ ưu tiên thấp -->
<iframe src="https://youtu.be/JfVOS4VSpmA" fetchpriority="low"></iframe>
<script>
// Kích hoạt tìm nạp với mức độ ưu tiên thấp
let suggestedContent = await fetch("/content/suggested", {priority: "low"});
</script>
// Các tập lệnh không quan trọng cũng có thể được tải với mức độ ưu tiên thấp
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
Large Contentful Paint (LCP) nội dung lớn nhất trên trang
Largest Content Paint (LCP) là thước đo thời gian cần thiết để hiển thị khối văn bản, đa phần là hình ảnh lớn trên trang.
Những gì được đo lường là những gì khách truy cập trang web nhìn thấy trong trình duyệt, được gọi là chế độ xem (nội dung hiển thị ở khung hình đầu tiên, chưa cuộn chuột xuống).
Các tối ưu do WordPress triển khai trong 6.3 là một phần trong nỗ lực lâu dài nhằm sử dụng chính xác các thuộc tính HTML trên các phần tử cụ thể để website đạt được hiệu suất tốt nhất.
Thuộc tính fetchpriority cũng không phải mới chúng được Google đề xuất thêm vào web vào tháng 8/2022 để tối ưu LCP và giờ thì WordPress đã hỗ trợ thuộc tính này vào trong core.
Theo các thử nghiệm nếu sử dụng ưu tiên tải các thuộc tính giúp tăng tốc LCP lên 4% với một số trang web cho thấy sự cải thiện lên tới 20-30%. Trong nhiều trường hợp, fetchpriority sẽ dẫn đến một sự thúc đẩy tốt đẹp cho LCP.
Tải lười biếng – Lazy Loading
Khung nhìn là thứ đầu tiên mà khách truy cập trang web nhìn thấy trong trình duyệt của họ khi họ truy cập trang web.
Tốt nhất, nên ưu tiên cho các thành phần của trang được yêu cầu hiển thị chế độ xem đầu tiên khi khách truy cập trang web truy cập.
Các thành phần bên dưới khung nhìn đầu tiên không cần phải tải ngay lập tức.
Tải chậm là một cách cho trình duyệt biết hình ảnh và khung nội tuyến nào không quan trọng để tải màn hình chế độ xem đầu tiên.
Việc sử dụng thuộc tính lazy-load cho phép các phần tử trang cần được tải xuống ngay lập tức.
Trước kia, WordPress triển khai thuộc tính lazy-load trên tất cả các hình ảnh trên một trang, bất kể nó quan trọng hay không.
WordPress 6.3 giải quyết vấn đề này bằng cách phát hiện hình ảnh nào là hình ảnh chính.
Thuộc tính lazy-load không được áp dụng cho các hình ảnh chính, cho phép những hình ảnh đó được tải xuống nhanh nhất có thể.
Cuối cùng, một quy trình mới để phát hiện chế độ xem ban đầu và áp dụng các thuộc tính tải và ưu tiên tìm nạp có thể được áp dụng trong các phiên bản WordPress sau này.
Các thay đổi có thể ảnh hưởng đến plugin của bên thứ ba
WordPress nhắc nhở các nhà phát triển plugin dựa vào logic lazy loading cốt lõi.
Hiện tại có một chức năng mới kiểm soát các thuộc tính tìm nạp và tải. Chức năng mới: wp_get_loading_optimization_attributes( string $tag_name, array $attr, string $context )
Ví dụ:
$attr = array(
'src' => 'my-image.jpg',
'width' => 500,
'height' => 300,
);
$attr = array_merge(
$attr,
wp_get_loading_optimization_attributes( 'img', $attr, 'wp_get_attachment_image' )
);
echo '<img';
foreach ( $attr as $key => $value ) {
echo ' ' . sanitize_key( $key ) . '="' . esc_attr( $value ) . '"';
}
echo '>';
Ví dụ này sử dụng ngữ cảnh “wp_get_attachment_image”, thường chỉ được sử dụng trong hàm wp_get_attachment_image().
Các nhà phát triển dựa trên logic cũ có thể cần cập nhật phần bổ trợ của họ. Điều này rất quan trọng đối với các nhà xuất bản để họ biết ưu tiên cập nhật plugin sau khi cập nhật lên WordPress 6.3.
WP 6.3 sẽ không ghi đè các tối ưu tùy chỉnh
Một khía cạnh có chủ ý của bản cập nhật này là ứng dụng tự động tìm nạp và tải từng phần sẽ không ghi đè các ứng dụng tùy chỉnh cho các thuộc tính này.
Hỗ trợ tùy chỉnh cũng đã được cải thiện, với tính năng mới được sử dụng nhất quán ở mọi nơi hình ảnh được hiển thị trong lõi WordPress.
Hàm này không bao giờ ghi đè một thuộc tính đã được cung cấp, vì vậy nếu bạn đặt thuộc tính tìm nạp hoặc tải trên hình ảnh trước khi gọi hàm, thì hàm này sẽ vẫn như cũ.
Điều này cho phép tinh chỉnh bằng cách không thực thi hành vi tự động hóa mặc định. Nếu bạn làm điều này, hãy nhớ không bao giờ đặt fetchpriority="high" và loading="lazy" trên các phần tử.
Nếu hàm gặp cả hai kết hợp giá trị thuộc tính này, sẽ có cảnh báo.
Preload vs fetchpriority
Tải trước có thể dẫn đến kết quả tốt hơn so với fetchpriority. Tuy nhiên, trong hầu hết các nền tảng, việc tạo các tài nguyên để Preload rất tốn công sức và khó đáp ứng được toàn bộ yêu cầu. Preload cũng có thể làm tăng thời gian phản hồi của máy chủ.
Khi thực hiện kiểm tra, tôi thường thấy các nền tảng hoặc nhà phát triển tải trước những hình ảnh không sử dụng. Ví dụ: tải trước tệp PNG trong khi trang web đang sử dụng WEBP. Hoặc tải trước cả biểu ngữ trên thiết bị di động và máy tính để bàn mà không chỉ định thuộc tính cho hình ảnh.
Kết luận
Ngoài thuộc tính đã nên trên, WordPress đã sửa nhiều lỗi ảnh hưởng đến việc triển khai đúng các thuộc tính này để tối ưu hóa Paint có nội dung lớn.
Khi nói đến việc tối ưu hóa hình ảnh cho SEO, WordPress 6.3 cuối cùng cũng mang lại trải nghiệm SEO được tối ưu hoàn toàn sẽ giúp các trang web đạt được điểm LCP cao hơn.
Nếu bạn cần tối ưu tốc độ tải trang website tổng thể có thể liên hệ với chúng tôi để được hỗ trợ.
Chúc bạn thành công.
Xem thêm tài liệu về thuộc tính tại https://make.wordpress.org/core/2023/07/13/image-performance-enhancements-in-wordpress-6-3/
Nếu bạn thấy bài viết có ích hãy sao chép link và chia sẻ bài viết
Bài viết liên quan
