Pagespeed Insights für Bilderblog (Fashionblog) optimieren

[jackyberlin]

Hallo Community,

eine Frage zu dem google Pagespeed.
Ich habe einen Fashionblog. Heute habe ich mir mal Google Pagespeed Insights angeschaut, nachdem ich lediglich tools.pingdom.com getestet hatte.

Das größte Potential gibt es wohl bei meinen Bildern.

Hier sagt google mir tatsächlich, das ich einige der Bilder optimieren soll um 80-90%. Das ist totaler Blödsinn, da dies - und jetzt kommt es - meiner Meinung nach eben doch nur mit einem enormen Qualitätsverlust geht.

Wir fotografieren nicht im RAW Format, bearbeiten die Bilder mit Lightroom (vllt ein Fehler?), und liegen bei der Bildqualität schon beim Export nicht bei 100%.

Also irgendwas stimmt hier nicht...

Sicherlich ist dieses Thema bei einem Fashionblog bzw. bei einem Bilderblog die Meisterdisziplin.
Google selber empfiehlt Gimp oder diverse Linuxbasierte Programme, die ich erstmal nicht auf dem Server installieren wollen würde.

Habt ihr Erfahrungen, die Ihr teilen könnt?

Habt besten Dank
Jacky

[gurken]

schick mal ein paar Bilderlinks um die es dir geht, dann kann ich dir mehr sagen und korrigiere nochmals diesen Satz, da ging was daneben:

Wir fotografieren nicht im RAW Format, bearbeiten die Bilder mit Lightroom (vllt ein Fehler?), und liegen bei der Bildqualität schon beim Export nicht bei 100%.

[jackyberlin]

hi, auf https://www.whaelse.com kannst du die Bilder sehen :S

EDIT:

Mir geht es um alle großen Outfit Bilder, die kleinen werde ich mit Photoshop nachbearbeiten.

[gurken]

gib mal 2-3 spezifische Bildlinks welche Google nicht gut findet, oder sind alle Bilder betroffen?

€
ok ich sehe schon, die Pixelgröße ist in Ordnung, aber die Dateigröße ist überdimensioniert - 250kb bei deinem ersten Bild.
Wenn du mit Photoshop weiterarbeiten möchtest heißt das Zauberwort "Für Web speichern" dort stellst du eine Komprimierung von circa 70 ein, damit verlierst du optisch in dieser Größe überhaupt keine Qualität.

Damit kommst du runter auf ~120kb was aber immer noch zu groß ist - der Grund liegt hierbei an PS selbst, da es der Datei Zusatzinfos mitgibt welche kein normaler User benötigt.

Am besten ist das kostenlose Prg. Irfanview, damit kannst du jegliche Speicherung an Zusatzinfos verhindern und auf circa 50kb kommen was für diese Pixelgröße ein sehr schöner Wert ist.

Hier noch die Einstellungen für Irfanview, die Komprimierungsschraube kann man noch weiter runterdrehen, muss man probieren - 70 ist auf jeden Fall ein guter Wert wo fast jedes Bild optisch ohne Verlust gespeichert wird.


In deinem Fall würde ich sogar noch weiter gehen und die Bilder hochauflösender mit Komprimierung (~1800px) als Thumbviewlink zur kleineren Version anbieten - Modeleute werden das dankend annehmen.

€2 hat sich eigentlich dein Problem der Websitekopie erledigt, oder wie gings da weiter?

[Henk]

Vorweg, ich habe auch viele Bilder auf einer Seite und ignoriere die Google Vorschläge, weil es oft nur um ein paar KB geht, die laut Insights gespart werden sollen/können. Es kommt aber eben immer drauf an: Wie hoch war denn eure Kompressionsrate in Lightroom bei der Erstellung der JPGs?

Ich habe mir nur mal beispielhaft das erste Bild angeschaut: https://www.whaelse.com/wp-content/uplo ... 00x900.jpg Das hat auf alle Fälle noch Potential. Mit Lightroom hat das nichts zu tun (nutze es selber viel). Gesetzt die Vorgabe, dass die lange Seite 900Px sein soll, würde ich rein vom Gefühl sagen, dass du die 250Kb mindestens nochmal halbieren kannst. Eine Kompressionsrate von 85% kannst du ohne größeres Risiko einstellen, selbst 75% sollte noch ohne erkennbare Artefakte sein. Zudem würde ich auch die Kameradaten (Metadaten) aus dem Bild entfernen (kannst du auch im LR Export Dialog machen). Bringt nicht die Masse - aber ist unnötiger Ballast!

Sehr interessant dazu übrigens auch dieser Artikel: https://regex.info/blog/lightroom-goodies/jpeg-quality

