Google Pagespeed Insights: JS / CSS Minifizierung & JPG / PNG Komprimierung mit MONDO MEDIA

Nochmal:  „Google Pagespeed“ ist ein relevanter SEO-, also auch Rankingfaktor!

Dieser Artikel ist eine Fortsetzung des ersten Teils dieser Serie „Leverage Browser Caching für MONDO MEDIA“ aus diesem Blog. In diesem Teil widme ich mich dem Faktor Dateigrößen von Assets, die über die Warenwirtschaft / Shopsoftware von MONDO MEDIA auf den Webserver hochgeladen wurden.
Ein weiteres Kriterium, das Google Pagespeed in Betracht zieht ist, Datenübertragungsvolumen des Webservers einzusparen – auch wenn das Einsparungspotential auf den ersten Blick noch so minimal ist. Da in MONDO MEDIA, wie auch in anderen gängigen Shopsoftware-Lösungen, keine Optimierung von Bildern und Skripten stattfindet, wird in diesem Tutorial beschrieben, wie dieser Vorgang „Onsite“, also auf die Seite des Servers, ausgelagert werden kann. Somit ist das Verfahren für andere Tools, wie z.B. Blogsoftware oder andere Shopsoftware oder Marktplatzsoftware ebenso geeignet.
Folgende Software-Tools werden uns künftig beim Einsparen von Daten helfen: yuicompressor, jpegoptim und optipng.
yuicompressor: ist eine Bibliothek, die ursprünglich von Yahoo entwickelt wurde. Hierbei handelt es sich mehr um einen minifier, als um ein echtes Kompressionsprogramm. Die Umgebung kann auf dem Server (Debian Distribution) mit Hilfe des Shell-Kommandos installiert werden (dieses muss wie alle anderen Kommandos in dieser Dokumentation, als „root“ User ausgeführt werden):
apt-get Install yui-compressor

Apt akquiriert nun die notwendigen Libraries und Applikationen, denn das Tool basiert auf Java. Hierzu muss jedoch die Frage, ob die Libs geladen werden dürfen mit „y“, also yes, beantwortet werden.

Die Anwendung sollte wie in dem untenstehenden Bash Skript „optimize-web-assets.sh“ entworfen, aufgerufen werden. Mit Hilfe von Yui-Compressor werden aus CSS und Javascript sämtliche Leerzeilen und irrelevanten Leerzeichen entnommen. Javascript wird obfuscated, d.h. Variablen werden gekürzt und umbenannt. Ziel der Maßname ist die Einsparung von Datenvolumen, das übertragen werden muss.
jpegoptim und optipng: die beiden Softwaretools für LINUX holen „auf Kommando“ praktisch das letzte Byte an Daten, das nicht benötigt, wird aus Bildern heraus. Es geht möglichst darum nicht benötigte Informationen oder Potential für verlustfreie Kompression zu extrahieren. Die Binärprogramme können unter Debian Linux mit dem folgenden Kommando installiert werden:
apt-get install jpegoptim optipng

Mit Hilfe der neu installierten Binärprogramme lassen sich nun Bilder im Onlineshop verlustfrei optimieren und werden den Anforderungen, die Google Pagespeed fordert, gerecht.

Die Ausführung erledigt ebenfalls das untenstehende Shell Skript „optimize-web-assets.sh“. Dieses sucht und findet relevante Dateien unterhalb des Shop Hauptverzeichnis „DOCUMENT_ROOT“, das in dem Skript bei Installation des Skriptes noch einzutragen ist. Ich empfehle das Skript in dem Verzeichnis /usr/local/sbin zu installieren.

#!/bin/bash

# Optimize MONDO MEDIA Assets for Google Pagespeed
# Install Packages jpegoptim and optipng for image processing:  apt-get install jpegoptim optipng
# Install Packages yuicompressor for css and js minifying:      apt-get install yui-compressor

DOCUMENT_ROOT=/mnt/data/mondoshop

# Minify JavaScript Files
for file in `find $DOCUMENT_ROOT/ -name "*.js"`
        do
        echo "Compressing $file …"
        yui-compressor --type js -o $file $file
done

# Minify CSS Files
for file in `find $DOCUMENT_ROOT/ -name "*.css"`
        do
        echo "Compressing $file …"
        yui-compressor --type css -o $file $file
done

# optimize jpegs, strip Exif Information
find $DOCUMENT_ROOT/. -type f -name "*.jpg" -exec jpegoptim -f --strip-all {} \;

# optimize png and compress
find $DOCUMENT_ROOT/. -type f -name "*.png" -exec optipng -o5 -strip all {} \;

chown www-data:www-data $DOCUMENT_ROOT -R

Damit das Skript nun regelmässig aufgerufen wird, z.B. einmal pro Nacht (täglich) muss ein Eintrag in der Crontab ebenfalls als root User durchgeführt werden:

0 0 * * * /usr/local/sbin/optimize-web-assets.sh > /dev/null
Avatar for Lars Denzer
Mir folgen

Lars Denzer

Geschäftsführer, Senior eCommerce Specialist bei omeco GmbH, Saitow AG
Geboren 01.09.1971, Studium an der TU-Kaiserslautern, Abschluss Dipl.-Biol. mit Abschluß in der Fachrichtung "neuronale Netzwerke", leitet Lars Denzer die technologische und strategische Entwicklung der omeco GmbH seit Gründung des Unternehmens und war maßgeblich an der Entwicklung der Shopsystem Software omeco webshop beteiligt. Seit Übernahme der omeco GmbH durch die Saitow AG leitet und berät Lars Denzer das Team MONDO MEDIA mit dem gleichnamigen Warenwirtschaftssystem und das Entwicklungsteam omecocloud mit seiner innovativen Webshop Software
Avatar for Lars Denzer
Mir folgen
Avatar for Lars Denzer
Über Lars Denzer 16 Artikel

Geboren 01.09.1971, Studium an der TU-Kaiserslautern, Abschluss Dipl.-Biol. mit Abschluß in der Fachrichtung „neuronale Netzwerke“, leitet Lars Denzer die technologische und strategische Entwicklung der omeco GmbH seit Gründung des Unternehmens und war maßgeblich an der Entwicklung der Shopsystem Software omeco webshop beteiligt. Seit Übernahme der omeco GmbH durch die Saitow AG leitet und berät Lars Denzer das Team MONDO MEDIA mit dem gleichnamigen Warenwirtschaftssystem und das Entwicklungsteam omecocloud mit seiner innovativen Webshop Software

2 Trackbacks / Pingbacks

  1. Wie gut ist Shopware suchmaschinenoptimiert (SEO)? | SEO Shopsoftware
  2. Wie gut ist Gambio für die Suchmaschinen (SEO) vorbereitet?

Kommentar verfassen