Wie TinyMCE deine Performance-Optimierung austricksen kann

Performance-Optimierung und die Bildgrößen
Performance-Optimierung und die Bildgrößen

Grundvoraussetzung für Schnelligkeit im WWW sind u.a. Bilder, die in der richtigen Größe und komprimiert ausgeliefert werden. WordPress liefert mit den post_thumbnails viele Möglichkeiten dazu. Doch der TinyMCE hat seit WP 3.9 ein Feature das alle deine Bemühungen eine schnelle Website zu haben einfach in den Wind schießen kann.

Zur Vorgeschichte: ich hatte einer Kundin Optimus von Sergej installiert und aktiviert, weil Optimus nicht nur das hochgeladene Originalbild komprimiert, sondern auch alle erzeugten Thumbs. Außerdem empfahl ich ihr die Pro-Version dieses Plugins, weil dann Bilder noch schneller ausgeliefert werden können.

Ich habe ihr auch viele post_thumbnail Größen definiert. Sie kann diese beim Einfügen eines Bildes auswählen.

Sie veröffentliche Artikel und kontrollierte meine Performance-Optimierung mittels PageSpeed Insights und sah dann das:

Optimieren Sie die folgenden Bilder, um ihre Größe um 60,6 KB (72 %) zu reduzieren.

Wortlos sandte sie mir den Link und ich bekam mehr als große Augen. Was war hier passiert?

Fehler finden erfordert Fehler reproduzieren zu können

Dieser alte Grundsatz hat sich immer wieder bewahrheitet. Kann ich einen Fehler nachmachen kann ich ihn (meist) verhindern.
Also veröffentlichte ich einen Artikel mit Bildern und PageSpeed Insights war zufrieden.

Bilder korrekt formatiert und komprimiert
Bilder korrekt formatiert und komprimiert

Es war somit ersichtlich: Optimus arbeitet immer noch korrekt. Also muss der Fehler woanders passieren.

HTML Output vergleichen, den Source kontrollieren.

Erzeugt WordPress Thumbs hängt es die Bildgröße an den Dateinamen an. Aus super.jpg wird dann super-425×200.jpg oder super-125×125.jpg usw. Gleichzeitig gibt WP width und height des Bildes an, weil so Browser ein Bild schneller rendern /anzeigen können.

Im Source meines veröffentlichten Artikels fand ich:

<img width="425" height="200" src="xyz0815-425x200.jpg" ..

Width und height und die Bildgröße stimmten absolut überein.

Im Source eines Artikels meiner Kunden fand ich aber:

<img width="450" height="300" src="xyz0815-425x200.jpg" ..

Hier stimmten width und height und die Bildgröße nicht überein. Somit muss der Browser viel arbeiten, um das Bild darzustellen und PageSpeed Insights meldet Fehler.

Meine nächste Frage lautete also:

Wie kann meine Kundin width und height eines eingefügten Bildes einfach ändern?

einfache Bildbearbeitung in TinyMCE
einfache Bildbearbeitung, zieh deine Bilder in die richtige Passform

Ich erinnerte mich an das neue Feature seit ~ WP 3.9. Du findest es unter deinedomain.tld/wp-admin/about.php.

Nutzt du dieses Feature und ziehst deine Bilder im TinyMCE in die richtige Passform wird die dargestellte Bildgröße mittels width und height kontrolliert – völlig egal welche Bildgröße du in der Mediathek auswählst.

  1. Es ist völlig sinnlos WP viele Thumbnails erzeugen zu lassen, wenn man dann im Editor wieder an den Bildgrößen schraubt.
  2. Sind die so vergewaltigten Bilder eine Performance-Bremse der Spitzenklasse.

Verzichte auf das Anpassen der Bilder im TinyMCE, informier deine Autoren.

Meine Kundin nutzt nun nur mehr die Artikel- oder Beitragsbilder die ich für sie erzeugen lasse und ist nun hoch zufrieden. :-)

Ich wünsch dir viel Freud an einem schnellen WordPress :-)
2

2 Beiträge zu “Wie TinyMCE deine Performance-Optimierung austricksen kann

  1. Kommentar Autor
    Sabienes
    Kommentar

    Dieses Thema hatte ich bei einem Kunden auch schon. Aber es ist ein gutes Stück Faulheit, dies nicht zu tun. Da kann man Programme wie Picasa empfehlen und die Export-Funktion erklären, aber hilft nichts. Gut, wenn deine Kundin das von selbst gemerkt hat!
    LG
    Sabienes

  2. Kommentar Autor
    Monika
    Kommentar

    stimmt Sabienes, sie wollte so schnell wie irgend möglich ihre Website haben und das war dann die Motivation diese Funktion nicht mehr zu nutzen :-)