Browser-Cache nutzen

Zurück zur “Webseiten beschleunigen” – Übersicht

4.) Browser-Cache nutzen

4.1) Browser-Cache manuell einstellen

Falls du keinen Zugriff auf die Konfiguration von Apache hast, kannst du den Browser-Cache folgendermaßen beeinflussen. Nun wollen wir unseren JS/CSS Dateien noch einen Header mitgeben, welcher wiederum bewirkt, dass der entsprechende Browser (Client) die Datei für eine gewisse Zeit speichert und für „neu“ hält, dies spart wieder Traffic, welchen wir nicht bezahlen müssen und außerdem beschleunigt es den Seitenaufruf.


CSS in PHP umbenennen, um den php-Code in der Datei ausführen zu können.

mv test.css test.css.php

Anschließend werden wir am Anfang der Datei folgendes mit einfügen.

<?php
require_once("gzipCSS.php");
?>

Im folgenden Beispiel wird die Datei für 3 Tage (60 * 60 * 24 * 3) gespeichert.

vim gzipCSS.php
<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 3;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>


JS in PHP umbenennen, um den php-Code in der Datei ausführen zu können.

mv test.js test.js.php

Anschließend werden wir am Anfang der Datei folgendes mit einfügen.

<?php
ob_start ("ob_gzhandler");
header("Content-type: text/javascript; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 3;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>


[stextbox id=”info”]Falls man die Komprimierung jedoch bereits serverseitig aktiviert hat, hatte ich das Problem, dass die Webseite nicht zu-ende geladen werden konnte, daher würde ich empfehlen auf diese Methode zu verzichten, sofern man Zugriff auf das System hat und die Einstellungen am Webserver selber einstellen kann, zumal es relativ lange dauern dürfte, bis man alle Dateien auf diese weiße optimiert hat![/stextbox]


Link:
www.php.net/ob_gzhandler
www.php.net/zlib


4.2) Browser-Cache serverseitig einstellen


Expires – in diesen Header-Eintrag wird, für jede Server-Antwort festgelegt, wie lange diese gültig ist. Um jedoch erst-einmal zu verstehen, was in diesem Header steht folgt ein kleines Beispiel in

PHP:

function setExpires($expires) {
header(
'Expires: '.gmdate('D, d M Y H:i:s', time()+$expires).'GMT');
}
setExpires(10);
echo ( 'This page will self destruct in 10 seconds<br />' );
echo ( 'The GMT is now '.gmdate('H:i:s').'<br />' );
echo ( '<a href="'.$_SERVER['PHP_SELF'].'">View Again</a><br />' );

nach 10 Sekunden ist diese Webseite alt und muss vom Browser erneut geladen werden.


weitere Beispiele:
www.sitepoint.com


Kommen wir nun zurück zur Konfiguration von Apache, um „expires“ zu aktivieren führen wir unter Linux Debian/Ubuntu folgendes Kommando aus.

a2enmod expires
a2enmod headers


Nun passen wir die entsprechende Konfiguration an, um bestimmte Dateien für eine gewisse Zeit clientseitig zu speichern.

vim /etc/apache2/mods-available/expires.conf
<IfModule mod_expires.c>

AddType image/vnd.microsoft.icon .ico
AddType application/javascript .js
AddType application/x-tar .tgz
AddType text/plain .c
AddType text/plain .h

ExpiresActive On
ExpiresDefault "access plus 4 houres"

