gzip

WordPress auf eine neue Domain übertragen / umziehen. So geht’s richtig.

Geniales Tool, das alles direkt per FTP und Assistent erledigt: Migrate Guru

 

  • auf der Quellseite das Plugin installieren
  • Ziel-Server einen FTP-Zugang einrichten, der direkt auf die Root zeigt
  • künftige URL und FTP-Zugangsdaten im Migrate-Guru auf der Quellseite eintragen
  • als Destination-Path die Root eintragen: /

 

Ein anderes gutes Tool: BackupBuddy 
(BackupBuddy hat mir übrigens auch schon geholfen einen WordPress-Fehler – Java – zu finden, welchen ein anderes, aktiviertes Plugin verursacht hat. Ansonsten mit P3 Profiler oder Query Monitor nach Fehlern suchen…)

 

Ein Umzug deines WordPress Blogs steht an, du weißt aber nicht wie du das anstellen sollst? Ich zeige dir, wie du deinen Blog richtig von einem Server auf den Anderen umziehst.

Vielleicht hast du schon einmal deinen Blog oder eine andere WordPress Installation umziehen müssen. Zum Beispiel wenn du eine Testinstallation oder ein Kundenprojekt von deinem lokalem Webserver auf den Webspace im Internet übertragen musst.

Dabei wirst du bestimmt schon mitbekommen haben, das es nicht ganz so einfach ist ein fertig konfiguriertes WordPress zu übertragen. Eigentlich sind ja nur die Dateien und die Datenbank auf den Server zu übertragen. Anschließend die Zugangsdaten der Datenbank in der Konfiguration anpassen und fertig. So einfach ist es bei WordPress leider nicht! Der Teufel steckt hier im Detail.

Bei anderen CMS Systemen wie Drupal mag das funktionieren, bei WordPress aber leider nicht. Darum habe ich ewig im Netz recherchiert um eine wirklich umfassende Lösung zu entwickeln, die auch wirklich funktioniert.

Die Probleme eines WordPress Umzugs

Es gibt viele Anleitungen für im Internet, wie man einen Server-Umzug oder Domain-Umzug von WordPress macht. Dort ist immer die Rede davon, das du das Datenbank-File, welches du per phpMyAdmin gesichert hast, mit der „Suchen/Ersetzen“-Funktion eines Texteditors die alte Domain mit der Neuen ersetzt.

So habe ich das auch immer probiert und es hat nicht funktioniert. Ich musste anschließend immer die Theme Einstellungen neu einrichten, oder einige Plugins haben nicht mehr funktioniert und mussten komplett neu eingerichtet werden. Also bin ich selber dem Problem auf den Grund gegangen.

Der Übeltäter eines WordPress Server-Umzugs oder Domain-Umzugs oder sogar nur ein Domain-Wechsel ist die Datenbank. Genauer gesagt, die Art und Weise wie WordPress die Daten dort ablegt. WordPress speichert die vollen Verzeichnispfade, sowie die Domain mehrfach serialisiert in den Einstellungen. Diese müssen vor dem Einspielen auf den neuen Server im der Datenbank Datei auf die neuen Werte korrigiert werden.

Und es kommt noch schlimmer. WordPress speichert diese Einstellungen zusätzlich noch serialisiert. Da heißt die Anzahl der Zeichen wird zusätzlich auch gespeichert. Dadurch funktioniert ein einfaches Suchen und Ersetzen funktioniert also nicht.

Wenn ich jetzt z.B. die Domain. in der Datenbank durch http://meine-neue-seite.de ersetze, stimmt zwar die Domain, aber die Anzahl der Zeichen hat sich geändert. Hier müsste dann anstelle einer 24 muss dort dann eine 29 stehen, wie nachfolgendes Beispiel zeigt.

01_wp_sicherung_serialisierte_anzahl

Serialisierte Zeichenketten in WordPress

Diese Änderungen müssen nicht nur für die Domain erfolgen sondern auch für die Einträge in der Datenbank, wo WordPress den Pfad des Verzeichnis gespeichert hat. In meinem Fall waren das bei einer sehr großen WordPress Webseite, mit ca. 60 Plugins ca. 13000 Einträge. Wie du siehst, das kann man sich nicht mehr per Hand erledigen.

