Tag - atomik

Entries feed - Comments feed

Wednesday, 7 April 2010

Minimiser ses fichiers CSS et JS, quelles solutions ?

Bonjour à tous ! 

Je profite d'un article de Prélude sur l'optimisation par compression ou par minimisation pour présenter les différents moyens existants pour minimiser (ou minifier en mauvais français) les fichiers CSS et JS de votre site. 

Performances des pages web

Mais déjà, pourquoi faudrait-il minimiser vos fichiers ? Au débuts de l'Internet, on avait des débits ridicules, et il fallait donc réduire au maximum le poids de nos pages. Et puis, l'ADSL est arrivé et on a petit à petit oublié les limitations liées au débit. Ce fut une erreur, parce que les internautes détestent attendre. Aujourd'hui, on entend dire que Google va prendre en compte le temps de chargement des pages pour ses algorithmes de recherche. C'est une bonne chose, car cela ramène la question de la vitesse de chargement sur le devant de la scène du développement web. 

Vous trouverez déjà beaucoup d'articles sur le web qui parlent de performance. Il y a des sites entièrement dédiés à ce pan du développement, et Google saura vous les indiquer. Je ne vais donc pas répéter ce que d'autres expliquent mieux que moi, mais je vais vous présenter une façon d'améliorer ses performances que j'apprécie. 

Compression à la volée

Si vous suivez mon blog et mes projets, vous avez vu mon plugin Minifier pour Atomik Framework. Ce plugin permet de minimiser ses fichiers CSS au moment où ils sont demandés par l'internaute. Plusieurs intérêts à ça : réduire le nombre de requêtes HTTP, réduire la taille des fichiers CSS. Au final, l'utilisateur télécharge beaucoup moins de données inutiles, pour le même résultat affiché. 

J'avais découvert cette technique sur le blog de LateralCode (Stunningly Simple CSS Minifier), et j'ai vite accroché. Je ne suis pas fan de la minimisation avant l'envoi des fichiers sur le serveur, parce que ça oblige à avoir deux versions du code (une normale, une réduite), et surtout, ça oblige à re-minimiser les fichiers à chaque changement. Comme tout développeur, je suis faignant, donc ça ne me convient pas. 

La technique proposée par LateralCode consiste donc en une compression via un script PHP, donc directement sur le serveur. On spécifie les fichiers CSS à charger, le script PHP les ouvre, les compresse et les concatène, puis renvoie le résultat. C'est ce que j'ai fait avec Minifier, en ajoutant une fonctionnalité de mise en cache. 

Mise en pratique

Prenons un exemple pratique pour bien voir tout l'intérêt de ce système : j'ai un site avec trois pages. Sur chaque page, j'ai trois fichiers CSS communs : reset.css (un système de reset CSS comme celui d'Eric Meyer), global.css (qui définit des attributs sur mes éléments HTML, comme img { border: none; }) et main.css (qui définit le design général des pages). Ensuite, sur chaque page je charge un fichier particulier, correspondant au nom de la page, qui définit le style des éléments spécifiques à cette page. J'ai donc, sur chaque page, au moins 4 fichiers CSS différents. Ceci me permet d'avoir des fichiers proprement séparés, un code CSS réparti et donc mieux organisé, etc. Seulement, au niveau des performances, c'est pas le top, car 4 requêtes HTTP sont nécessaires pour charger le CSS de la page. 

L'utilisation du plugin Minifier, ou de tout autre système similaire, permet de faire ceci : 

  • génération du nom du fichier cache correspondant aux fichiers CSS demandés
  • si le fichier cache existe, et que les fichiers CSS sont moins récents que le fichier cache, on renvoi directement le fichier cache
  • sinon, compression de chaque fichier séparément (retrait des espaces, des retours à la ligne, des commentaires... )
  • concaténation des fichiers
  • enregistrement du résultat dans un fichier cache
  • renvoi du fichier cache

Au final, on aura donc sur notre serveur des fichiers toujours aussi propres, et on aura en cache un fichier CSS compressé par page. Les internautes ne reçoivent donc qu'un fichier compressé correspondant au code de la page visitée. 

Problématiques

