juil 29

Aujourd’hui, un guest nous propose un article.
Aymeric de l’agence DnD nous explique comment on peut faire de l’optimisation progressive.
Rien à voir avec le fait d’y aller petit à petit mais plutôt d’envoyer des pages de plus en plus complètes/complexes en fonction des capacités des navigateurs clients.

Optimisation dʼintégration par la technique de lʼamélioration progressive.

Si je vous parle dʼoptimisation web, vous me citerez très certainement les chargements parallèles, les CDN, les sélecteurs CSS efficaces, la réduction du poids des images, etc …

Lʼapproche est bonne, mais je répondrai ceci :
« Optimiser globalement son site cʼest bien, lʼoptimiser pour les différents navigateurs cʼest mieux»

Dans cette article, jʼexpliquerai une technique de conception de site web qui s’avère très efficace pour lʼoptimisation, la stabilité et la pérennité de votre site : cela se nomme lʼamélioration progressive.

Deux techniques de conception web

Il existe deux techniques pour la création de sites web optimisés :

La première sʼappelle « lʼamélioration progressive » et la seconde la « dégradation élégante ».

Elles cohabitent toutes les deux depuis longtemps et sont utilisées par la majorité des acteurs du web (agences web, free-lances, …), et ce, parfois sans même sʼen rendre compte.


Voici une brève définition :

  • La dégradation élégante est le fait de construire dʼabord son site en fonction des navigateurs les plus performants, puis de se concentrer ensuite sur la compatibilité avec les anciens navigateurs.
  • Lʼamélioration progressive cʼest lʼinverse. On se base dʼabord sur un ancien navigateur puis on rajoute des couches techniques successives plus poussées et plus abouties supportées par les navigateurs les plus récents.

Mais laquelle utiliser ?

La plupart privilégierons la dégradation élégante car cʼest à leurs sens la technique la plus simple à mettre en place et la plus utilisé. En effet, nous avons probablement tous déjà entendu un jour : « Les gars, jʼai fini dʼintégrer le site sur FireFox, jʼattaque maintenant le débug sur ce bon vieux IE6»

Cependant cette technique nʼoffre que très peu de souplesse, car il est nécessaire de partir de votre « bijoux » technique puis de le «démolir» petit à petit tout en corrigeant les différents bogues afin quʼil soit compatible avec les anciens navigateurs.

Petite métaphore pour appuyer mes propos

« Faut-il forcément sʼobliger à regarder une cassette VHS sur un écran Full HD sous prétexte quʼelle est compatible avec le magnétoscope de notre Mamie ? »

Nʼest il pas préférable de visualiser son film en Blu-Ray et se procurer une cassette VHS en parallèle pour que notre chère Mamie puisse regarder le film sur son magnétoscope auquel elle tient temps ?

Oui cela demande dʼavoir 2 versions du film, une en DVD Blu-Ray et lʼautre en VHS… et oui cela demande plus dʼinvestissement et plus de temps, mais il sʼagit du seul et unique moyen pour que personne ne soit exclu tout en ayant un média qui convient avec notre support.

Vous lʼaurez compris, je vous invite grandement à utiliser la technique de lʼamélioration progressive .

Pour en savoir plus sur ces techniques, je vous invite à lire ce très bon article.

Il date un peu mais reste dʼactualité : http://www.pompage.net/pompe/degradation-elegante-et-amelioration-progressive/

Exemple pratique

Voici la partie la plus intéressante, un exemple de la technique dʼamélioration progressive sur un bouton. Vous allez vous apercevoir que le gain de puissance est incroyable.

Voici notre bouton :
Capture

Première étape : Scindez les systèmes.

Ce bouton comporte des arrondis. Quels systèmes permettent de le faire de façon légère et optimisée ?

  • FireFox 3, SAFARI 4, CHROME gèrent déjà les bordures arrondis et les ombres grâce à leur moteurs graphiques (webkit, moz, …)
  • IE ne le gère pas. Surprenant non ? :)

Deuxième étape : Créer un code pour chaque système.

Pour les anciens navigateurs :

