Blog de Marti

Hamlet Batista publie un billet fort intéressant (et utile) concernant la façon dont Google traite le texte des liens externes. Apparemment, dans le but de mettre fin au fameux Google bombing, les textes répétitifs de liens externes pénalisent le site visé. Ainsi, pour être bien classé pour le mot A, il devient préférable d'utiliser des mots clés plus variés dans le texte des liens externes ("A", "A B", "C A", etc.) plutôt que toujours "A", ce qui pour Google est perçu comme une tentative manifeste de manipuler ses résultats.

Il y a probablement plus d'une centaine de moteurs de template en PHP (le plus connue étant Smarty). Les templates sont un bon concept : garder la présentation dans un fichier, et la logique applicative dans un autre (et le stockage dans un troisième endroit : la base de donnée). Utiliser un langage simple et facile pour les templates de sorte que n'importe quel infographiste ou amateur de HTML pourra s'en servir, et laisser les aspects complexes de la programmation à quelque chose et quelqu'un d'autre. Oui, les templates sont utiles avec Java, C#, Python ou n'importe quel langage. Sauf PHP.

Pourquoi donc ? Voilà un indice : PHP vient de "Hypertext Preprocessor". C'est à dire en clair un système de template HTML. Et de fait, PHP est bien un langage de template : il a été créé pour être simple et facile à utiliser, et pour permettre d'insérer directement son code dans une page HTML pour en contrôler l'aspect. Alors tout ces systèmes de template pour PHP ne font au final qu'un langage de template écrit avec un autre langage de template. Doh !

Prenons par exemple quelques lignes d'un template Smarty :

{$title}
{include file='header.tpl'}
{if $a}
Hello
{else}
Bye
{/if}

Et la même chose en PHP :

<?php
echo($title);
include('header.php');
if ($a)
echo('Hello');
else
echo('Bye');
?>

Vraiment, quel est l'intérêt de réinventer la roue ?

Les moteurs de template obligent à apprendre une nouvelle synthaxe, ralentisse le traitement (car il faut lire et analyser la template), et comme toute couche logicielle supplémentaire, augmente les chances de tomber sur un bug ou une faille de sécurité. Dès lors ils ne présentent un intérêt qu'avec les langages où la génération de HTML est lourde et pénible. Est-ce le cas avec PHP ? Certainement pas.

Bien sûr, il reste toujours utile de séparer la logique et la présentation. Mais on peu parfaitement le faire sans abandonner PHP : il suffit par exemple de mettre la présentation dans la page PHP principale et de placer la logique dans des fichiers externes. Ou à l'inverse, de stocker la présentation dans une template séparée écrite en PHP "classique. Ou bien les deux en mettant chaque chose dans un fichier distinct.

