You are not logged in.

This articles has been requested to be deleted.

This articles has been flagged as inappropriate.

Saturday, February 13th 2010, 6:24pm

Tags

gzip, minification, minify, performance

Abstract

CSS und Javascript Codes enthalten Programmcodr, der sauber programmiert auch Kommentare enthält und schön formatiert wird. All die Ästhetik wird aber unnötigerweise auch zu dem Besucher übertragen.

Minification oder kurz "Minify" ist eine Technik um für den Client irrelevanten Code zu entfernen. Whitespaces und Kommentare fallen weg.

Article

1. Instrumente


Um die Ladezeiten der Webseiten besser einschätzen zu können, nutzen wir Firefox mit aktiviertem Firebug Plugin.
Als Minifier wird der GPL lizenzierte SmartOptimizer genutzt: http://farhadi.ir/works/smartoptimizer

2. 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: http://demo.easy-coding.de/performance/original

3. Optimierung statische Inhalte


JavaScript und CSS Dateien sollen nicht mehr direkt aufgerufen werden können - stattdessen rufen wir das Script über eine PHP Datei auf.
Am besten lässt sich das über mod rewrite realisieren.

Wir erzeugen folgende .htaccess Datei:

wcf.bbcode.htaccess.title

1
2
RewriteEngine On
RewriteRule (^.+\.(js|css))$ gzip.php?file=$1&mime=$2 [L]


Die gzip.php sieht wie folgt aus:

PHP Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?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);
 
// minify with one of the the two supported minifiers
require_once 'minifier/'.$mime.'.php';
$func = "minify_".$mime;
$content = $func($content);
 
// 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;
?>


Die gzip.php stammt aus dem Tutorial: Performance mit GZIP
Im nachfolgenden Diff sieht man, dass nur der content durch eine bestimmte Minify Funktion verändert wird.
Die mitgelieferten Minifier stammen aus dem SmartOptimizer Projekt und sind unter der GPL lizenziert: http://farhadi.ir/works/smartoptimizer

Diff

1
2
3
4
5
6
7
8
9
10
11
12
13
--- gzip/gzip.php	2009-10-29 21:42:27.000000000 +0100
+++ minify/gzip.php	2009-10-29 21:42:21.000000000 +0100
@@ -32,6 +32,11 @@
 
 $content = file_get_contents($file);
 
+// minify with one of the the two supported minifiers
+require_once 'minifier/'.$mime.'.php';
+$func = "minify_".$mime;
+$content = $func($content);
+
 // ATTENTION: this exits if header timestamp (If-Modified-Since) is file timestamp
 HeaderUtil::sendLastModified(filemtime($file));


4. Demo + Download


Alles zu sehen gibt es unter http://demo.easy-coding.de/performance/original/ und http://demo.easy-coding.de/performance/minify/.
Den Download der gzip Files findet ihr hier: http://demo.easy-coding.de/performance/minify/download.zip

Lexikon 4.1.3, developed by www.viecode.com