SEO - Analyse - Nicht sichtbare bilder aufschieben 
Autor: Patrick S.
Besucht 2405,
Followers 3,
Geteilt 0
Ich habe mein neues Projekt in Pagespeed insights analysieren lassen um ein besseres Google Rating zu bekommen und nur 2 von möglichen 100 Punkten abgeräumt.
Nun versuche ich den Verbesserungsvorschlägen zu entsprechen, verkleinere die Bilder, switche wenn möglich von .jpg zu .png8 bei Logos und Buttons. Habe in Photoshop alle Bilder durch "für Web Exportieren" geschrumpft und kann auch mit der https://squoosh.app/ keine besseren Ergebnisse erzielen.
Nun wollte ich dem Rat: "Nicht sichtbare Bilder aufschieben" folgen!?
Wie mach ich das?
LG Patrick
Gepostet am
Wenn Du Bilder auf Deinen Seiten in Bild-Objekten hast, kannst Du den Effekt Lazy-Loading aktivieren. Damit werden die Bilder erst dann geladen, wenn Sie zu sehen sind. Heißt, ein Bild ganz unten auf einer umfangreichen Seite wird erst geladen, wenn es durch blättern sichtbar ist.
Hallo Parick,
dieses PROBLEM habe ich auch immer (egal welches Prüftool auch immer).
Der Effekt Lazy-Loading gehört überall mit dazu (ob Bild-Objekt, Text-Objekt mit Bilder (in Bildeigenschaften), HTML Box) und schon wäre das Problem gelöst. Es ist aber (wenn man im Netz nachliest ein schwieriges Thema).
Ich habe manchmal auch viele Bilder in Webseiten drin, die ich erst mit Photoshop mit "für Web Exportieren" speichere und dann noch mit dem Online-Tool "https://tinypng.com/" nochmals verkleinere (funktioniert recht gut). Was aber wichtiger ist, eine .htaccess im obersten Root für Komprimierung und Caching (das macht auch sehr viel aus beim PAGE-SPEED). Auf den Server (Oberster Root) kopieren und in .htacces umbenennen und Speetest machen.
Das ist auch ein Punkt den die allermeisten nicht beachten.
im Anhang ist mal eine dabei, Teste sie mal und du wirst sehen
.
Gruß
MCMACMATER
Zusatz:
Auch in sämtlichen Plugins in denen man Bilder einfügen kann gehört das Lazy-Loading dazu.
Gruß
MCMACMATER
Autor
Vielen Dank! das war alles ziemlich aufschlussreich D A N K E :-)
Für den .htaccess Tip muß ich mal Urlaub machen und mich inn die Materie einlesen,
aber lazy-loading krieg ich glaub ich hin...
werde das am WE mal umsetzen und dann erneut die Performance Checken, mal sehen was es bringt.
Top
LG Patrick
"aber lazy-loading krieg ich glaub ich hin..."
Aber nur in Bildobjekten unter Effekte und da nicht bei allen
Es wäre wünschenswert wenn INCO es so hinbringen würde das es auf allen OBJEKTE (Textbox, Bildbox usw.) angewendet werden kann. Es ist wirklich nicht leicht, es gibt zwar Lösungen die aber auch wieder JS/JQuery verwenden, diese sich aber wiederum mit der JS/JQuery von INCO nicht vertragen
.
Ich habe für GoogleMaps eine 2Click-Lösung eingebaut und jetzt MAULT SEORCH nicht mehr wegen der komprimierung von Google`s eigenen JS-Dateien. Das waren vorher ca. 8-10% Speed weniger.
Ich setze diese htacces immer ein
und es funktioniert.
Viele machen es nicht und wundern sich warum die Seite so langsam ist.
Gruß
MCMACMASTER
Autor
@Klaus Danke für die Infos, ich habe das Gefühl, Du schätzt mich etwas zu fortgeschritten ein. Ich nehm das mal als großes Kompliment an, muß aber leider gestehen, dass ich schon daran scheitere deinen Anhang zu öffnen, da ich keine Ahnung habe welches Programm das kann und wie ich das irgendwohin kopieren muß...
Kannst DU das nochmal für Grundschüler formulieren?
So betreutes Eintippen und Klicken für Anfänger...!
D A N K E
Die runtergeladene DAtei musst du ändern auf htaccess.txt !
Dann kannst du sie öffnen mit dem Notepad oder eine Text programm! Am Server musst du sie dann wieder umbenennen und einen Punkt davorsetzen und das .txt löschen.
Hallo Patrick,
zum bearbeiten von htacces, css und html Dateien verwende ich Notepad++.
Diese Access Datei dient dazu das deine Dateien deine Dateien komprimiert und dekomprimiert werden, das spart Zeit und Bytes.
Das aufschieben der Bilder funktioniert in WSX 5 nur auf Bildboxen (leider) und nicht auf Text, HTML-Boxen, geschweige in den PluIns.
Wie ich schon geschrieben habe ist das "Above the Folder" ein leidiges Thema im Netz. Diese Lösungen setzen wiederum JS voraus was dann wiederum ein Kontra ist da diese erst wiederum geladen werden müssen (also ein ewiger Kreislauf).
Um deine Seite so schnell wie möglich zu machen, solltest du deine Bilder entweder mit https://tinypng.com/ oder mit https://www.iloveimg.com/de/bild-komprimieren/jpg-komprimieren - komprimieren.
Deine ganzen CSS und JS Dateien (alle die Bank durch) mit http://refresh-sf.com/ (bis max. 1MB) bzw. mit https://de.piliapp.com/minify/yui-compressor/ (diese Dateien musst du wieder umbennen da sie dann xxxx.min.ccs heisen - also das min muss weg)kombrimieren. Die komprimierung der CSS und JS Dateien bewirkt, das in allen Dateien alles auf eine Zeile reduziert wird. Also nur eine Zeile lesen (geht schneller) und nicht XXX Zeilen.
Ordner in denen sich Bilder, CSS und JS Dateien befinden: Admin-CSS, CSS, Files, Images, PCSS, RES und Style
Diese ganze Arbeit spart einiges an MB´s und das ganze kann dann schneller geladen werden.
Für den Fall das schon eine aktive Seite vorhanden ist, exportiere die Dtaeien in einen seperaten Ordner (mit Namen XY) und diesen Ordner kopierst ( mit FileZilla geht das am besten ) du in den Ordner wo Dein Webseite drin ist (nur den ganzen Ordner).
Dann rufst du deine aktive Webseite auf (https://www.xxxxxx.de/) und gibst nach dem Slash den Ordnername XY ein und so kannst du im Vorfeld testen ob alles so funktioniert wie es sollte.
Wenn alles in Ordnung ist, kannst du dann die original Dateien und Ordner die ersetzt werden sollen löschen und mit deinen (Inhalt im Ordner XY auf dem PC) ersetzen.
Teste vorher wie groß der Ordner vor dem komprimieren ist und dann nach dem komprimiern, du wirst staunen.
Gruß
MCMACMASTER