WordPress-Thumbnails löschen und resizen

Gerade hat es mich angefixt. Gerade vor knapp 90min. Weil ich irgendwo über den Pagespeed-Test von Google las, habe ich themenmix.de mal wieder in den Parcour geschickt. Mit niederschmetterndem Ergebnis:

  • Mobile: 51/100
  • Desktop: 62/100

Ach du meine Güte.

Ich fühlte mich bei der Ehre gepackt und begann den Versuch, die Zahlen vor dem Teiler mehr an die hinter dem Teiler anzugleichen.

Bilder optimieren: Compressing and resizing

Zunächst war ich ziemlich bestürzt darüber, dass angeblich meine Bildergrößen zu groß seien. Häh? Ich habe smush.it am Laufen und auch über alle Bilder drüberrauschen lassen. Ich dachte eigentlich kleiner gehts nimmer. Doch Google-Pagespeed wollte bei einem Bild, welches 119KByte groß ist, sogar 108KByte sparen! Was sollte das denn für eine sensationelle Kompressionsmethode sein?, frage ich mich.

Dann dämmerte es mir: ich schaute mir die Vorschläge für die Mobile-Lösung an! Auf einem Smartphone sind die Bilder um etliches kleiner als auf einem PC! aber sollte ich für jedes Bild je nach mobiler Ansicht ein eigenes Thumbnail generieren? Das erscheint mir doch eine ziemliche Haubitze zu sein!

Trotzdem analysierte ich die Darstellung für die Desktop-Variante und stellte fest, dass Hueman – das WordPress-Theme, welches ich hier nutze – die kleinen Bilder in der Archivansicht (bzw. unter dem Featured Artikel auf der Homepage) in 340×160 Pixel anzeigt; dafür aber das „thumb-medium“ benutzt, welches mit 520×245 Pixeln definiert ist. Das ist zu groß!

Ich beschloß dem abzuhelfen und fügte meiner eigenen functions.php eine neue Thumbnail-Definition hinzu:

Anschließend kopierte ich die content.php aus dem Hueman-Verzeichnis in mein Child-Verzeichnis und fügte folgende Zeilen ein …
Originalcode:

Mein Code:

Gut. Natürlich existieren allein durch die Definition des ‚thumb-index‘ noch keine Bilder a’la ‚bildatei-340×160.jpg, welche anzuzeigen wären. Ich muss also für jedes Bild eine Kopie desselben in der Größe 340×160 Pixel erstellen! Aber macht man das händisch? Nein … dafür gibt super Helferlein.

Ich setze auf „Regenerate Thumbnails„. Das Plugin für WordPress rennt über alle Bilder und bastelt daraus die im Theme definierten Thumbnail-Bilder in den entsprechenden Größen automatisch. Das ist grandios. Dauert zwar je nach Bilderanzahl, aber es funktioniert prächtig.

Neugierig überzeugte ich mich per FTP, ob die neue Größe 340x160px auch angelegt wurde … sie wurde. ABER: ich sah für jedes Bild inzwischen 7 Bilder in unterschiedlichen Größen. Diese große Menge an Bildern kommt durch meine Themewechsel der letzten Jahre. Jedes WordPress-Theme bringt so seine eigenen Bildergrößen mit und entsprechende Dateien werden bei der Verwendung von Bildern in Blogposts automatisch angelegt. Dem Wildwuchs an Dateien ist Tür und Tor geöffnet. Doch wie werde ich die Bilddateien los, welche Hueman gar nicht nutzt?

Mit „Force Regenerate Thumbnails„!
Dieses meinem bisher genutzten Plugin namentlich ähnelnde Plugin macht erstmal nichts anderes: es erzeugt aus Bilddateien die benötigten Bildgrößen. Der Clou ist aber: Force Regenerate Thumbnails löscht alle Bilddateien, die NICHT im aktuellen Theme genutzt werden. Jawohl – das Teil löscht die Dateien physikalisch von der Platte weg. Das spart natürlich erstens Platz und zweites dürfte der Webserver minimal schneller auf die angeforderten Dateien zugreifen können, weil er weniger Dateien „lesen“ muss. Ich fürchte zwar, die Performancesteigerung liegt im Picosekunden-Bereich, aber es beruhigt meine Nerven ungemein, wenn ich mich von dem „Müll“ vergangener Blogtage trennen kann.

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