Nachdem ich dir jetzt erläutert habe, wo die Probleme bei einem WordPress Umzug liegen, zeige ich dir im nächsten Abschlitt die Lösung dieser Aufgabe.

So ziehst du dein WordPress richtig um

In dieser Schritt für Schritt – Anleitung zeige ich dir wie du dein WordPress sicher und einfach auf den neuen Webspace überträgst. Und anschließend funktionieren auch wirklich alle Einstellungen wie gewohnt.

Schritt 1

Als erstes lädst du alle Dateien deiner WordPress-Installation mit einem FTP-Programm von dem Server auf deinen lokalen Computer herunter. In dem Fall meine ich natürlich die Quell-Installation. Ich verwende dafür das kostenlose FTP Programm FileZilla. Du kannst dafür aber auch jedes andere FTP-Programm verwenden.

Das kann je nach Größe deines WordPress Blogs einige Zeit in Anspruch nehmen. Bei mir waren es nach ca. 2 Jahren ca. 4 GB. Sicherlich auch, weil hier einige Komplettsicherung meines Backup-Plugins dabei waren.

Schritt 2

Jetzt installierst du in deinem bestehenden und noch lauffähigen WordPress-Blog das Plugin „WP Migrate DB„. Dieses Plugin findest du wie gewohnt über die Plugin Suche von WordPress oder in im offiziellen Plugin Directory auf Wordpress.org.

Das Plugin gibt es in einer kostenlosen und in einer kostenpflichtigen Version. Die kostenlose Version reicht aber für deinen Umzug aus und es leistet sehr gute Dienste. Nach erfolgreicher Installation findest du das Plugin unter dem Menüpunkt „Werkzeuge -> Migrate DB“.

02_wp_sicherung_wp_migratel

WordPress Plugin WP Migrate DB

„WP Migrate DB“ zeigt dir auf der Migrate-Seite die derzeitigen Einstellungen für deine Domain und deinen Server-Pfad in den feldern unter „Find“. Hier befindet sich deine WordPress Installation derzeitig. Jetzt musst du nur in den rechten Feldern unter „Replace“ den neuen Domain-Namen und den neuen Server-Pfad eintragen. Die Felder für die URL und den Pfad sind bereits aufgeführt.

 

 

03_wp_sicherung_wp_migrate_einstellungen_1

WP Migrate DB – Pfade eintragen

Wenn sich zum Beispiel deine Domain oder der Server-Pfad nicht ändert, musst du hier in den Replace-Feldern die gleichen Daten eintragen, wie bei „Find“. Den Server-Pfad des neuen Servers erfährst du aus der PHPinfo.

Leere Textdatei unter phpinfo.php abspeichern und folgendes einfügen:

<?php
// Show all information, defaults to INFO_ALL
phpinfo();
?>

Danach per FTP-Client auf den Server übertragen und via http://www.meine-seite.de/phpinfo.php aufrufen. 

Den absoluten Pfad findet man unter dem Punkt:

_SERVER[„DOCUMENT_ROOT“]

 


 

Exkurs: Den absoluten Pfad ermitteln

Für einige arbeiten im Internet ist es erforderlich den absoluten Pfad (DOCUMENT ROOT) zu ermitteln, am einfachsten ist dies mit einer einfachen PHP – Datei. Dazu öffnen wir einen ganz normalen Texteditor (nicht Word!), und kopieren den nachfolgen Code in diese leere Textdatei und speichern diese Datei unter dem Dateinamen absoluter-pfad.php ab.

Hier der Code:

<?php $pfad = getcwd();
echo $pfad;
?>

Nun laden wir diese Datei mittels FTP in das Verzeichnis, von dem wir den absoluten Pfad ermitteln wollen, nach dem hochladen rufen, wird die Datei absoluter-pfadt.php im Browser auf, also www.ihre-domain.de/absoluter-pfad.php oder www.ihre-domain.de/verzeichnis-xyz/absoluter-pfad.php und bekommen nun den absoluten Pfad angezeigt.

 

Absoluten Pfad ermitteln auf einem kleinen Umweg