ExpiresByType image/vnd.microsoft.icon "access plus 3 months"
ExpiresByType image/ico "access plus 3 month"
ExpiresByType image/x-icon "access plus 3 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType video/x-flv "access plus 1 month"
ExpiresByType video/quicktime "access plus 1 months"
ExpiresByType video/mp4 "access plus 1 months"
ExpiresByType video/mpeg "access plus 1 months"
ExpiresByType video/x-ms-wmv "access plus 1 months"
ExpiresByType audio/mpeg "access plus 1 months"
ExpiresByType audio/y-wav "access plus 1 months"
ExpiresByType application/pdf "access plus 2 weeks"
ExpiresByType application/zip "access plus 2 weeks"
ExpiresByType application/x-tar "access plus 2 weeks"
ExpiresByType application/x-download "access plus 2 weeks"
ExpiresByType application/ps "access plus 2 weeks"
ExpiresByType application/msword "access plus 2 weeks"
ExpiresByType text/css "access plus 2 weeks"
ExpiresByType application/xml "access plus 24 houres"
ExpiresByType application/xhtml+xml "access plus 24 houres"
ExpiresByType text/html "access plus 12 houres"
ExpiresByType text/htm "access plus 12 houres"
ExpiresByType text/plain "access plus 12 hours"
ExpiresByType text/xml "access plus 12 hours"

<IfModule mod_headers.c>

<FilesMatch "\\.(ico)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>

<FilesMatch "\\.(css|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2419200, public"
</FilesMatch>

<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
</FilesMatch>

<FilesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=216000, public, must-revalidate"
</FilesMatch>

<FilesMatch "\\.(html|htm)$">
Header set Cache-Control "max-age=300, private, must-revalidate"
</FilesMatch>

<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
ExpiresActive Off
Header unset Expires
Header unset Last-Modified
Header set Pragma "no-cache"
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
</FilesMatch>
</IfModule>

FileETag none

</IfModule>


… und den Apache-Webserver neu-starten, um die neue Konfiguration zu übernehmen.

/etc/init.d/apache2 restart


Nun werden bestimmte Daten z.B. Bilder erst nach einem Monat wieder von der Webseite geholt, solange diese noch im Cache des Browsers sind und nicht manuell neu angefragt werden (F5).


ohne Expires:

no_cache_expires


mit Expires:

cache_expires

Die Grafik sind ebenfalls von YSlow, die Erweiterung, welche ich am Anfang des Artikels bereits beschrieben habe. Im ersten Bild siehst du die Ausgabe, wenn ein neuer Besucher (leerer Browsercache) meine Seite besucht und im zweiten, wenn z. B. ein Stammbesucher die Website aufruft, somit lässt sich gut erkennen wie viel Traffic it dieser Methode bereits bei einem Seitenaufruf eingespart werden kann, rechnet das mal für einen Monat hoch. ^^


Syntax:

ExpiresByType <TYPE> “<BASIS> [ plus ] <ANZAHL> <TYP>”

  • <TYPE> hier wird der Datei-Type definiert
  • <BASIS>

– modification ist das Änderungsdatum

– access oder now stehen für den Zugriffszeitpunkt

 

Das Schlüsselwort „plus“ ist optional. Es verdeutlicht die Tatsache, dass die nachfolgende Zeitangabe zum Basiszeitpunkt addiert wird


  • <ANZAHL> ist eine beliebige positive ganze Zahl
  • <TYP> können folgende Angaben sein

– year/years (Jahre)
– month/months (Monate)
– week/weeks (Wochen)
– day/days (Tage)
– hour/hours (Stunden)
– minute/minutes (Minuten)
– second/seconds (Sekunden)

 

Link:
www.askapache.com

Webseiten beschleunigen – Übersicht

Der Artikel beschreibt, wie man seine Webseite bzw. seinen Server analysiert und optimiert um Performance zu gewinnen, Ladezeit zu reduzierten bzw. Traffic einzusparen. Man kann einiges an Performance gewinnen, indem man z.B. Bilder im richtigen Format abspeichert bzw. komprimiert, CSS- / JS-Dateien kombiniert und ebenfalls komprimiert oder auch bestimmt Daten vorkomprimiert zur Verfügung stellt.

1.) Webseiten Analyse
1.1) Webseiten Benchmark