Les systèmes de compression à la volée existent depuis quelques temps, mais je ne crois pas qu'ils soient très connus. L'inconvénient majeur, c'est le temps de compression et de mise en cache nécessaire quand on change un des fichiers. Cependant, la mise en cache permet de diminuer très fortement l'impact de ce comportement. Et puis, quand vous faites un changement sur votre site, vous vérifiez bien toutes les pages, non ? ;-)

Il y a cependant un gros reproche fait à la compression des fichiers en général : ça casse une des bases du web, le fait qu'il soit ouvert. Ainsi, on ne pourra que difficilement reprendre le code CSS d'un site qui compresse, et c'est donc un frein à l'innovation. Faut-il donc perdre en ouverture et en respect du web pour gagner en performance ? 

Je propose une solution simple pour répondre à cette problématique, mais qui ne marche que dans le cadre du système que je viens de présenter. Il suffit, au moment de la concaténation des fichiers compressés, d'ajouter un commentaire contenant des liens absolus vers les fichiers originaux. Ainsi, l'internaute qui s'intéresse à notre code pourra accéder aux fichiers CSS originaux, et récupérer, analyser, comprendre ce code. Les performances sont là (au dur prix de trois ou quatre lignes de commentaire), et le web est sauvé. 

J'envisage d'implémenter ceci dans la prochaine version de Minifier. Que pensez-vous de cette solution ? Avez-vous d'autres idées pour résoudre ce problème ?

Minifiers

Bon, je suis bien d'accord, mon plugin Minifier est absolument génial (lol), mais il n'est disponible que pour Atomik Framework. Sachez donc qu'il existe d'autres projets permettant de mettre en place le même genre de comportement sur votre site. Certains sont plus simples, d'autres bien plus complets. Je ne sais pas si ils fonctionnent exactement comme Minifier, je vous invite donc à les étudier avant de les implémenter.

Voici donc une liste de projets de minimisation de vos fichiers CSS ou JS à la volée : 

Je me rend compte que je n'en connais pas beaucoup, donc si vous en avez d'autres, faites m'en part en commentaire ! :)

N'hésitez pas non plus à troller intelligemment sur les avantages et les inconvénients de la compression des fichiers CSS et JS, ainsi que sur les différentes méthodes disponibles. 

Belle fin de journée à tous ! 

Crédits : Photo "Astronomical Clock" par simpologist

Monday, 1 March 2010

Mon tutoriel sur Atomik Framework maintenant sur le Site du Zéro

Hello ! 

Je vous fait un petit billet pour vous dire que je suis vivant (je me concentre en ce moment sur la publication sur ideonimbus plutôt que sur ce blog), et que mon tutoriel sur Atomik Framework a été diffusé sur le Site du Zéro : Atomik Framework : un framework PHP simple et léger

N'hésitez pas à y faire un tour, j'ai apporté quelques modifications intéressantes, notamment sur le système de layout. 

Bonne journée ! 

Wednesday, 10 February 2010

[Tutoriel] Atomik Framework : installation, configuration et prise en main

Bonjour à vous, chers lecteurs ! 

Sur une question de @rkueny sur Twitter, et après quelques recherches auprès de mon grand ami Google, j'ai constaté qu'il n'y avait pas de ressource française sur Atomik Framework, mon framework PHP chouchou. Je me dois donc de palier à cette lacune du web francophone. Et comme une bonne chose ne vient jamais seule, la version 2.2 d'Atomik Framework vient de sortir ! 

Dans ce tutoriel, je vais vous apprendre à : 

Continue reading...

Wednesday, 20 January 2010

Nouvelle version de Programmateur et débuts de l'API

Bonjour à vous, amis développeurs et autres. 

J'ai l'insigne honneur de vous annoncer aujourd'hui le passage de Programmateur à sa version 2. Au programme de cette nouvelle version : rien. Ou presque. 

Version 2.0 ?