Das funktioniert am einfachsten über das Anti-Malware-Tool von GOTMLS.NET. Beim Scannen wird das Stammverzeichnis unter „Scan Details“ angezeigt. (Außerdem holt man sich keine Malware auf den neuen Server 😜 )
 

 


 

 

04_wp_sicherung_wp_migrate_einstellungen_2

WP Migrate DB – Erweiterte Einstellungen

Im unteren Bereich kannst du weitere Einstellungen anhaken. Dazu musst du den Bereich „Advanced Options“ aufklappen. Hier hast du zusätzlich die Möglichkeit zu entscheiden, ob du bestimmte DB-Einträge, wie Revisionen, Spam.Kommentare oder temporär gecashte Daten nich mit exportieren möchtest. Damit kannst du dein Export-File kleiner halten. Jetzt solltest du noch den Haken bei „Compress file with gzip“ rausnehmen, damit du ein unkomprimiertes Datenbank-File erhälst.

 

Anschließend klickst du auf den Button „Migrate“ und startest damit den Export. Jetzt öffnet sich ein Fenster, welches dich über den Export-Fortschritt der Datenbank informiert. Je nach Größe deiner Datenbank kann dieser Vorgang einige Minuten in Anspruch nehmen. Im Anschluss kannst du die fertige Export-Datei auf deinen PC downloaden.

05_wp_sicherung_wp_migrate_einstellungen_3

WP Migrate DB – Exportvorgang

Schritt 3

So, jetzt musst du nur noch das geänderte Datenbank-File in die neue MySQL Datenbank importieren. Das machst du am besten wieder über phpMyAdmin. Wenn die Datei zu groß ist um Sie mit phpMyAdmin zu importieren, kannst du zusätzlich den MySQL Dumper installieren und dieses Tool für den Import der WordPress-Datenbank nutzen.

06_wp_sicherung_db_import

WP Datenbank über phpMyAdmin importieren

Schritt 4

Als letzten Schritt musst du natürlich noch die Datei wp-config.php anpassen. Das hatte ich noch vergessen und der Tom hat mich in den Kommentaren darauf aufmerksam gemacht. Die Datei wp-config.php findest du im Hauptverzeichnis deiner WordPress-Installation. Hier musst du jetzt die Zugangsdaten deiner neuen Datenbank eintragen. Diese hast du vorhin schon einmal benutz, wo du dich in die phpMyAdmin Oberfläche deines neuen Providers eingeloggt hast. Dein Provider stellt dir die vollständigen Zugangsdaten zur Verfügung.

07_wp_config_anpassen

Zugangsdaten in der wp-config.php anpassen

Tipp zum MySQL Import

Viele Webspaces haben auch einen SSH Zugang. Damit kannst du natürlich die Datenbank-Sicherung auch per Linux-Shell in die neue Datenbank einspielen. Der Vorteil ist hierbei, das du nicht an irgendwelche Ausführzeiten von PHP gebunden bist. Meistens geschieht das komplett fehlerlos und wesentlich schneller als.

Als letztes musst du jetzt gegebenenfalls noch die Domain selber auf den neuen Server umziehen. Wenn du deinen Blog mit einer neuen Domain betreiben willst, entfällt dieser Punkt natürlich. Den Domian-Transfer startest du über die Admin-Oberfläche deines Hosting-Anbieters. Wie das da funktioniert erfährst du auf den Hilfe-Seiten deines Hosters.

Jetzt sollte dein WordPress Blog auf dem neuen Server wieder so funktionieren, wie auf dem alten Webserver. Alle Einstellungen der Plugins sowie des Themes sind erhalten geblieben und funktionieren wieder wie gewohnt.

Fazit

Mit ein klein bisschen Vorbereitung ist es problemlos möglich einen WordPress-Blog auf einen anderen Server umzuziehen. Ich habe diese Schritt für Schritt Anleitung entwickelt, weil ich selber sehr oft damit Problem hatte.

Wenn dir diese Anleitung weiter geholfen hat, schreibe mir doch einfach einen kleinen Kommentar unter diesem Beitrag. Ich würde mich sehr freuen zu erfahren, wie es dir beim WordPress-Umzug ergangen ist.

