Keine lange Ladezeiten mehr – dem Image Optimizer sei Dank!

Keine lange Ladezeiten mehr – dem Image Optimizer sei Dank!

Heutzutage werden die Ladezeiten von Webseiten oder Onlineshops immer wichtiger – vor allem zu Zeiten, in denen viele Leute nur noch mit ihrem Tablet oder Smartphone surfen.
Klar, dass niemand gerne eine Seite besucht, die gefühlt Stunden lang lädt. Der Grund für lange Ladezeiten sind tatsächlich Bilder, doch auf die will – verständlicherweise – niemand verzichten. In diesem Artikel erfahrt ihr, wie ihr diese langen Ladezeiten eurer Seiten umgehen könnt.

  1. Einfaches Optimieren von Grafiken auf Webseiten und Onlineshops
  2. Image Optimizer für TYPO3, WordPress, Shopware und Magento
    1. TYPO3
    2. WordPress
    3. Shopware
    4. Magento
    5. Manuelle Variante

Einfaches Optimieren von Grafiken auf Webseiten und Onlineshops

Sehr viele Bilder, die auf Webseiten oder in Onlineshops benutzt werden, sind nicht optimiert oder viel zu groß. Das kommt daher, dass die meisten Bilder von Redakteuren oder direkt vom Websitebetreiber eingefügt werden und diese sich schlicht und einfach nicht mit der Optimierung auskennen oder sich vielleicht auch nicht damit beschäftigen wollen.

Doch damit soll jetzt Schluss sein: Grafiken wie .png, .gif und .jpeg können nun via SSH ganz bequem mit den Tools „jpegoptim”, “optipng” und “gifsicle” optimiert werden. Diese drei Helfer lassen sich mit ein paar Klicks einfach über den Mittwald Softwaremanager installieren. Doch beachtet bitte, dass diese erst ab einem Managed vServer Tarif L zur Verfügung stehen. Der Grund dafür ist, dass sie sehr viel Last auf den Systemen erzeugen.

Aufgehängte Polaroid-Bilder

Image Optimizer für TYPO3, WordPress, Shopware und Magento

Nun fragt sich der ein oder andere von euch bestimmt: „Wie kann ich die Tools jetzt auf meiner Webseite oder in meinem Shop nutzen?“ Das möchte ich euch im Folgenden für die Systeme TYPO3, WordPress, Shopware und Magento erklären. Für andere Systeme gibt es leider noch keine Erweiterungen, die den Einsatz der Optimizer ermöglichen. Allerdings gibt es dafür auch eine Lösung, die ich euch zum Schluss vorstellen werde.

Als Erstes sollten wir in unserem Account, den wir optimieren möchten, die drei Optimizer über den Softwaremanager installieren. Ist das getan, geht es mit der Einrichtung im jeweiligen System weiter.

TYPO3

