Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Website-Optimierung: Was wiegt eigentlich deine Website?
28 Plays5 years ago
Recommended
Transcript
Warum ist das tatsächliche Gewicht einer Website wichtig?
00:00:00
Speaker
Eine Frage, die wir uns regelmäßig stellen sollten ist, was wiegt eigentlich unsere Website?
00:00:26
Speaker
Ja, also auf jeden Fall ist das so eine Frage, die ich mir tatsächlich sehr, sehr häufig stelle und die ich oftmals sehr, sehr vermisse, wenn man verschiedene Tools zur Performance-Optimierung oder besser gesagt zur Seiten-Performance-Optimierung nutzt, sowas wie PageSpeed Insights oder auch Pingdom exemplarisch. Das, was mir da immer ein bisschen zu sehr in den Hintergrund rückt, ist eigentlich die Quelle,
Herausforderungen für mobile Nutzer
00:00:52
Speaker
die zu vielen der Probleme eben führt, die wir bei der Seitenladegeschwindigkeit nämlich haben, nämlich das eigentliche Gewicht einer Website. Das mag jetzt vielleicht für dich erstmal ein bisschen komisch klingen, was hat der André denn jetzt mit dem Gewicht einer Website zu tun, das hat man ja so noch gar nicht gehört. Und tatsächlich ist es etwas, was ich schon vor ein paar Jahren mal in einem Vortrag gesagt habe, dass man sich viel mehr Gedanken darüber machen sollte, wie viele
00:01:21
Speaker
Dateien oder besser gesagt, wie schwer die einzelnen Dateien einer Website sind, die sich ein Nutzer herunterladen muss, um die Website angezeigt zu bekommen. Mal ganz exemplarisch, wenn ich mit dem Smartphone mit einer 3G-Geschwindigkeit oder noch viel schlimmer Edge, das kennt ihr gerade die, die vielleicht ein bisschen in ländlichen Regionen wohnen oder da ab und zu mal sind,
00:01:44
Speaker
Da hat man nicht immer LTE, wenn man unterwegs ist, sondern man muss eben mit diesen etwas langsamen Verbindungen kämpfen. Und wenn du dann mit deinem Smartphone auf eine Website kommst, die eben vorrangig viele und große, schwere Bilder in der Seite drin hat, dann führt das eben dazu, dass sich die Seite nicht lädt.
00:02:07
Speaker
Dann kommst du als Nutzer nicht zu den Informationen, die für dich eigentlich wichtig sind. Und ja, am Ende wird dir nicht geholfen.
Wie identifiziert man große Dateien auf einer Website?
00:02:14
Speaker
Weswegen es für mich immer wichtig ist bei der Performance-Optimierung, wenn ich rangehe oder damit beginne ich in der Regel eigentlich immer, dass ich mir erstmal mit einem Screaming Frog einen Datenstamm herhole, der mir aufzeigt, wie schwer die einzelnen Dateien eigentlich sind. Und da findet man sehr, sehr häufig, sehr, sehr schnell vor allem, die größten Probleme eigentlich im Bildmaterial.
00:02:37
Speaker
Ganz häufig ist es so, dass eben nicht Menschen mit einem Grafikhintergrund Bilder hochladen in das Content-Management-System, sondern eben Menschen, die einfach ihren Job machen und vielleicht auch keine Schulungen in dem Bereich hatten und eigentlich nur nach bestem Gewissen handeln und gar nicht wissen, was sie damit ihren Nutzern antun. Der Hintergrund ist auch oftmals der, man bedient eben auch ein Content-Management-System in der Regel nicht mit einem Smartphone,
00:03:03
Speaker
Jedenfalls tun es im Business-Bereich. Die wenigsten richtigen Blogger machen das relativ häufig. Aber im Business-Kontext benutzen wir eben so ein Content-Management-System in der Regel noch nicht mit dem Smartphone, weil wir eben auch die Möglichkeit haben, mit einem Computer zu arbeiten. Aber worauf möchte ich eigentlich hinaus? In dem Moment, wo ich mit einem Computer eine
00:03:25
Speaker
ein Content-Management-System befülle mit Inhalten und dort Bilder hochlade und sie mir dann später auf der Seite auch ansehe, habe ich eigentlich zwei Probleme. Problem Nummer eins ist meine deutlich schnellere Internetgeschwindigkeit, die ich nutze. Und Problem Nummer zwei, das Bild, was ich angezeigt bekomme, liegt schon immer im Browser Cache.
Missverständnisse bei Desktop-Tests
00:03:46
Speaker
Das heißt, wenn ich mir etwas anschaue zur Kontrolle, dann wird das in einer ziemlich hohen Wahrscheinlichkeit
00:03:53
Speaker
rapide angezeigt werden. Es wird sehr, sehr schnell eben funktionieren, aufgrund der Tatsache, dass ich eben, weiß ich, mit einer hunderter Standleitung im Netz bin und zusätzlich eben das Bild eh schon mal in meinem Browser gesehen habe und dadurch muss es der Browser eben nicht nochmal herunterladen. Und das führt eben zwangsläufig dazu, dass ich gar nicht mitbekomme, dass ich da vielleicht ein Bild hochgeladen habe mit 5 Megabyte. Wenn man jetzt aber mal an den armen Nutzer da draußen denkt, der mit seinem Smartphone eben auf die Website drauf kommt, der wird das
00:04:21
Speaker
sehr, sehr schmerzlich erfahren, wie es ist, das Bild, was du da unter Umständen hochgeladen hast, herunterladen zu müssen, bevor dann die eigentlichen Inhalte angezeigt werden.
Bildoptimierung für bessere Leistung
00:04:32
Speaker
Weil vielleicht sogar dieses Bild ein blockierendes Element ist, dass der Inhalt, der darunter ist, gar nicht angezeigt wird, bevor
00:04:39
Speaker
eben dieses Bild da ist. Und das führt eben dann dazu, dass ein Nutzer sehr unzufrieden sein wird. Deswegen ist mein heutiger Tipp einfach ganz klar, geh mal auf deine Seite drauf. Du hast mehrere Wege, um diese Informationen zu bekommen. Lade dir meinetwegen, wenn du ihn hast, den Screaming Frog, noch nicht hast, lade dir den Screaming Frog mal runter.
00:04:58
Speaker
Mach dort einen Crawl und guck dir mal das Gewicht deiner Seite an. Das wird, glaube ich, in der Spalte Size angegeben. Ich weiß gar nicht, was das für ein Format ist, aber du wirst relativ schnell sehen die sehr, sehr großen Nummern. Das sind auch entsprechend große Dateien. Und da wirst du mit einer hohen Wahrscheinlichkeit auch auf deiner Website sehr, sehr viele Bilder feststellen. Vorrangig Bilder, die eben sehr, sehr groß sind.
00:05:21
Speaker
Wenn du einen Screaming Frog nicht nutzen möchtest, hast du auch noch die Möglichkeit, das ist allerdings etwas umständlich und dann kommst du auch nicht an das Gewicht der Dateien ran, mit der Google Analytics exemplarisch dir einfach mal die durchschnittlichen Ladezeiten der Seiten anzuschauen und dort solltest du dann auch sehr, sehr schnell sehen, welche Ausreißerseiten da sind und meistens findet man auch dort dann eben sehr, sehr große Dateien.
00:05:43
Speaker
Was kannst du mit Bildern machen? Ganz exemplarisch natürlich. Kannst du sie komprimieren? Ich fange auch vor allem immer ganz vorne an, nämlich mit dem Dateiformat, weil da gibt es auch immer Unterschiede. Ein Bild, was viele Personen und viele Farben vor allem abbildet, sollte als JPEG abgespeichert sein. Eine Grafik, eine Infografik oder eben auch meinetwegen ein Logo. Gut, ein Logo ist nochmal was Separates, aber gerade sowas wie eine Infografik, die solltest du als PNG 8 abspeichern.
00:06:12
Speaker
Und alles, wo Animation mit drin, sind natürlich als GIF. Wobei auch da immer Vorsicht zu genießen ist, gerade GIFs werden mittlerweile sehr, sehr gerne benutzt, um etwas zu visualisieren. Meistens, um irgendwie lustig zu wirken, was man eigentlich gar nicht ist. Und an der Stelle auch gar nicht sein muss. Das Problem bei diesen GIFs ist aber, dass sie meistens aus irgendwelchen Filmschnipseln bestehen, die dann oftmals eben eigentlich ein JPEG wären, wenn man jetzt ein Foto nimmt, exemplarisch mal.
00:06:40
Speaker
Ich meine, ein Film ist ja auch nur eine Randereihung von Bildern. Und ja, wenn du das Problem hast, dass du so ein GIF, meinetwegen von Giphy, bei dir in die Website integrierst, dann hat so ein GIF durchaus mal drei, vier im B. Und die muss aber Nutzer eben auch runterladen und an die musst du halt denken. Nur um so eine kleine Nettigkeit zu machen, belastest du damit deine mobilen Nutzer und zwar massiv. Also deswegen solche Sachen immer beachten. Vielleicht noch mal ein kleiner Tipp.
00:07:05
Speaker
Es gibt für Bilder, die Fotos sind, oder auch im PNG-Bereich gibt es mittlerweile seit einigen Jahren ein schönes Format, das nennt sich WebP. Und mit diesem WebP-Format hast du die Möglichkeit, so ein Foto, meinetwegen, was 200 Kilobyte groß ist.
00:07:21
Speaker
noch mal locker 100 Kilobyte zu senken, ohne dass du irgendeinen Qualitätsunterschied in der Optik wahrnehmen wirst. Wer WordPress nutzt, kann ich da empfehlen Optimizely, ich glaube so heißt das, ich möchte mich jetzt nicht festlegen, aber irgendwas mit Optimize, Optimizely, mal ehemalig von Sergej Müller entwickelt, wurde mittlerweile eben
00:07:44
Speaker
von einem Unternehmen, ich glaube einem CDN-Unternehmen aufgekauft, läuft nach wie vor wunderbar. Und das kann ich Optimus, so heißt das. Optimus für WordPress, einfach mal nach googeln, das wirst du schnell finden.
Probleme mit großen JavaScript- und CSS-Dateien
00:07:56
Speaker
Nutze ich seit vielen Jahren gerade auf Kundenwebsites, wo ich eben weiß, dass nicht jeder Photoshop hat und jeder Photoshop auch so bedienen kann, wie es für eine Website notwendig wäre.
00:08:05
Speaker
Hilft dir ungemein. Was du noch beachten solltest an der Stelle sind oftmals JavaScript-Bibliotheken. Die sind meistens auch ziemlich groß und schwer. Da wird gerne jQuery benutzt. Jetzt klingelt mein Telefon. Das ist nicht so weiter schlimm. Das mache ich jetzt einfach mal aus.
00:08:25
Speaker
CSS-Dateien. Auch CSS ist oftmals ein großes Problem, weil auch da gerne Bootstrap benutzt wird, um schnell mal eben Sachen zu machen. Am Bootstrap ist generell nichts falsch, nur wenn man das quasi im Standard lässt, hat man das Problem, dass man eben sehr sehr große Dateien hat, die eigentlich gar nicht notwendig wären für das jeweilige Projekt. Deswegen mein Tipp für heute zusammengefasst, reduziere die
Abschließende Gedanken zur Website-Optimierung
00:08:51
Speaker
Größe deiner Dateien auf das Minimum, was nötig ist, um einfach eine bessere Performance für deine Website zu schaffen. Das war mein dritter Audiomo-Beitrag und ich hoffe, dass dir mein täglicher Impuls zur Website-Optimierung weiterhilft und freue mich, wenn du auch morgen wieder einschaltest. Macht's gut! Ciao!