{"id":1287,"date":"2021-01-04T15:16:00","date_gmt":"2021-01-04T14:16:00","guid":{"rendered":"https:\/\/html-und-css.de\/?p=1287"},"modified":"2025-07-03T14:07:59","modified_gmt":"2025-07-03T12:07:59","slug":"lazy-loading","status":"publish","type":"post","link":"https:\/\/pmueller.de\/lazy-loading\/","title":{"rendered":"Lazy Loading: Seiten mit vielen Bildern optimieren"},"content":{"rendered":"\n<p>Das sogenannte&nbsp;<em>Lazy Loading<\/em>&nbsp;f\u00fcr Bilder ist eine echte Verbesserung f\u00fcr die Performance von bildlastigen Webseiten. Was sich dahinter verbirgt, zeigt dieser Beitrag. <\/p>\n\n\n\n<!--more-->\n\n\n<div role=\"navigation\" aria-label=\"Inhaltsverzeichnis\" class=\"simpletoc wp-block-simpletoc-toc\"><h2 style=\"margin: 0;\"><button type=\"button\" aria-expanded=\"false\" aria-controls=\"simpletoc-content-container\" class=\"simpletoc-collapsible\">Inhaltsverzeichnis<span class=\"simpletoc-icon\" aria-hidden=\"true\"><\/span><\/button><\/h2><div id=\"simpletoc-content-container\" class=\"simpletoc-content\"><ul class=\"simpletoc-list\">\n<li><a href=\"#was-genau-ist-lazy-loading-ueberhaupt\">Was genau ist \u00bbLazy Loading\u00ab \u00fcberhaupt?<\/a>\n\n<\/li>\n<li><a href=\"#lazy-loading-fuer-bilder-im-html-aktivieren\">Lazy Loading f\u00fcr Bilder im HTML aktivieren<\/a>\n\n<\/li>\n<li><a href=\"#bis-auf-safari-koennen-es-alle-modernen-browser\">Bis auf Safari k\u00f6nnen es alle modernen Browser<\/a>\n\n<\/li>\n<li><a href=\"#wordpress-laedt-bilder-seit-version-55-lazy\">WordPress l\u00e4dt Bilder seit Version 5.5 \u00bblazy\u00ab<\/a>\n<\/li><\/ul><\/div><\/div>\n\n\n<h2 id=\"was-genau-ist-lazy-loading-ueberhaupt\" class=\"wp-block-heading\">Was genau ist \u00bbLazy Loading\u00ab \u00fcberhaupt? <\/h2>\n\n\n\n<p>Ein Bild sagt nicht nur mehr als tausend Worte, es l\u00e4dt auch l\u00e4nger, und je mehr Bilder auf einer Seite sind, desto l\u00e4nger dauert es, bis sie vollst\u00e4ndig geladen ist. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Normalerweise auf einer Webseite&nbsp;<em>alle<\/em>&nbsp;Bilder geladen. <\/li>\n\n\n\n<li>Auf langen Seiten mit vielen Bildern kann das eine ganze Weile dauern.<\/li>\n\n\n\n<li>Mit Lazy Loading l\u00e4dt der Browser nur die Bilder, die im Viewport auch wirklich zu sehen sind.<\/li>\n\n\n\n<li>Bilder weiter unten auf der Seite werden erst bei Bedarf geladen, wenn der Benutzer scrollt.<\/li>\n<\/ul>\n\n\n\n<p>Der Browser ist also quasi faul (<em>lazy<\/em>) und l\u00e4dt nur die Bilder im aktuellen Viewport (<em>loading<\/em>). <\/p>\n\n\n\n<h2 id=\"lazy-loading-fuer-bilder-im-html-aktivieren\" class=\"wp-block-heading\">Lazy Loading f\u00fcr Bilder im HTML aktivieren <\/h2>\n\n\n\n<p>Das Aktivieren von Lazy Loading f\u00fcr Bilder ist total einfach. Sie f\u00fcgen bei den entsprechenden Bildern im Quelltext einfach das Attribut <code>loading<\/code> mit dem Wert <code>lazy<\/code> ein: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;img src=\"bilddatei.jpg\" loading=\"lazy\" ... &gt; <\/code><\/pre>\n\n\n\n<p>Die anderen Attribute wie <code>alt<\/code>, <code>width<\/code> und <code>height<\/code> lassen Sie einfach so wie gehabt. Den Rest macht der Browser. Die genaue Reihenfolge der Attribute spielt wie immer keine Rolle. <\/p>\n\n\n\n<h2 id=\"bis-auf-safari-koennen-es-alle-modernen-browser\" class=\"wp-block-heading\">Bis auf Safari k\u00f6nnen es alle modernen Browser <\/h2>\n\n\n\n<p>Die meisten modernen Browser unterst\u00fctzen Lazy Loading f\u00fcr Bilder. Details zur Browserunterst\u00fctzung gibt&#8217;s wie immer auf <a href=\"https:\/\/caniuse.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">caniuse.com<\/a>: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/caniuse.com\/loading-lazy-attr\" target=\"_blank\" rel=\"noreferrer noopener\">caniuse.com\/loading-lazy-attr<\/a><\/li>\n<\/ul>\n\n\n\n<p>Safari kann bis inklusive Version 14 mit dem Attribut <code>loading<\/code> standardm\u00e4\u00dfig nichts anfangen und l\u00e4dt nach wie vor alle Bilder, aber es gibt keinerlei Risiken oder Nebenwirkungen. <\/p>\n\n\n\n<h2 id=\"wordpress-laedt-bilder-seit-version-55-lazy\" class=\"wp-block-heading\">WordPress l\u00e4dt Bilder seit Version 5.5 \u00bblazy\u00ab <\/h2>\n\n\n\n<p>Notiz am Rande: <a href=\"https:\/\/einstieg-in-wp.de\/wordpress-55-ueberblick\/#lazy-loading-bilder-erst-bei-bedarf-laden\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress macht dies seit der Version 5.5 vom August 2020 automatisch<\/a>, und seitdem sieht man das Lazy Loading von Bildern im Web wesentlich h\u00e4ufiger: <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Adoption of lazy-loading images is unusually fast. \ud83d\udd25<a href=\"https:\/\/t.co\/jBT9ljuzrN\">https:\/\/t.co\/jBT9ljuzrN<\/a><br><br>&#8211; November 2019: 0.68% of pages <br>&#8211; November 2020: 10.25% of pages <a href=\"https:\/\/t.co\/KWEZD981YU\">https:\/\/t.co\/KWEZD981YU<\/a><\/p>&mdash; Simon Pieters (@zcorpan) <a href=\"https:\/\/twitter.com\/zcorpan\/status\/1326142038056841218?ref_src=twsrc%5Etfw\">November 10, 2020<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Das sogenannte&nbsp;Lazy Loading&nbsp;f\u00fcr Bilder ist eine echte Verbesserung f\u00fcr die Performance von bildlastigen Webseiten. Was sich dahinter verbirgt, zeigt dieser Beitrag.<\/p>\n","protected":false},"author":2,"featured_media":1292,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":1,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[95],"tags":[148],"class_list":["post-1287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-images"],"_links":{"self":[{"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/posts\/1287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/comments?post=1287"}],"version-history":[{"count":1,"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/posts\/1287\/revisions"}],"predecessor-version":[{"id":7726,"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/posts\/1287\/revisions\/7726"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pmueller.de\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/media?parent=1287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/categories?post=1287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/tags?post=1287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}