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