{"id":2328,"date":"2023-04-05T09:08:01","date_gmt":"2023-04-05T09:08:01","guid":{"rendered":"https:\/\/www.tino-designs.com\/?p=2328"},"modified":"2023-04-11T13:13:02","modified_gmt":"2023-04-11T13:13:02","slug":"wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert","status":"publish","type":"post","link":"https:\/\/www.tino-designs.com\/en\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/","title":{"rendered":"How to stop lazy loading the first image on every Wordpress post"},"content":{"rendered":"<p>Optimizing your site for your visitors as well as Google and other search engones are important tasks, if you are serious about your interent presentation.<\/p>\n\n\n\n<p>Google offers the Google Search Console to point out specific metrics that Google believes, should be improved. One of those metrics that come up a lot is called LCP. <a href=\"https:\/\/web.dev\/lcp\/\" target=\"_blank\" rel=\"noreferrer noopener\">The largest contentful paint.<\/a>. <\/p>\n\n\n\n<p>LCP-Metriken messen die Renderzeit des gr\u00f6\u00dften Bild- oder Textblocks, der im Darstellungsbereich sichtbar ist. Also im Grunde das gr\u00f6\u00dfte Element &#8222;above the fold&#8220;. Das ist ziemlich oft ein Bild, besonders bei Blogposts oder anderen inhaltsreichen Seiten.<\/p>\n\n\n\n<p>The issue here is, that wordpress started to lazy load all images of the site in Wordpress 5.4. It is a standard function, which is a great improvement. However in this case it would be better that the first image of the content would not be loaded using lazy load. Espescially if your site displays it abover the content and therefor above the fold.<\/p>\n\n\n\n<p>The reason for this is that images being lazy loaded, are loading quite a bit slower. Therefor the LCP score often is a lot worse than it could. Google's <a href=\"\/en\/Pagespeed Insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pagespeed Insights<\/a> actually suggests not to load the LCP using lazy loading quite often.<\/p>\n\n\n\n<p>Since I had this issue before for several clients I cam up with a simple code hat can be pasted into the functions.php of your Wordpress theme.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/function to get first image in post content area\nfunction get_first_image() {\n    global $post, $posts;\n    $first_img = '';\n    ob_start();\n    ob_end_clean();\n    $output = preg_match_all('\/&lt;img&#91;^&gt;]*src=\"(&#91;^\"]+)\"\/i', $post-&gt;post_content, $matches);\n    $first_img = $matches &#91;1] &#91;0];\n\n   \/\/defines a default image if no image was found\n    if(empty($first_img)){ \n        $first_img = \"\/images\/default.jpg\";\n    }\n    return $first_img;\n}\n\n\/\/ disable lazy loading for first image inside post content\nfunction no_lazy_load_on_first_image( $value, $image, $context ) {\nif ( 'the_content' === $context ) {\n\n\/\/uses above function to check if image is the first image of the content area\n$image_url = get_first_image();\n\nif ( false !== strpos( $image, '' . $image_url . '' )) {\nreturn false;\n}\n}\nreturn $value;\n}\nadd_filter( 'wp_img_tag_add_loading_attr', 'no_lazy_load_on_first_image', 10, 3);<\/code><\/pre>\n\n\n\n<p>Dieser Code verwendet tats\u00e4chlich zwei Funktionen und den WP-Filter &#8222;wp_img_tag_add_loading_attr&#8220;. Mit diesem Filter k\u00f6nnen wir \u00e4ndern, wie Lazy Loading hinzugef\u00fcgt wird.<\/p>\n\n\n\n<p>The first function finds the first image within the current post content. The second function simply checks if this is the image the filter is currently passing through. If so, false is returned instead of the regular value.<\/p>\n\n\n\n<p>Feel free to improve, correct and comment on the code snippet below.<\/p>","protected":false},"excerpt":{"rendered":"<p>Optimizing your site for your visitors as well as Google and other search engones are important tasks, if...<\/p>","protected":false},"author":1,"featured_media":2331,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42,40,39],"tags":[],"class_list":["post-2328","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-snippets","category-php","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Wie man Lazy Loading beim ersten Bild von jedem Wordpress Beitrag deaktiviert - Tino-Designs.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tino-designs.com\/en\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man Lazy Loading beim ersten Bild von jedem Wordpress Beitrag deaktiviert - Tino-Designs.com\" \/>\n<meta property=\"og:description\" content=\"Die Optimierung Ihrer Website f\u00fcr Besucher sowie f\u00fcr Google und andere Suchmaschinen sind wichtige Aufgaben, wenn&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tino-designs.com\/en\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/\" \/>\n<meta property=\"og:site_name\" content=\"Tino-Designs.com\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-05T09:08:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-11T13:13:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tino-designs.com\/wp-content\/uploads\/2023\/04\/wordpress-1863504.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1189\" \/>\n\t<meta property=\"og:image:height\" content=\"663\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wie man Lazy Loading beim ersten Bild von jedem Wordpress Beitrag deaktiviert - Tino-Designs.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tino-designs.com\/en\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/","og_locale":"en_US","og_type":"article","og_title":"Wie man Lazy Loading beim ersten Bild von jedem Wordpress Beitrag deaktiviert - Tino-Designs.com","og_description":"Die Optimierung Ihrer Website f\u00fcr Besucher sowie f\u00fcr Google und andere Suchmaschinen sind wichtige Aufgaben, wenn&hellip;","og_url":"https:\/\/www.tino-designs.com\/en\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/","og_site_name":"Tino-Designs.com","article_published_time":"2023-04-05T09:08:01+00:00","article_modified_time":"2023-04-11T13:13:02+00:00","og_image":[{"width":1189,"height":663,"url":"https:\/\/www.tino-designs.com\/wp-content\/uploads\/2023\/04\/wordpress-1863504.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tino-designs.com\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/#article","isPartOf":{"@id":"https:\/\/www.tino-designs.com\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/"},"author":{"name":"admin","@id":"https:\/\/www.tino-designs.com\/#\/schema\/person\/f92e74825458a5fc95900af07f37c0ee"},"headline":"Wie man Lazy Loading beim ersten Bild von jedem Wordpress Beitrag deaktiviert","datePublished":"2023-04-05T09:08:01+00:00","dateModified":"2023-04-11T13:13:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tino-designs.com\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/"},"wordCount":336,"commentCount":0,"publisher":{"@id":"https:\/\/www.tino-designs.com\/#organization"},"image":{"@id":"https:\/\/www.tino-designs.com\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tino-designs.com\/wp-content\/uploads\/2023\/04\/wordpress-1863504.jpg","articleSection":["Code Snippets","PHP","Wordpress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tino-designs.com\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tino-designs.com\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/","url":"https:\/\/www.tino-designs.com\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/","name":"Wie man Lazy Loading beim ersten Bild von jedem Wordpress Beitrag deaktiviert - Tino-Designs.com","isPartOf":{"@id":"https:\/\/www.tino-designs.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tino-designs.com\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/#primaryimage"},"image":{"@id":"https:\/\/www.tino-designs.com\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tino-designs.com\/wp-content\/uploads\/2023\/04\/wordpress-1863504.jpg","datePublished":"2023-04-05T09:08:01+00:00","dateModified":"2023-04-11T13:13:02+00:00","breadcrumb":{"@id":"https:\/\/www.tino-designs.com\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tino-designs.com\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tino-designs.com\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/#primaryimage","url":"https:\/\/www.tino-designs.com\/wp-content\/uploads\/2023\/04\/wordpress-1863504.jpg","contentUrl":"https:\/\/www.tino-designs.com\/wp-content\/uploads\/2023\/04\/wordpress-1863504.jpg","width":1189,"height":663},{"@type":"BreadcrumbList","@id":"https:\/\/www.tino-designs.com\/wie-man-lazy-loading-beim-ersten-bild-von-jedem-wordpress-beitrag-deaktiviert\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.tino-designs.com\/"},{"@type":"ListItem","position":2,"name":"Wie man Lazy Loading beim ersten Bild von jedem WordPress Beitrag deaktiviert"}]},{"@type":"WebSite","@id":"https:\/\/www.tino-designs.com\/#website","url":"https:\/\/www.tino-designs.com\/","name":"Tino-Designs.com","description":"Webdesign, Webentwicklung, Medien und Kreativit\u00e4t","publisher":{"@id":"https:\/\/www.tino-designs.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tino-designs.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.tino-designs.com\/#organization","name":"Tino-Designs.com","url":"https:\/\/www.tino-designs.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tino-designs.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.tino-designs.com\/wp-content\/uploads\/2021\/11\/logo_neu_2021_v5.png","contentUrl":"https:\/\/www.tino-designs.com\/wp-content\/uploads\/2021\/11\/logo_neu_2021_v5.png","width":698,"height":340,"caption":"Tino-Designs.com"},"image":{"@id":"https:\/\/www.tino-designs.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.tino-designs.com\/#\/schema\/person\/f92e74825458a5fc95900af07f37c0ee","name":"admin","url":"https:\/\/www.tino-designs.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tino-designs.com\/en\/wp-json\/wp\/v2\/posts\/2328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tino-designs.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tino-designs.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tino-designs.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tino-designs.com\/en\/wp-json\/wp\/v2\/comments?post=2328"}],"version-history":[{"count":4,"href":"https:\/\/www.tino-designs.com\/en\/wp-json\/wp\/v2\/posts\/2328\/revisions"}],"predecessor-version":[{"id":2334,"href":"https:\/\/www.tino-designs.com\/en\/wp-json\/wp\/v2\/posts\/2328\/revisions\/2334"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tino-designs.com\/en\/wp-json\/wp\/v2\/media\/2331"}],"wp:attachment":[{"href":"https:\/\/www.tino-designs.com\/en\/wp-json\/wp\/v2\/media?parent=2328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tino-designs.com\/en\/wp-json\/wp\/v2\/categories?post=2328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tino-designs.com\/en\/wp-json\/wp\/v2\/tags?post=2328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}