J'ai toujours cru que Google ne tenait pas compte des accents (c'est à dire que à est traité comme a). Jusqu'à aujourd'hui où j'ai réalisé qu'une recherche sur le restaurant "tai shogun" retournais les pages avec "Taï Shogun" mais pas "Taï Shõgun" (pour trouver celles là, il faut bien saisir le õ - et alors on n'obtient que les pages qui utilisent ce même õ dans les résultats).

Je suis un peu perplexe quant-à la cause de cette différence de traitement, mais compte tenu du fait que la plupart des utilisateur saisiront le o sans sont accent je supprime tous les õ de mon site (ça ira vite, il n'y en a qu'un !).

Dans mon premier billet sur l'optimisation de site Web j'évoquais la possibilité d'utiliser un script pour servir plusieurs fichiers Javascript (ou CSS) d'un coup pour gagner en vitesse. Voici un petit exemple de script PHP pour réaliser ce type de regroupement à la volée :

header('Cache-Control: max-age=3600, must-revalidate');
header('Content-type: text/javascript');
ob_start('ob_gzhandler');
if ($_REQUEST['f'])
{ $tab=explode(' ',trim($_REQUEST['f']));
foreach ($tab as $file)
if (preg_match('/^([0-9a-z_\-]+\/)*[0-9a-z_\-]+\.js$/i',$file)) readfile($file);
}


Le script est supposé être installé dans le répertoire où se trouvent les fichiers Javascript à servir. Ainsi, si vous avez 3 fichiers à regrouper ensemble vous pourriez utiliser une seule ligne HTML de la sorte :

<script src="/javascripts/script.php?f=file1.js+file2.js+file3.js" type="text/javascript"></script>


Quelques mots sur le code :

1. La sortie est compressée avec ob_gzhandler. Ceci permet typiquement un gain de taille de 50 à 75% ce qui donne autant de temps gagné (et accessoirement de bande passante).
2. Par sécurité, le paramètre d'entrée est vérifié pour n'autoriser que les fichiers .js.
3. Des en-têtes HTTP sont rajoutés pour envoyer le bon type de fichier MIME ainsi qu'indiquer au navigateur de garder le résultat dans son cache pendant 1 heure (3600 secondes), permettant par là encore un gain de vitesse.

Il se trouve que Rakaz explore et développe la même idée, mais lui va plus loin en utilisant mod_rewrite pour présenter une URL plus lisible et qui cache le script de groupage.

Il y a des tags HTML que l'on utilise tout le temps, des fois trop, comme le div que certains se sentent obligés de placer autour du moindre autre tag. Et puis il y a ceux qu'on utilise plus rarement, par manque d'opportunité ou par ignorance. Mais si vous avez à coeur de réaliser des sites adapté aux utilisateurs, moteurs de recherche et malvoyants, alors il peut être utile de se remémorer les tags suivants :

1. <abbr title="Abréviation">Abr.</abbr> Le tag abbr est utilisé pour marquer les abréviations. Utilisez l'attribut title pour donner le mot complet (la plupart des navigateurs en tiennent compte et offrent un rendu spécifique).
2. <acronym title="Personnal Computer">PC</acronym> Similaire au tag abbr, sauf que celui là est pour les acronymes (vous connaissez la différence, non ?).
3. <label for="username">Votre pseudo</label> Le tag label est utilisé pour définir une section de HTML comme étant le libellé d'un champ de formulaire (texte, boîte à cocher, etc.). C'est particulièrement utile pour les visiteurs malvoyants car leur navigateur peuvent ainsi associer à chaque champs le texte correspondant, même si l'intitulé ne figure pas directement à côté dans le code HTML. Les utilisateurs d'un navigateur graphique y gagnent aussi, ainsi avec Firefox par exemple le fait de cliquer sur l'intitulé active le champ du formulaire correspond.
4. <address>Jean Martin, 12345 rue du commerce, Trifouilli les oies</address> Voilà un tag qui se passe d'explications. Le code HTML à l'intérieur (retour à la ligne et autres) sont évidemment autorisés.
5. <fieldset><legend>Vos coordonnées</legend>...</fieldset> Le tag fieldset sert à regrouper des éléments d'un formulaire ensemble. Si vous avez par exemple un long formulaire avec une section pour le profil utilisateur, une autre pour ses préférences, etc. alors il est pratique et lisible de les regrouper en fieldset, et d'utiliser le tag legend à l'intérieur pour titrer chaque section (malheureusement le résultat visuel est plus plaisant dans Internet Explorer que Firefox, mais il est possible de styler ce tag avec CSS).
6. <del>Un truc supprimé</del> Les tags s et strike sont retirés du standard HTML car il ne portent pas d'information sémantique et le rendu de texte barré peut être obtenu avec CSS. Mais si vous voulez indiquer qu'une portion de page est censée être supprimée (et pas que du texte d'ailleurs), alors utilisez le tag del qui par défaut rend le texte barré.
7. <... lang="en">My tailor is rich</...> OK lang n'est pas un tag mais un attribut supporté par la plupart des tags HTML. Il permet d'indiquer que le contenu du tag est dans une langue spécifique, et comme il est aussi disponible pour le tag html, il permet de définir la langue par défaut du document (particulièrement utile pour les moteurs de recherce).
8. <tbody>...</tbody> Les tables existent en HTML depuis pas mal d'années, mais la plupart des gens ignorent qu'il faut aujourd'hui les utiliser avec les tags the thead, tbody et tfooter qui servent à définir quelles lignes constutient la tête, le corp et le pied du tableau (Firefox en tire par exemple parti pour imprimer des tables sur plusieurs pages).
9. <noscript>Turn on your Javascript !</noscript> Le tag noscript permet d'indiquer un contenu à afficher si, et seulement si, le navigateur ne gère pas les scripts Javascript (ou s'ils ont été désactivés par l'utilisateur). Plutôt que de laisser tomber vos visiteurs s'ils n'ont pas Javascript en place, vous pouvez utiliser ce tag pour leur donner un contenu alternatif à voir.
10. <button type="submit" name="submit_button" value="1">Mon beau bouton, roi des forêts</button> Tout le monde réalise ses boutons de formulaire avec le tag input. Mais ces boutons sont au format texte seulement, et nécessitent l'usage intensif de styles CSS pour les rendre un peu plus esthétiques. Et bien le tag button lui permet aussi de faire des boutons, mais avec n'importe quel ensemble de HTML en guise de contenu (y compris des images), ce qui permet plus de créativité.

Une petite mise à jour sur mes premières expérimentations avec ce camescope (seulement 16 minutes de rushs jusqu'ici... tout en mode 25p).

Génial : La qualité d'image en extérieur est absolument fabuleuse ! Tout est très détaillé, les textures sont réalistes et "vrais". C'est un progrès incroyable par rapport aux camescopes numériques DV.

Pas terrible : 4 Go pour 16 minutes de film... Même des DVD-R seront insuffisants pour l'archivage, il ne reste plus que des disques durs comme solution.

Aïe : Les vidéos tournées en intérieur montrent clairement la présence de bruit (fourmillement de l'image), et c'est évidemment plus marqué quand l'éclairage est réduit (lampe). C'est un problème inévitable avec les camescopes et appareils photos (y compris à film argentique), mais après avoir profité de l'image somptueuse en extérieur c'est forcément une déception. D'autre part la bande son fait apparaître un léger bruit de font (le mécanisme de la bande ?) mais un micro externe devrait pouvoir régler ça.

Pour importer les rushs MPEG2 sur mon PC, j'ai utilisé HDVSplit qui est un programme simple et gratuit avec une interface "droit au but" se limitant à l'extraction de vidéo HDV. Je n'ai eu aucun driver Windows à installer, aucun fichier d'aide à lire ou quoi que ce soit à configurer, ça a marché du premier coup et m'a généré un fichier distinct par séquence, avec la date et l'heure dans le nom en prime.

Ce billet sera le premier d'une série portant sur l'optimisation de sites Web, et plus spécifiquement de ceux développés avec AMP (Apache, MySQL, PHP). Optimiser un site Web est important pour deux raisons :

1. Améliorer l'expérience des visiteurs en accélérant le chargement et l'affichage
2. Réaliser des économies en réduisant les besoins en matériel et bande passante

Commençons cette série par la partie client.

Taille des fichiers

La première chose qui vient à l'esprit pour gagner en vitesse est tout simplement de réduire la taille des fichiers.

HTML : il n'y a pas beaucoup de gains à espérer ici, vous pouvez essayer de réduire votre quantité de retours à la ligne et de tabulations, mais cela nuira forcément à la lisibilité de votre code. Bien sûr il est très fortement recommandé d'écrire son code HTML "à la main" et sans le recours à un éditeur visuel, vu leur tendance à faire gonfler inutilement la taille du code.

CSS : il y a quelques gains à réaliser ici. Le premier est d'avoir un code bien organisé et structuré, de sorte que vous ayez le moins de classes et de propriétés définies et pas de redondance. N'oubliez pas qu'il est possible d'appliquer plusieurs classes à un même élément HTML. Si des éléments partagent partiellement des propriétés communes, il peut être utile de les grouper dans une même règle que vous leur appliquerez en plus de leur propriétés spécifiques. De plus, vous pouvez gagner quelques octets en utilisant les raccourcis CSS prévus à cet effet. Ainsi la règle { border-style: solid; border-width: 1px; border-color: #ffffff; } est identique à {border:solid 1px #fff}.

JPEG : vous pouvez faire de gros gains en utilisant les modules d'optimisation qu'on trouve dans les bons logiciels graphiques. D'après mes essais, les JPEG progressifs sont généralement un peu plus compacts. Jouez avec les réglages offerts pour voir quel rapport qualité/taille vous convient le mieux. Chaque image nécessite un réglage différent - par exemples celles avec des zones rouges ou des tons rouges font plus ressortir les défauts de compression et nécessitent donc une optimisation moins agressive. Si votre logiciel rajoute des données EXIF ou IPTC dans les JPEG qu'il produit, vous pouvez également les supprimer pour gagner encore en place (avec par exemple PlainViewer).

PNG : la aussi vous pouvez tirer partie des modules d'optimisation de votre suite graphique favorite. En particulier vous pourrez opter ou pas pour utiliser une palette, et le cas échéant la limiter à un certain nombre de couleurs. Ceci fait, vous pouvez réaliser encore de gros gains supplémentaires en utilisant un logiciel spécifique comme AdvanceComp qui retire les données inutiles et pousse la compression plus loin.

GIF : la seule raison valable pour utiliser des images GIF concerne les petites animation (ou bien de très petites images d'une poignée de pixels). Pour le reste utilisez PNG, qui offre une meilleure compression.

Javascript : de gros gains sont possibles en utilisant un compacteur de code comme par exemple Dojo ShrinkSafe ou Packer (conservez l'original de votre fichier pour les modifications, car la version compactée est illisible pour un être humain normalement constitué). De nombreuses librairies AJAX sont disponibles en version compacte directement ou auprès de tiers.

Nombre de fichiers

Plus que la taille des fichiers, le fait d'en avoir en trop grand nombre donne encore plus l'impression de "lenteur" au visiteur (à cause des aller-retour nécessaire entre le navigateur et le serveur pour effectuer chaque demande). Il faut donc tenter de limiter les fichiers connexes à une page en regroupant feuilles de style et scripts dans un nombre de fichier le plus limité possible.

Le problème est qu'en suivant cette stratégie, on oblige certaines pages à charger des données dont elles n'ont pas besoin. Ainsi si certaines pages utilisent les fichiers A et B, et d'autres B et C, et que A B et C sont assez lourds, il y a une perte importante à regrouper ces trois fichiers et à les servir systématiquement même lorsque seule une partie est nécessaire. La solution est alors d'écrire un petit script côté serveur (PHP ou autre) qui regroupera les différents fichiers CSS ou Javascript dont chaque page à besoin pour le servir d'un coup.

Ainsi au lieu d'avoir ces deux inclusions :
<link rel="stylesheet" href="A.css" type="text/css"/>
<link rel="stylesheet" href="B.css" type="text/css"/>


On aura :
<link rel="stylesheet" href="styles.php?group=AB" type="text/css"/>


Pour les images, je recommande chaudement la technique baptisée CSS sprites, qui regroupe plusieurs images en une seule et utilise des propriétés CSS pour les extraire et afficher. C'est particulièrement efficace pour les petits éléments d'interface (boutons, coins arrondis, icônes, etc.) en remplaçant des douzaines d'images par une seule.

Ordre des fichiers

L'ordre dans lequel sont listés vos librairies Javascript compte. En effet, le navigateur les charges séquentiellement dans leur ordre d'apparition, en bloquant pendant ce temps le traitement de la page elle même. Une solution est donc de placer ces inclusions en fin de page plutôt que dans l'en-tête (techniquement il n'y a pas de gain du temps de chargement, mais en pratique l'utilisateur verra quelque chose s'afficher plus vite).

Un mot à propos de la mesure des performances

Pour mesurer la performance côté client un bon outil est l'excellente extension FireBug pour Firefox (déjà recommandée précédemment), qui dispose d'un onglet "Net" indiquant dans quel ordre, et à quelle vitesse, sont chargé chacun des fichiers inclus dans une page.

Au dela de ses panneaux de configuration habituels, Firefox offre des options bien plus nombreuses qui peuvent être ajusté manuellement en accédant à une sorte de base de registre (similaire à celle de Windows, mais sans l'aspect arborescent). On peu accéder à cette base, visualiser et modifier des clés, en tapant about:config dans la barre d'adresse. Si une clé n'existe pas, il est possible d'en créer une en utilisant le menu contextuel (bouton droit de la souris).

Voici quelques clés que je modifie systématiquement :

• network.prefetch-next Firefox permet aux pages web de marquer des liens comme prefetch. Quand ce type de lien est rencontré, Firefox commence à les télécharger en tâche de fond de sorte que si vous cliquez sur le lien, toutes les données sont déjà dans le cache et la page s'affiche plus vite. Mais voulez vous vraiment que votre navigateur commence, sur l'ordre de n'importe quelle page, à charger des fichiers sans que vous le sachiez ? Voulez vous vraiment qu'il utilise votre bande-passante pour récupérer du contenu que vous ne regarderez probablement jamais ? Personnellement non, donc je met à cette clé la valeur false
• config.trim_on_minimize Firefox peut consommer beaucoup de mémoire. Si cette clé a la valeur true, Firefox libérera le gros de la mémoire qu'il occupe lorsque vous minimiserez sa fenêtre. C'est censé être un poil plus lent lorsqu'on restaure la fenêtre, mais je n'ai remarqué aucun ralentissement.
• network.http.pipelining et network.http.proxy.pipelining Le "pipelining" est une nouveauté du protocole HTTP version 1.1 qui permet au navigateur de réclamer plusieurs fichiers d'affilé (une page et les images qui la compose par exemple) sans attendre que le serveur lui retourne chaque fichier avant (ce qui accélère grandement les temps de chargement). En théorie certains sites peuvent poser problème avec cette fonction activée, mais la version 1.1 du HTTP existe depuis la fin des années 90 et je n'ai remarqué aucun problème particulier (en revanche j'ai bien observé un net gain de vitesse sur certains sites). Donc autant mettre ces deux clés à true.
• network.http.pipelining.maxrequests Cette clé concerne aussi le pipelining, et indique combien de fichiers peuvent être réclamés à la fois au serveur. 8 semble être une bonne valeur à utiliser.

L'un des avantages offert par Firefox est la possibilité d'étendre le navigateur avec des modules d'extension. Voici donc mes 5 préférés :

1. Firebug Aucun développeur Internet ne peut vivre sans celui là : c'est un package de debugging complet pour le Web. Explorez visuellement votre code HTML et ses propriétés CSS (et changez les pour voir ce que ça donne). Débuggez le Javascript en plaçant des points d'arrêt où en faisant un suivi pas à pas. Observez comment le navigateur charge les différents éléments composants votre page HTML. Et il y en as plus encore ! Comment ais-je donc fait pour vivre sans ?
2. Sage Lorsqu'on a pris l'habitude d'utiliser des fils RSS pour suivre ses pages et blogs favoris, on a du mal à s'en passer. Il existe des millions de lecteurs RSS différents, mais Sage a le mérite de s'intégrer proprement à Firefox et d'utiliser les marque-pages pour suivre les abonnement RSS. C'est ergonomique, simple et élégant.
3. Les dictionnaires Peu de gens savent que Firefox peu intégrer un correcteur orthographique dans de nombreuses langues différentes (bien que cette fonction ait été présentée comme une des importantes nouveautés de la version 2.0). Ces extensions ne sont pas parfaite (en français elle a un peu de mal avec certains mots accentués) mais leur usage améliorera grandement la qualité de votre blog et de vos interventions dans les forums.
4. DownThemAll! Si vous avez besoin de télécharger de nombreux fichiers à partir de certaines pages Web (par ex. des photos à partir d'un index), cette extension est pour vous. De nombreuses options sont disponibles pour choisir les liens et fichiers à récupérer.
5. AdBlock C'est probablement l'extension la plus populaire. Firefox inclus déjà un bloqueur d'images simple, mais AdBlock va bien plus loin en offrant de nombreuses options pour bloquer tout type de contenu. Je ne m'en sert pas personnellement car la publicité est ce qui rend Internet essentiellement gratuit, mais si votre seuil de tolérance est dépassé c'est une solution radicale.

Si vous avez comme moi de gros volumes de données à gérer, vous connaissez le problème: les sauvegardes ! Bien sûr, ce n'est pas spécialement compliqué d'acheter quelques gros disques externes, mais les disques durs sont des appareils mécaniques qui peuvent tomber en panne (et qui, malheureusement, le font régulièrement). Il a différentes solutions à cet état de fait, la plus courante étant simplement d'avoir encore plus de disques durs et de faire des copies de sauvegarde. C'est un peu pénible, mais ça l'est toujours moins que de graver un Teraoctet de données sur des DVD-RW vierges !

Mais si l'on est prêt à faire une petite entorse au sacro-saint principe d'avoir toujours une sauvegarde complète stockée dans un lieu séparé, il y a des alternatives plus pratiques sous la forme de boîtiers RAID intégrants au moins deux disques durs :

• Le RAID 1 utilise un système miroir : la moitié des disques duplique en temps réel le contenu de l'autre. Une technique simple mais qui impose de sacrifier la moitié de la capacité totale sur l'autel de la sécurité.
• Le RAID 5, plus performant, utilise un disque dur pour stocker une parité, pendant que 1 à 4 autres disques stockent de l'information, et il est possible de perdre l'un des disques sans perdre d'information. La perte de capacité est donc plus réduite en allant de 20% (avec 5 disques) à 50%.

Il semble donc que la meilleure solution soit un boîtier RAID 5 ; mais en pratique cette technique de sécurisation est un peu complexe à utiliser : il faut en effet installer jusqu'à 5 disques identiques, et donc si l'envie vous prend d'utiliser des disques de plus grande capacité pour gagner en place il faut changer tous les disques (et transférer pendant la durée du remplacement vos données quelques part).

Ce qui m'amène donc au sujet de ce billet : Drobo. Data Robotics le présente comme « le premier stockage robotique » ce qui semble un peu excessif pour ce qui est à la base un boîtier RAID intelligent. C'est un produit enthousiasmant malgré tout : branchez le Drobo sur un port USB 2.0, ajoutez y de 1 à 4 disques durs, et ça marche. Les disques peuvent être tous différents. Il n'y a rien du tout à configurer. Pour gagner en espace, il suffit de sortir sans précautions particulière un disque dur et d'en mettre un autre à la place, l'opération peut être faite même pendant qu'on transfère des fichiers sur le Drobo, sans que cela créé la moindre interruption et sans perte de donnée.

Combien d'espace disque doit on sacrifier pour assurer la sécurisation ? Il semble que Drobo utilise un mélange de miroir et parité selon les disques et l'espace libre dont il dispose, mais la capacité maximale est celle de la totalité des disques durs moins le plus grand, ce qui est comparable à du RAID 5.

Côté défauts, car il y en as aussi: la connectivité USB 2.0 est plutôt lente et n'offre pas la même souplesse d'utilisation à plusieurs d'une prise réseau. D'autre part son utilisation limite les volumes à 2 To, ce qui signifie que si vous dépassez cette capacité vous devrez gérer plusieurs volumes (évidemment 2 To ça permet déjà de voir venir). Son prix n'est par ailleurs pas négligeable (499 $). Mais surtout, il n'est vendu qu'aux USA. Ce qui est bien dommage, car je me verrais bien l'utiliser !