從wordpress 5.5開始，WordPress會默認使用本地的HTML loading屬性，爲圖像添加延遲加載，這将極大地節省服務器和帶寬資源，提高了網站加載速度，提升了用戶體驗。
默認情況下，WordPress将添加loading=”lazy”到所有具有width和height屬性的img标簽。從技術上講，這是在頁面輸出上處理的，類似于通過添加srcset和sizes屬性來實現響應式圖像的方式。爲了提高這兩個功能的服務器端性能，引入了一個新函數wp_filter_content_tags()，因此隻需要解析一次img标簽，然後将對這些功能的修改推遲到更具體的功能上即可。
減少布局偏移是先決條件
現代網站中常見的用戶體驗問題是所謂的布局移位（ layout shifting），通常是由圖像等媒體資源加載緩慢引起的：默認情況下，隻有在加載圖像後，浏覽器才能正确地布局頁面，從而産生内容，例如在圖片下方移位。通過在img标簽上提供width和height屬性可以輕松解決此問題，因爲浏覽器将使用它們來确定圖像的長寬比，從而可以在實際加載圖像之前推斷頁面布局。
雖然這已經是沒有延遲加載圖像的主要問題，但是對于延遲加載，它變得更加重要。因此，WordPress将僅添加loading=”lazy”到同時具有width和height屬性的img标簽中。同時，解決根本問題對于總體上減少布局轉移也同樣重要，這就是爲什麽WordPress5.5将在img标簽不存在width和height屬性時自動補充這兩個屬性。要做到這一點，Wordpress已經重建了某些邏輯，用于确定srcset和sizes屬性。與這些屬性一樣，width和height隻能确定圖像是否用于WordPress附件以及img 标簽是否包含相關wp-image-$id類。
WordPress一直遵循這種最佳做法，并且正在努力确保編輯器中的所有圖像都具有width和height。隻要主題的CSS可以與經典編輯器内容一起正常工作，回填這些屬性就不會對主題産生任何影響。這是可以預期的：如果圖像的width或height通過CSS修改，則相應的其他屬性應設置爲auto，以避免圖像被拉伸。
自定義延遲加載
默認情況下，WordPress将向以下圖像添加loading=”lazy”屬性：
文章内容中的圖片（the_content）
摘要中的圖片（the_excerpt）
文本小工具的圖片（widget_text_content）
頭像圖片（get_avatar）
使用wp_get_attachment_image()的模闆圖像
開發人員可以通過各種過濾器來自定義此行爲，最基礎的過濾器是wp_lazy_loading_enabled，該過濾器接收以下參數：
$default：布爾默認true到過濾器。
$tag_name：HTML标簽名稱。盡管按照當前的WordPress行爲始終是img，但應注意，loading屬性是通用屬性，将來可能會擴展爲支持其他元素，例如iframe。
$context：上下文字符串作爲附加參數，指示圖像在技術上的來源，通常是WordPress挂鈎名稱。根據WordPress本身如何使用延遲加載，上下文可以是這篇文章列表中括号中的五個值之一。
例如，如果您希望默認情況下關閉模闆圖像的延遲加載，則可以使用以下代碼段：
function disable_template_image_lazy_loading( $default, $tag_name, $context ) {
if ( ‘img’ === $tag_name && ‘wp_get_attachment_image’ === $context ) {
return false;
}
return $default;
}
add_filter(
‘wp_lazy_loading_enabled’,
‘disable_template_image_lazy_loading’,
10,
3
);
爲了修改非特定的圖像的加載屬性，有兩種不同的方法，具體取決于圖像的類型：
對于出現在内容相關的圖像（例如the_content，the_excerpt，widget_text_content），可用另一個新的過濾器wp_img_tag_add_loading_attr，其接收下列參數：
$value：正在加載的屬性值，可以是“ lazy”（默認），“ eager”或false。如果要禁用圖像的延遲加載，強烈建議設置爲false，以便完全省略該屬性。
$image：整個圖片HTML标簽及其屬性。
$context：上下文，與上述其他過濾器類似。
例如，如果您要在文章内容中禁用ID爲42且大小爲“ large”的特定附件圖像的延遲加載，則可以使用以下代碼段：
function skip_loading_lazy_image_42_large( $value, $image, $context ) {
if ( ‘the_content’ === $context ) {
$image_url = wp_get_attachment_image_url( 42, ‘large’ );
if ( false !== strpos( $image, ‘ src=”‘ . $image_url . ‘”‘ ) {
return false;
}
}
return $value;
}
add_filter(
‘wp_img_tag_add_loading_attr’,
‘skip_loading_lazy_image_42_large’,
10,
3
);
對于通過wp_get_attachment_image()輸出的圖像，可以簡單地通過函數的$attr參數來控制屬性，該參數可以是與$value上述濾鏡的參數相同的可能值。爲了不延遲加載圖像，應指定loading屬性值爲false，這将導緻該屬性被忽略。例如：
echo wp_get_attachment_image(
42,
‘large’,
false,
array( ‘loading’ => false ),
);
建議主題開發人員對wp_get_attachment_image()或基于圖像的其他函數（例如the_post_thumbnail()或 get_custom_logo()）上的圖像進行細化處理它們的loading屬性，具體取決于它們在模闆中的使用位置。例如，如果圖像放置在header.php模闆中并且很可能在初始視口中，則建議跳過該loading圖像的屬性。
标記爲延遲加載候選圖像的圖像要求浏覽器解析圖像在頁面上的位置，這依賴于IntersectionObserver可用，因此從今天開始稍微延遲了它們的提取。使用Android版Chrome浏覽器進行的實驗表明，此類loading=”lazy”圖像在初始視口中對“ 最大内容繪畫”指标的影響很小，與非延遲加載的圖像相比，第75個百分位數和第99個百分位數的回歸幅度不到 1％，但這是使主題開發人員可以應用一些微調以獲得更好的用戶體驗的考慮因素。
浏覽器兼容性
該loading屬性受到現代浏覽器的廣泛支持，并且呈上升趨勢：例如，雖然Safari支持在發布之時尚不可用，但該功能也正在開始使用，并且已經合并到基礎WebKit引擎中。
但是，即使當前不支持該loading屬性的浏覽器也不會看到WordPress在圖像上提供該屬性的任何負面影響，因爲本機延遲加載機制是作爲完全漸進增強實現的：對于這些浏覽器，該屬性将被忽略。這也意味着每當浏覽器實現對該功能的支持時，其用戶在浏覽由WordPress驅動的站點時都将立即獲得好處。
評論0