2.) Komprimierung
2.1) Bilder komprimieren
2.1.1) Bilder Sprites
2.1.2) PNG-Bilder komprimieren
2.1.3) JPEG-Bilder komprimieren
2.1.4) Bilder komprimieren – Online
2.2) JavaScript/CSS komprimieren
2.2.1) JavaScript/CSS komprimieren – serverseitig
2.2.2) JavaScript/CSS komprimieren – Online
2.3) Apache gzip-Kompression
2.3.1) Aktiviere mod_deflate (gzip) – serverseitig
2.3.2) Aktiviere mod_gzip – serverseitig
2.3.3) Aktiviere gzip – manuell

3.) JavaScript richtig im HTML-Code platzieren

4.) Browser-Cache nutzen
4.1) Browser-Cache manuell einstellen
4.2) Browser-Cache serverseitig einstellen

5.) Webserver beschleunigen
5.1) Apache-Module deaktivieren
5.2) Reverse Proxy (Nginx)
5.3) Nginx als Webserver
5.4) Nginx mit Varnish (Proxy)

6.) PHP optimieren/caching
6.1) PHP-Daten zwischenspeichern
6.2) SQL-Abfrage mittels PHP zwischenspeichern
6.3) PHP-Module deaktivieren
6.4) php.ini (Konfiguration) optimieren

7.) MySQL optimieren
7.1) MariaDB (MySQL-Fork)


Zusammenfassung

Abschließend möchte ich diesen Thema noch einmal kurz zusammenfassen, so dass man ggf. selber weitere Möglichkeiten erkennt, die Ladegeschwindigkeit seiner Webseite zu verbessern, jedoch nicht auf die Technische Umsetzung eingehen.

Kenne deinen Feind !!!

80 bis 90% der schlechten Performance liegt an der Webseite selber und nicht auf der Serverseite, solange nur wenig Besucher auf deiner Webseite sind, braucht man sich eigentlich um einen Revere-Proxy oder eine alternative zu Apache keine oder zumindest nur wenig Gedanken machen, da die Performance erst mit steigender Besucherzahl einbricht. Jedoch sollte man in jedem Fall die gzip-Komprimierung und den Browser-Cache nutzen.

Externe Dateien (Bilder, JS, CSS, Videos…)

Jeder Aufruf einer Datei kostet Performance und Bandbreite, daher sollte man im allgemeinen weniger Requests produzieren, indem man z.B. JS- bzw. CSS-Dateien kombiniert. Dieser negative Einwirkung steigt dramatisch bei externen Dateien von andern Servern und besonders dann, wenn dieser gerade mal nicht erreichbar ist.

Scripte

Immer wenn eine Browser eine Webseite abruft und im HTML-Code ein Script finde, wird das weitere laden der Webseite eingestellt und erst-einmal die JavaScript Engine damit beansprucht, diesen zu interpretieren. Daher sollte man diese Dateien erst am Ende der Webseite laden lassen, so dass der User die Webseite früher sehen kann, auch wenn z.B. die Animation des Menüs erst nach nachgeladen werden muss. Mit diesem Ansatz, erscheint es nur Sinnvoll CSS-Daten am Anfang laden zu lassen, so dass sich die Webseite dem User direkt im korrektem Layout präsentiert.

Bilder

Ein weites großer Bereich sind Bilder, dabei muss man jedoch ein gutes Mittelmaß an Text und Bildern finden, da die User zwar Bilder immer schön finden.. Logo, Hintergrundbild u.s.w. jedoch macht es nur wenig Sinn seine selbst jeder kleine Datei zu optimieren, wenn man oben über der Webseite ein 300 KB großes Bild eingefügt hat. Wie bereit im Artikel beschrieben gibt es jedoch zahlreiche Methoden (PNG- und JPEG-Dateien) diese zu optimieren.

Yahoo hat zudem eine sehr umfassende Liste von weiteren Regeln zusammengestellt, welche man beachten sollte.

Twitter automatisieren!

Auf folgender Webseite (www.catswhocode.com) habe ich ein paar sehr interessante PHP-Skript gefunden, eines davon stelle ich hier kurz vor.