Ich hasse dieses … denn ich habe schon massig Zeit in diese „Optimierungsmaßnahme“ gesteckt und in mühsamer Codefummelei auch einiges geschafft. Aber so ganz 100%ig bekomme ich es nicht hin.

Ich stolperte heute über ein weiteres WordPress-Plugin: Async JS and CSS. Dem Namen nach sorgt dieses Plugin dafür, das Javascript und Stylesheets asynchron geladen werden, wenn ein Besucher die Seite aufruft. „Asynchron“ heißt an dieser Stelle nichts anderes, dass dem Browser des Besuchers mitgeteilt wird, dass hier Script-Zeug hingehört, das Laden der Scripte aber nicht das Laden der restlichen Seitenhinhalte blockiert. Je nach Konfiguration kann der Browser mehr oder weniger Dateien gleichzeitig empfangen. So lange diese Dateien nicht komplett empfangen wurde, lädt er keine weiteren und wartet darauf, dass er wieder loslegen kann. Ein lupenreines Nadelöhr! In dem man auf die „asynchrone“ Auslieferung der Inhalte setzt, umgeht man dieses Problem einfach. Der Browser lädt den ganzen relevanten Teil wie das grundsätzliche HTML, die Bilder, den Text usw. zügig durch und kümmert sich um die Javascripte und CSS-Dateien erst später. Die Folge: die aufgerufene Seite wird schneller angezeigt! Der Pagespeed steigt! Bingo.

Ich habe dieses Plugin jetzt mal auf Themenmix.de aktiviert. Du siehst hier auch sehr schön eine unschöne Nebenwirkung des asynchronen Ladens von Javascript und CSS: oben links werden die Posts eigentlich 4 „Tabs“ angezeigt: die Neuesten, die beliebtesten usw. Durch das nun asynchrone Laden wird die Tabzuordnung nicht gemacht und alle anzuzeigenden Posts kommen untereinander. Das sieht unschön aus, fällt vielleicht aber gar nicht auf. Deshalb lasse ich das erst einmal so. 🙂
Es sei denn, mir fällt die Lösung dazu ein, oder du aber kannst mir sagen, was ich da tun kann. Sprich zu mir!

Bleibt abschließend für diesen Artikel sagen: haben diese Maßnahmen irgendetwas gebracht?

Nun – Google Pagespeed meldet nun folgende Werte:

  • Mobile: 65/100
  • Desktop: 86/100

Das sieht für die Desktop-Variante schon mal um einiges besser aus. Um die restlichen „Vorschläge“ von Google kümmere ich mich zu gegebener Zeit. Gibt es eine Möglichkeit die Maße von Bildern auf einem normalen Smartphone oder Tablet zu messen? Wie groß werden die Bilder dort angezeigt? Oder sollte ich gar nicht erst anfangen, mich damit zu beschäftigen? Was meinst du?

3 Antworten

  1. hoohead sagt:

    Google Pagespeed ist doch voll fürn Arsch … halte warte mal 88 Mobile 94 Desktop … Google Pagespeed ist extrem wichtig, da sollte man drauf achten!

    • Themenmixer sagt:

      Hi Hoo, mit deinem spartanischem Theme sicher kein Thema. 🙂 Ich werde mal sehen, was ich noch rausholen kann. Aber zuerst … Content. Wenn dann Zeit ist für „etwas“ Spielerei, dann wird eben gespielt. 🙂

  2. Ines sagt:

    Hallo Jörg,
    ich bin auch grad dabei mich mit dem pagespeed verrückt zu machen.

    Vor allem dieser „above the field…“ -Kram macht mit vollkommen ratlos.

    Nun hast du diese eine Plugin dafür empfohlen, bist aber nicht ganz zufrieden.
    Kann ich das ausprobieren und wenn es mir nicht gefällt wieder löschen (und alles ist wie vorher???)
    Oder lieber nen Programmierer anheuern der das manuell optimiert?

    Für die Thumbnails: den 1. Schritt hab ich auch gemacht, nun sind wie du schon sagst tausende von Bilddateien in der DB. Auch hier trau ich mich nicht auch dies Plugin einzusetzen. Verträgt es sich mit dem erstgenannten? Oder muss ich das vorher deaktivieren?
    Danke für weitere Tipps und Einsichten, Ines

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.