[Vultur]

jag die bilder mal bei kraken.io durch, das bringt eine ganze menge ohne sichtbaren qualitätsverlust

[bbit]

Die Bilder sind mit 300 dpi drin. Wenn mich nicht alles täuscht kann nen Monitor eh nur 72 dpi. Weiß aber nicht ob das sofort was an der Größe der Bilder ändert.

[gurken]

Die Bilder sind mit 300 dpi drin. Wenn mich nicht alles täuscht kann nen Monitor eh nur 72 dpi. Weiß aber nicht ob das sofort was an der Größe der Bilder ändert.

das ist bei der Bildschirmausgabe egal, genauso kann sie bei gleicher Pixelgröße 50.000 dpi definieren ohne das sich die Dateigröße ändert - das ganze ist erst beim Druck interessant.

[mogli]

Die Pagespeed-Meldung kenne ich auch. Bei Photoshop ist die Lösung recht simpel: "Für Web speichern" als JPG mit Qualitätswert "70" und wichtig: bei "Metadaten" die Option "ohne" auswählen. Dann sollten 4 von 5 Bildern völlig problemlos durch den Pagespeed-Test wandern.

[jackyberlin]

Hi Leute,

erstmal danke für die zahlreichen Antworten auf meine Frage .

Ich bin gerade dabei einen Versuch zu starten und bearbeite alle Bilder nach dem ausführlichen Prinzip von @gurken (vielen dank dafür) ab. Dabei sehe ich jetzt schon dermaßen erfolge in der KB Zahl, das ich meine, auf dem richtigen Weg zu sein . Zahlen gibt es am späten Abend oder gar morgen erst früh.

@gurken:
mein Problem mit der Kopie der Website hatte sich sofort nach den ganzen Tipps hier aus dem Forum langsam aus dem Index verzogen - bis diese schließlich komplett weg war. Auch hierfür nochmal daaaanke .

Ich habe am späten Abend den Test durch. Ich habe Photoshop "Für web speichern" sowie das Programm Irfanview.
... also bis jetzt macht das Programm die Bilder nochmal kleiner als Photoshop (was ja hier auch schön erklärt wurde, dass es so sei).

Ich glaube das wird toll

Aktuell gibt meine Seite bei der Pagespeed Wertung lediglich 35/100 ab. Auch wenn die 100 wahrscheinlich unmachbar sind, will ich es in jedem Fall grün haben.

... google soll schnelle Pages ja lieben.

Ich berichte euch sobald alles fertig ist. Dann gibt es die Screenshots .

Vielen Dank euch allen, ihr seid suuuuuper

[Waelti]

Eine kleine Bemerkung am Rande:

unabhängig von irgendwelchen Kompressionsstufen und verschiedenen Programmen..

Wenn Bilder mit 290 Pixeln Breite angezeigt werden, dann sollten dafür auch Bilder mit 290 Pixeln Breite verwendet werden. Werden statt dessen 600 Pixel Breite Bilder verwendet, dann werden etwas mehr als 4x soviel Daten (wie nötig) übertragen.

Es ist nicht unbedingt von Vorteil wenn Programmässig "runterskalieren" recht einfach möglich ist. (Wenn ein Bild kleiner angezeigt wird, als es ist. 476 KB können ohne optische Veränderung eingespart werden.)

[jackyberlin]

kurz vorweg.
Ich konnte heute von 32 Punkten auf 56 punkte in der Bewertung aufsteigen.
Das ist für mich schonmal ein enormer Sprung. Und das mit minimalem Aufwand. Vielen Dank.

Ich werde das aufjedenfall beibehalten.

Eine kleine Bemerkung am Rande:
Wenn Bilder mit 290 Pixeln Breite angezeigt werden, dann sollten dafür auch Bilder mit 290 Pixeln Breite verwendet werden. Werden statt dessen 600 Pixel Breite Bilder verwendet, dann werden etwas mehr als 4x soviel Daten (wie nötig) übertragen.

...und genau daran arbeite ich gerade. Du meinst auf meiner Seite die kleineren Vorschaubilder, richtig?

Ich habe in Wordpress eine weitere bildgröße angelegt, die beim Import automatisch die größe skaliert.

ich glaube da gibt es auch noch potential.

Jetzt muss ich mich erstmal an

"JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen"

"JavaScript reduzieren"

"Css reduzieren"

machen, um weiter zu steigen ...

P.s. mit google wird einem aber auch nie langweilig. :S

[Waelti]

@jackyberlin