En réalité, ce que j'appelle "version 2" est une ré-écriture du code de Programmateur, pour plusieurs raisons. D'abord, parce que Martin m'a demandé si mon code était libre, souhaitant l'utiliser pour un projet similaire. Ensuite, parce que oui, libérer mon code ne me dérange pas, et me parait même une bonne idée. Mais enfin, et surtout, parce que mon code source était juste ignoble : à la base, j'ai développé Programmateur pour m'amuser avec l'API Twitter, et du coup l'organisation du code n'a pas été ma grande priorité... 

Donc, j'ai récemment repris le code de Programmateur, et je suis passé à une version basée sur le framework Atomik (que vous devez commencer à connaitre maintenant ! ;-) ), le code final étant bien plus propre, l'organisation des fichiers plus logique, et surtout, les possibilités d'évolution sont bien meilleures ! J'en ai également profité pour améliorer grandement les performances du site, avec plusieurs mises en cache importantes qui n'étaient pas faite, et donc moins de requêtes vers le site de Twitter (qui, il faut l'avouer, est parfois lent... ). 

Le code source du site n'est pour l'instant pas disponible, parce qu'il faut encore que je fasse quelques vérifications / arrangements, et puis parce qu'il faut que je prépare tout ça, et que ça prend un peu de temps ! Je vous ferai, de toute façon, un billet sur le sujet le jour où le code sera libéré... 

Et une API, une ! 

Au niveau des fonctionnalités, elles restent les mêmes, et rien n'est ajouté. Sauf, sauf... Les premiers pas de l'API de Programmateur ! En effet, comme tout bon service web, je me dois de mettre à disposition des utilisateurs les données que je collecte. Evidemment, c'était déjà possible par le biais de Twitter (la timeline de @programmateur est publique), mais c'est tout de même mieux si ça vient directement du service lui-même. 

Pour l'instant, vous ne pouvez qu'accéder aux derniers tweets via cette URI : http://programmateur.lqbs.fr/tweets/list. Deux options sont actuellement disponibles : "format" qui permet de choisir le format des données retournées (actuellement, xml par défaut, ou json), et "count" qui permet de définir le nombre de tweets retournés (par défaut, 10, au maximum 100). En attendant que je rédige une doc, je vous laisse analyser les données retournées, je pense avoir mis des noms suffisamment clairs (d'autant que je me suis beaucoup basé sur ceux de l'API de Twitter ! ). 

Ce n'est, je l'espère, qu'un début. Je vais notamment essayer de créer rapidement un moyen de poster un tweet via l'API, mais je pense être confronté à pas mal de problèmes d'identification, principalement parce que toute l'identification du site se fait via Twitter... Il faudrait donc que je fasse identifier la requête par Twitter avant de la considérer comme acceptable ? Si vous avez des pistes sur ces problèmes, je suis preneur ! :)

Et bien sur, à terme, il y a aura une documentation complète sur cette API ! En attendant, si vous avez des questions, ou que vous voulez utiliser cette API, n'hésitez pas à vous manifester ici. 

What else ?

Pour finir, et parce que je surfe sur les modes du web, Programmateur a sa page formspring, sur laquelle vous pouvez poser toutes vos questions. Une sorte de FAQ 2.0 : formspring.me/Programmateur

Merci de votre soutien, et longue vie à Programmateur ! \o/

Friday, 8 January 2010

Mise à jour de Minifier, le plugin qui compresse vos fichiers CSS

Bien le bonjour ! 

Souvenez-vous, il y a quelques temps, je vous présentais Minifier, un plugin pour Atomik Framework qui compresse vos fichiers CSS directement sur votre serveur. Plusieurs avantages à cela : 

  • une seule requête HTTP sur chaque page, quel que soit le nombre de vos fichiers CSS
  • suppression des espaces superflus et des commentaires, donc des fichiers plus légers
  • moins de bande passante utilisée
  • une mise en cache des fichiers compressés, donc pas d'utilisation inutile des ressources

Seul "inconvénient", les utilisateurs reçoivent un fichier compressé et donc relativement illisible. Mais honnêtement, dans le cadre d'un site de taille respective, est-ce vraiment un problème ?

Petit rappel pour les gens qui découvrent : ce plugin s'utilise uniquement avec Atomik Framework, un framework PHP5 léger, gratuit, open source, et que j'apprécie beaucoup. 

