{"id":704,"date":"2025-03-26T04:35:39","date_gmt":"2025-03-26T03:35:39","guid":{"rendered":"https:\/\/www.vautron.de\/blog\/?p=704"},"modified":"2025-03-26T04:35:39","modified_gmt":"2025-03-26T03:35:39","slug":"lazy-loading-im-webdesign","status":"publish","type":"post","link":"https:\/\/www.vautron.de\/blog\/lazy-loading-im-webdesign","title":{"rendered":"Wof\u00fcr dient das Lazy Loading im Webdesign?"},"content":{"rendered":"\n<p><strong>Grunds\u00e4tzlich erweist es sich als w\u00fcnschenswert, wenn ein Server alle Inhalte und verbundenen Content mit einer minimalen Reaktionszeit \u00fcbertr\u00e4gt. Dies f\u00fchrt allerdings unter Umst\u00e4nden dazu, dass s\u00e4mtliche Elemente inklusive unver\u00e4nderlicher kleiner Bilddateien, PHP Skripten und Text oder lokaler Source Code stets als gleichwertig behandelt werden. Bestimmte Informationen \u00fcbertr\u00e4gt der Webserver somit bei jeder Anfrage automatisch, ohne dass sie aktuell ben\u00f6tigt werden. Diese synchrone \u00dcbertragung kann die Ladezeit einer Webseite deutlich beeintr\u00e4chtigen, weil alle statisch, dynamisch und interaktiv erzeugten Fragmente einer Website immer eine neue Verbindung aufbauen und dadurch Ressourcen wie Rechenleistung und Bandbreite belegen.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Nach welchem Prinzip arbeitet das Lazy Loading?<\/h3>\n\n\n\n<p>Bei jedem Besuch einer Website speichert ein Browser in einem ersten Schritt <strong>wichtige Basiselemente<\/strong>, die er anschlie\u00dfend wahlweise neu aus dem Internet l\u00e4dt oder unmittelbar aus einem zeitlich beschr\u00e4nkten Cache abruft. Mit Lazy Loading &#8211; dem &#8222;gem\u00e4chlichen Laden&#8220; &#8211; aktivieren Betreiber von Webseiten unter anderem einen <strong>erweiterten lokalen Zwischenspeicher<\/strong> und vermeiden \u00fcberfl\u00fcssigen Traffic. Es dient daf\u00fcr, nicht jede relevante Information unmittelbar und unverz\u00fcglich in Echtzeit verarbeiten zu m\u00fcssen. Die Methode arbeitet nach folgendem Konzept, um Nutzerfreundlichkeit, Integrit\u00e4t der Daten und zuverl\u00e4ssige Kommunikation zu gew\u00e4hrleisten:<\/p>\n\n\n\n<ul>\n<li>Mit Lazy Loading aktiviert der Webserver zus\u00e4tzlich gespeicherten Cache<\/li>\n\n\n\n<li>Pr\u00fcfung der Sicherheit anhand existierender lokaler &#8222;Spiegel-Server (Mirrors)&#8220; und fremden Quellen<\/li>\n\n\n\n<li>Optional bei Bedarf kryptografische Kontrolle der Daten durch Hash-Verfahren wie AES oder MD256<\/li>\n\n\n\n<li>Definiert weder das Verfahren noch Auswertung der Daten, sondern ordnet einem Programm eine feste Umgebung zu<\/li>\n\n\n\n<li>Speichert unver\u00e4nderliche Inhalte wie Bilder oder pers\u00f6nliche Informationen unabh\u00e4ngig von dem Netzwerk<\/li>\n\n\n\n<li>Reduziert Ladezeiten nach dem ersten Aufruf einer Internetpr\u00e4senz bis zum L\u00f6schen von Cookies und tempor\u00e4ren Daten<\/li>\n\n\n\n<li>Variable Dauer der Zwischenspeicherung und Priorisierung von Datenpaketen<\/li>\n\n\n\n<li>Verz\u00f6gert mitunter die Aktualisierung einer Website, dient jedoch niemals Blocking auf technischer Ebene<\/li>\n<\/ul>\n\n\n\n<p>Das &#8222;verz\u00f6gerte&#8220; beziehungsweise &#8222;tr\u00e4ge&#8220; oder &#8222;faule&#8220; Laden entlastet sowohl den Arbeitsspeicher RAM wie den Prozessor und die allgemeine I\/O. Letztendlich zielt das Lazy Loading auf kurze Signalwege, lokalem Speichern von Inhalten und letztendlich einer <strong>effizienten Kommunikation<\/strong> zwischen <a href=\"https:\/\/www.vautron.de\/blog\/was-ist-das-client-server-modell\">Client-Server<\/a> ab.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Welche Vorteile besitzt Lazy Loading gegen\u00fcber dem klassischen Hosting einer Website?<\/h3>\n\n\n\n<p>Eine moderne Website besteht mittlerweile h\u00e4ufig aus Quelltext und hochaufl\u00f6senden, <strong>speicherintensiven Multimedia-Dateien<\/strong> sowie eingebundenem Content, der auf einem externen Server liegt. Sie verwendet zwar standardisierte Protokolle wie HTML5 &#8211; diese sind jedoch meist weder auf Datentransfer noch -verarbeitung optimiert. Neben den relevanten Inhalten besteht bei diesen Verfahren nicht selten ein \u00fcberwiegender Teil der \u00dcbertragung aus bereits vorhandenen Informationen. Das Lazy Loading bewirkt unter anderem eine <strong>st\u00e4rkere Verwendung des lokalen Caches<\/strong> &#8211; eine Methode, die zum Beispiel das <a href=\"https:\/\/www.vautron.de\/blog\/was-steckt-hinter-dem-dns\">Domain Name System (DNS)<\/a> bereits seit Jahrzehnten einsetzt, um mehrfache, \u00fcberfl\u00fcssige Anfragen zu verhindern und Ladezeiten zu reduzieren.<\/p>\n\n\n\n<p>Zus\u00e4tzlich erlaubt es Lazy Loading, bestimmte Dateien oder <strong>Inhalte zu priorisieren<\/strong>, damit diese bevorzugt \u00fcbertragen werden. Eine typische Anwendung besteht etwa darin, bei einer <a href=\"https:\/\/www.vautron.de\/blog\/statische-vs-dynamische-webseiten\">statischen oder dynamischen Website<\/a> zun\u00e4chst wichtige Metadaten zu senden, um sie bei minimalen Ladezeiten korrekt darstellen zu k\u00f6nnen. Erst anschlie\u00dfend, wenn die volle Bandbreite wieder zur Verf\u00fcgung steht, folgen Inhalte wie hochaufl\u00f6sende Bilder und Videos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wie l\u00e4sst sich Lazy Loading auf einer Website einsetzen?<\/h3>\n\n\n\n<p>In der Vergangenheit erforderte das Lazy Loading <strong>externe Skripte<\/strong> beispielsweise in JavaScript. Seit dem Februar 2020 z\u00e4hlt es jedoch zu den offiziellen Spezifikationen von HTML und wird von allen gro\u00dfen Browsern wie Google Chrome, Mozilla Firefox oder Apple Safari unterst\u00fctzt. F\u00fcr seine Verwendung gen\u00fcgt seitdem die einfache Erg\u00e4nzung um das <strong>Attribut loading=lazy<\/strong> im HTML Source Code. Dabei ist jedoch zu ber\u00fccksichtigen, dass der Einsatz dieses Tags auch negative Folgen haben kann: So sind beispielsweise <a href=\"https:\/\/www.vautron.de\/blog\/was-sind-datenbanksysteme\">viele Datenbanken<\/a> darauf ausgelegt, unterschiedliche Informationen in einer einzigen Abfrage zusammenzufassen. F\u00fchrt das Lazy Loading dazu, eine Verbindung in mehrere separate Zugriffe zu trennen, erh\u00f6hen sich unter Umst\u00e4nden <strong>Ressourcenverbrauch und Ladezeiten<\/strong> sowohl auf dem Server wie bei dem Client.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Grunds\u00e4tzlich erweist es sich als w\u00fcnschenswert, wenn ein Server alle Inhalte und verbundenen Content mit einer minimalen Reaktionszeit \u00fcbertr\u00e4gt. Dies f\u00fchrt allerdings unter Umst\u00e4nden dazu, dass s\u00e4mtliche Elemente inklusive unver\u00e4nderlicher &#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[35,29],"_links":{"self":[{"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/posts\/704"}],"collection":[{"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/comments?post=704"}],"version-history":[{"count":1,"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/posts\/704\/revisions"}],"predecessor-version":[{"id":705,"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/posts\/704\/revisions\/705"}],"wp:attachment":[{"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/media?parent=704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/categories?post=704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/tags?post=704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}