Geschwindigkeit deiner Website optimieren

Wir alle kennen die Tools zum Messen der Geschwindigkeit einer Website: Pagespeed, YSlow, Pingdom, Webpagetest oder das Kombitool aus Pagespeed und YSlow GTMetrix. Aber wie wird zum Beispiel Browser Caching aktiviert? Wer sich damit nicht auskennt, der findet viele, viele Artikel dazu, die viel Code in sich haben und nichts erklären. Hier ist noch einer davon. 😉
Über die vergangenen Jahre habe ich dieses Gist immer wieder ergänzt, verbessert und korrigiert. Entstanden ist eine sehr praktische Sammlung von Einstellungen, die fail safe die jeweiligen Möglichkeiten des Hosters ausnutzen. Die entsprechenden Anweisungen sind in If-Abfragen gekapselt, so dass es bei guten Hostern keine Probleme mit nicht unterstützen Modulen geben sollte.

Die Einstellungen teilen sich in drei Bereiche: Komprimierung (Deflate/GZip), Browser Caching (Ablaufdatum für statische Caching-Inhalte definieren) und dem Setzen von sinnvollen Headern (Keep Alive, Accept Encoding, etc.).

#
# Sources:
# http://stackoverflow.com/questions/7704624/how-can-i-use-gzip-compression-for-css-and-js-files-on-my-websites
# http://codex.wordpress.org/Output_Compression
# http://www.perun.net/2009/06/06/wordpress-websites-beschleuinigen-4-ein-zwischenergebnis/#comment-61086
# http://www.smashingmagazine.com/smashing-book-1/performance-optimization-for-websites-part-2-of-2/
# http://gtmetrix.com/configure-entity-tags-etags.html
# http://de.slideshare.net/walterebert/die-htaccessrichtignutzenwchh2014
# http://de.slideshare.net/walterebert/mehr-performance-fr-wordpress
#
<IfModule mod_deflate.c>
# Insert filters / compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/vtt 
AddOutputFilterByType DEFLATE text/x-component
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/js
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/atom+xml 
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/ld+json 
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject 
AddOutputFilterByType DEFLATE application/x-font-ttf 
AddOutputFilterByType DEFLATE application/x-web-app-manifest+json 
AddOutputFilterByType DEFLATE font/opentype 
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
# Exception: Images
SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png|svg)$ no-gzip dont-vary
# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 week"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 month" 
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/html "access plus 1 minute"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType text/x-component "access plus 1 month" 
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/ld+json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds" 
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" 
ExpiresByType text/cache-manifest "access plus 0 seconds" 
ExpiresByType audio/ogg "access plus 1 month" 
ExpiresByType video/mp4 "access plus 1 month" 
ExpiresByType video/ogg "access plus 1 month" 
ExpiresByType video/webm "access plus 1 month" 
ExpiresByType application/atom+xml "access plus 1 hour" 
ExpiresByType application/rss+xml "access plus 1 hour" 
ExpiresByType application/font-woff "access plus 1 month" 
ExpiresByType application/vnd.ms-fontobject "access plus 1 month" 
ExpiresByType application/x-font-ttf "access plus 1 month" 
ExpiresByType font/opentype "access plus 1 month" 
</IfModule>
## EXPIRES CACHING ##
#Alternative caching using Apache's "mod_headers", if it's installed.
#Caching of common files - ENABLED
<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|swf|js|css|gif|png|jpg|jpeg|txt|html|htm)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
</IfModule>
<IfModule mod_headers.c>
 <FilesMatch "\.(js|css|xml|gz)$">
 Header append Vary Accept-Encoding
 </FilesMatch>
</IfModule>

<filesMatch "\\.(js|js.gz)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>
<IfModule mod_gzip.c>
 mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# Set Keep Alive Header
<IfModule mod_headers.c>
 Header set Connection keep-alive
</IfModule>
# If your server don't support ETags deactivate with "None" (and remove header)
<IfModule mod_expires.c> 
 <IfModule mod_headers.c> 
 Header unset ETag 
 </IfModule> 
 FileETag None 
</IfModule>

