== Instrumente ==
Um die Ladezeiten der Webseiten besser einschätzen zu können, nutzen wir Firefox mit aktiviertem Firebug Plugin.
== Original ==
Als Vorlage für dieses Tutorial nehmen wir die Webseite der deutschen Wikipedia. Die Seite ist schon hoch optimiert, dennoch können wir das Beispiel nutzen um noch besser zu sein.
Link: demo.easy-coding.de/performance/original
== Optimierung - Dynamische Seiten ==
Wir nutzen die eigene, sehr schlanke Bibliothek HeaderUtil. Der Quellcode der Datei ist ausreichend dokumentiert.
In allen dynamischen Skripte mit PHP fügen wir das Script wie folgt an den Beginn der Datei ein.
[Blockierte Grafik: http://demo.easy-coding.de/performance/gzip/screenshot/index-original.png]
[Blockierte Grafik: http://demo.easy-coding.de/performance/gzip/screenshot/index-gzip.png]
Wir sehen, dass die Index Datei von 37 KB auf 10 KB schrumpft.
== Optimierung statische Inhalte ==
Statische Inhalte lassen sich ähnlich einfach manipulieren. Wir geben sie nicht direkt an den Browser, sondern lassen die Auslieferung über ein PHP Script steuern.
Dass die Dateien dabei den selben Dateinamen behalten, lässt sich über mod rewrite realisieren.
Wir erzeugen folgende .htaccess Datei:
Die gzip.php sieht wie folgt aus. In der Variable $dirs = array('wiki_files') habe ich alle erlaubten Ordner gepackt.
Damit wird verhindert, dass ungewollt geschützte Dateien wie z.B. eine config.php ausgeliefert werden.
Alles anzeigen
[Blockierte Grafik: http://demo.easy-coding.de/performance/gzip/screenshot/static-original.png]
[Blockierte Grafik: http://demo.easy-coding.de/performance/gzip/screenshot/static-gzip.png]
Wir sehen, dass die Gesamtdateigröße von 264 KB auf 128 KB reduziert wird.
== Demo + Download ==
Alles zu sehen gibt es unter demo.easy-coding.de/performance/original/ und demo.easy-coding.de/performance/gzip/.
Den Download der gzip Files findet ihr hier: demo.easy-coding.de/performance/gzip/download.zip
Um die Ladezeiten der Webseiten besser einschätzen zu können, nutzen wir Firefox mit aktiviertem Firebug Plugin.
== Original ==
Als Vorlage für dieses Tutorial nehmen wir die Webseite der deutschen Wikipedia. Die Seite ist schon hoch optimiert, dennoch können wir das Beispiel nutzen um noch besser zu sein.
Link: demo.easy-coding.de/performance/original
== Optimierung - Dynamische Seiten ==
Wir nutzen die eigene, sehr schlanke Bibliothek HeaderUtil. Der Quellcode der Datei ist ausreichend dokumentiert.
In allen dynamischen Skripte mit PHP fügen wir das Script wie folgt an den Beginn der Datei ein.
Quellcode
- --- original/index.php 2009-10-29 21:10:09.000000000 +0100
- +++ gzip/index.php 2009-10-29 21:15:01.000000000 +0100
- @@ -1,4 +1,7 @@
- -<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- +<?php
- +require_once 'HeaderUtil.php';
- +HeaderUtil::startOutput();
- +?><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html dir="ltr" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml" lang="de"><head>
[Blockierte Grafik: http://demo.easy-coding.de/performance/gzip/screenshot/index-original.png]
[Blockierte Grafik: http://demo.easy-coding.de/performance/gzip/screenshot/index-gzip.png]
Wir sehen, dass die Index Datei von 37 KB auf 10 KB schrumpft.
== Optimierung statische Inhalte ==
Statische Inhalte lassen sich ähnlich einfach manipulieren. Wir geben sie nicht direkt an den Browser, sondern lassen die Auslieferung über ein PHP Script steuern.
Dass die Dateien dabei den selben Dateinamen behalten, lässt sich über mod rewrite realisieren.
Wir erzeugen folgende .htaccess Datei:
Die gzip.php sieht wie folgt aus. In der Variable $dirs = array('wiki_files') habe ich alle erlaubten Ordner gepackt.
Damit wird verhindert, dass ungewollt geschützte Dateien wie z.B. eine config.php ausgeliefert werden.
Quellcode
- <?php
- require_once 'HeaderUtil.php';
- HeaderUtil::startOutput();
- // input params
- $file = isset($_GET['file']) ? $_GET['file'] : exit;
- $mime = isset($_GET['mime']) ? $_GET['mime'] : exit;
- // settings
- $whitelist = array();
- $dirs = array('wiki_files');
- $mimes = array(
- 'js' => 'application/x-javascript',
- 'css' => 'text/css'
- );
- // supported mimetype?
- if(!array_key_exists($mime, $mimes)) {
- exit;
- }
- // includes in whitelist
- foreach($dirs as $dir) {
- foreach(scandir($dir) as $filename) {
- $whitelist[] = $dir.'/'.$filename;
- }
- }
- if(!in_array($file, $whitelist)) {
- exit;
- }
- $content = file_get_contents($file);
- // ATTENTION: this exits if header timestamp (If-Modified-Since) is file timestamp
- HeaderUtil::sendLastModified(filemtime($file));
- // remember for 30 days in browser cache
- HeaderUtil::sendMaxAge(86400 * 30);
- // send content type
- HeaderUtil::sendContentType($mimes[$mine]);
- // output
- echo $content;
- ?>
[Blockierte Grafik: http://demo.easy-coding.de/performance/gzip/screenshot/static-original.png]
[Blockierte Grafik: http://demo.easy-coding.de/performance/gzip/screenshot/static-gzip.png]
Wir sehen, dass die Gesamtdateigröße von 264 KB auf 128 KB reduziert wird.
== Demo + Download ==
Alles zu sehen gibt es unter demo.easy-coding.de/performance/original/ und demo.easy-coding.de/performance/gzip/.
Den Download der gzip Files findet ihr hier: demo.easy-coding.de/performance/gzip/download.zip
8.245 mal gelesen
Torben Brodt -
Das kann man pauschal nicht beantworten.
Der Load steigt weil die CPU mehr Aufgaben machen muss.
Der Load sinkt, weil die Prozesse nur noch kürzer gehalten werden müssen.
Wie das für deine Anwendung funktionierst, findest du am besten mit einem simplen vorher/nachher Test heraus.