#56 - Lazy Loading für Solo-Selbstständige: Dein Website-Turbo im Hintergrund

00:00:05: (Musik) Hallo und herzlich willkommen zu Webseiten-Magie, dem Podcast, der deine

00:00:09: Website zur besten Mitarbeiterin macht.

00:00:12: Hier erfährst du, wie du als Soloselbstständiger deine Website in

00:00:16: eine echte Kundenmaschine verwandelst.

00:00:17: Du bekommst nicht nur praktische Tipps und Tricks, sondern auch spannende Einblicke

00:00:21: hinter die Kulissen einer Web- und Marketing-Expertin.

00:00:24: Bist du bereit, in die magische Welt der Webseiten einzutauchen?

00:00:28: Dann lass uns loslegen.

00:00:29: Hier kommt deine Gastgeberin, Angelika Stempfle.

00:00:38: Auch von meiner Seite ein herzliches Hallo zu einer brandneuen Episode

00:00:41: von Webseiten-Magie.

00:00:43: Hast du dich auch schon mal gefragt, warum manche Webseiten sich total schnell

00:00:48: öffnen, während andere ewig brauchen, bis man überhaupt nur das erste Bild sieht?

00:00:53: Also wenn deine Webseite gefühlt auch so träge ist wie ein Montagmorgen ohne

00:00:57: Kaffee, dann ist die Folge jetzt genau die richtige für dich.

00:01:01: Heute geht es nämlich um Lazy Loading.

00:01:04: Eine Technik, mit der du deine Ladezeiten verkürzt, aber du brauchst nicht gleich

00:01:08: zur Technikqueen mutieren, um das zu erreichen.

00:01:11: Warum sind Ladezeiten so wichtig?

00:01:14: Die Hörer, die mir schon länger folgen und sich meinen Podcast anhören, wissen, dass

00:01:18: ich immer wieder mal auf dieses Thema zu sprechen komme.

00:01:21: Stell dir einmal vor, eine potenzielle Website-Besucherin sitzt irgendwo im Zug

00:01:26: und will eben einmal auf deine Website schauen.

00:01:29: Sie öffnet sie und wartet und wartet und wartet und dann klickt sie wieder weg.

00:01:35: Zack. Weil noch länger warten wollte sie nicht.

00:01:38: Eine Chance verpasst.

00:01:40: Fakt ist einfach, die Ladezeit ist einer der wichtigsten Faktoren

00:01:45: für den Online-Erfolg.

00:01:46: Im wahrsten Sinne des Wortes zählt da jede Sekunde.

00:01:50: Und Studien zeigen auch, dass oft schon nach drei Sekunden Ladezeit

00:01:55: viele Nutzer wieder abspringen.

00:01:57: Also drei Sekunden ist ja wirklich nicht lang, also eins, zwei, drei,

00:02:01: und weg ist er schon wieder.

00:02:02: Und Google ist da sowieso ganz pingelig.

00:02:06: Für Google ist es ganz wichtig, wie schnell eine Webseite lädt.

00:02:09: Also was ist dieses Lazy Loading überhaupt?

00:02:13: Das klingt ja auf den ersten Blick vielleicht so ein bisschen nach:

00:02:16: Ich habe keinen Bock zu arbeiten.

00:02:18: Aber in Wirklichkeit ist es eine super clevere Methode, wie deine Webseite

00:02:23: deutlich schneller lädt, ohne dass du viel dafür tun musst.

00:02:26: Jetzt stell dir einmal vor, du hast dir Gäste zum Abendessen eingeladen und sagst,

00:02:31: okay, Start ist zum Beispiel ab 19 Uhr.

00:02:34: Du kochst dafür, richtest es her und gehst her- die ersten

00:02:41: Gäste kommen und die kriegen das Essen natürlich warm serviert.

00:02:47: Dann kommen nach zehn Minuten, viertel Stunde wieder neue Gäste.

00:02:50: Dann ist das Essen aber schon vielleicht nicht mehr ganz so heiß.

00:02:54: Und im Grunde ist es genauso wie- bei einer Webseite ist es genauso.

00:03:00: Die Webseite sagt sich: Ich koche für die Gäste dann frisch, wenn