GZIP Kompression / GZIP Komprimierung – HTML Website schneller laden

Die Gzip Komprimierung ist ein Kompressionsprogramm mit dem fast alle Dateien auf dem Webhost komprimiert an den Browser senden kann. Um seine Webseiten schneller zu bekommen sollte es auch immer eingesetzt werden. Im Internet gibt es hierzu viele Anleitungen und Beschreibungen die zum Teil verwirrend sind. Daher möchte ich euch an dieser Stelle eine Übersicht geben, welche Wege es gibt um die Gzip Komprimierung zu aktivieren und welche Ressourcen man sich hierzu merken sollte.

 

Grundsätzlich sollte man wissen: Gzip komprimiert alle Dateien einzeln und “packt” diese mittels dem Archivierungsprogramm tar in einen sogenannten Tarball. Daher gibt es am Ende zwei Endungen: Zum einen .gz für eine einzeln komprimierte Datei und zum anderen tar.gz oder einfach nur .tgz für eine Sammlung an Dateien.

Es gibt 2 Wege um Gzip zu nutzen. Serverseitig – also man benutzt das Programm, dass auf dem Webserver liegt, oder man bereitet alles selbst vor und stellt es auf dem Webhost zur Verfügung.

Leider ist nicht auf jedem Hostserver Gzip von Anfang an installiert bzw. zur Nutzung freigegeben, denn die Nutzung von Gzip auf einem Webhost führt zur einer erhöhten Last des Webservers. Zwar macht die Mehrbelastung (CPU | Prozessor) des Servers nur ca. ein Zehntel aus, aber wenn sich 1000 oder mehr Kunden einen Server teilen, dann kann ein Zehntel einige Kunden kosten. Daher sollte man zuerst überprüfen ob Gzip auf dem Webhost verfügbar ist. Am besten bei eurem Service-Provider nachfragen, in den Vertrag nachschauen oder ggf. im Netz suchen. Wenn Gzip nicht auf eurem Webhost verfügbar ist dann bleibt euch nur der zweite Weg offen: Alles selbst machen und zur Verfügung stellen.

Wenn bei euch Gzip verfügbar ist, dann gibt es wiederum mehrere Wege: Zum einen über die Konfigurationsdatei “.htaccess”, mit Hilfe von PlugIns oder mittels Skripts bzw. Skriptsprachen (PHP). Am besten finde ich, man nutzt die Konfigurationsdatei “.htaccess”. Leider setzt aber die einfachste Art auch gewisse Dinge voraus. Mehr dazu in der entsprechenden Anleitung:

Gzip Komprimierung mittels der Konfigurationsdatei .htaccess installieren

Mittels der Konfigurationsdatei .htaccess kann man, wie angedeutet, am einfachsten die Gzip Kompression auf dem Webserver nutzen. Voraussetzung ist jedoch, dass das Modul “mod_deflate” auf dem Webserver aktiviert ist. Wenn dieser Weg erstmal nicht funktioniert, müsst Ihr klären ob bei euch das Server-Modul aktiviert ist, bzw. ob man es noch aktivieren kann. Ist die Sache geklärt und das Modul aktiviert, dann müsst Ihr diesen Abschnitt in eure “.htaccess” Datei einfügen. Erst dann werden alle Dateien, welche Ihr mittels Dateiendungen in der Zeile “<FilesMatch ”\.(js|css|html|xml)$”>” angibt, komprimiert. Wollt Ihr mehr Dateiendungen komprimieren oder müsst Ihr es, dann einfach wie folgt einfügen:

“<FilesMatch ”\.(Endung1|Endung2|Endung3|Endung4|Endung5|Endung6|usw)$”>”.

Wichtig ist das nach der letzen Endung kein vertikaler Strich mehr kommt. Also das “|”. Manchmal macht es auch kein Sinn schon komprimierte Formate weiter zu komprimieren. Zum Beispiel PDF, JPG, GIF oder PNG. Das merkt Ihr wenn die Ersparnis zwischen der erstellten Gzip Datei und der Originaldatei kaum ein Unterschied ergibt.

Hier die Code Zeilen für eure .htaccess:

