C’est en voulant optimiser Komet ( mon nouveau Bébé branché RESTFUL ), que j’ai découvert pas mal de chose sur le cache de fichier. Bien évidemment, direction le Blog de Jay pour trouver des choses…Puis quelques recherches Google pour s’amuser et aller un peu plus loin.
Il y a un maintenant 2 semaines que je trifouille le Web pour comprendre les protocols HTTP
C’est sympa tu me diras, j’ai décidé de ce pas de me faire un petit ( vraiment mini ) framework RESTFUL…que j’ai donc nommé
Komet
après délibération sur Code seo.
Je ne vais pas te faire un joli dessin sur le REST, tu pourras lire cet article vraiment interessant.
Rapide, éfficace et pas cher, c’est …
Bref, comme ce blog tourne sous Komet ( et ouep, WP devient trop lourd même si je reste un grand Fan ), je me suis rendu compte d’un léger retard d’affichage de mes pages. Il faut dire aussi qu’a trop jouer avec Google pour afficher le pagerank de chaque lien d’un article, je n’y vais pas de main morte.
Si tu as lu l’article plus haut, tu t’es surement rendu compte que pour être dans le MOUV REST, il faut éviter trop souvent de mettre les données en cache…Sinon c’est pu rigolo hein !
Seulement voilà, a coller un mini CMS sur l’architecture, CSS, Javascript font leur entrée…et ça je peux le cacher ( ou es-tu ? ).
Mon premier réflexe…htaccess + le blog de Jay. Et surprise, il parle d’autoriser le « include » dans les fichiers css et js. A que c’est cool, je gagne des requêtes GET.
Pour ceux qui auraient la flemme de lire l’article de Jay ( Non JAy, les liens ne sont pas un cadeau, c’est un test SEO en même temps 
), Voici rapidement les codes:
Dans le .htaccess
### INCLUDE JS & CSS ###
< FilesMatch ".(js|css)$" >
Options +Includes
SetOutputFilter INCLUDES
< /FilesMatch >
### END INCLUDE JS & CSS ###
Dans votre fichier CSS ou JS:
CSS < !--#include file="fichier2.css" -- > ou < !--#include virtual="../fichier2.css" -- > JS < !--#include file="fichier2.js" -- > ou < !--#include virtual="../fichier2.js" -- >
(espace a retirer…bug avec la syntax sur le html)
Voilà, si t’es curieux, … Bon j’arrête, je vais passer pour un lèche-bottes.
Donc voilà, un gain rapide en chargement, j’ai pu constater une division par 2 du temps de chargement entre mes thèmes et mes plugins.
Mais, KOMET, c’est pour aller vite alors je trifouille encore un peu…HTACCESS pour cacher les fichiers :
### CACHE ### < IfModule mod_headers.c > < FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|swf)$" > Header set Cache-Control "max-age=290304000, public" < /FilesMatch > < /IfModule > ### END CACHE ###
Tu trouveras d’autres astuces dans l’article de la ferme du Web.
Attention cependant, et c’est à ce moment que j’ai senti que j’allais devoir chercher plus loin encore…Le cache en .Htaccess par Header requiert le module mod_header qui bien évidemment n’était pas OP sur mon Wamp Local.
Jérémy, active moi ça sous Wamp…et sur ton serveur !!! Non, non et non. Au lieu de celà j’ai repris mes petites recherches pour tomber sur the top ( enfin je crois )
Si l’include apache activé permet de gagner en chargement de fichier, il n’en compresse pas moins le contenu a moin d’utiliser toute sortes de directive dans le .htaccess qui pourraient encore poser souci sur certains hebergements.
Ca va tu suis ? Bon alors, avant de continuer mon développement, je me dis que finalement, mes fichiers css et js seront en php…Enfin presque.
Avec un simple Rewrite, tu pourrais facilement monter un style.php et faire une redirection de ce type:
#redirige style.css vers style.php RewriteRule ^(.*).css$ $1.php [QSA,L]
C’est beau c’est clean. Mais entre un éditeur PHP, du code CSS pas toujorus évident à comprendre lorsqu’on débute, tout avoir dans un fichier PHP est un peu embêtant.
Alors on garde nos fichiers CSS tels quels, et on va les charger dans un style.css.php rewrité pour l’occasion ( pour les fan de « beauty » hein ).
Le Code:
$offset = 60 * 60 * 24 * 2; // Cache pour deux jours
header('Content-type: text/css'); //a modifier pour le Javacript
header('Cache-Control: max-age='.$offset.', must-revalidate');
header('Expires: '.gmdate("D, d M Y H:i:s", time() + $offset).' GMT');
#on lance le buffer
ob_start("compress");
function compress($buffer)
{
#on retire les commentaires
$buffer = preg_replace('# //.+?$#m', '', preg_replace
('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer));
#on retire les espaces,tabs, retour chariots, etc.
$buffer = str_replace(array("rn", "r", "n", "t",
' ', ' ', ' '), '', $buffer);
return $buffer;
}
#on ajoute nos fichiers
include ('style.css');
include ('style2.css');
include ('style3.css');
#on les ressort
ob_end_flush();
//sans compression: Content-Length:4257
//avec compression sans remplacer les espaces,tabs, etc.: Content-Length:2978
//avec compression partout: Content-Length:2325
//Soit 1,83 fois moins de place, quasiment divisé par 2
(Source: Cats Who Code modifié pour passer le Javascript )
Le script php ( ici on le nomme par exemple style.css.php ) va s’occuper de mettre en tampon les trois fichiers CSS restés intactes avec leur commentaire et tout et tout ( on aime bien se repérer dans nos fichiers non ? Moi perso. J’en abuse depuis peu).
Mais en plus de celà dans la sortie, il va mettre en cache et compresser le code en ôtant tout commentaire, espace, retour à la ligne etc…
Exemple en sortie:
(function($){$.fn.googlePagerank = function(options) {var defaults =
{color: 'green',offsetX:10,offsetY:-5,baseLine: 'top', delay:500,
click:true };options = $.extend(defaults, options);return this.each
(function() {var $$ = $(this);var aHref= $$.attr('href')|| '';var
aRel = $$.attr('rel') || '';var hash = '6'+makeHash(aHref);var
aToolTip = $("<div></div>");var aCaption = '';var aImage;var
timer;var offsetX = 1;var offsetY = 1;var aTitle = '';$.ajax({
type: "GET", url: './themes/defaut/js/pagerank.php',data:
"url="+aHref+"&hash="+hash,cache:true,dataType: "jsonp",success:
//etc...
C’est illisible pour le pti voleur du coin qui passerait par hasard, c’est rapide ( temps de chargement divisé par 2 quasiment, et les fichiers sur le serveur reste des fichiers propres avec leur commentaires et autre fioritures. De quoi ne pas se casser la tête a tout repasser dans un JSBeautifier ou autre.
Charger les fichiers par PHP nous permet en plus de jouer avec nos scripts ou les variables d’environnement parfois utiles par exemple en javascript pour retrouver un chemin relatif ou autre.
Exemple pour du javascript en injectant un peu de code en PHP:
$offset = 60 * 60 * 24 * 2; // Cache pour deux jours
header('Content-type: application/javascript');
header ('Cache-Control: max-age=' . $offset . ', must-revalidate');
header ('Expires: ' . gmdate ("D, d M Y H:i:s", time() + $offset) . ' GMT');
ob_start("compress");
function compress($buffer) {
#on retire les commentaires
$buffer = preg_replace('# //.+?$#m', '', preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer));
#on retire les espaces,tabs, retour chariots, etc.
$buffer = str_replace(array("rn", "r", "n", "t", ' ', ' ', ' '), '', $buffer);
return $buffer;
}
$root = $_SERVER['SERVER_NAME'];
#on peut definir des variables
$jsData = 'var uri = "http://'.$root.'";';
echo $jsData;
#on ajoute nos fichiers
include('jquery.pagerank.js');
include('defaut.js');
#on les ressort
ob_end_flush();
Voilà j’ai pu determiner un chemin relatif dans var uri qui sera passé aux plugins jquery derrière qui pourraient éventuellement l’utiliser…
Tout n’est peut-être pas optimisé, les regex de compression sont encore à paufiner pour certains types de code…Mais dans l’ensemble ça tourne bien..
A toi de jouer maintenant
Copyright 2011. Waves was created in WordPress by Obox Themes.
0 Comments on this post
Laisser un commentaire