00:03:06: sie da sind und nicht, wenn sie erst irgendwann kommen.

00:03:10: Im Grunde ist es genauso.

00:03:12: Das bedeutet, dass bei einer Webseite nur die Inhalte, die gerade im sichtbaren

00:03:18: Bereich des Bildschirms sind, die werden geladen.

00:03:21: Alle anderen werden erst nachgeladen, wenn der Nutzer oder die

00:03:25: Nutzerin nach unten scrollt.

00:03:27: Das ist doch genial, oder?

00:03:29: Denn wenn du dir mal ansiehst, wie viele Leute deine Seite zum Beispiel nur kurz

00:03:34: überfliegen oder gar nicht weiter nach unten scrollen, dann wird klar, warum

00:03:39: sollte man alles laden, wenn das gar nicht gebraucht wird?

00:03:42: Und gerade Bilder und eingebettete Videos sind oft solche Ladezeitfresser.

00:03:48: Lazy Loading sagt dafür, dass die Seite schnell aufgebaut wird und sich deine

00:03:53: Besucherin nicht wie in der Warteschlange beim Finanzamt fühlt,

00:03:57: sondern es geht sofort los.

00:04:00: Ja, und wie ich schon gesagt habe, auch Google liebt schnelle Seiten, denn auch

00:04:04: dort- denn dort gilt: Zeit ist Ranking.

00:04:07: Wofür ist jetzt eben dieses Lazy Loading besonders wichtig?

00:04:10: Nicht für Textwüsten.

00:04:12: Also Webseiten mit viel Text und sonst nichts brauchen kein Lazy Loading.

00:04:18: Aber da sollte man sich vielleicht Gedanken darüber machen, ob

00:04:21: das nur Text so ideal ist.

00:04:23: Im Grunde brauchst du Lazy Loading überall dort, wo du große Mediendateien

00:04:28: hast, bei Bildern.

00:04:31: Die sollten natürlich auf einer Webseite nicht groß sein, aber Bilder sind fast

00:04:35: immer der Hauptgrund für lange Ladezeiten.

00:04:38: Vor allen Dingen auf Startzeiten, Landingpages oder

00:04:42: Blogbeiträgen mit vielen Fotos.

00:04:44: Und was eigentlich das Fatale daran ist, dass sich Leute diese vielen Bilder oft

00:04:50: gar nicht anschauen, weil Nutzer gar nicht so weit kommen oder

00:04:54: vorher schon mal woanders hin abbiegen auf deiner Webseite.

00:04:58: Und mit Lazy Loading sorgst du dafür, dass zum Beispiel das hübsche Portrait ganz

00:05:03: unten auf der Über-mich-Seite erst dann geladen wird, wenn der Besucher oder die

00:05:08: Besucherin da unten tatsächlich ankommt.

00:05:11: Vorher bleibt es im Dornröschen-Schlaf.

00:05:12: Und das ist nicht nur technisch sinnvoll, sondern es ist auch umweltfreundlich, weil

00:05:17: weniger unnötiges Laden ist weniger Datenverkehr und ergo auch

00:05:22: weniger Energieverbrauch.

00:05:24: Jetzt kannst du mit deiner Webseite quasi auch CO2 sparen.

00:05:27: Noch schlimmer ist es bei Videos, zum Beispiel von YouTube oder über

00:05:32: Vimeo, wenn du sie dort hochlädst.

00:05:35: Die laden im Hintergrund ja oft nicht nur das Video, sondern auch gleich ein ganzes

00:05:41: Set an Tracking-Skripten und Player-Elementen.

00:05:45: Also das kann deine Ladezeit massiv nach oben treiben, selbst wenn das

00:05:49: Video gar nicht angeschaut wird.

00:05:51: Ich hatte mal eine Kundin vor zwei, drei Jahren, die hatte eine Landingpage und die

00:05:57: Ladezeit, die war unterirdisch, wirklich, wo man gedacht hat, das gibt es ja nicht.

00:06:01: Bis ich draufgekommen bin, dass die die Videos eingebunden hatte über YouTube

00:06:06: und die haben das massivst verzögert.

00:06:08: Also da wurde nicht dagegen gewirkt.