<IfModule mod_deflate.c>
 <FilesMatch “\\.(js|css|html|xml)$”>
 SetOutputFilter DEFLATE
 </FilesMatch>
 </IfModule>

Gzip Komprimierung mittels der Skriptsprache PHP

Mit der Skriptsprache PHP kann man durch ein paar Zeilen Code ebenfalls eine Gzip Komprimierung durchführen. Man muss hierzu in jeder einzelnen PHP Datei folgenden Code in die erste Zeile schreiben:

<?php
 ob_start(“ob_gzhandler”);
 ?>

Der Hacken ist nur, dass dies nur mit PHP Dateien funktioniert.

Gzip Komprimierung mittels manueller Arbeit

Eine weitere Variante ist die manuelle Vorbereitung verbunden mit der Eingabe von ein paar Zeilen Code in die “.htaccess” Datei. Hierzu ladet Ihr euch zuerst das Programm 7Zip runter und geht dann folgende Schritte durch:

1. Jede einzelne Datei in eine Gzip packen.
Wichtig: Heißt eine Datei z.B.: impressum.html so muss die Gzip Datei impressum.html.gz heißen.

2. Alle Gzip Dateien in .jgz umbennenen
Also: Aus impressum.html.gz wird impressum.html.jgz

3. Alle Dateien hochladen

4. Folgenden Code in die .htaccess einfügen:

RewriteEngine on
 RewriteCond %{HTTP:Accept-Encoding} gzip
 RewriteCond %{REQUEST_FILENAME}.jgz -f
 RewriteRule (.*)\.js$ $1\.js.jgz [L]
 AddType “text/javascript” .js.jgz
 AddEncodig gzip .jgz

Nun sollte die Gzip Komprimierung bei euch funktionieren.

Gzip Komprimierung mittels Plugins

Je nach dem was Ihr für ein System einsetzt um Webseiten, Blogs oder Shop zu kreieren bzw. zu pflegen, wird es bestimmt viele Plugins geben, die diese Aufgabe für euch übernehmen. Meistens basieren aber alle auf PHP und fügen, wie oben beschrieben, die PHP Zeile ein.

Bei WordPress kann ich euch das Gzip Komprimierung WordPress Plugin von Sergej Müller empfehlen. Bei anderen Systemen müsst Ihr einfach mal Googeln. Aber ich rate euch so oder so entweder zur ersten Variante oder zur manuellen Vorbereitung. Ist minimal schneller als wie die PHP Variante.

Gzip Komprimierung testen

Ob die Gzip Komprimierung bei euch funktioniert, könnt Ihr auf diesen beiden Seiten testen. Einfach eure URL (Webseite) eingeben und schon bekommt Ihr eine Antwort.

http://www.gidnetwork.com/tools/gzip-test.php oder http://www.whatsmyip.org/http-compression-test/

Ressourcen

Das Programm 7Zip findet Ihr unter http://www.7-zip.org/

Das WordPress Plugin von Sergej findet Ihr unter http://playground.ebiene.de/plugin-fuer-gzip-komprimierung-der-beitraege-in-wordpress-25/

Die Website von Gzip findet Ihr unter http://www.gzip.org/

Tiefgehendere Erklärungen findet Ihr unter http://de.wikipedia.org/wiki/Gzip

Nicht zu verachten ist der Artikel über die Einrichtung mittels Apache oder MS Dienste. Findet Ihr hier: http://www.sysadminslife.com/allgemein/webseiten-optimierung-mit-gzip-komprimierung-in-apache2-und-iis6/

Fazit

Auch wenn immer mehr Leute DSL haben und schnelle Rechner, so bleibt die Ladezeit ein signifikanter Bestandteil einer Seite. Zumal mobile Internetzugänge noch nicht sehr schnell sind und die Datenmengen immer größer werden. Außerdem beachtet bekanntlich Google den Aspekt der Ladezeit als ein gewichtigen Faktor. Aber der wichtigste Grund ist die Zufriedenheit der Nutzer, die nachweislich bei schnelleren Seiten steigt. Ein bis Zwei Sekunden können gefühlt sehr langsam wirken und somit altbacken. Und schließlich macht im Idealfall die Aktivierung kaum Arbeit.

 


 

 

