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
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
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'; ?>
Testez Geeklog
RSS