Bien. Il se trouve que la première version de plugin ne marchait pas bien du tout, parce que j'utilisais des liens pour régler le problème des urls relatives des fichiers CSS. En gros, je créais dans le dossier assets/css/ un lien vers le fichier compressé, ainsi les url étaient prises en compte depuis le dossier assets/css/ et non depuis le dossier de cache. Mais faire des liens en PHP, c'est pas beau, et surtout ça ne marche que très peu sur les serveurs ! A côté de ça, j'avais aussi quelques problèmes au niveau de la manipulation des adresses des fichiers. 

Ce matin, j'ai eu une illumination en repensant à ces problèmes, et j'ai donc pu facilement résoudre le premier : il suffisait tout simplement de mettre les fichiers compressés dans un dossier situé au même niveau que le dossier contenant les CSS ! Par exemple, dans un dossier assets/css_cache/ ! J'ai donc fait ça, et j'en ai profité pour corriger les problèmes d'adresses et pour ajouter quelques fonctionnalités. Vous avez désormais trop moyens d'ajouter le <link>, comme décrit sur la page officielle du plugin. De plus, j'ai ajouté deux clés de configuration : 'cache/dir' contient l'adresse du dossier contenant les fichiers cachés (par défaut, assets/css_cache/), et 'force_css_link' qui force l'affichage de la balise <link> complète plutôt que le retour de l'url du fichier compressé. Des exemples d'utilisation sont disponibles sur la documentation de Minifier

J'espère que les utilisateurs d'Atomik Framework prendront plaisir à utilliser Minifier, et qu'il leur sera utile pour améliorer les performances de leurs sites ! 

Si vous avez des remarques ou des questions, n'hésitez pas à vous exprimer en commentaire ou en m'envoyant un mail

Quelques liens pour finir : 

Bonne journée !

Monday, 5 October 2009

Minifier, plugin pour Atomik Framework qui compresse vos fichiers CSS

Hello ! 

Aujourd'hui je vous présente mon premier plugin pour le framework PHP Atomik Framework : Minifier. Ce plugin permet de réduire et de compresser en un seul fichier mis en cache tous les fichiers CSS nécessaire à une page. 

Je vous laisse lire la page du plugin pour plus d'informations. Si vous avez des questions, posez-les ici ou sur le forum d'Atomik ! ;)

Pour la petite histoire, tout à commencé par un billet chez La Ferme du Web, qui relayait un billet de lateralcode, présentant un script simple de compression de fichiers CSS. Le but était tout simplement de ne pas avoir à compresser ses fichiers à chaque fois qu'on les envoie sur son serveur. Et puis du coup, comme beaucoup de commentaires en parlaient, j'ai repris ce script et je l'ai amélioré pour qu'il compresse plusieurs fichiers d'un coup, et qu'il les mette en cache. Et puis histoire que ça me serve encore plus et encore plus facilement, j'en ai fait un plugin pour Atomik, framework que j'apprécie et que j'utilise beaucoup !

Liens : 

Enjoy ! 

Thursday, 2 July 2009

Projets L3 Informatique - Machine de Turing

Hello !

Je vous présente aujourd'hui un de mes projets réalisés dans le cadre du 2e semestre de la 3e année de licence Informatique à Dijon. La matière était "Langages formels et compilation", et le projet portait sur la Machine de Turing.

Le projet était assez libre, la seule consigne étant "programmez une machine de Turing généraliste déterministe". Le langage de programmation était au choix des étudiants, j'ai donc décidé de faire ce projet en PHP, pour une question d'affinité et surtout de simplicité des interfaces (c'est quand même relativement facile de faire une belle interface en HTML... ).

Vous pouvez donc "admirer" le résultat en ligne : http://adrian.gaudebert.fr/labs/turing/ (et vous pouvez lire le manuel d'utilisation)

Et évidemment, vous avez accès aux sources, ainsi qu'à la doc : 

Pour réaliser ce site, j'ai utilisé le Framework AtomikFramework, qui présente l'intérêt d'être simple et léger, et donc tout à fait adapté à mes besoins. J'ai également utilisé jQuery, une bibliothèque javascript très utile pour réaliser simplement des effets funs.

Enjoy !