GZIP bei Strato

Inhalte komprimiert übertragen

Je größer eine Webseite ist, desto mehr Dateien gehören dazu – entsprechend steigt auch die Gesamtgröße in KB/MB, die von Besuchern Ihrer Seite geladen werden muss. Um möglichst geringe Ladezeiten zu erreichen, ist es sinnvoll die Dateien vor der Übertragung durch den Server komprimieren zu lassen. Hierbei kommt das Apache-Modul „mod_gzip“ zum Einsatz.

Ab dem Paket STRATO PowerWeb Basic können Sie die Komprimierung wie folgt einschalten:

Öffnen Sie die .htaccess-Datei im Hauptverzeichnis Ihrer Web-Anwendung und ergänzen die Zeile: mod_gzip_on Yes

Den Browser-Cache nutzen

Eine weitere Optimierungsmöglichkeit besteht darin, Dateien, die sich nur selten ändern, durch den Browser Ihrer Besucher zwischenspeichern zu lassen (cachen). Gelangt ein Besucher das erste Mal auf Ihre Webseite, wird diese vollständig geladen. Bei einem erneuten Aufruf prüft der Browser, ob beispielsweise ein Bild bereits im Zwischenspeicher abgelegt wurde und lädt dieses dann von dort. Der Seitenaufbau wird so deutlich schneller.

Beispiel

Die hierfür notwendigen Einträge in der .htaccess-Datei können etwa wie folgt aussehen:

 

# Caching einrichtenFileETag MTime Size
ExpiresActive On
ExpiresByType text/css „access plus 1 weeks“
ExpiresByType application/javascript „access plus 1 weeks“
ExpiresByType application/x-javascript „access plus 1 weeks“
ExpiresByType image/gif „access plus 1 months“
ExpiresByType image/jpeg „access plus 1 months“
ExpiresByType image/png „access plus 1 months“
ExpiresByType image/x-icon „access plus 1 months“

Kurz eine Erläuterung dazu:

 

FileETag MTime Size bildet einen für jede Datei Ihrer Webseite einmalige Kennung aus dem letzten Änderungsdatum sowie der Größe der Datei.

Die Abfrage <IfModule mod_expires.c> prüft, ob das notwendige Servermodul installiert ist – das ist in allen STRATO Paketen der Fall.

ExpiresActive On schaltet das Modul für Ihre Webseite ein, anschließend folgen die Angaben, welche Dateitypen gecached werden sollen und für welchen Zeitraum. Die Zeitangabe erfolgt dabei in der Form „ab letztem Zugriff für Zeitraum X“, im Beispiel „access plus 1 weeks“ also „ab Zugriff für eine Woche“. Ist der gesetzte Zeitraum abgelaufen, wird die Datei im Browser-Cache durch die aktuelle Version von Ihrer Webseite ersetzt.

Im Beispiel werden CSS- und JavaScript (JS) -Dateien für eine Woche gecached, Bilder und das Favoriten-Icon hingegen für einen Monat. Achten Sie bitte darauf, dass die Zeitangabe immer in der Mehrzahl definiert wird, also ein „s“ am Ende steht (weeks, months, …). Welche Werte als Zeitangabe möglich sind, entnehmen Sie bitte der offiziellen Dokumentation des Apache Webservers:  http://httpd.apache.org/docs/2.0/mod/mod_expires.html#AltSyn

Den Zeitraum können Sie selbst festlegen. In der nachfolgenden Tabelle finden Sie einige Tipps:

DateitypCache ZeitraumDetails
Bilder (jpg/png/gif)access plus 1 monthsBei statischen Webseiten, Blogs, Bildergalerien, etc.
access plus 1 weeksFür Onlineshops mit häufigem Wechsel der Produktbilder
CSS-Dateienaccess plus 1 monthsSollten Sie öfter Änderungen am Layout Ihrer Webseite vornehmen, wählen Sie einen passenden kürzeren Zeitraum, etwa 1-2 Wochen.
JavaScript (JS) Dateienaccess plus 1 months