00:06:11: Wir haben das dann geändert und zack, hat die Seite viel, viel schneller geladen.

00:06:16: Deshalb kommt gerade bei solchen Dingen Lazy Loading ins Spiel.

00:06:21: Das sorgt dafür, dass das Video erst dann geladen wird, wenn deine Besucherin

00:06:25: zu diesem Abschnitt scrollt.

00:06:28: Idealerweise wird es überhaupt erst dann geladen, wenn sie aktiv

00:06:31: auf den Play Button klickt.

00:06:33: Und welche Arten von Lazy Loading gibt es denn überhaupt?

00:06:37: Also grundsätzlich gibt es zwei Varianten, wobei die eine erzähle ich dir einfach

00:06:43: nur, dass du es einmal gehört hast, brauchen tust du es nicht.

00:06:47: Und zwar gibt es Native Lazy Loading.

00:06:49: Das ist die einfachste und eleganteste Lösung.

00:06:52: Da braucht man nur ein einziges Attribut im Bildcode hinterlegen, und das wird von

00:06:58: vielen modernen Browsern heutzutage bereits unterstützt.

00:07:02: Aber da wir ja ständig über WordPress-Seiten sprechen,

00:07:06: seit WordPress 5.5 ist diese Funktion automatisch aktiviert.

00:07:11: Das heißt, wenn du WordPress benutzt und deine Bilder ganz normal einfügst,

00:07:16: dann brauchst du nichts weiter zu tun.

00:07:19: Dann gibt es noch Lazy Loading über ein Plugin oder über ein Skript.

00:07:23: Also manche Themes oder Page-Builder, wie zum Beispiel Divi oder Elementor, die

00:07:28: bringen schon eigene Lazy Loading-Funktionen mit.

00:07:31: Alternativ dazu kannst du ein Plugin wie WP Rocket verwenden.

00:07:35: Das ist allerdings kostenpflichtig.

00:07:37: Das bietet auch zusätzlich noch eine Kontrolle, etwa für eingebettete

00:07:42: YouTube-Videos, iFrames und Hintergrundbilder.

00:07:45: Aber bitte Achtung.

00:07:48: Wenn du zum Beispiel Divi verwendest und dort ist Lazy Loading bereits aktiviert,

00:07:53: dann darfst du es bei WP Rocket nicht mehr aktivieren, weil du wirst merken, dass

00:07:58: deine Seite das sonst gar nicht mag, und dann gibt es Probleme bei den Bildern.

00:08:02: Also nutze auch nie mehrere Performance-Plugins,

00:08:07: sondern immer nur eines.

00:08:08: Und das wird einfach vernünftig konfiguriert.

00:08:11: Was sind jetzt so Vorteile vom Lazy Loading?

00:08:14: Fassen wir es einmal kurz zusammen.

00:08:16: Deine Seite lädt schneller, das bedeutet schon einmal besseres Google-Ranking

00:08:20: und weniger Absprungraten.

00:08:22: Deine Besucher bleiben länger.

00:08:24: Da hast du auch eine bessere Chance auf Conversions.

00:08:27: Du sparst Bandbreite.

00:08:29: Das ist gerade bei Mobil super wichtig.

00:08:32: Und du wirkst professionell, denn die Technik darf leise, aber

00:08:36: effektiv im Hintergrund arbeiten.

00:08:38: Jetzt kommt mein magischer Feen-Tipp.

00:08:42: Wenn du dir jetzt denkst, na ja, das ist eigentlich komplett egal jetzt, dann lade

00:08:46: ich meine Bilder einfach hoch, brauche mich nicht darum kümmern, wie groß

00:08:50: sie sind und aktiviere dann Lazy Loading.

00:08:53: Nein, bitte.

00:08:55: Bilder gehören vor dem Hochladen optimiert, selbst auch dann,

00:09:00: wenn man Lazy Loading verwendet.

00:09:02: Optimiere die Bilder vorher.

00:09:05: Das heißt, lade sie in der Größe hoch, in der du sie benötigst.

00:09:11: Wenn du mehr darüber wissen willst, wie man Bilder korrekt hochlädt, dann

00:09:15: horch dir doch gern Folge 36 an.