Ich weiss nicht, ob das mit den 600/290 Pixel die Vorschaubilder sind. Habe den Check mit GTMetrix gemacht und eben die Information gesehen. Dass die Bilder kleiner dargestellt werden, als sie sind.

Die "Punkte" halte ich nicht für so besonders wichtig. Letzendlich geht es um die (Lade)Zeit?
Mit dem Teil beginnen

Du gibtst Dir augenscheinlich viel Mühe. Das wird schon. Lediglich: JavaScript reduzieren und CSS reduzieren steht (zumindest bei GTMetrix) in der Rangliste recht weit hinten. Und bietet auch weniger Einsparpotenzial, die Bilder kommen immer noch vorher.

Die Timeline bei GTmetrix zeigt beispielsweise die benötigte Ladezeit für die einzelnen Elemente an. Ich selbst beginne eben mit den Teilen, welche die meiste Zeit benötigen. Unabhängig von einer Punktzahl.

[derjanni]

Hi Jacky,

erstmal gefällt mir dein Blog wirklich sehr gut, wenn er denn mal geladen ist. Der ist ja zum Verrecken langsam Deshalb hier von mir als PageSpeed-Fanatiker ein paar Tipps:

• JavaScript aus dem HEAD entfernen und vor </body> setzen
• JavaScript in eine Datei zusammenführen und minifizieren
• CSS in eine Datei und minifizieren
• Inline CSS und line JavaScript auch in die Dateien *omg*
• Die Bilder im Header sind monsterfett, geht's ne Nummer kleiner? Vor allem sind die meisten von denen viel zu hoch. Da bekommt mein Android-Telefon beim Rendern ja schon einen Herz- bzw. Prozessorinfakt
• Auf deinem Server 46.20.42.106 hocken alle möglichen Verrückten

Also da hilft keine Diät, sondern nur der Absaug-Schlauch mit chirurgischer Präzision. Typische WordPress-Krankheit, das System neigt einfach zu Übergewicht wie ein fetter kleiner schokoladen-süchtiger Junge.

Schade, eine schöne schlanke Frau sollte auch eine schöne schlanke Website haben.

[jackyberlin]

Hi Jacky,

erstmal gefällt mir dein Blog wirklich sehr gut, wenn er denn mal geladen ist. Der ist ja zum Verrecken langsam Deshalb hier von mir als PageSpeed-Fanatiker ein paar Tipps:

• JavaScript aus dem HEAD entfernen und vor </body> setzen
• JavaScript in eine Datei zusammenführen und minifizieren
• CSS in eine Datei und minifizieren
• Inline CSS und line JavaScript auch in die Dateien *omg*
• Die Bilder im Header sind monsterfett, geht's ne Nummer kleiner? Vor allem sind die meisten von denen viel zu hoch. Da bekommt mein Android-Telefon beim Rendern ja schon einen Herz- bzw. Prozessorinfakt
• Auf deinem Server 46.20.42.106 hocken alle möglichen Verrückten

Also da hilft keine Diät, sondern nur der Absaug-Schlauch mit chirurgischer Präzision. Typische WordPress-Krankheit, das System neigt einfach zu Übergewicht wie ein fetter kleiner schokoladen-süchtiger Junge.

Schade, eine schöne schlanke Frau sollte auch eine schöne schlanke Website haben.

hahahaha .
Danke für die Tipps. Ich bin auf einem shared hosting, ich glaube das ist nicht so gut... Allerdings sind mir vserver einfach zu crazy in der Verwaltung und vor allem Betreuung:
- aber, check! ich werde eh bald wechseln.

[*] Die Bilder im Header sind monsterfett, geht's ne Nummer kleiner? Vor allem sind die meisten von denen viel zu hoch. Da bekommt mein Android-Telefon beim Rendern ja schon einen Herz- bzw. Prozessorinfakt

ich nehme an du meinst den Slider, richtig? Der wird zwar außerhalb des <head> bereiches geladen, aber ist dennoch am anfang der seite.
Meinst du, ich sollte für mobile phones den slider (wie auch immer über responsive oder media querys) verkleinern?

[*] JavaScript aus dem HEAD entfernen und vor </body> setzen
[*] JavaScript in eine Datei zusammenführen und minifizieren

also, den punkt verstehe ich sowieso nicht.
Wordpress lädt ja jedes schei* plugin im head bereich.

Meinst du alle .js dateien im body laden?
minifizieren, dafür gibt es ja plugins (natürlich...). Kannst du mir eins empfehlen. Ich weiss das w3 total cache das macht, aber das plugin hasst mich und ich hasse das plugin. Wp super cache kann das noch nicht.

Was meinst du? Kann ich das auch selber?

Danke für deine Hilfe