Damit Besucher Ihrer Webseite auch Änderungen sehen, die mitten in einem Cache-Zeitraum erfolgen (Cache für 1 Monat – Änderung z. B. nach 14 Tagen), setzen Sie einfach in der .htaccess-Datei den Wert für den Cache-Zeitraum des entsprechenden Dateityps herab. Lassen Sie die Einstellung für beispielsweise eine Woche aktiv und setzen dann wieder die ursprünglichen Werte ein.

Beispiel:

Aus access plus 1 months wird dann access plus 1 hours.

Hinweis: Sofern Sie die Komprimierung (siehe oben) nicht nutzen, ergänzen Sie bitte für eine optimale Nutzung des Caching in der .htaccess-Datei manuell die Zeile Header append Vary Accept-Encoding. Ist die Komprimierung aktiv, wird der Header automatisch gesetzt, die oben genannte Zeile muss dann nicht eingetragen werden.

In Abhängigkeit vom verwendetem CMS gibt es meist noch weitere Möglichkeiten die Performance zu verbessern. Hierzu gehören beispielsweise:

  • CDN (Content Delivery Network) aufsetzen
  • Bilder in CSS-Sprites auslagern
  • CSS/JS Skripte komprimiert auf dem Webspace ablegen
  • Falls nicht genutzt: mootools im Frontend deaktivieren (Joomla)

Ausführliche Anleitungen wie dies speziell bei dem von Ihnen verwendetem Content Management System vorzunehmen ist, finden Sie in der Regel im Supportforum Ihres Content Management System.

 

 


 

 

 

Javascript und CSS mit Gzip komprimieren

Ein großes Interesse fürs Web ist es, dass ihre Seiten schnell laden. Die kann unter anderem durch die Komprimierung von Javascripten und CSS-Code erreicht werden.

Javascriptdateien und auch Stylesheets sind oft sehr groß. Als Beispiel verwende ich die Javascript Bibliothek jQuery. Diese hat unkomprimiert ca. 167 kb. Komprimiert kommt man auf eine Größe von nur 44 kb. Dies sind nur noch 26% der ursprünglichen Größe. Durch dieses Verfahren laden die Homepages um ein vielfaches schneller als zuvor.

Was ist nun wenn ein Browser oder ein Gerät nicht mit der Komprimierung zurechtkommt?
Für diesen Fall liegen immernoch die unkomprimierten Dateien auf dem Server.

Dateien komprimieren

An der Einbindung der Dateien in Ihre Homepage ändert sich rein gar nichts. Sie erfolgt wie üblich mit

<link type=„text/css“ rel=„stylesheet“ href=„css/styles.css“ />
<script type=„text/javascript“ src=„js/jquery-latest.js“></script>

Nun müssen Sie die Scripte komprimieren und auf den Server laden. Die Scipte müssen in diesem Fall styles.css.gz und jquery-latest.js.gz heißen und im gleichen Ordner liegen wie die unkomprimierte Version.

Wie komprimiere ich ein Script?
Das Freeware Tool 7zip (Download hier) beherrscht diesen Komprimierungsformat. Oder für Mac OSX Ez7z 

.htaccess bearbeiten

Als zweiten Schritt müssen Sie nun folgenden Code in die Datei .htaccess einfügen:

# 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

Damit wählt der Server aus, ob Gzip verwendet wird, oder nicht. Wenn ein Gerät die Komprimierung nicht unterstützt, wird die unkomprimierte Version genommen.

Leeren Sie nun Ihren Cache und laden Sie Ihre Seite neu. Die Ladezeiten sind nun erheblich geringer.

 


 

 

Komprimierung mittels Software

Smaller is a powerful HTML, CSS and JavaScript compressor on OS X which also has the ability to combine several files into one. Compress your files and make your websites load faster.

How to use it?

Drop files. Or drop a folder, Smaller can intelligently add all the HTML/CSS/JS files under it to the minify queue.

Combining several files into one is easy, ⌘ click to select multiple files, right click and choose „Combine“.

As a professional, you definitely need more control. Smaller is aware of your needs and provides this for you.

You can also drop files directly on to the Dock icon, Smaller will do the rest for you, quite handy, isn’t it?

TIPP: TinyPNG zum Komprimieren von PNG und JPEG´s