Das Skript läuft “out of the box”, dass heißt es ist nicht notwendig, dass man irgendwas von dem folgenden PHP-Code versteht ^^ alles was du tun musst ist, die Variablen einzusetzen -> $user, $pass und $term.

$user = "Benutzernamen";
$pass = "Passwort";
$term = "Suchbegriff";

Hinter $term steht der Begriff für die Suche in der User-Timeline, wer diesen Begriff erwähnt, wird automatisch von dir verfolgt…

twitter_neu

< ?php
// Twitter Auto-follow Script by Dave Stevens - http://davestevens.co.uk

$user = "enter_your_twitter_username_here";
$pass = "enter_your_twitter_password_here";

$term = "enter_the_search_term_to_follow_here";

$userApiUrl = "http://twitter.com/statuses/friends.json";

$ch = curl_init($userApiUrl);
curl_setopt($ch, CURLOPT_USERPWD, $user.":".$pass);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$apiresponse = curl_exec($ch);
curl_close($ch);
$followed = array();

if ($apiresponse) {
 $json = json_decode($apiresponse);
 if ($json != null) {
  foreach ($json as $u) {
   $followed[] = $u->name;
  }
 }
}

$userApiUrl = "http://search.twitter.com/search.json?q=" . $term . "&rpp=100";
$ch = curl_init($userApiUrl);
curl_setopt($ch, CURLOPT_USERPWD, $user.":".$pass);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$apiresponse = curl_exec($ch);
curl_close($ch);

if ($apiresponse) {
 $results = json_decode($apiresponse);
 $count = 20;
 if ($results != null) {
  $resultsArr = $results->results;
  if (is_array($resultsArr)) {
   foreach ($resultsArr as $result) {
    $from_user = $result->from_user;
    if (!in_array($from_user,$followed)) {
     $ch = curl_init("http://twitter.com/friendships/create/" . $from_user . ".json");
     curl_setopt($ch, CURLOPT_USERPWD, $user.":".$pass);
     curl_setopt($ch, CURLOPT_POST, 1);
     curl_setopt($ch, CURLOPT_POSTFIELDS,"follow=true");
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
     $apiresponse = curl_exec($ch);

     if ($apiresponse) {
      $response = json_decode($apiresponse);
      if ($response != null) {
       if (property_exists($response,"following")) {
        if ($response->following === true) {
         echo "Now following " . $response->screen_name . "n";
        } else {
         echo "Couldn't follow " . $response->screen_name . "n";
        }
       } else {
        echo "Follow limit exceeded, skipped " . $from_user . "n";
       }
      }
     }
     curl_close($ch);
    } else {
     echo "Already following " . $from_user . "n";
    }
   }
  }
 }
}
?>

ggf. kann man sich auch noch ein crontab einrichten, welcher dieses Skript ausführt

gravatar – dein global verfügbarer Avatar

Bei einem Gravatar handelt es sich um einen global verfügbaren Avatar (Global Recognized Avatar), welcher mit der E-Mail-Adresse des Benutzers verknüpft ist. Verschiedene Seiten bieten den Nutzern an, Avatare auf ihre Server zu laden und mit ihren E-Mail-Adressen zu verknüpfen. So kann ein Benutzer des Internets in jedem Blog oder anderen System seinen globalen Avatar hinterlassen, ohne sich extra bei jedem Blog zu registrieren und dann ein Bild hochzuladen. – Wiki

https://videopress.com/v/wp-content/plugins/video/flvplayer.swf?ver=1.15

Das einbinden auf deine Webseite ist sehr einfach:

en.gravatar.com/site/implement

z.B.: für PHP

$email = "someone@somewhere.com";
$default = "http://www.somewhere.com/homestar.jpg";
$size = 40;

$grav_url = "http://www.gravatar.com/avatar.php?
gravatar_id=".md5( strtolower($email) ).
"&default=".urlencode($default).
"&size=".$size;

für WordPress gibt es eine Reihe von Plugins welche gravatar mehr oder weniger in deinen Blog integrieren…