Performance web

Après avoir regarder une vidéo sur l'intervention d'Eric Daspet concernant l'optimisation front end il fallait bien ouvrir une page pour commencer à prendre quelques notes. C'est donc ici.

Pour ajouter un Expires header aux composants web on peut ajouter dans le fichier .htaccess Nécessite mod_expires installé

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A604800
ExpiresByType text/css A604800
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType text/plain A86400
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType video/x-flv A2592000
ExpiresByType application/pdf A2592000
ExpiresByType text/html A600
</IfModule>

Quelques intervalles à titre indicatif

• 300 = 5 minutes
• 2700 = 45 minutes
• 3600 = 1 hour
• 54000 = 15 hours
• 86400 = 1 day
• 518400 = 6 days
• 604800 = 1 week
• 1814400 = 3 weeks
• 2419200 = 1 month
• 26611200 = 11 months
• 29030400 = 1 year = never expires

Pour supprimer les Etag ajoutez dans le fichier .htaccess

Header unset ETag
FileETag None

De même pour compresser à la volée le contenu de la transaction entre le serveur et le client on peut ajouter dans le fichier .htaccess

<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Voir l'article suivant pour une présentation du concept

http://www.yoyodesign.org/outils/ngzip/index.fr

A lire

• http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
• http://perishablepress.com/press/2007/03/26/fast-effective-php-compression/
• http://www.askapache.com/htaccess/apache-speed-compression.html

RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*\.)(js)$ layout/purepro/jscsscomp/jscsscomp.php?q=$1$2 [L,NC]
RewriteRule .* - [E=HTTP_IF_MODIFIED_SINCE:%{HTTP:If-Modified-Since}]
RewriteRule .* - [E=HTTP_IF_NONE_MATCH:%{HTTP:If-None-Match}]

On peut aussi réunir plusieurs fichier css en un seul pour limiter le nombres de requêtes.

/**
 * Checks if a CSS Cache file still is valid
 *
 */
function css_cacheok($cache,$files){
    $ctime = @filemtime($cache);
    if(!$ctime) { return false; } //There is no cache

    // now walk the files

    if ( is_array($files) ) {
        foreach($files as $file){
            if(@filemtime($file) > $ctime){
                return false;
            }
        }
    }
    return true;
}
/**
 * Loads a given file
 */
function css_loadfile($file){
    if(!@file_exists($file)) return '';
    $css = readfile($file);
    return;
}
/**
 * Very simple CSS optimizer
 *
 */
function css_compress($css){
    //strip comments through a callback
    $css = preg_replace_callback('#(/\*)(.*?)(\*/)#s','css_comment_cb',$css);

    //strip (incorrect but common) one line comments
    $css = preg_replace('/(?<!:)\/\/.*$/m','',$css);

    // strip whitespaces
    $css = preg_replace('![\r\n\t ]+!',' ',$css);
    $css = preg_replace('/ ?([:;,{}\/]) ?/','\\1',$css);

    // shorten colors
    $css = preg_replace("/#([0-9a-fA-F]{1})\\1([0-9a-fA-F]{1})\\2([0-9a-fA-F]{1})\\3/", "#\\1\\2\\3",$css);

    return $css;
}

    //css concaténation
    $style_path = $_CONF['path_layout'] . '/css/style.css';
    $layout_path = $_CONF['path_layout'] . '/styles/layout/' . $theme_layout  . '/layout.css';
    $menu_path   = $_CONF['path_layout'] . '/styles/menu/'   . $menu_layout   . '/menu.css';
    $lblock_path = $_CONF['path_layout'] . '/styles/lblock/' . $lblock_layout . '/block.css';
    $rblock_path = $_CONF['path_layout'] . '/styles/rblock/' . $rblock_layout . '/block.css';
    $color_path  = $_CONF['path_layout'] . '/styles/color/'  . $color_layout  . '/color.css';
    if ( $menu_align == 1 ) {
        $menu_align_path = $_CONF['path_layout'] . '/styles/menu/menuleft.css';
    } else {
        $menu_align_path = $_CONF['path_layout'] . '/styles/menu/menuright.css';
    }
    $body_path = $_CONF['path_layout'] . '/css/body.css';
    $custom_path = $_CONF['path_layout'] . '/css/custom.css';

    $header->set_var( 'css_url', $_CONF['layout_url'] . '/css/cache.css');

    $cacheFile = $_CONF['path_layout'].'/css/cache.css';
    $cacheURL  = $_CONF['layout_url'].'/css/cache.css';


    $files[] = $style_path;
    $files[] = $layout_path;
    $files[] = $menu_path;
    $files[] = $lblock_path;
    $files[] = $rblock_path;
    $files[] = $color_path;
    $files[] = $menu_align_path;
    $files[] = $body_path;
    $files[] = $custom_path;

    // check cache age & handle conditional request
    if(!css_cacheok($cacheFile,$files)){

    // start output buffering and build the stylesheet
    ob_start();

    // load files
    if ( is_array($files) ) {
        foreach($files as $file) {
            css_loadfile($file);
            print "\n";
        }
    }

    // end output buffering and get contents
    $css = ob_get_contents();
    ob_end_clean();

    // compress whitespace and comments
    $_CONF['compress_css'] = false;
    if($_CONF['compress_css']){
        $css = css_compress($css);
    }

    // save cache file
    $fp = fopen($cacheFile,'w');
    fwrite($fp,$css);
    fclose($fp);
    }

Certains extraits de code proviennent du site glfusion.org

Créez un fichier hello.php et testez avec un des sites listé en ressources.

<?php
   echo 'hello world';
?>

• http://websiteoptimization.com/services/analyze/
• http://www.webpagetest.org
• TTFB Time to first byte
• http://performance.survol.fr/