[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fblog\u002Fselectively-disable-image-lazy-loading-in-wordpress":3,"$fhRUDQm5EqPBWZjBu78zaD-rkpwt67FV8ADKd_o3uG9s":312,"i-local-icon:calendar-days":315,"i-local-icon:tag":320,"i-local-icon:eye":322},{"id":4,"title":5,"body":6,"categories_slug":299,"comment_count":302,"date_published":303,"description":304,"extension":305,"meta":306,"navigation":307,"path":308,"seo":309,"stem":310,"__hash__":311},"content\u002Fblog\u002F7.selectively-disable-image-lazy-loading-in-wordpress.md","Selectively disable image lazy loading in WP 5.5+ (without plugin)",{"type":7,"value":8,"toc":294},"minimark",[9,13,18,23,27,30,33,37,40,83,87,90,93,290],[10,11,5],"h1",{"id":12},"selectively-disable-image-lazy-loading-in-wp-55-without-plugin",[14,15],"meta-card",{":categories":16,":date":17},"categories_slug","date_published",[19,20,22],"h2",{"id":21},"the-problem","The Problem",[24,25,26],"p",{},"In WordPress 5.5 and above, all images in a post will have a loading=”lazy” attribute by default. You can read this article to learn more about lazy loading in WordPress 5.5 here.",[24,28,29],{},"Images that are marked as candidates for lazy-loading require the browser to resolve where the image is positioned on the page which has an impact on the Largest Contentful Paint (LCP) metric as measured in Google Lighthouse.",[24,31,32],{},"LCP measures when the largest paint appears on the page. If you use lazy loading and the images are visible “above the fold” (without scrolling) and they are the largest paint on the page then they will be reported as LCP. This can also be the case if just the top of an image is showing.",[19,34,36],{"id":35},"brute-force-solution","Brute force solution",[24,38,39],{},"To disable lazy loading in WordPress by default, you can add the following code into your functions.php file:",[41,42,47],"pre",{"className":43,"code":44,"language":45,"meta":46,"style":46},"language-php shiki shiki-themes github-dark","\u002F* Disable native lazy loading for all post images *\u002F\nadd_filter( 'wp_lazy_loading_enabled', '__return_false' );\n","php","",[48,49,50,59],"code",{"__ignoreMap":46},[51,52,55],"span",{"class":53,"line":54},"line",1,[51,56,58],{"class":57},"sAwPA","\u002F* Disable native lazy loading for all post images *\u002F\n",[51,60,62,66,70,74,77,80],{"class":53,"line":61},2,[51,63,65],{"class":64},"svObZ","add_filter",[51,67,69],{"class":68},"s95oV","( ",[51,71,73],{"class":72},"sU2Wk","'wp_lazy_loading_enabled'",[51,75,76],{"class":68},", ",[51,78,79],{"class":72},"'__return_false'",[51,81,82],{"class":68}," );\n",[19,84,86],{"id":85},"selective-solution-using-image-classes","Selective solution using image classes",[24,88,89],{},"Rather than disabling lazy loading for all images in a post, a better solution is to only disable lazy loading for selected images, particularly for images which are above the fold and therefore increase the LCP (Largest Contentful Paint) metric.",[24,91,92],{},"An easy way to do this is to add a class of ‘no-lazy’ to any image that you don’t want WordPress to add the lazy loading attribute to, and add the following code to your functions.php file:",[41,94,96],{"className":43,"code":95,"language":45,"meta":46,"style":46},"\u002F**\n * Disable native lazy loading on images with a class of 'no-lazy'.\n * @param mixed $value \n * @param mixed $image \n * @param mixed $context \n * @return mixed \n *\u002F\nfunction remove_lazy_loading_by_class( $value, $image, $context ) {\n    if ( 'the_content' === $context ) {\n         if ( false !== strpos( $image, 'no-lazy' ) ) {\n              return false;\n         }\n    }\n    return $value;\n}\nadd_filter( 'wp_img_tag_add_loading_attr', 'remove_lazy_loading_by_class', 10, 3 );\n",[48,97,98,103,108,124,136,148,161,167,179,197,224,236,242,248,257,263],{"__ignoreMap":46},[51,99,100],{"class":53,"line":54},[51,101,102],{"class":57},"\u002F**\n",[51,104,105],{"class":53,"line":61},[51,106,107],{"class":57}," * Disable native lazy loading on images with a class of 'no-lazy'.\n",[51,109,111,114,118,121],{"class":53,"line":110},3,[51,112,113],{"class":57}," * ",[51,115,117],{"class":116},"snl16","@param",[51,119,120],{"class":116}," mixed",[51,122,123],{"class":57}," $value \n",[51,125,127,129,131,133],{"class":53,"line":126},4,[51,128,113],{"class":57},[51,130,117],{"class":116},[51,132,120],{"class":116},[51,134,135],{"class":57}," $image \n",[51,137,139,141,143,145],{"class":53,"line":138},5,[51,140,113],{"class":57},[51,142,117],{"class":116},[51,144,120],{"class":116},[51,146,147],{"class":57}," $context \n",[51,149,151,153,156,158],{"class":53,"line":150},6,[51,152,113],{"class":57},[51,154,155],{"class":116},"@return",[51,157,120],{"class":116},[51,159,160],{"class":57}," \n",[51,162,164],{"class":53,"line":163},7,[51,165,166],{"class":57}," *\u002F\n",[51,168,170,173,176],{"class":53,"line":169},8,[51,171,172],{"class":116},"function",[51,174,175],{"class":64}," remove_lazy_loading_by_class",[51,177,178],{"class":68},"( $value, $image, $context ) {\n",[51,180,182,185,188,191,194],{"class":53,"line":181},9,[51,183,184],{"class":116},"    if",[51,186,187],{"class":68}," ( ",[51,189,190],{"class":72},"'the_content'",[51,192,193],{"class":116}," ===",[51,195,196],{"class":68}," $context ) {\n",[51,198,200,203,205,209,212,215,218,221],{"class":53,"line":199},10,[51,201,202],{"class":116},"         if",[51,204,187],{"class":68},[51,206,208],{"class":207},"sDLfK","false",[51,210,211],{"class":116}," !==",[51,213,214],{"class":207}," strpos",[51,216,217],{"class":68},"( $image, ",[51,219,220],{"class":72},"'no-lazy'",[51,222,223],{"class":68}," ) ) {\n",[51,225,227,230,233],{"class":53,"line":226},11,[51,228,229],{"class":116},"              return",[51,231,232],{"class":207}," false",[51,234,235],{"class":68},";\n",[51,237,239],{"class":53,"line":238},12,[51,240,241],{"class":68},"         }\n",[51,243,245],{"class":53,"line":244},13,[51,246,247],{"class":68},"    }\n",[51,249,251,254],{"class":53,"line":250},14,[51,252,253],{"class":116},"    return",[51,255,256],{"class":68}," $value;\n",[51,258,260],{"class":53,"line":259},15,[51,261,262],{"class":68},"}\n",[51,264,266,268,270,273,275,278,280,283,285,288],{"class":53,"line":265},16,[51,267,65],{"class":64},[51,269,69],{"class":68},[51,271,272],{"class":72},"'wp_img_tag_add_loading_attr'",[51,274,76],{"class":68},[51,276,277],{"class":72},"'remove_lazy_loading_by_class'",[51,279,76],{"class":68},[51,281,282],{"class":207},"10",[51,284,76],{"class":68},[51,286,287],{"class":207},"3",[51,289,82],{"class":68},[291,292,293],"style",{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":46,"searchDepth":61,"depth":61,"links":295},[296,297,298],{"id":21,"depth":61,"text":22},{"id":35,"depth":61,"text":36},{"id":85,"depth":61,"text":86},[300,301],"development","wordpress",null,"2022-01-12","A better solution is to only disable lazy loading for selected images by class, particularly for images which increase the LCP metric.","md",{},true,"\u002Fblog\u002Fselectively-disable-image-lazy-loading-in-wordpress",{"title":5,"description":304},"blog\u002F7.selectively-disable-image-lazy-loading-in-wordpress","Qb6rXHH92J4i4Lz9Txh3U_DG03Kv4AzA1s_dWupsta4",[313],{"id":163,"name":308,"count":314},4909,{"left":316,"top":316,"width":317,"height":317,"rotate":316,"vFlip":318,"hFlip":318,"body":319},0,24,false,"\u003Cpath\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\"\n    d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12zM12 15h.008v.008H12zm0 2.25h.008v.008H12zM9.75 15h.008v.008H9.75zm0 2.25h.008v.008H9.75zM7.5 15h.008v.008H7.5zm0 2.25h.008v.008H7.5zm6.75-4.5h.008v.008h-.008zm0 2.25h.008v.008h-.008zm0 2.25h.008v.008h-.008zm2.25-4.5h.008v.008H16.5zm0 2.25h.008v.008H16.5z\" \u002F>",{"left":316,"top":316,"width":317,"height":317,"rotate":316,"vFlip":318,"hFlip":318,"body":321},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.1 18.1 0 0 0 5.224-5.223c.54-.827.368-1.908-.33-2.607l-9.583-9.58A2.25 2.25 0 0 0 9.568 3\" \u002F>\n    \u003Cpath d=\"M6 6h.008v.008H6z\" \u002F>\n  \u003C\u002Fg>",{"left":316,"top":316,"width":317,"height":317,"rotate":316,"vFlip":318,"hFlip":318,"body":323},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M2.036 12.322a1 1 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178c.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178\" \u002F>\n    \u003Cpath d=\"M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0\" \u002F>\n  \u003C\u002Fg>"]