PageSpeed
Von Anfang an wollte ich bei seo4info auf die Ladegeschwindigkeit der Seite achten. Auch zu diesem Thema gibt es eine Reihe Plugins. Getestet habe ich zu diesem Zweck W3 Total Cache, allerdings mit mäßigem Erfolg. Ich bin mir nicht sicher, ob es an der Unverträglichkeit mit dem Server oder an meiner Unfähigkeit lag, jedenfalls konnte dieses Plugin keinerlei Verbesserung erzielen.

Nach einiger Recherche und vielen try and error Versuchen konnte ich schließlich die Werte von Yahoo’s YSlow und Google’s PageSpeed Tool deutlich erhöhen. Lagen die Werte vor der Optimierung noch bei 72 und 80 Punkten, so stehen sie nun bei 86 und 92 Punkten.

Folgende Maßnahmen führten bei mir zum Erfolg:

  • In die oberste Zeile der header.php
    <?php ob_start("ob_gzhandler"); ?>
  • In die .htaccess

    # Expire headers 5184000 Sekunden = 2 Monate
    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/x-icon “access plus 5184000 seconds”
    ExpiresByType image/gif “access plus 5184000 seconds”
    ExpiresByType image/jpg “access plus 5184000 seconds”
    ExpiresByType image/png “access plus 5184000 seconds”
    ExpiresByType text/css “access plus 5184000 seconds”
    ExpiresByType text/javascript “access plus 5184000 seconds”
    ExpiresByType application/javascript “access plus 5184000 seconds”
    ExpiresByType application/x-javascript “access plus 5184000 seconds”
    </IfModule>

    <IfModule mod_headers.c>
    Header append Vary Accept-Encoding
    </IfModule>

    # BEGIN Gzip Compression
    AddEncoding gzip .gz
    <filesmatch “\.js\.gz$”>
    AddType “text/javascript” .gz
    </filesmatch>
    <filesmatch “\.css\.gz$”>
    AddType “text/css” .gz
    </filesmatch>
    <ifmodule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{HTTP:Accept-encoding} gzip
    RewriteCond %{REQUEST_FILENAME} \.(js|css)$
    RewriteCond %{REQUEST_FILENAME}.gz -f
    RewriteRule ^(.*)$ $1.gz [QSA,L]
    </ifmodule>
    # END Gzip Compression

    # BEGIN Cache-Control Headers
    <ifmodule mod_headers.c>
    <filesmatch “\\.(ico|jpe?g|png|gif|swf)$”>
    Header set Cache-Control “max-age=5184000, public”
    </filesmatch>
    <filesmatch “\\.(css)$”>
    Header set Cache-Control “max-age=5184000, private”
    </filesmatch>
    <filesmatch “\\.(js)$”>
    Header set Cache-Control “max-age=216000, private”
    </filesmatch>
    </ifmodule>

    # Turn ETags Off
    <ifmodule mod_headers.c>
    Header unset ETag
    </ifmodule>
    FileETag None

  • Komprimierung der style.css mit 7-zip. In der .htaccess Datei wird oben bereits auf das .gz Format verwiesen.

Zur weiteren Optimierung könnte man nun noch alle Bilder in eine Datei packen und die einzelnen Teile durch Festlegung der Dimensionen abrufen. Das ist mir aber zu aufwendig, zumal immer neue Bilder hinzu kommen und das Design niemals endgültig ist, so dass jede Änderung ebenfalls eine Anpassung der großen Bilddatei zur Folge hätte.

Mit den Werten B von YSlow und A von PageSpeed kann man jedoch meiner Meinung nach zufrieden sein, so dass die kommenden Optimierungen in eine andere Richtung gehen werden. Für eine freundlichere Optik habe ich den zunächst dunkel gerasterten Hintergrund nun mit einem helleren Farbverlauf versehen. Komischerweise hakt bei mir die Scrollgeschwindkeit mit einem Hintergrund im Firefox etwas, mit Google Chrome hingegen läuft es ruckelfrei. Sobald ich den Hintergrund entferne, geht es mit allen Browsern, das gefällt mir jedoch nicht. Vielleicht hat in dieser Hinsicht jemand einen Tipp für mich?

Einen Kommentar schreiben