a.button {
background: transparent url('/2010/07/bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
height: 24px;
padding-right: 18px;
text-decoration: none;
}
a.button span {
background: transparent url('/2010/07/bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}

Pour les nouveaux :

a.button {
background-color: #DDD;
border: 1px solid #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
color: #444;
display: block;
float: left;
height: 24px;
line-height:24px;
padding: 0 10px;
}

Troisième étapes : Constatez lʼoptimisation avec le même rendu sur les tous les navigateurs :

  • Pour les anciens navigateurs, vous aurez un bouton construit à partir de 2 images de fond (2,3ko).
  • Pour les navigateurs récents, vous nʼaurez juste que quelques lignes de codes (0,6ko).

Appliquez ce que nous venons dʼeffectuer avec ce bouton à lʼensemble de vos éléments web. Vous obtiendrez alors un site avec peu dʼimages, un poids pour chaque page très faible.

Conclusion

Maintenant, imaginez un site sans images, avec des templates web entièrement développés en code, facile à gérer, des pages ayant un poids ridicule, et ce, sans jamais perdre en qualité.

Ce monde est déjà à nos pieds avec lʼutilisation du CSS3 et du HTML5… Pour ce faire, il vous faudra ajouter de manière progressive une couche supplémentaire à vos sites et en apprécier le gain gagné sur votre dernier navigateur… :)
Par Aymeric Aitamer, Agence DnD.

écrit par Philippe Humeau \\ tags: ,

juil 13

Introduction

Beaucoup de principes sont généraux à tous les frameworks, qu’ils s’agissent d’un site Magento, Prestashop, WordPress, Drupal, etc… Certains Framework ou plugins de ces solutions vous aident nativement à le faire, d’autre n’ont pas cette possibilité ou cette richesse en stock.

J’ai récemment refais le site de NBS System (ma société) de A à Z avec nos amis de l’agence DnD et forcément, on s’est un peu intéressés à l’optimisation. C’est un chemin complexe mais passionnant alors autant vous faire partager quelques trouvailles dans le domaine.

Je ne reviens pas sur le pourquoi, optimiser c’est bien, améliorer l’expérience utilisateur c’est bien, avoir un meilleur référencement naturel car on charge vite, c’est bien. De toute façon vous surfez sur un Blog, il faudra bien justifier cela à votre boss un jour donc on va dire que c’est pour le bien d’Internet et la préservation de la bande passante.

Après en société, vous pourrez faire les malins et expliquer qu’en optimisant votre site, vous avez participer à éviter l’Exaflood, ca ne fait pas tomber les femmes mais coté entretient d’embauche, sur un malentendu, vous forcerez l’admiration.

Comment Analyser

Nos deux amis : Yslow et PageSpeed. Ces deux plugins fonctionnent sous Firefox et vous donnent un point de vu sur ce qui est propre, bien fait et ce qui ne l’est pas. Pagespeed, celui de Google, est plus nouveau et un poil plus complet, il tourne évidemment aussi sous Chrome. Yslow est celui fournit par Yahoo depuis des années, il est très intéressant également, personnellement, j’utilise les deux.

Je vous conseil aussi le site websiteoptimization qui vous donnera aussi de préciseuses infos. Evidemment, passer sans erreur le XHTML validator est important également, même si c’est pas toujours simple.

En complément, je me dois de citer l’excellent site www.gtmetrix.com. Pour ceux qui comme moi utilisent Opera ou qui ont un browser exotique et qui n’ont pas nativement ces plugins, c’est bien utile d’avoir à la fois Yslow et Pagespeed au même endroit, dans une même page.

Pagespeed :

pagespeed screenshot

Yslow :

yslow screenshot

GT Metrix :

gtmetrix

Lire les résultats

Evidemment le but est atteindre le rating maximum, soit A/A ou 100%/100%.

C’est pour ainsi dire impossible donc si on peut aller à une note très intéressante, ca sera déjà pas mal. Ceci va en plus réduire le temps de chargement de la page et donc nous faire passer sous la barre d’1,5 seconde et donc améliorer la façon dont nous considère Google.

Dans l’immédiat, on voit que Pagespeed à un peu plus de critères mais on retrouve 70% de points communs soit une forme ou une autre alors je vais les grouper par types.

Pagespeed : « Parallelize downloads across hostnames »
Yslow : Use Cookie-free domains
Pagespeed : Serve static content from a cookieless domain

C’est quasi comparable, dans le principe il s’agit de permettre aux browsers qui viennent de télécharger vos contenus de sites depuis plusieurs serveurs distincts afin de leur permettre d’établir plus de connexions simultannées. En gros, pour ne pas saturer les serveurs, les browser ne s’authorise que 6 à 15 connexions vers un même serveur, c-a-d qu’ils ne téléchargent que 6 à 15 éléments simultanéments et attendent pour demande les suivants que des connexions se libèrent.

C’est paramétrable du coté du client, sur le navigateur mais on ne va pas demander à chacun de modifier son paramétrage de navigateur donc il vaut mieux utiliser plusieurs serveurs, quand cela est possible, pour servir le contenu, notamment static. Ici, seul le hostname compte, vous pouvez avec le même serveur physique derrère un www1, www2 etc…

Avoir 4 serveurs qui distribuent le contenu va permettre aux navigateurs d’aller beaucoup plus vite pour récupérer les contenus. Un petit regret ici, il aurait été plus simple d’intégrer un variable sur le nombre de thread concourrant accepté directement dans le handshake http 1.1. Ca aurait permis d’accélérer en basse charge et de diminuer pendant les pics. On peut aller plus loin aussi en servant depuis plusieurs endroits, sur un domaine différents « cookieless ».

Ce n’est pas très compliqué à faire en réalité. Le plus simple c’est d’enregistrer un nom domaine différent de celui du site, par exemple static-nbs-system.com et de mettre un CNAME dans la zone DNS qui pointe sur l’enregistrement A du site (en l’occurence nbs-system.com). Ensuite on configure le service web pour fournir les ressources statiques depuis ce nouveau domaine, on interdit de poser les cookies sur ce domaine et dans les pages web on appelle les ressources statiques sur ce domaine. On peut bien sûr reproduire le schéma avec n host sur ce nouveau domaine, static1.blablabla, static2.blablabla etc…

Ca à l’air bien sur le papier mais si le framework le gère pas, il va falloir éditer des fichiers de config, des fichiers php ou HTML ou encore jouer de la commande sed pour automatiser le remplacement de l’url. (pour sed, vous pouvez voir l’article ici)

Je ne sais pas si ca à une influence sur la SEO par contre. Vu que le nom et l’URL des ressources statiques participe à la SEO on m’a dit, je ne sais pas l’impacte.
Faible je suppose vu que ce sont des plugins de moteurs de recherche qui conseillent ce mouvement… Un pro de la SEO pour m’éclairer ?

Yslow : « Use a Content Delivery Network (CDN) »

L’idée est un peu la même mais à une petite nuance prêt. Yslow conseil l’usage d’un CDN de manière absolu, un qui soit connu pour le reprérer. Pagespeed lui conseille de multiplier les sources servant les fichiers. L’idée de fond reste proche, servir le plus vite possible les éléments, depuis des sources spécialisées. Soit vous prenez un CDN connu (Akamai, limewire etc…) soit votre prestataire à le sien, soit vous en prenez un gratuit.

Dans les deux derniers cas, Yslow ne connaitra probablement pas votre CDN et vous devrez malgré tout trainer une mauvaise note sur ce sujet… Ca n’empêche pas d’avoir un A cependant car pour Yslow, c’est un point moyennement important. Et puis soyons honnête, avoir un CDN (Content Delivery Network) ce n’est utile que pour des sites qui servent à destinations de plusieurs pays distants, dans la majorité des cas, un serveur de ressources statiques suffit.

Yslow : « Add Expire headers »,
Pagespeed : « Leverage Browser Caching »

Ca joue beaucoup, ca compte beaucoup et, bonne nouvelle : c’est facile à faire !

Avec Apache, un petit tour dans la configuration, on ajoute le mod Expire et le mode Etags et on met les lignes de configurations suivantes :

LoadModule expires_module /usr/lib/apache2/modules/mod_expires.so
ExpiresActive On

FileETag MTime Size
<IfModule mod_expires.c>
 ExpiresActive on
 ExpiresByType image/jpg "access plus 6 months"
 ExpiresByType image/jpeg "access plus 6 months"
 ExpiresByType image/gif "access plus 6 months"
 ExpiresByType image/png "access plus 6 months"
 ExpiresByType text/ico "access plus 6 months"
 ExpiresByType image/ico "access plus 6 months"
 ExpiresByType image/icon "access plus 6 months"
 ExpiresByType image/x-icon "access plus 6 months"
 ExpiresByType application/x-shockwave-flash "modification plus 6 months"
 ExpiresByType text/css "access plus 1 week"
 ExpiresByType text/javascript "access plus 1 week"
 ExpiresByType text/html "modification plus 1 week"
 ExpiresByType text/xml "modification plus 2 hours"
 ExpiresByType image/vnd.microsoft.icon "access plus 6 months"
 ExpiresDefault "access plus 1 week"
 #Header set Cache-Control "max-age=86400, public"
</IfModule>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
 Header set Cache-Control "max-age=290304000, public"
</FilesMatch>

Voila, on a indiqué à Apache qu’on calculait la fraicheur d’une ressource en fonction de la date d’accès et de sa taille  (FilteEtag MTime  Size) et ensuite on lui a donné, par type de ressources, un temps d’expiration du cache. En résumé, quand votre navigateur récupère une donnée, il a le droit de la garder 6 mois si c’est un jpg par exemple, 1 semaine si c’est un javascript.

Evidemment, il faut le paramétrer en fonction de votre site et de la fréquence à laquelle vous mettez vos éléments à jour. Enfin, autre format, les 3 dernières lignes mettent une expiration à 480 semaines par défaut sur les ressources du type cité.

Si vous développez, il est fortement conseillé d’avoir une préproduction sur laquelle vous n’avez pas ces lignes, afin d’avoir le résultats de vos modifications instantanément et pas 480 semaines plus tard :)

Les deux plugins considèrent, à juste titre, que c’est un point important.

Yslow : Compress components with Gzip
Pagespeed : Enable Gzip compression

Il peut y avoir un peu débat sur celui-là, et encore. En gros le débat serait que sur un serveur dont le CPU est chargé, faire du Gzip en plus, ca aggrave le problème… Oui et non. Déjà, l’algorithme Zip est ultra rapide et optimisé, ca prends très peu de ressources à processeur moderne. En plus, servir plus vite c’est aussi diminuer sa charge de travail quelque part (on peut traiter plus de monde).

Coté débat, nous chez NBS, en matière de serveur E-commerce, on a tranché, c’est oui.

<IfModule mod_php5.c>
   php_flag zlib.output_compression on
</IfModule>
<IfModule mod_deflate.c>
 SetOutputFilter DEFLATE
 AddOutputFilterByType DEFLATE text/*
 DeflateFilterNote ratio
# Patch pour les navigateurs qui ne supportent pas
 BrowserMatch ^Mozilla/4 gzip-only-text/html
 BrowserMatch ^Mozilla/4\.0[678] no-gzip
 BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Humm compresser les images, ce n'est pas utile, loin de là
 SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
 SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
 SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
</IfModule>

Bon, c’est assez simple et explicite, on compresse tout ce qui est textuel, on désactive pour les vieux Mozilla 4 et les IE, on ne compresse pas les images.

Ca réduit bien les transferts mine de rien :

Type Uncompressed Compressed Win doc / HTML 44,5 14,8 67% js 25,1 10,4 59% js 57,2 19,7 66% js 0,9 0,4 56% js 90,4 29,8 67% js 17,4 8,1 53% css 30,9 6 81% économie 177,2 Ko 33%

C’est tangible et appréciable, ca économise de la bande passante des deux cotés, c’est tout bon !

Yslow : Minify Javascript and CSS
Yslow : Remove duplicate Javascript and CSS
Pagespeed : Combine external JavaScript
Pagespeed : Minify Javascript
Pagespeed : Removed unused CSS
Pagespeed : Minify CSS
Pagespeed : Combine external CSS

Okay, ca fait beaucoup d’un coup mais c ‘est la même logique derrière.

Le principe de fond : on regroupe les CSS et les Javascript en deux fichiers au lieu de 15, on les nettoye des bouts de codes ou expressions non utilisées, on les « minify » (on les densifie, on enlève les espaces et les choses inutiles).

L’idée est bonne mais ca fait un code peu maintenable, alors le conseil du pro : on fait son site sur la préproduction et on se fait un script bash de mise en production qui fait le ménage et compacte  le tout au moment de la mise en production. Comme cela, on a une préproduction qui reste efficace à maintenir avec des fichiers lisibles et un production optimisée.

Pour réaliser ces optimisations, deux possibilités voir même beaucoup plus. Pagespeed à la gentillesse de fournir certains fichiers optimisés directement depuis le plugin. On le sauve, on le met sur la production et hop, c’est finit. Pour optimiser ses CSS on a aussi le site cssoptimiser ou le cssclean. Bref ce ne sont pas les outils qui manquent. Pour les combiner, ca dépend de la technologie, sous Magento on a Fooman speedster, sous WordPress il y a CSS-JS-Booster de mémoire, parfois vous devrez tout simplement le faire à la main.

Evidemment enlever le code inutile des JS et/ou des CSS, c’est un impératif.

En réduisant le nombre de fichiers, on réduit le nombres de requêtes HTTP, on économise des transferts, de l’overhead, bref, là encore c’est du tout bon.

Personnellement, j’ai massivement utilisé les fichiers directement issus de Pagespeed quand il m’en proposait, c’est parfait.

La plupart du temps, ces modifications sont considéré comme importantes par les plugins.

Yslow : Avoid CSS expressions
Pagespeed : Use efficient CSS Selectors

J’ai regroupé ces deux là car ils touchent aux CSS et à leur optimisation. C’est un réel enjeu car les navigateurs se débrouillent plus ou moins bien avec les CSS et cela peut engendrer des délais du coté de l’utilisateur.

Yahoo Yslow nous dit d’éviter les expressions CSS, ce qui permet de changer dynamiquement un CSS si le browser est redimensionné par exemple. Le problème c’est que ces expressions sont appelées tout le temps, pendant la génération de l’affichage, au redimensionnement, parfois pendant le scrolling. Du coup ca charge un maximum le navigateur client. Ceci étant tous les frameworks ou presque évite ca comme la peste, vous ne devriez pas avoir de soucis avec. Sinon, il faut s’en passer et réécrire les portions du CSS qui utilisait ce système.

Google Pagespeed nous indique pour sa part qu’il est préférable d’utiliser des CSS selector efficaces. Ouiiiiiii, c’est à dire qu’on est pas contre, mais c’est quoi la différence entre un bon et un mauvais CSS selector ? C’est comme la chasse. Le bon chasseur, il voit… okay… on reprend.

Le but c’est d’éviter d’appliquer une clef de sélection peu efficace à un grand nombre d’éléments car cela pénalise les performances du navigateur. Mais cela va plus loin c’est plus une connaissance générale de la grammaire CSS qu’il faut avoir.

Par exemple, il vaut mieux :

  • utiliser une classe pour appliquer un style à de nombreux élements
  • privilégier le mécanisme d’héritage
  • utiliser des règles spécifiques
  • utiliser des class et ID plutot que des sélecteur de type Tag
  • éviter les qualificateurs redondants (ex : ID selectors par class et class selectors qualifiés par un tag selector)
  • éviter les sélecteurs descendants, surtout pour ceux qui pointe des ancêtres redondants (par exemple bidy ul li a {…} est un sélecteur redondant puisque tous les éléments sont des descendants de ce tag)
  • utiliser des sélecteurs de class plutot que des sélecteurs descendants
  • si vous devez utiliser un selecteur descendant, préférez un « child selector » qui nécessitera moins d’interprétation.
  • dans le cas d’IE, évitez les :hover pour les éléments qui ne sont pas des liens
  • si vous utilisez :hover sur des éléments qui ne sont pas des ancres, testez là sous IE 7 & 8 pour être sur que ca fonctionne.

Ok j’ai fais mon possible pour le traduire de l ‘anglais mais ce n’est pas mon domaine non plus alors si vous n’avez rien compris, allez à la source, ici. C’est un métier développeur Web, moi je vous le dis…

Yslow : Avoid HTTP 404 (Not Found) error
Yslow : Avoid URL redirects
Pagespeed : Avoid bad requests
Pagespeed : Minimize redirects

Ne riez pas et surtout vérifiez que vous n’en avez pas. Sur un site normal, en production normal, on ne doit pas tomber tous 3 objets sur un 404, ni même sur un 301 ou un 302. Qu’il y ait du rewriting temporairement pour maintenir une compatibilité, why not, que ce soit les 3/4 des URLs, encore plus vers un autre domaine, c’est  à proscrire.

Les 404, on s’en doute, c’est mal, d’autant plus que c’est surtout votre SEO qui va prendre. Mais les redirections prennent du RTT (pas des vacances, du Round Trip Time, des voyages allers/retours), ce qui ralentit l’ensemble.

Là aussi, c’est important, plus pour Pagespeed que pour Yslow qui tolère les 404 et dégrade moins la note.

Pour trouver vos 404, les google webmaster tools peuvent vous aider, les plugins, dont Firebug vous les donnent, des sites sont aussi disponibles pour vous aider à les trouver. Personnellement, j’utilise Firebug, ca me suffit. (oui ok, je n’utilise pas que Opera, c’est vrai)

Yslow : Do not scale images in HTML
Pagespeed : Specify image dimensions
Pagespeed : Optimize images
Pagespeed : served scaled images

Alors, là on est sur de la logique pure et dure…

Si je prend une image en 800×600, que je la pose sur le serveur et que je l’affice dans du 400×300, j’ai transféré une image 2 fois trop grosse pour rien (en fait 4 fois trop grosse, faite la multiplication). Donc je dois servir des images de la taille de ce qui va être affiché.

Je dois aussi spécifier les dimensions directement si possible (ca accélère le rendu des navigateurs) et bien sur, ne pas les redimensionner par du HTML, ce qui va à l’encontre de la précédente optimisation et aussi du fait qu’on a directement des images de la bonne taille.

Pour ce qui est d’optimiser les images sans pertes de qualité, le plugin fournit tout seul les versions optimisées… C’est pas le bonheur ca ?

Du bon sens on vous dit !

Yslow : Put CSS at the top
Pagespeed : Optimize the order of styles and scripts
Pagespeed : Put CSS in the document head

Le principe de fond c’est de charger les données dans l’ordre le plus efficient. Il faut que le début de la page puisse se charger le plus vite possible pour « visuellement occuper le terrain ». Si les images arrivent en dernier mais que tous les scripts sont chargés, le site est techniquement quasi fonctionnel mais inregardable.

Dans la première demi seconde, on doit donc passer les CSS pour « préparer le terrain », formater la page et commencer à afficher du texte et des images puis faire passer les images nécessaires puis enfin le Javascript.

Une fois la page chargée, c’est rare qu’un utilisateur clic instantanément, il prend le temps de la lire un minimum avant de cliquer, le Javascript peut donc arriver un peu en retard, de même s’il se charge d’une animation, on peut patienter 1 seconde de plus, c’est moins génant qu’une page blanche.

Bon ca tient de la bonne parole inapplicable parfois. Par exemple WordPress continue de charger les JS en début de page en version avant 3.0 (je n’ai pas vérifié sur la 3.0). Sous Magento, selon votre site, vous aurez peut être besoin de certains JS rapidement. Bref, ca se fait bien en général mais le cas particulier est légion.

Yslow : Reduce cookie size
Pagespeed : Minimize request size

Là encore, on essaye de réduire la données « inutilement » transférée.
L’idée c’est d’arrêter de transférer des cookies pour des ressources qui en ont aucun besoin, comme les images.

Chaque cookie par le navigateur transféré va consommer un peu de bande passante et de temps, pour rien et des millions de fois sur un an. Je n’ai pas compté combien cela peut faire en arbre sur un an mais le bilan carbon des cookies inutiles est lamentable. D’une manière générale, réduire la taille des requêtes, des cookies et leur nombre au minimum.

Alors Google et Yslow sont relativement d’accord, il faut servir les fichiers statiques depuis un domaines qui ne pose pas de cookies dans la transaction.

Yslow : Make fewer HTTP requests

Un croustillant celui-là. Ca à l’air anodin mais on pourrait faire un post rien que sur lui…

J’aurais bien fait mon lache et laissé ca de coté si ce n’était pas justifié mais là… On va devoir le traiter, c’est pas un détail.

Welcome to the CSS Sprites world !

Un sprite c’est quoi ? C’est globalement innofensif, c’est une image avec plein de morceau dans laquelle on découpe le bout dont on a besoin à un moment donné pour l’afficher. Oui, jusque là, ca à l’air innoffensif, attendez la suite.

Voici le CSS sprite du site NBS System, sur lequel Aymeric de l’agence Dnd (notre web agency) à sué sang et eau :

CSS sprite

Si on résume la chose, c’est une image qui se comporte comme une carte. Quand on a besoin d’un bout de celle-ci, onva taper aux coordonnées X/Y qui vont bien et on on obtient ce que l’on a demandé. L’intérêt c’est qu’au lieu d’aller chercher 50 icones, on prend directement une grosse image, on fait donc 49 transferts http de moins avec toute l’économie d’overhead que ca représente.

Du coup dans son CSS on change son image par :

.blog .widget .header{height:42px;background:url(/2010/07/images/sprite.png) no-repeat 3px -258px;}

Ca n’occupe aussi qu’une socket du navigateur au lieu de 50, ce qui part groupe de 10 impose 5 volées de récupération des données. (voir le paragraphe précédent et le leverage browser cache).

Donc tout cela est merveilleux sauf que notre site, il vient rarement avec des sprites tout fait. Le graphiste lui, il fait des icones, il les fournit à l’intégration qui fait un CSS et du HTML et du coté sprites, il considère plus que c’est des boissons gazeuses.

Alors comment on génère ses sprites ? Deux cas pour démarrer. Soit vous êtes fort chanceux et vous avez évitez la problématique des dégradés et des ombres et ca va considérablement faciliter votre travail. Soit vous avez un beau site mais vous allez y passer du temps à vos sprites…

On peut le faire à la main, avec amour, mais ca prend un peu de temps… Quoiqu’il arrive, il faut passer par le stade préprod / prod, comme pour les compilations de JS /CSS sinon c’est pas facile à maintenir.

Bonne nouvelles : Il existe des générateurs.
Mauvaise nouvelle : Ca marche pas toujours et pas dans tous les cas.

Trois bonnes pistes sérieuses :

Il existe aussi un truc super bien je pense qu’à utilisé Aymeric pour mon site mais ce petit cachotier n’a pas voulu me dire son nom… Peut être une trouvaille ou un développement maison, je vais le cuisiner, n’hésitez pas à envoyer pleinnnnnnn de mails à l’agence DnD jusqu’à ce qu’ils lachent l’info !

En complément : un article assez complet traduit en Français ici. Sous WordPress il y avait Csprite qui était pas mal mais qui n’est plus maintenu… Un autre article pas mal du tout ici.

Un moyen de générer vos CSS sprites avec Photoshop aussi ici.

A l’époque où je faisais une fixation sur les CSS sprites, j’avais trouvé un binaire opensource assez formidable qui permettait de commenter un CSS normal et de le compiler après coup en un CSS utilisant un Sprite, tout en générant le sprite au passage. Top. Mais j’ai perdu la bookmark pour le moment alors dès que je l’ai retrouvé, je corrige ce post, si vous voyez de quoi je parles, postez moi un petit commentaire.

Les derniers points

Yslow : Reduce the number of DOM elements

Les objets DOM (Document Object Model) nécessitent d’être tous chargés et parsés avant que les interprêtations Javascript (notamment) ne démarrent. Donc plus d’objets, plus de taille et donc de transfert, plus de mémoire utilisée, plus de temps de traitement, plus de délai avant que toute la page ne soit prête.

Réduite la taille du DOM est donc important dans une certaine mesure.

C’est d’autant plus vrai que les surfers ont de plus en plus de pages ouvertes en tabs, si tout le monde force en Javascript et pose des DOM énorment, les browsers se tapent des indigestions et … ca rame. C’est une question d’hygiène globale du browser quelque part :)

Yslow : Make favicon small & cacheable

Parfois, je n’aimerai pas être une mouche chez Yahoo. Celui qui a sortie celle-ci est légèrement « tatillon » quand même, voir dypterophile sodomite à tendance compulsive.

Bon la Favicon, en faire une petite, c’est pas trop dur. Optimisée non plus. Par contre, la rendre cachable, ca a été un poil énervant car Apache n’aimait pas le mime/type ico ou gif/jpg donc ca ne parait jamais dans le module mod_expire…

Très pénible jusqu’à ce que je trouve le type mime des favicons :

ExpiresByType image/vnd.microsoft.icon "access plus 6 months"

Et voila, c’est caché, d’un coup l’Internet va plus vite… ou pas.

Yslow :  Avoid AlphaImageLoader filter

Oui alors si certains sont encore assez téméraires pour tenter d’afficher des images transparentes, style png, dans un IE datant d’avant la version 7, je penses qu’il a d’autres priorité en terme d’optimisation que ce que je racontes là.  Les soins psychiatriques et une URL de download d’Opera, Firefox ou Chrome.

En gros si vous jouer avec de la gif / png transparente, IE ne gère pas ca très bien, au mieux ca le ralentit, parfois ca le fait planter, on a même vu des failles de sécurité grave sur ce sujet…

Donc forcément, il faut éviter de proposer une bouteille de vodka à un alchoolique, là c’est pareil, pas de png transparente pour IE.

Pagespeed : Minify HTML

Alors là, forcément, on s’affronte à un problème. Soit on a un framework (magento, drupal, wordpress etc…) qui fait ca tout seul, bref du php qui génère du HTML, soit on a fait le sien. La deuxième catégorie devient rare et dans la première, sans toucher au core, on a peut de moyen d’action en général.

La plupart des outils proposent un système de templates qu’on peut optimiser mais c’est parfois coton. A voir mais sur le site de NBS par exemple, pour 7,9 Ko à réduire, il me met un malus de 27% sur ce point et me dégrade la note à C… Abusif je trouve mais bon, soit.

Pagespeed : Specify a cache validator

L’idée c’est de donnée la méthode par laquelle on vérifie que la ressource est fraiche ou non. Sous Apache, ca se fait par l’intermédiaire du paramètre :

FileETag MTime Size

Là on précise à Apache qu’on décide que la ressource à changé si soit la date de modification à changée, soit la taille.

Pagespeed : Specify a Vary:Accept-Encoding header

Allez, devinez, c’est encore pour IE… Comme quoi on peut faire un produit ultra pourrit et l’imposer sur le marché. Ca on peut pas enlever ca à Microsoft. Je n’ai rien contre eux sur le fond mais sur le navigateur, ils ont vraiment pourrit le web.

Notre ami IE donc, ne support pas les Vary headers. Du coup, si il trouve dans le header d’une ressource autre chose que User-agent et Accept-encoding, il ne la cache pas… Dans le principe, totalement se passer du Vary header est le mieux.

Pagespeed : Specify a character set early

Dès qu’on précise le character set, le navigateur peut démarrer certaines interprêtation, dont Javascript. Avant il ne sait pas comment interpréter les données, il est donc conseillé de le faire vite. En fait rien ne s’oppose à le faire le plus tôt possible et tous les framework standard le font en général.

Yslow : Make JavaScript and CSS external

Avoir des fichiers séparés pour les CSS et les JS permet de les stocker en cache et de ne pas les transférer dans le HTML à chaque échange ou chaque page. Donc il vaut mieux ne pas mettre son JS et son CSS directement dans le code HTML et faire un include de fichiers externes, c’est beaucoup plus propre et simple.

Yslow : Make AJAX cacheable

En fait sur ce point, ce qu’il faut comprendre derrière le laconique « Make Ajax Cacheable » c’est « Make Ajax requests results cacheable ».

Faire un requête ajax en background pour fluidifier le trafic c’est top mais ne pas stocker la ressource récupérer en cache c’est gacher ce premier transfert, reconsommer de la bande passante, participer activement à la déforestation des ours en pologne, bref, c’est le mal.

Yslow : Use GET for AJAX requests

oUn Get est plus valable qu’un POST car avec un GET on transfert le headers et les données en même temps, ca évite un transfert inutile. Cependant, si vous avez des requêtes un peu longues, IE n’accepte pas les requêtes de plus de 2Ko. Qui a dit « encore IE » ? Pas de dénigrement, on est là pour progresser, tous ensemble, même les browsers qui partent avec de sérieux handicapes de conception.

Les vrais pervers tenteront donc de transférer en GET, des images PNG transparentes de plus de 2 Ko, en laissant le vary-header avec un IE. Là normalement, on a tout bon pour avoir un beau blue screen :)

Yslow : Reduce DNS lookups
Pagespeed : Minimize DNS lookups

Une résolution DNS prends entre 10 et 100 ms en gros. Pendant ce temps, le browser doit attendre que la résolution se fasse. Si on peut lui éviter d’avoir à résoudre beaucoup de noms et/ou hostnames différents, c’est plutot positif. Cela va aussi à l’encontre des multiplication hostname sur un domaine différents pour paralléliser les download quelque part.

Une fois résolu, la réponse reste en général dans un cache local, on peut donc décemment imaginer que multiplier les hostnames (par exemple 4 statics) est correctement rentable et n’impose pas trop de lookups.

Pagespeed : Remove query strings from static resources

Typiquement ca :

http://www.nbs-system.com/wp-includes/js/jquery/jquery.js?ver=1.3.2

La paramètre « ?ver=1.3.2″ empèche certains proxys (dont Squid notamment) de cacher la ressource.

Pagespeed : Serve resources from a consistent URL

Pour les ressources partagées sur de multiples pages ou sites, il vaut mieux que la référence se fasse par rapport à une unique URL.
Cela permet notamment de ne pas renvoyer de fichier depuis plusieurs endroits différents, provocant des ns lookups d’ailleurs. L’exemple donné par Google c’est que si monsite.exemple.com et tonsite.exemple.com utilise le même JS, autant qu’il soit servit directement depuis un seul des deux sites, comme ca il sera déjà en cache dans le browser quand on ira de l’un à l’autre.

Autres optimisations

D’une manière général, il y a beaucoup d’autres optimisations, plus systèmes celles-ci, j’en parlerai prochainement, peut être directement sur le blog de NBS System. Les reverses proxy, les compilations de noyaux, les optimisations de .htaccess etc…

Mais bon, on a déjà de quoi s’amuser un peu là non ? :)

Je paye ma tournée au premier qui nous sort son site en A/A, ensuite celui qui nous passe un site Magento en A/A et pareil pour celui qui fait 100%/100% (sans tricher). Ca fera trois tournées mais elles seront largement méritées, chacunes d’elles !

PS : La doc de Google sur ces sujets est excellente, n’hésitez pas à la consulter.

Vous pouvez également lire l’article d’Arnaud ici : http://bit.ly/ban1Pm

écrit par Philippe Humeau \\ tags: , , , ,

juil 01

Introduction

Q : Pourquoi maitriser le shell ?

R : Parce que ca fait gagner un temps fou, que c’est propre, pêrmbeau, systématique, rapide et quasi illimité en terme de possibilités.

Merci à Adrien Urban de NBS System pour la création de ce support. Il vous sera peut être utile pour dédoubloner un fichier de clients ou de commandes, peut être pour faire certains tris dans vos bases ou fichiers. Les hébergeurs comme NBS System ou d’autres fournissent des accès shell limités, mais qui permettent d’utiliser ces outils (ou une partie d’entre eux).

Ces outils seront d’ailleurs principalement utiles aux développeurs.

UNIX & son copain Posix, leurs vies, leurs œuvres

Voici un cour de shell bash/unix pour les gens qui ne sont pas à l’aise avec, essentiellement les développeurs. Ca fait gagner un temps fou.

C’est volontairement simplifié, le but c’est pas de faire des DEV des SR, c’est juste un manuel de survie, donc les SRS qui balanceront des « ouais mais en fait c’est pas tout à fait ca » :

cat /dev/urandom > /dev/tty_du_srs_en_question 2>&1 &

Il est important de noter que la première partie part du principe de base que les noms/mots/autres sont sans espace ou autres caractères spéciaux. Cet aspect est présente après le reste.

Les concepts de base

Les flux particuliers :

stdin (entrée standard) : ce n’est pas une commande, c’est un FD, file desciptor, spécial qui est le flux d’entrée. C’est le fd 0.
stdout (sortie standard) : celle que l’on utilise 90% du temps, FD, en résumé ce qui s’affiche en retour d’une commande. c’est le fd 1.
stderr : sortie d’erreur c’est le fd 2.

on en reparle après.

Les redirections :

| : celui qu’on appel « pipe » le plus régulièrement, permet de joindre la sortie standard d’une command à l’entrée standard d’une autre.
< : prend son entrée standard à partir fichier
> : redirige la sortie standard vers autre chose, un fichier par exemple ou /dev/null (dans l’espace)
(on peut préciser par exemple 2>&1 qui redirige la sortie d’erreur (2) vers la sortie standard (1))
>> : redirige en mode append, on ajoute les données à la fin du fichiers existant.

Cas concrets :

ls > toto.txt : redirige le contenu de la sortie de ls (les fichiers listés) dans le fichiers toto.txt
ls >> toto.txt : idem sauf que ca ajoute à la fin du fichier. WARNING la première (ls>toto.txt) détruit toto.txt si il existe déjà.
ls > /dev/null : renvoi la liste des fichiers dans l’espace (/dev/null = grosse poubelle géante de taille infinie)
ls | more : liste les fichiers et envoi le résultat à la commande more qui affichera page par page.
less < toto.txt : éjectera toto.txt dans l’entrée standard de less qui sortira un résultat page par page. (ceci dit ca revient au meme que faire directement less toto.txt mais j’avais pas d’exemple en tete)

Wilcards :

Comme sous Windows, on peut utiliser des jokers ou wildcards :

ls * affiche tous les fichiers (ceci dit c’est le comportement par défaut)
ls t?t?.txt : listera titi.txt toto.txt et tutu.txt enfin remplacera ? à la position voulu par n’importe quel lettre.
ls t*.txt : affichera tous les fichiers commencant par t et finissant par .txt
ls tata[1-3].txt affichera tous les fichiers commencant par tata suivi du chiffre 1, 2 ou 3 puis finissant par .txt
ls t[a-i]* affichera tous les fichiers commencant par t, suivi d’une lettre entre a et i
bien sur on combien à l’infini : ls t[1-3]abc?zz.t?t est donc une commande recevable

WARNING : Unix est TOUJOURS « case sensitive ». a n’est pas égal à A.
WARNING : Contrairement a Windows, le remplacement des wildcards est traité directement par le shell, indépendamment du programme appelé. Le programme reçoit donc directement la liste des fichiers qui correspondent, même s’il s’attendait a recevoir une expression qui contenait ces caractères la.

ls T* et ls t* retourneront donc des résultats différents ! C’est une règle valable pour TOUTES les commandes.
INFO : TAB complète dans le shell quand c’est possible, sinon propose des possibilités.

Les amis (commandes) :

ls : liste les fichiers et répertoire

ls liste les fichiers du répertoire courant
ls -l la même chose en mode colonne.
ls -l –color colore les fichiers en fonction de leurs droits et types
-r : récursif

cat : équivalent de type sous windows

cat toto.txt, affiche le contenu de toto.txt
cat toto.txt titi.txt > tutu.txt, concatene toto et titi dans le fichier tutu.txt
cat toto.txt titi.txt >> tutu.txt, concatene toto et titi à la fin du fichier tutu.txt
cat * : affiche le contenu de tous les fichiers du répertoire courant. donc cat * > tutu.txt, copie tout dans tutu.txt

On peut aussi s’en service pour écrire dans un fichier :

cat > test.txt, redirigera donc l’entrée standard vers test.txt, on tape ce qu’on veut au clavier puis à la fin on tape CTRL+d ce qui interrompt la saisie et stock le contenu dans le fichier. Très pratique pour creer un fichier rapidement. Si on veut écrire à la fin d’un fichier existant : cat >> test.txt

cut : coupe ce que l’on récupère en fonction d’un délimiteur précis

imaginons que le fichier toto.txt contienne :
abc.def.ghi test 123
zzz.aaa:bbb_456

pour afficher uniquement un des blocs séparé par un des séparateurs (en l’occurence . ou  »  » ou _) : cat toto.txt | cut -f 1 -d « . »

donnera en sortie :
abc
zzz
-f c’est le champs (field) et -d le séparateur.

donc pour obtenir uniquement 456 :
cat toto.txt | cut -f 3 -d « _ » par contre la ligne « abc.def.ghi test 123″ ne contenant pas d’underscore, n’a pas de troisièmes champs… et seule une ligne vide sera affiché, mais on verra plus loin comment éviter ca.

grep : affiche la pattern recherchée parmis des fichiers ou un flux

ls -l | grep toto.txt ne retournera que les lignes avec toto.txt parmis tout le résultat du ls.

cat toto.txt | grep « henri » n’affichera que les lignes du fichier toto.txt qui contiennent « henri »

cat toto.txt | grep « henri » | grep -v « IV » n’affichera que les lignes du fichier toto.txt qui contiennent « henri » mais pas celle contenant « IV »

le -v exclue le mot qui suit.
l’option -r fait un grep récursif,
l’option -i ignore la case (plus de distinction majuscule/minuscules),
l’option -n  affiche egalement les numeros des lignes : grep -nri henri . | grep -v « IV »

sortira tous henri de tous les fichiers du répertoire courant et des sous répertoire, peut importe que ce soit henri ou HENRI ou HeNrI, sauf les ligne contenant également « IV ». Chaque ligne aura le nom du fichier, le numero de la ligne, ainsi que le contenu de la ligne en question.

les options -A et -B sont pratique, c’est After et Before.

donc grep -A 2 -B 3 henri toto.txt sortira toutes lignes avec henri mais aussi les 3 lignes précédentes et les 2 lignes suivantes.

find : trouve des fichiers à partir d’un chemin précis et permet d’executer une commande dessus

find a plein plein d’options, je n’en montrerai ici que deux qui sont classiques et utiles
find . -name « *.txt » -print : trouvera récursivement tous les fichiers avec l’extension .txt à partir du répertoire courant « . »
find . -name « *.txt » -exec rm ‘{}’ \;

bon celle là elle est un peu funky en terme de synthaxe, mais :

le {} désign la liste de ce qui a été retourné par find et le -exec y applique une commande. En l’occurence rm qui efface les fichiers.

donc cette ligne de commande trouvera à partir du répertoire courant et dans tous les sous répertoire les fichiers avec extensions .txt, et les effacera.

find . -exec grep -q www.nbs.fr ‘{}’ \; -print

Afficher tous les fichiers contenant www.nbs.fr.On pourra ensuite y appliquer un autre traitement, par exemple avec sed pour remplacer www.nbs.fr automatiquement par www.nbs-system.com.

Note, il existe aussi l’option -iname qui fait comme -name, mais sans tenir compte de la case des noms de fichier.

locate : trouve des fichiers à partir d’une DB générée la nuit

le système linux, en général, fait tourner régulièrement un programme qui met à jour le contenu d’une base stockant tous les fichiers de toutes les partitions.

l’avantage par rapport à find c’est qu’au lieu de chercher en live, on a un « cache » donc ca va beaucoup plus vite.

locate *.txt donnera la localisation de tous les fichiers .txt partout sur le système instantannément sans faire la recherche. Le défaut c’est que si vous avez un nouveau fichier depuis le dernier uptade de la base, il ne sera pas montré. Pour forcer l’update de la base en live : updatedb

Note: afin d’eviter certain probleme de droits sur la base, il est conseille de ne pas lancer updatedb a la main directement. Le script (emplacement sous debian) /etc/cron.daily/find le lance avec les bons arguments.

sort : permet de trier un flux

Trie les lignes…

cat dictionnaire.txt | sort > dictionnaire_trié.txt
cela va trier par ordre alphabétique le dictionnaire « dictionnaire.txt » et écrire le résultat dans dictionnaire_trié.txt
-r ca le fera à l’envers (reverse), la commande est simple mais elle a pas mal d’options différentes à apprécier :)

uniq : permet de rendre unique les données qui sorte d’un flux

Supprime des lignes identiques qui se suivent…

cat fichier_plein_de_doublon.txt | sort |
uniq > fichier_dédoublonné_et_classé.txt

si le fichier contient :
titi
titi
toto
tutu
tata
tutu

ca donnera :
tata
titi
toto
tutu

sed : permet de remplacer des strings par d’autres dans un flux ou des fichiers

sed est un couteau suisse du traitement des flux. Il est capable de faire énormément de choses. Nous allons voir une toute petite partie de sed, la partie la plus utilisée.
sed permet surtout de remplacer une chaine par une autre
sed s/www.nbs.fr/www.nbs-system.com/g index.html

Affiche le contenu de index.html en remplacant toute les occurrence de www.nbs.fr par www.nbs-system.com

La syntaxe de base est s/chaine d’origine/chaine a mettre/options ou :
-        Le s au debut signifie substitution
-        Le / qui separe les differentes partie peux etre en fait n’importe quel caractere. Il faut le prefixer d’un backslash (\) si on souhaite utiliser le caractere en question ailleur.
-        La chaine d’origine est en fait une regex, tout comme les recherches avec grep.
-        Les options peuvent contenir:

o       g – remplace toutes les occurrences sur une meme ligne.
o       i -Cela permet de faire une recherché de chaine sans tenir compte de la case
o       p – affiche la ligne s’il y a eu une substitution

On a un code dans lequel il y a des requetes SQL qui n’ont pas tenu compte de la case des noms de tables ou de champs (mysql sous windows a tendance a s’en foutre de la case) et on veux le faire passer sous unix.

Dans un premier temps, on affiche uniquement les lignes qui changent (option -n pour ne pas afficher par defaut, et le p de la substitution), de facon a verifier que cela ne fait pas de betises :

sed -n ‘s/MaJoLiE_tAbLe/majolie_table/igp’ fichier.php

Une fois que la substitution s’effectue correctement :

mv fichier.php fichier.php.old &&
sed ‘s/MaJoLiE_tAbLe/majolie_table/ig’ fichier.php.old > fichier.php

A noter que l’on a plus ni le -n, li le p, de façon a bien afficher tout le fichier d’origine.

Les regex, explications complete :

  • X                 un caractere de base correspond a lui-meme
  • .                 le point correspond a n’importe quel caractere (comme ? en shell)
  • ^                 S’il est place au debut correspond au debut de ligne.
  • $                 s’il est place en fin, correspond a la fin de ligne
  • [aoeuiA-Z]   Les classes de caracteres. N’importe quel caractere qui correspond (voyelle en misucule, ou une majuscule)
  • [^0-9]         un caractere qui n’est PAS un chiffre
  • [0-9]*         * correspond a 0-n fois ce qui precede. Ici, rien ou une suite de chiffres.
  • S\?              \? Correspond a 0 ou une fois ce qui precede. Ici, rien ou un S.
  • \(abc\)        Les \(…\) permettent simplement de faire un groupe.

Par exemple : \(ta\)\* correspond a rien, ou une suite de ta.
-        X\|Y            correspondra X ou Y. Attention, il faut utiliser des () pour limiter l’etendu.

Dans la chaine de remplacement, le caractere & sera remplace par l’ensemble de la chaine d’origine (pratique pour la conserver, mais la commenter). D’autre part, \n ou n est un chiffre sera remplace par le texte correspondant au neme groupe (les parentheses).

Des exemples concrets :

Afficher toute les lignes commençant par une lettre minuscule
grep ‘^[a-z]‘
Ajouter un premier argument a toute les appels d’une fonction : sed ‘s/ma fonction(/&1, /g’

Commenter tous les appels a la fonction prettylog (ne doit pas avoir de () dans les arguments:
sed ‘s#prettylog([^()]*)#/* & */#g’

remplacer les fonction log_database(, log_engine( par log(« database »,  ou log(« engine », :
sed ‘s/log_\(database\|engine\)(/log(« \1″, /g’

Bien evidement, on reste dans l’optique du : sed ‘s/…/…/g’ fichier1 > fichier2

tail : permet de voir la fin d’un fichier

tail toto.txt, affiche (par défaut) les 10 dernières lignes du fichier toto.txt

si vous avez à faire à un fichier qui change et qui grossit (genre fichier de log) et que vous voulez le suivre en continu :

tail -f toto.log : la commande ne s’arretera pas et continuera à vous montrer le fichier au fur et à mesure qu’il grossit.

head : permet de voir le début d’un fichier

comme tail mais pour montrer les lignes du début du fichier. (pas la peine d’essayer head -f)

chmod : permet de changer les droits d’un fichier ou répertoire

les droits sont cumulables, il existe read, write, execute. On va simplifier tout ca, mais il existe trois groupes à qui appliquer ces droits : le propriétaire du fichier, le groupe du fichier (généralement le groupe auquel appartient le propriétaire du fichier (voir chown)) et le propriétaire du fichier en lui même.

read vaut 4
write vaut 2
execute vaut 1

  • chmod 400 toto.txt donne les droits en lecture à root. chmod 444 toto.txt donne les droits en lecture à tout le monde.
  • chmod 555 c’est chmod 444 + chmod 111 soit les droits en lecture et en éxecution à tout le monde.
  • chmod 777 c’est lecture, écriture, exécution à tout le monde. (4+2+1 pour le propriétaire, le groupe et les autres).
  • chmod 000 enlève tous les droits à un fichier (notez que root bypass de toute façon ces droits)

Droits généralement utilisé :

600 – fichier normal, en lecture/ecriture uniquement pour son proprietaire
644 – pareil, et lecture pour les autres
700 – executable, en lecture/ecriture/execution uniquement pour son proprietaire
755 – pareil, et lecture/execution pour les autres

Note : un repertoire doit etre executable pour pouvoir aller dedans

Les droits peuvent egalement etre donner sous forme de modifications.

u – user
g – group
o – other
a – all

r – read
w – write
x – execute
X – execute si déjà present quelque part

chmod u+rw,go-w+rX

Ajoute les droits de lecture ecriture au proprietaire, enleve les droits d’ecriture au groupe et aux autres, leur donne le droit de lecture, ainsi que le droit d’execution si c’est un executable.

chown : permet de changer le proriétaire d’un fichier ou répertoire

Pour changer le proprietaire d’un fichier, il est necessaire d’etre root.

chown philippe:www-data toto.txt donne la propriété du fichier à philippe et l’affilie au groupe www-data.
chown xxx:yyy fichiers : xxx = user, yyy = groupe.

Donc si je veux donner la propriété et les droits à philippe et à tous les membres du groupe admin :
chown philippe:admin toto.txt

et avec un chmod 640 toto.txt je donne tous les droits de lecture/ecriture à philippe, la lecture au groupe admin, et aucun droits aux autres.

WARNING : un fichier en 777 est dangereux, tout le monde peut y écrire, a éviter en Web.
le truc classique en web qui passe (presque) dans tous les cas :
chown -R www-data.www-data *
chmod -R go-w+rX *

le -R dans ces commandes les rends récursives sur tous les fichiers et sous répertoires.

touch

touch crée un fichier vide s’il n’exite pas et change la date / heure à l’heure actuel si il existe.
touch toto.txt crée un fichier de toto.txt de 0 octets s’il n’existe pas et lui donne date/heure
au moment auquel commande est lancé s’il existe. Il existe d’autres options pour fixer une
date/heure précise entre autre.

mv / rm :

mv : c’est move.
mv toto.txt titi.txt renome toto.txt en titi.txt (attention, l’écrase s’il existe)

Note : mv permet egalement de renomer un repertoire, ou de deplacer plusieurs fichiers/repertoire vers un repertoire de destination.

rm toto.txt : efface le fichier toto.txt.
rm -r le fait récursivement. rm -f force l’effacement sans poser de question…

comme dans la plupart des commandes, on peut cumuler les switchs :

rm -rf * : efface récursivement tous les fichiers et répertoires situé sous le répertoire courant sans poser de question.

WARNING : guess why…

Lorsque vous utilisez mv ou rm de facon interactive, et que vous n’etes pas certain a 200% de votre ligne de commande (par exemple si c’est un via des variables, ou de l’expansion, …), utilisez l’options -i. Elle vous demandera confirmation avant d’écraser de façon irrémédiable des informations.

less / more :

Comme le dit régulièrement notre directeur technique, less can more. Donc less peut faire tout ce que fait more et plus.

Techniquement c’est bien aussi de connaitre more qui est en général plus utilisé dans les scripts ou les unix plus anciens (la ou il n’y a pas less)

less toto.txt va afficher le contenu (si il est en ascii, sinon en binaire il met un warning) du fichier toto.txt et bien sur ca se pipe :

grep henri toto.txt | less

pendant l’execution de more ou less vous pouvez appuyez sur / vous allez pouvoir rechercher dans le texte le mot qui vous intéresse.

echo :

echo affiche ce qui est en paramètre. echo est utile pour signaler quelque chose à l’utilisateur dans un script par exemple

(echo « Hello World »). echo peut aussi afficher le contenu d’une variable par exemple : echo $a ou encore se substituer à un ls en faisant echo * ou même à écrire dans un fichier echo YO > toto.txt.

la commande accepte beaucoup de switch, voir le manuel. (man echo)

man : les manuels des commandes

man ls
man awk (il fait mal à la tête celui la)

etc…

souvent sont aussi donné des références à d’autre man en pied de page du man.

par ailleurs man -k keyword recherche les pages de manuel qui parle de « keyword ».

Il existe plusieurs catégorie de man (1 à 8) de mémoire qui sont plus ou moins spécialisés. Généralement les commandes sont en man 1 (ce qui est le mode par défaut).

si vous voulez le man plus orienté programmation C d’une chose précise : man 3 sigpause man 2 c’est plus orienté sur les syscall. Bref vous c’est plutot le 1 donc man [commande].

Par défaut man vous affiche son contenu avec un pager (less), pendant l’exécution de man, vous pouvez donc appuyez sur / vous allez pouvoir rechercher dans le texte le mot qui vous intéresse également.

sudo / su : des commandes qui permettent de passer ou de lancer des commande en tant que Super Utilisateur (root quoi)

Arreter apache… : sudo apachectl stop

va prendre les droits root temporairement pour stopper apache, si vous êtes habitilité par le fichier sudoers à la lancer cette commande.

si c’est le cas, il vous suffit de retaper le mot de passe de votre utilisateurs sur le système pour lancer la commande.
su : permet de passer root en tapant le mot de passe du compte root de la machine.
sudo -s : permet de passer root, sans connaitre le mot de passe de root, si on y est autorisé par le fichier sudoers.

WARNING : root à TOUS les droits sans aucune limite de portée. Si vous demander au système d’écrire de la merde dans la ram, il le fera sans broncher, tout comme si vous lui demander de s’effacer lui même.

wc : compte les caractères, lignes ou les mots

wc -l toto.txt compte le nombre de ligne du fichier toto.txt
cat toto.txt | wc -l ca revient au même.
-m ou -c pour les charactères
-w pour les mots

awk : permet d’appliquer un traitement avancé de formatage à un flux ou d’un fichier

awk est un langage avec un synthaxe à part entière, pas simple de surcroit. C’est très puissant et très pénible. Personnellement je m’en sers que pour une chose, reformater une sortie standard.

Pour l’exemple, un fichier contenant :

tcpmux         1/tcp # TCP port service multiplexer
echo           7/tcp
echo           7/udp

les séparateurs de colonnes sont des tabulations (il y en a 2)… La joie…

Je veux afficher la colonne 1 et la colonne 3 en admettant que mes séparateurs sont des tabulations :

cat toto.txt | awk -F « \t » ‘{ print $1 $3 }’

le -F « \t » c’est pour dire que tabulation est le séparateur de champs. print $1 $3 affiche la premiere valeur et la 3°, selon ce séparateur.

bon le résultat est que j’ai :
tcpmux1/tcp
echo7/tcp
echo7/udp

si je veux y ajouter des espaces pour rendre ca lisible :

cat toto.txt | awk -F « \t » ‘{ print $1 «       » $3 }’

Évidemment, ca peut se séparer selon un autre séparateur, par exemple le « / » :

cat toto.txt | awk -F « / » ‘{ print $1 «      » $2 }’

retour de la commande :

tcpmux         1    tcp    # TCP port service multiplexer
echo           7    tcp
echo           7    udp

il a enlevé le séparateur au passage et l’a remplacé par 4 espaces.

Pour le moment c’est flou mais le jour où vous en aurez besoin, awk vous sauvera la vie ;-)

Dans le doute, man [nom de la commande]. Tous les admins lisent les mans, meme les SR/CQ expérimentés. Ca sert à rien de connaitre par coeur tous les switchs (options) d’une commande, le man est donc une référence régulièrement utilisée par tous.

Bash – gestion des commandes :

& : laisse un processus s’executer en tache de fond, et vous permet de continuer a travailler sur le shell

Genre find ca peut être long, donc mettre un find qui redirige son résultat dans un fichier et le laisser en tache de fond c’est parfois une bonne idée :

find /var/www -name ‘*.php’ > ~/find.log 2> ~/find.err &
fg / bg : met un processus en foreground (fg) ou background (bg).
fg %n : n étant le numéro du job si vous avez mis plusieurs jobs en background.
jobs : liste les jobs (en background ou suspendu)

Lorsque vous etes en train d’executer une commande, Contrôle-Z la suspend.
Foreground – repasse une commande suspendu ou en background au premier plan
Background – pareil que de l’avoir lancee avec &, la tache continue en fond.

ps aux : liste tous les processus

Une commande a un code de sortie. Ce code est presque toujours correspondant a la facon dont le processus c’est termine. Si ca c’est bien passé c’est 0 sinon c’est autre chose.

&& : permet de linker deux commandes, et de n’exécuter la deuxième que si la première a échouée.

rm toto.txt && echo « ok fichier effacé »

« ok fichier effacé » s’affichera que si le fichier toto.txt a été effacé.

|| : Inversement, ||  permet de n’executer la deuxieme partie que si la premiere n’a pas fonctionner.

rm toto.txt || echo « Erreur lors de la supression du fichier »

; : le point virgule est un délimiteur permettant d’enchainer les commandes mais sans vérifier que le retour de la précédente s’est bien passé. ls *; echo titi > toto.txt; cat toto.txt enchaine les 3 commandes.

export : plusieurs fonction, mais on va surtout utiliser export pour exporter une variable. (La rendre visible pour des programmes que vous lanceriez apres)

export a= »toto » (stock toto dans a, et exporte a)
ou export a=’ls’   (stock le retour stdout de la commande ls dans a et exporte a)

‘commande’ : c’est la quote (‘) inverse (alt-gr 7 sur un azerty, la touche au dessus de tab sur un qwerty). backquoté une commande ou expression force son évaluation, et utilise sa sortie standard a l’endroit de la commande.

a=ls stock ls dans a. Si on veut stocker le résultat d’une commande ls dans a :
a=’ls’

Quoting

\ : n’interprête pas le caractère suivant le backslash. utile pour plein de truc.

exemple : « cd mon truc » ne marche pas. Il faut taper « cd mon\ truc » pour que l’espace entre mon et truc ne soit pas perçu par la commande comme étant deux paramètre distincts.

Il est également possible d’utiliser, de façon complètement équivalente :

cd mon\ truc
cd mon » « truc
cd « mon truc »
cd ‘mon truc’
cd mon’ truc’ »

«  : double quotes. Entre double quotes, il n’y a pas de separation de mot, les variables ($a), double quotes, backquotes et backslash sont interprété. A utiliser de facon generale lorsque l’on utilise des variables, et que l’on ne veux pas avoir de separation de mot, ou de risque d’expansion. Essayez les commandes suivantes :

a=*
echo $a
echo « $a »

‘ : simple quotes. Entre simple quotes RIEN n’est interprete. Un autre simple quote met fin a la sequence sequence. Il n’y a AUCUN moyen de backslashe un simple quote dedans. Tres pratique quand on veux une chaine avec plein de double quotes, $ et autre qui reste exactement tel quel.

for : super important. Un exemple concret vaut mieux qu’un long discour. Je veux appliquer un traitement à tous les fichiers .txt du répertoire courant pour les renommer en .old :

for i in *.txt ; do mv -i « $i » « $i.old » ; done

on prend une variable i pour faire une boucle sur les mots que represente * (l’ensemble des fichiers du repertoire), ensuite on applique (do) avec $i qui est en fait une des valeurs de *, et on finit par done.

TRESSSS pratique…

Autre cas, d’utilisation : for ((i=0 ; i < 10 ; ++i)) ; { echo $i ; }

Affiche les chiffres.

Generalites

/etc/init.d/ :

c’est ici qu’on stock les scripts lançant ou stoppant les démons du système.

Par exemple sur apache :
/etc/init.d/apache start
/etc/init.d/apache stop
/etc/init.d/apache restart

pareil pour mysql et plein d’autres démons, la plupart accept stop, start, restart.

généralités :

–help donne de l’aide sur une commande
-v : en général rend la commande « verbose » (affiche plus d’info sur son execution)
-q : en général rend la commande quiet

C’est quasi toujours vrai pour –help pour -v et -q c’est fréquent mais pas systématique.

faire un script :

un script bash commence toujours par (sur sa premiere ligne) :

#! /bin/bash

C’est ce qui permet au système de savoir qu’il faut utiliser bash pour interpreter ce script.

un script de base :

cat > script_de_base.sh (on met « .sh » à la fin en général pour savoir que c’est un script bash mais c’est pas obligatoire)

#!/bin/bash

echo $1

(Contrôle-D pour finir)

ensuite on le rend exécutable: chmod +x script_de_base.sh
puis pour le lancer : ./script_de_base.sh toto

vous noterez le « ./ » au début c’est pour signaler qu’on lance le fichier depuis le répertoire courant « . » puisque, par sécurité, le répertoire courant n’est pas intégré à la variable PATH.

ca affichera $1 qui vaut en l’occurrence toto puisque $1 $2 $3 $4 etc… sont les paramètres dans l’ordre sur la ligne de commande, $0 étant le nom du programme en lui même, ici : ./script_de_base.sh

pour se faciliter la vie on met en général le path standard des binaires utiles dans le début du script :

PATH=/bin:/usr/bin:/sbin:/usr/sbin

et puis un commentaire sur ce qu’il fait le machin, c’est mieux pour les copains et les lendemains de cuites.

Quelques exemple de synthaxes un peu évoluées et utiles :

grep die *.php | grep -v « // » | grep -v « /\* » | grep -v « \*/ »

ca devrait vous retourner le nom des fichier php, avec le contenu après un : qui contienne un die mais qui n’est pas commenté (sur la ligne elle-meme).

si vous voulez tous les effacer :

Pour ne garder que les fichiers qui correspondent

grep die *.php | grep -v « // » | grep -v « /* » | grep -v « */ » |
cut -f 1 -d « : »

donc si on assigne le contenu de cette commande à une variable et qu’on fait une boucle dessus :

a=’grep die *.php | grep die | grep -v « // » | grep -v « /* » | grep -v « */ » |
cut -f 1 -d « : »‘

On commence par verifier qu’on a le bon resultat escompter avec un echo, histoire de ne pas effacer n’importe quoi : for i in $a; do echo $i; done

une fois que c’est bon : for i in $a; do rm -f $i; done

sinon ca passait bien aussi avec un find :-)

Allez, une autre, on reformat un CSV :

le contenu original du fichier ORIGINAL.CSV :

toto:1:2222:toto is a star:20
titi:2:2222:bruno en str:4
tititt:2:2222:bruno en str:4
tutu:3:1122:denis b:8
tata:4:1112:thibault loves printers:12
tata2:4:1112:thibault loves printers:12
tata42:4:1112:thibault loves printers:12

on veut le sortir avec des séparateur qui soit des ; et pas des : et seuls les champs 1 et 5 nous intéressent et seul les tata* et titi* nous sont utiles :

Avec awk :
cat ORIGINAL.CSV | awk -F « : » ‘{ print $1 « ; »  $5 }’ | grep t[ai]t[ai] > FINAL.CSV

Pareil, mais avec cut :
cat ORIGINAL.CSV | cut -d: -f 1,5 –output-delimiter « ; » | grep t[ai]t[ai] > FINAL.CSV

Redémarrer apache et mysql en une ligne en ignorant l’affichage normal et d’erreur (pas conseillé), mais au moins en ne démarrant mysql que si apache s’est bien lancé :

{ /etc/init.d/apache restart && /etc/init.d/mysql restart ; } > /dev/null 2>&1

écrit par Philippe Humeau \\ tags: ,