Support » Allgemeine Fragen » Ziel: Ladezeit der Seite verringern durch Bildoptimierung

  • milenaberneadmin

    (@milenaberneadmin)


    Auf meiner Seite arbeite ich mit dem Salient Child Theme. Am logischsten erschien es mir durch eine neue Bildskalierung direkt im Theme Bildgrößen zu verkleinern und damit auch die kb. Ziel ist das die Seite schneller lädt. Zum Beispiel sind nach der Skalierung im Theme auf einer Seite 10 Bilder im Schnitt 50-80kb kleiner/leichter. Alle diese Bilder haben Titel, Alternative Texts etc.- es steckt viel Arbeit drin. Urls laufen für die Google Bildsuche, die bei einer Löschung der Bilder verloren wären. Wenn ich nach der Optimierung/Skalierung der Bilder in WP die Seiten durch die „Kontrolle“ (GT Metrix) laufen lasse, wird die Veränderung vom System gar nicht wahrgenommen und die Ladezeit ist genau dieselbe.

    Folgene Fragen:
    1. Ist es richtig, das eine Bildoptimierung in WP durch eine neue Skalierung nichts bringt ? Wenn das so ist, warum kann man in WP Bilder skalieren und damit verkleinern ?
    2. Ist der logische Schritt, alle Bilder die zu groß sind aus WP komplett zu löschen und nochmal optimiert hochzuladen ?
    3. Schadet es der Seite, wenn die Bilder welche schon mal hochgeladen waren, optimiert und wieder neu hinterlegt eine neue Url bekommen ?

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 11 Antworten - 1 bis 11 (von insgesamt 11)
  • Moderator Bego Mario Garde

    (@pixolin)

    Wenn du mit deiner Digitalkamera ein Foto machst, wird eine (fürs Web viel zu ) hohe Auflösung verwendet, damit das Bild auf Papier gestochen scharf aussieht. Für einen farbechten Ausdruck wird außerdem ein Farbprofil in der Bilddatei hinterlegt. Damit du aus deinen Aufnahmen lernen kannst (welche Blende hatte ich verwendet? war der Blitz eingeschaltet? usw.) und deine Bilder besser zuweisen kannst, werden außerdem Meta-Daten (EXIF-Daten) in der Datei hinterlegt.

    Wenn dir das Bild wichtig ist, wirst du es als erstes in einem Bildbearbeitungsprogramm optimieren, z.B. in dem du die Gradationskurve korrigierst, Details ausfleckst, usw. Das Bildbearbeitungsprogramm speichert ggf. weitere Informationen in der Datei ab.

    Für die Veröffentlichung im Web kannst du auf Farbprofil, EXIF-Daten und Informationen aus einem Bildbearbeitungsprogramm verzichten. Dazu gibt es Apps (z.B. Imageoptim für den Mac) oder Online-Dienste (z.B. Tinyjpg.com), mit denen du die Bildgröße oft schon um ein Drittel verringern kannst – das macht, wenn du viele Bilder verwendest, bereits viel aus.

    Wenn du nun das Bild hochlädst, hat das Bild wahrscheinlich immer noch eine viel zu hohe Auflösung fürs Web. Aber welche Auflösung brauchst du? Unter Umständen willst du das Bild an verschiedenen Stellen für unterschiedliche Zwecke nutzen – als daumennagelgroßes Vorschaubild (Thumbnail) in Galerien, in einer mittleren Größe, wenn du es in den Seiten- oder Beitragstext einfügen möchtest, in einer hohen Größe, wenn du das Bild z.B. in einer Lightbox großformatig zeigen möchtest und in einem zugeschnittenen Panoramastreifen für den Header, dessen Abmessungen dein Theme vorher festgelegt hat. WordPress skaliert deshalb beim Upload jedes Foto auf vorher in Einstellungen > Medien bzw. im Theme festgelegte Größen und legt zusätzlich das Originalbild ab.

    Bilder die kleiner sind, als die voreingestellten Größen, werden nicht (hoch-)skaliert, weil damit automatisch die Bildqualität verschlechtert würde.

    Es macht eigentlich wenig Sinn, auf dem Webserver Bilder mit einem Dateivolumen von mehreren Megabyte (pro Bild) abzulegen. Mit dem Plugin Imsanity kannst du eine Maximalgröße angeben und dadurch Platz auf dem Webserver sparen.

    Wenn du nun Bilder in Seiten oder Beiträge einfügst, gibst du in der rechten Spalte bei der Bildauswahl an, welche Maximal-Größe verwendet werden soll. Wenn dein Theme für den Beitrag eine maximale Breite von 600 Pixel vorgibt, macht es keinen Sinn, das Bild z.B. mit einer Breite von 1024 Pixeln einzufügen.

    Damit auf Endgeräten mit kleinen Bildschirmen keine unnötig großen Dateien geladen werden, bietet WordPress dem Browser ein Source-Set an (mehr Informationen dazu findest du hier). Auch daran ist also gedacht.

    Wenn du in deinen Webseiten sehr viele Bilder verwendest, kann auch ein Lazyload-Plugin sinnvoll sein. Damit werden die Bilddateien erst nachträglich geladen und angezeigt, wenn der Nutzer an die entsprechende Stelle der Webseite scrollt. Dadurch entsteht der Effekt, dass die restliche Seite deutlich schneller geladen wird.

    Zu deiner ersten Frage:
    WordPress skaliert die Bilder bereits selber. Mit einer neuen Skalierung nimmst du das nur vorweg – im Ergebnis ändert sich nichts. Wenn du aber z.B. nur einen Ausschnitt eines Bildes verwenden möchtest, kannst du das Bild in WordPress zusätzlich beschneiden und skalieren. Das ist vermutlich als Unterstützung für Benutzer gedacht, die kein Bildbearbeitungsprogramm zur Hand haben.

    Zu deiner zweiten Frage:
    Du kannst die Bilder in deinem Uploads-Verzeichnis auch nachträglich durch einen Bildoptimierer wie Tinyjpg.com bearbeiten lassen und dann mit unveränderten Namen und gleicher Verzeichnisstruktur wieder hochladen. Oder du verwendest ein Plugin wie EWWW Image Optimizer, das auch nachträglich Bilder optimieren kann (vorher natürlich immer ein Backup machen).

    Zu deiner dritten Frage:
    Bei der o.g. Bearbeitungsmethode behalten die Bilder alle ihre Namen und URLs. Es schadet also der Website nicht.

    milenaberneadmin

    (@milenaberneadmin)

    Vielen Dank für die Informationen. Ich hatte das EWWW Image Optimizer Plugin bereits auf meinem Computer installiert, bin mir aber nicht sicher, ob es bis jetzt über alle Bilder geschickt wurde. Ich lasse die Massenoptimierung jetzt gerade laufen und werde berichten. Ich hoffe es gibt danach ein Protokoll, damit die Aktion nachvollziehbar ist.

    Kann man eigentlich sagen, wieviele Bilder eine Seite im 600×400 Format verträgt, wenn Sie Teil einer Bildergalerie sind ? Wieviele Bilder sollte man auf einer Programmseite online haben ? Bei mir sind es insgesamt ca. 80 Programmseiten ? Habe ich insgesamt zuviel Bildvolumen ?

    Moderator Bego Mario Garde

    (@pixolin)

    Was meinst du mit Programmseiten? Beitragsseiten?

    Ziel sollte sein, dass deine Webseiten nach Optimierung (Cache, Autoptimize Lazyload, Bildoptimierung, Serverkonfiguration, …) aber ohne Browser-Cache innerhalb von 3 Sekunden geladen sind. Beim Datenvolumen solltest du auch an Benutzer mit eingeschränktem Datenvolumen (Mobilfunkvertrag) denken. Wenn ich 300 MB Datenvolumen im Monat zur Verfügung habe, möchte ich die nicht schon beim Besuch deiner Homepage los sein. 😉

    milenaberneadmin

    (@milenaberneadmin)

    Ich kann vermelden, daß nach der EWWW Optimierung meine Startseite um 4% besser bia GT Metrix eingestuft ist. Die Kategorie „Optimize Images“ ist von F auf A(bestes Ergebnis gegangen). Die Ladezeit beträgt leider immer noch 5Sec. Da gibt es anscheinend noch andere Baustellen. ABER, nach EWWW Optimierung einer Unterseite (Programmeseite) habe ich dort das gleiche, schlechte F und eine Ladezeit von 20(!)Sec mit 6.6 MB. Link > https://edu-seasons.com/sprachreisen-50plus/spanien/nerja/ Warum hat hier die Optimierung nicht funktioniert ? Sind das zuviele Bilder ? Oder sind es die eingebetten Videos im Theme. Was macht die Seite so langsam ? da ich mehr als 80 solcher Seiten habe, will ich das System verstehen, warum die Seiten so langsam laden. Folgende Meldung kommt in Gt Metrix:

    2.4MiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

    milenaberneadmin

    (@milenaberneadmin)

    Wieviel Datenvolumen sollte eine Programmseite haben, und kann ich das irgendwo in WP als Information abrufen ? Kann ich irgendwo im Dashboard nachlesen, wieviel Datenvolumen eine Seite hat, damit ich es ggf. verringern kann ?

    Moderator Bego Mario Garde

    (@pixolin)

    Das Plugin Query Monitor liefert dir eine ganze Menge an Informationen über geladenen Templates, Datenbankabfragen, Speicherbedarf, etc. Für die Beurteilung der Seitengröße sind aber die Benutzerwerkzeuge deines Browsers hilfreicher:
    Rechtsklick auf die Webseite > Tab Netzwerk, Seite erneut laden – in der Statusleiste siehst du Ladezeit und Gesamt-Dateivolumen, neben den einzelnen Dateien das einzelne Datenvolumen, wobei du dann auch filtern und sortieren kannst.

    milenaberneadmin

    (@milenaberneadmin)

    Vielen Dank, ich schaue in die Benutzerwerkzeuge ! Könnte ich dazu noch eine Info bekommen ? Ich kann vermelden, daß nach der EWWW Optimierung meine Startseite um 4% besser bia GT Metrix eingestuft ist. Die Kategorie „Optimize Images“ ist von F auf A(bestes Ergebnis gegangen). Die Ladezeit beträgt leider immer noch 5Sec. Da gibt es anscheinend noch andere Baustellen. ABER, nach EWWW Optimierung einer Unterseite (Programmeseite) habe ich dort das gleiche, schlechte F und eine Ladezeit von 20(!)Sec mit 6.6 MB. Link > https://edu-seasons.com/sprachreisen-50plus/spanien/nerja/ Warum hat hier die Optimierung nicht funktioniert ? Sind das zuviele Bilder ? Oder sind es die eingebetten Videos im Theme. Was macht die Seite so langsam ? Da ich mehr als 80 solcher Seiten habe, will ich das System verstehen, warum die Seiten so langsam laden. Folgende Meldung kommt in Gt Metrix:

    2.4MiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

    Moderator Torsten Landsiedel

    (@zodiac1978)

    Neben der schieren Masse (6MB sind ganz schön viel) sind vor allem die 404s ein Problem. Schau dir mal das Wasserfall-Diagramm an:
    https://tools.pingdom.com/#!/dB513b/https://edu-seasons.com/sprachreisen-50plus/spanien/nerja/

    Gruß, Torsten

    milenaberneadmin

    (@milenaberneadmin)

    Danke ! Das Pingdom Tools kannte ich noch nicht.

    Moderator Bego Mario Garde

    (@pixolin)

    Über 5 Megabyte Daten, 145 Requests, eingebettetes Youtube, Slider … das ist alles recht üppig. Vielleicht magst du das auf mehrere Seiten aufteilen? Bildoptimierung ist ja nur ein kleiner Teil der Performance-Optimierung.

    Es ist manchmal schwer zu entscheiden, ob Performance oder Inhalt wichtiger sind. Wenn du überzeugt bist, dass eine Webseite eine bestimmte Anzahl an Bildern, Animationseffekten, eingebetteten Videos, etc. enthalten muss, ist es auch mit Tricks (Lazyload – hast du noch nicht ausprobiert?) schwierig, die Seiten unter 3 Sekunden zu laden. Ich finde den Tipp ganz hilfreich, sich ein persönliches „Performance-Budget“ zu setzen und den Umfang der Seiten daran auszurichten.

    Schau doch mal, ob du mit einem Cache-Plugin bessere Ergebnisse erzielst. Wenn du ein paar Euro entbehren kannst: ich bin WP Rocket sehr beeindruckt (meine persönliche Meinung). Ansonsten probier mal Comet Cache aus. Das ist einfach einzurichten und kostenfrei erhältlich.

    milenaberneadmin

    (@milenaberneadmin)

    Ganz vielen Dank. Der Input hilft mir sehr weiter ! Viele wertvolle Tipps und Hinweise.

Ansicht von 11 Antworten - 1 bis 11 (von insgesamt 11)
  • Das Thema „Ziel: Ladezeit der Seite verringern durch Bildoptimierung“ ist für neue Antworten geschlossen.