Performance durch Minification / Minify

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • 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.
    == 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:

    Quellcode

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


    Die gzip.php sieht wie folgt aus:

    Quellcode

    1. <?php
    2. require_once 'HeaderUtil.php';
    3. HeaderUtil::startOutput();
    5. // input params
    6. $file = isset($_GET['file']) ? $_GET['file'] : exit;
    7. $mime = isset($_GET['mime']) ? $_GET['mime'] : exit;
    9. // settings
    10. $whitelist = array();
    11. $dirs = array('wiki_files');
    12. $mimes = array(
    13. 'js' => 'application/x-javascript',
    14. 'css' => 'text/css'
    15. );
    17. // supported mimetype?
    18. if(!array_key_exists($mime, $mimes)) {
    19. exit;
    20. }
    22. // includes in whitelist
    23. foreach($dirs as $dir) {
    24. foreach(scandir($dir) as $filename) {
    25. $whitelist[] = $dir.'/'.$filename;
    26. }
    27. }
    29. if(!in_array($file, $whitelist)) {
    30. exit;
    31. }
    33. $content = file_get_contents($file);
    35. // minify with one of the the two supported minifiers
    36. require_once 'minifier/'.$mime.'.php';
    37. $func = "minify_".$mime;
    38. $content = $func($content);
    40. // ATTENTION: this exits if header timestamp (If-Modified-Since) is file timestamp
    41. HeaderUtil::sendLastModified(filemtime($file));
    43. // remember for 30 days in browser cache
    44. HeaderUtil::sendMaxAge(86400 * 30);
    46. // send content type
    47. HeaderUtil::sendContentType($mimes[$mine]);
    49. // output
    50. echo $content;
    51. ?>
    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

    Quellcode

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

    8.781 mal gelesen

Kommentare 3

  • 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.

  • Benutzername -

    nach meinen test und prüfungen bring das gzipen und [url='http://www.easy-coding.de/wiki/php/performance-durch-minification-minify.html']Minify[/url] nichts außer ein Hunderstel meisten sogar braucht man mehr zeit und und schul aus meine sicht ist das künstliche weiterleiten der datei das was man an größe einspart wird druch der weiterleitung wieder nichtig gemacht

    Firebug
    yslow
    pagespeed

    gestetset

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