00:09:17: Da habe ich eine ganze Folge dazu gemacht.

00:09:20: Also lade Bilder in der richtigen Größe hoch und verwende vorher Plugins, wie zum

00:09:25: Beispiel TinyPNG, um sie einfach zu komprimieren.

00:09:30: Dann ist Lazy Loading die magische Kombination, um noch mehr Power

00:09:33: aus deiner Seite zu holen.

00:09:35: Also fassen wir noch mal zusammen.

00:09:38: Lazy Loading ist eine unsichtbare Wunderwaffe.

00:09:41: Was hast du denn heute gelernt bei mir?

00:09:43: Was ist Lazy Loading überhaupt und warum ist das wichtig?

00:09:48: Wie kannst du es ganz einfach nutzen, besonders wenn du mit WordPress arbeitest?

00:09:53: Und warum du Bilder und Video optimieren solltest, damit deine

00:09:57: Seite richtig durchstattet.

00:09:59: Und das ganz super, super Beste daran ist, du brauchst echt kein Technik-Genie

00:10:03: zu sein, um das umzusetzen.

00:10:05: Wenn du dir jetzt denkst, na ja, meine Webseite lädt eh schon ganz

00:10:10: gut und meine Bilder passen eigentlich eh und ich brauche mich mit Lazy Loading

00:10:14: nicht zu beschäftigen, horch es dir noch einmal an.

00:10:17: Du kannst auch gerne bei mir einen Website-Quickie buchen, der ist kostenlos.

00:10:22: Dann schaue ich mir das gerne an, ob bei dir die Bilder tatsächlich ideal sind oder

00:10:27: ob man da noch was Passendes machen sollte.

00:10:30: Den Link zum Website-Quickie findest du in den Shownotes.

00:10:34: Schreib mir einfach, fülle das Formular aus, schick mir den

00:10:37: Link zu deiner Webseite und du kriegst relativ rasch von mir ein Video-Feedback.

00:10:41: Und sonst? Du weißt ja, wo du mich findest.

00:10:43: Buche dir gerne ein kostenloses Erstgespräch, wenn du überhaupt über deine

00:10:46: Webseite plaudern willst oder von mir einfach noch Unterstützung brauchst in

00:10:51: irgendeinem Thema, was Webseiten betrifft.

00:10:53: Ich freue mich dann auf ein kostenloses Erstgespräch.

00:10:56: Den Link dazu findest du auch in den Shownotes.

00:10:59: Dann bleibt mir nur mehr zu sagen: Bis zur nächsten Folge.

00:11:01: Bleib zauberhaft und voller Tatendrang, deine Angelika.

00:11:06: (Musik) Das wars auch schon wieder mit dieser Folge von Webseiten-Magie.

00:11:13: Vielen Dank, dass du mit dabei warst.

00:11:15: Weitere Informationen zu Angelika und ihrer Arbeit findest du unter www.

00:11:19: diemarketingfee. at.

00:11:22: Und jetzt stellt sich die Frage: Wie ist es bei dir?

00:11:25: Hast du bereits eine Website, die du vielleicht sogar selbst erstellt hast?

00:11:29: Oder du hast sie du vor einiger Zeit erstellen lassen, aber es kommen

00:11:32: keinerlei Anfragen über sie?

00:11:33: Und generell, irgendwie bist du mit deiner Website schon länger nicht

00:11:37: mehr glücklich und zufrieden.

00:11:38: Wenn es dir so geht, dann sichere dir jetzt ein kostenloses

00:11:41: Erstgespräch mit Angelika.

00:11:43: Sie schaut sich mit dir deine aktuelle Situation an, bespricht deine Ziele und

00:11:47: ihr findet gemeinsam heraus, was die nächsten Schritte sind.

00:11:50: Egal ob du dich gerade mit Ladezeiten herumschlägst oder deine Website

00:11:54: optimieren willst, setzt euch zusammen und klärt, wie sie dir am

00:11:57: besten weiterhelfen kann.

00:11:59: Den Link zur Terminbuchung findest du in den Shownotes.

00:12:02: Danke, dass du uns heute den Ohr geliehen hast und denke immer daran: Mach deine

00:12:06: Website zu deiner besten Mitarbeiterin.