Kommen wir zunächst zu TYPO3: Dort installieren wir uns die Extension Image Optimizer über den Extensionmanager im TYPO3 Backend (https://extensions.typo3.org/extension/imageoptimizer/). Nachdem diese installiert ist, müssen wir noch etwas konfigurieren, deshalb klicken wir im Extensionmanager auf das Zahnrad hinter der Extension.

Installierte Erweiterungen in Typo3

Sollten die Image Optimizer über den Softwaremanager schon installiert sein, dann wurden diese von der Extension bereits automatisch gefunden und wir müssen nur noch die beiden Optionen aktivieren.

Fenster zum Erweiterung konfigurieren im Imageoptimizer

Ab jetzt werden alle Bilder, die hochgeladen werden, automatisch optimiert. Jedoch gibt es leider keine Stapelverarbeitung für die bereits vorhandenen Bilder, hier müsstet ihr auf die manuelle Methode zurückgreifen, die ich euch am Ende des Artikels vorstelle.

WordPress

Kommen wir zu WordPress: Hier können wir ebenfalls ein Plugin verwenden, welches die Optimierungen für uns vornimmt.

In WordPress installieren wir das Plugin EWWW Image Optimizer (https://de.wordpress.org/plugins/ewww-image-optimizer/) und schon werden alle Bilder, die ab sofort hochgeladen werden, optimiert. Das war’s, es sind keine weiteren Konfigurationen nötig. ;-)
Und hier habt ihr zudem Glück, denn bei diesem WordPress Plugin gibt es eine Stapelverarbeitung, die alle bereits hochgeladenen Bilder optimiert. Hierfür geht ihr wie folgt vor: Im WordPress Backend müsst ihr auf Medien -> „Massenoptimierung“ klicken. Solltet ihr viele Bilder hochgeladen haben, die zu optimieren sind, dann sollte eine Pause zwischen dem Optimieren eingestellt werden. Danach klickt ihr auf den Button „Nach unoptimierten Bildern scannen“. Und anschließend wird angezeigt, wie viele zu optimierende Bilder gefunden worden sind.

Reiter Massenoptimierung im Backend zum Installieren des Optimizer

Jetzt könnt ihr auf den Button „Optimierung starten“ klicken und schon geht’s los. Wollt ihr einen Zwischenstand haben oder müsst ihr die Optimierung stoppen? Dann ist auch das kein Problem.

Shopware

Kommen wir nun zu den Shopsystemen und fangen mit Shopware an. Shopware hat die Image Optimizer direkt im System eingebunden, somit sind keine zusätzlichen Plugins notwendig. Sobald die Image Optimzer auf dem Account installiert sind, nutzt Shopware dieses und optimiert alle Bilder, die ab dem Zeitpunkt hochgeladen werden.

Um alle bereits vorhandenen Bilder zu optimieren, müsst ihr euch via SSH mit dem Server verbinden. Wie das genau geht, haben wir in einem FAQ-Beitrag erklärt. Sobald ihr mit dem Server verbunden seid, müsst ihr in das Verzeichnis, in dem sich die Shopware-Installation befindet, wechseln.

cd shopware

Nun seid ihr im Shopware-Verzeichnis und könnt den Befehl zum Optimieren der Bilder, den Shopware in seine CLI Tools eingebaut hat, verwenden.

php_cli  bin/console sw:media:optimize

Wenn der Prozess mit Enter gestartet wurde, seht ihr sofort den Fortschritt der Optimierungen.

Für den sw:media:optimize gibt es noch einige Optionen, die verwendet werden können, dieses findet ihr sehr gut in der Shopware Dokumentationerklärt.

Magento

Auch für Magento 1 und 2 gibt es ein Plugin, das auf den Namen „Image Optimizer“ hört (https://marketplace.magento.com/apptrian-apptrian-image-optimizer.html), welches aber leider nicht mit den aktuellen Magento Versionen kompatibel ist. Solltet ihr eine der unterstützen Versionen verwenden, so empfehlen wir euch dieses Plugin. ;-)

Manuelle Variante

Kommen wir nun zu der manuellen Variante, die für alle anderen Systeme angewendet werden kann, bei denen es leider noch keine Erweiterungen gibt. Zuerst solltet ihr ein Backup eurer Bilder anfertigen, nicht, dass etwas Unvorhergesehenes passiert …

Anschließend müsst ihr euch dann mit eurem Account via SSH verbinden. (Wie das funktioniert, habe ich bereits oben unter dem Punkt Shopware verlinkt.)

Um „jpegoptim“ zu benutzen, navigieren wir in das Verzeichnis, in dem sich die Grafiken befinden und dort führen wir den folgenden Befehl aus:

find . -iname "*.jp*g" -type f -print0 | xargs -0 jpegoptim -o --strip-all --max=90 

Bei der Nutzung von „optipng“ nutzen wir diesen Befehl:

find . -iname "*.png" -type f -print0 | xargs -0 optipng -o7 -strip all 

Bei „gifsicle“ gibt es leider keine Stapelverarbeitung. Daher muss jedes .gif einzeln optimiert werden:

gifsicle -O3 -o output.gif input.gif 

Ich hoffe, ich konnte euch einen groben Einblick in das Optimieren der Bilder auf euren Webseiten und Onlineshops geben. Sollte es in Zukunft für ein anderes System, welches ich noch nicht erwähnt habe, eine Erweiterung geben, teilt sie hier doch einfach mit uns und wir nehmen sie gerne mit auf. ;-)

Und jetzt, viel Spaß beim Optimieren eurer Bilder!

Kommentare

  1. Gravatar
    Andi Arbeit am
    Betr. Shopware:
    Zitat "Sobald die Image Optimzer auf dem Account installiert sind..."

    Hallo!
    Sind die autom. installiert, denn ich sehe keine Funktion um das auszuführen.
    Antworten
    1. Philipp Stranghöner am
      Hallo Andi,

      vielen Dank für deine Frage.

      Die Image Optimizer sind nicht automatisch installiert. Wie ich in der Einleitung geschrieben habe, müssen diese über den Softwaremanager im Mittwald Kundencenter in dem gewünschten Account installiert werden.

      Die Optimizer stehen ab dem Managed vServer Tarif L zur Verfügung.

      Viele Grüße Philipp
      Antworten
  2. Gravatar
    Markus Buff am
    Hi,

    gutes Projekt! Ich habe die Extension (und die Tools vorher über den Softwaremanager) in einer 8.7.13er TYPO3 Installation auf einem managed Server von euch installiert und bekomme nach einem Upload eines Bildes dann im fileadmin eine Fehlermeldung, dass Schreibrechte nicht passen würden. Was genau braucht denn die Extension wo für geänderte Schreibrechte?

    Viele Grüße
    Markus
    Antworten
    1. Philipp Stranghöner am
      Hallo Markus,

      vielen Dank für deine Frage.

      Wenn du die TYPO3 Installation ebenfalls über unseren Softwaremanager durchgeführt hast, sollten die Schreibrechte, die wir eingestellt haben, passen. Wenn es bei dir nicht klappt, kann sich das gerne ein Kollege aus dem Kundenservice anschauen. Wäre schön, wenn du ein Ticket dazu eröffnest, mit dem passenden Account, wo es nicht klappt.

      Viele Grüße Philipp
      Antworten
  3. Gravatar
    Marco Pfeiffer am
    Was für ein sinn macht die typo3 extension? Bilder werden also beim upload optimiert ~ nett um Festplattenplatz zu sparen aber bei der ausgäbe fast typo3 die Bilder meist sowieso nochmal an (wenn die Seite gut genug gebaut ist).
    Antworten
    1. Philipp Stranghöner am
      Hallo Marco,

      vielen Dank für deine Rückmeldung.
      Mit den installierten Image Optimizer ist es so, dass die Bilder – nachdem TYPO3 diese Bilder bearbeitet hat (also z.B. crop und scale) – nochmals optimiert und verkleinert werden. Dafür ist auch die zweite Option in meinem zweiten Screenshot zu TYPO3 (Activate for processing). Wenn diese Option aktiviert ist, werden alle Bilder u.a. die unter fileadmin/_processed_ liegen, verarbeitet.

      Viele Grüße
      Philipp
      Antworten

Kommentar hinzufügen