Minification oder kurz "Minify" ist eine Technik um für den Client irrelevanten Code zu entfernen. Whitespaces und Kommentare fallen weg.
== 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: farhadi.ir/works/smartoptimizer
== 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 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:
Die gzip.php sieht wie folgt aus:
Alles anzeigen
Die gzip.php stammt aus dem Tutorial: [wiki]Performance mit GZIP[/wiki]
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: farhadi.ir/works/smartoptimizer
Alles anzeigen
== Demo + Download ==
Alles zu sehen gibt es unter demo.easy-coding.de/performance/original/ und demo.easy-coding.de/performance/minify/.
Den Download der gzip Files findet ihr hier: demo.easy-coding.de/performance/minify/download.zip
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: farhadi.ir/works/smartoptimizer
== 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 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:
Die gzip.php sieht wie folgt aus:
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);
- // 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: [wiki]Performance mit GZIP[/wiki]
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: farhadi.ir/works/smartoptimizer
Quellcode
- --- 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));
== Demo + Download ==
Alles zu sehen gibt es unter demo.easy-coding.de/performance/original/ und demo.easy-coding.de/performance/minify/.
Den Download der gzip Files findet ihr hier: demo.easy-coding.de/performance/minify/download.zip
8.680 mal gelesen
Torben Brodt -
Lässt man protaculous weg, was sowieso schon minimiert ist, dann hat eine normale Themenseite 7 Requests und insgesamt 16 KB gzipped.
Wenn du das minifiest + konkateniert (wie bei easy-coding) bist du bei 2 Requests und 8 KB gzipped. Ich finde das ist schon ein krasser Unterschied
Wieviel allein durch das minifien kommt, habe ich nicht aufgeschlüsselt, aber es wird der Großteil der 100% Ersparnis sein.