Jean-Sébastien Mansart .com - Tag - optimisation

Performances d'un site web

Jean-Sébastien Mansart — Sun, 23 Nov 2008 11:00:00 +0100

Depuis quelques mois je m'intéresse à deux points particuliers d'un site web : l'accessibilité et les performances.
Les performances web ne sont pas combien de visiteurs un site web a réussi à convertir en acheteur, mais plutôt la rapidité de réponse et d'affichage d'un site dans le navigateur de l'internaute.

Dans le domaine des performances web, en français, il n'existe pas beaucoup de lecture sur internet. Cependant deux blogs traitent du sujet.

Le premier est celui d'Eric Daspet : Performances web, et le second, celui de Nicole Sullivan.

Je lis celui d'Eric Daspet depuis plusieurs mois, et quand j'ai le temps, je me penche d'un peu plus près sur les conseils qu'il donne et regarde ce que je peux mettre en place de mon coté.

Pourquoi se préoccuper des performances des sites web ?

C'est vrai après tout, tout le monde a une connexion de ouf...

Tout le monde ? Pas forcément. Et des fois, tout se joue pour quelques centaines de millisecondes.

Perdre 500ms c’est perdre 20% de traffic pour Google (ou pourquoi il n’y a que dix résultats par page dans les recherches).
Perdre 100ms c’est perdre 1% de ventes pour Amazon.
Réduire de 25% le poids de la page c’est gagner 25% d’utilisateurs à moyen terme pour Google.
Eric Daspet - A quoi ça sert ?

Pour un petit blog comme le mien, ce n'est rien, je n'ai pas un besoin vital de me préoccuper de cet aspect.
Non.

Je m'en sers comme "bac à sable". Je peux tester certaines pratiques, certaines techniques, afin de voir comment les intégrer dans mon travail, les partager avec mes collègues et leur faire comprendre que c'est un point tout aussi important que l'accessibilité ou que la couleur du bouton que veut le client.

Que peut-on faire facilement ?

Dans un premier temps, j'ai donc installé YSlow, un plugin pour firefox qui vient en surcouche de firebug.

YSlow m'a donné un petit D, soit 58 sur 100. Et mon site se chargeait en 3 secondes.

J'ai regardé point par point ce que je pouvais faire, et après avoir lu de la doc un peu partout, j'ai commencé par réduire le poids des images.

Pour ça, il existe un site web fabuleux, créé par Nicole Sullivan et Stoyan Stefanov : smushit. Il suffit de donner l'url de la page, et le service s'occupe de tout. Au final il vous rend un fichier zip avec toutes les images optimisées et, point important, les optimisations ne sont pas destructives. Votre image sera identique pixel par pixel à celle d'origine.

J'ai ensuite tenté de réduire le nombre de requêtes HTTP.

Pour réduire le nombre de requêtes HTTP, on peut :

merger les CSS
merger les JS
privilégier les CSS Sprites

Je n'ai pas été très chanceux sur ce coup, je voulais à tout prix faire un maximum de CSS Sprites, mais dans mon cas, ce n'était pas possible, je n'ai réussi qu'à réduire d'une image le nombre d'images CSS.

J'ai tout de même réussi à merger les trois feuilles de styles pour n'en faire plus qu'une seule, et je l'ai ensuite optimisée avec code beautifier.

Pour les fichiers JavaScript, rien à faire de ce côté là, utilisant dotclear, je préfère laisser les fichiers JS tels quels.

En troisième action, j'ai demandé à mon hébergeur de configurer le mod_expires d'apache.

mod_expires permet de spécifier une date d'expiration du contenu. Tant que la date n'aura pas expirée, votre navigateur ne rechargera pas le contenu en question. Les gains en cache plein sont assez impressionnants.

Vous pouvez régler la date d'expiration par type de contenu, et vous pouvez le faire soit dans la configuration générale d'apache, soit dans votre vhost ou votre .htacess.

Voici par exemple ce que j'utilise :

ExpiresActive on
ExpiresDefault access plus 10 years
ExpiresByType text/html now
ExpiresByType text/xml now

On active le mode expires, par défaut tous les types de contenus expirent dans 10 ans, par contre, le HTML et le XML expirent immédiatement, ce qui évite de vider son cache quand un nouvel article est publié sur le site et sur le flux RSS par exemple.

Au final, avec ces quelques petites choses, avec un cache vide, mon site (d'après mes tests) se charge en 1s, et avec le cache plein en 0,5s. Ce qui me fait maintenant une note C, soit 79 sur 100.
On remarquera aussi qu'avec le cache vide, 26 requêtes sont nécessaires, alors qu'une fois le cache plein, il ne suffit plus que d'une seule requête : la page HTML.

Prochainement, avec mon hébergeur, nous devrions mettre en place le mod_gzip qui permet de compresser à la volée le contenu, et ainsi réduire la consommation en bande passante et, normalement, accélérer l'affichage des pages. Car plus c'est gros, plus c'est lent.

Tout ce travail porte ses fruits, j'ai déjà commencé à modifier la configuration apache de nos serveurs de production, et les graphistes regardent de près smushit et le format PNG-8 qui est beaucoup plus performant que le GIF.

Les performances web, c'est comme l'accessibilité, toujours en mouvement. On n'est jamais fixé, il y a toujours à faire, c'est pour ça que j'aime le web !

A suivre donc...

Article original écrit par Jean-Sébastien Mansart et publié sur Jean-Sébastien Mansart .com | Lien direct vers l'article | Si vous lisez cet article dans son intégralité sur un autre site que Jean-Sébastien Mansart .com c'est qu'il a été reproduit illégalement et sans autorisation. Merci de le sig naler à son auteur original en cliquant ici | © jsmansart.com.

1 an déjà

Jean-Sébastien Mansart — Mon, 25 Aug 2008 20:30:00 +0200

Ça fait déjà un peu plus d'un an que j'ai ouvert ce blog.

Je profite de mes vacances pour faire le point avec vous.

On va commencer par les 10 billets les plus lu :

La Miss Webmate décembre 2007, a croire que vous êtes obsédés ?
Plone et LDAP : mode d'emploi
La Miss Webmate février 2008, a ben oui, en fait, vous êtes vraiment obsédés !
Life 2.0 : la réalité augmentée, merci les backlink chez Fred Cavazza
Optimisation du référencement d'un blog sous Dotclear 2
Optimisation d'un site Plone, il faut croire que vous aimez optimiser vos sites !
Quel CMS choisir ? Suivez le plan !
Failles de sécurité dans les CMS
Bon Patron : ne faites plus de fautes !, moi aussi j'ai encore un peu de mal avec l'ortho...
Objectis : l'hébergement gratuit de sites Plone

A noter quand même que la page la plus lue, celle sur la miss webmate de décembre 2007, représente 14,34% des pages vues...

On continue avec les 10 articles les plus commentés :

Twitter : le service toujours en rade, le sujet a du vous plaire, d'autant plus que j'offrais des invitations pour Jaiku
Les métiers du web, les connaissez vous tous ?, un sujet qui fait toujours autant parler d'encre. C'est normal, c'est notre métier !
Utiliser les nouvelles technologies a tout prix
psd2css online : le fake du mois ?, ok, sur ce billet je m'étais planté, ce n'étais pas un fake. Mais je conseil quand même de faire son intégration sois même, ce sera toujours plus propre...
Nouveau thème : je vous fais faire le tour du proprio ?
DotClear 2 : le Wordpress killer ?, comment ça j'aime dotclear ?
Note de service : changements sur le blog
Les commentaires vidéos : une vraie fausse bonne idée ?, je suis toujours d'accord pour dire que les commentaires vidéos ne sont pas la meilleure chose de l'année. Il n'y a qu'à voir chez TechCrunch et regarder le nombre de commentaires vidéos posté pour s'en rendre compte.
Premier contact avec Microsoft Expression Web, ma première vidéo, j'en suis encore tout ému.
Refonte complète du blog.

Ce que je trouve marrant, c'est qu'à partir du moment où j'ai annoncé que j'allais refondre mon blog, les commentaires se sont multipliés. Avant j'avais quelques commentaires éparses, depuis, j'ai au minimum 3 commentaires sur chaque articles (mis à part deux qui n'ont toujours pas de commentaires. Saurez vous les retrouver ?)

Et maintenant, je garde le meilleur pour la fin, ma petite sélection personnelle :

Pourquoi utiliser FeedBurner. C'est maintenant une vrai question. FeedBurner n'a pas de vrai concurrent direct et le service marche un peu comme twitter, c'est à dire, un peu comme il veut ou quand il veut...
AIR et SilverLight sont-ils vraiment des pionniers ?
Une métrique pour évaluer la qualité du code, pour le fun ;)
Enfin une date pour Dotclear 2, on l'a attendu longuement. Il est enfin sortit. C'était pas trop tôt !
Atacamag, le magazine qui vous emmène ailleurs..., d'ailleurs, le numéro 3 vient de sortir !
Comment utilisez vous votre service de micro-blogging ?
Le spwitt : le spam via twitter, il y en a de plus en plus, vous trouvez pas ?
Miniville, le SimCity 2.0, y'a pas à dire, ils sont fort Motion Twins pour faire des hits. Vous avez testé Hordes ?
Plone 3.0, un an après avoir écris ce billet, j'ai enfin un projet avec Plone 3.
Pour finir, pas un billet, non. Mais une suite de billets sur la réalisation d'une vidéo, avec toutes les étapes, depuis l'acquisition jusqu'au montage final. Un moment passionnant, surtout en tant qu'acteur :)

Voilà, le petit tour est terminé, j'espère que vous en avez bien profité. N'ayez crainte, il y aura encore beaucoup d'autres articles, alors continuez à commenter et à réagir !

Merci à tous pour votre fidélité.

Refonte complète du blog

Jean-Sébastien Mansart — Fri, 07 Mar 2008 13:31:00 +0100

Ça faisait un petit moment que ça me turlupinait, mon blog avait un thème "sympa", mais pas top. Après avoir rencontré Patricia Gallot, l'auteur de "Internet, donne moi ce que je veux", je me suis mis en tête de refondre complètement mon blog, en commençant par la navigation.

La première étape était de trouver un ou plusieurs modèle de navigation propice à un blog.

Un coup de chance, j'avais le livre de Patricia sous la main, et après avoir parcouru les 60 modèles de navigation, j'en ai retenu 3 :

le menu sur la droite
le big footer (le gros pied de page)
le menu horizontal

Il ne restait plus qu'a placer les différents éléments dedans.
Dans le menu de droite seraient présents (dans le désordre) :

la recherche
le lien vers le flux RSS
la liste des tags
les derniers billets
la liste des catégories

Dans le big footer :

le fameux "a propos"
les derniers commentaires
et pour se faire plaisir, une fois encore les derniers billets

Dans le menu horizontal :

Contact
CV
A propos

Et pour finir le tout, un petit colophon histoire de rappeler les mentions légales et quelques liens rapides d'échappements.

Deuxième étape : faire une maquette à partir des éléments définis plus haut.

J'admets, cette partie là, je l'ai délégué. Étant en collocation avec une graphiste web, je n'ai pas eu à chercher longtemps à qui j'allais confier cette tache... On en a profiter pour revoir l'ergonomie du blog, en créant des liens d'échappements là où il en fallait (comme un lien pour aller directement aux commentaires), retirer quelques éléments qui n'apportaient rien (le lien permalink).
Mettre des parties plus en évidences : comme l'abonnement au flux RSS, le "lire la suite..." sur la page d'accueil, les liens dans le corps du texte, etc...

Je voulais aussi garder l'esprit et la charte graphique de l'actuel. Le bandeau à été remanié, le titre du blog amélioré...

Troisième étape : optimiser le code HTML pour le référencement.

Dotclear est part défaut très bien conçut pour le référencement. Cependant, on peut noter quelques améliorations à apporter.

La balise <title> est le titre de la page.
Une balise <h1> définit le titre du document.
Une balise <h2> définit les sous titres

Lorsque l'on est sur la page d'accueil, le title doit donc être le nom du blog, la balise <h1> contiendra elle aussi le titre du blog et on placera les titres des billets dans des balises <h2>.

Par contre, lorsque l'on est sur un billet. Le title de la page devient donc le titre du billet. Celui-ci est aussi englobé dans une balise h1, mais quid du titre du blog ?

Certains disent qu'on peut le laisser en <h1>, d'autres au contraire affirment qu'il ne doit y avoir qu'une seule balise <h1> par page.
Si on part sur la seconde hypothèse, dans quelle balise met-on le titre ?
Une balise <h2> ?
Une balise <p> ?
Une balise <span> ?

Les mêmes questions se posent pour la navigation : les bloc ont des titres, on met quoi ? des <hx> ou une toute autre balise ?

Pour le coup, je suis un peu dépassé, et même tous les grands du HTML se battent sur ce genre de sujet...

Tout cela demande énormément de travail et de recherche, la maquette est terminée, il reste encore l'intégration à faire, les tests sous différents navigateurs et système d'exploitation, et pour finir : le polissage.

A votre avis : quelles balises utiliser pour le titre du blog et la navigation ?

Optimisation du référencement d'un blog sous Dotclear 2

Jean-Sébastien Mansart — Thu, 08 Nov 2007 13:38:00 +0100

La plupart des gens sont d'accord pour dire qu'un blog tournant sous Dotclear se référence très bien tout seul. S'il est vrai qu' "out of the box", Dotclear comporte certains éléments qui lui permet un bon référencement, il faut néanmoins retravailler certains aspects pour l'améliorer.

Je vais m'intéresser ici aux URL.

A la base, les URLs d'un billet sont sous la forme :
http://www.monblog.com/index.php/post/2007/11/08/referencement-:-les-urls

On remarque que l'URL est particulièrement longue, les mots clés qui nous intéressent sont à la fin, il y a un caractère illégal et on traîne un "index.php/post/2007/11/08/" qui ne sert strictement à rien.
Ce qu'on voudrait ressemblerait plutôt à : http://www.monblog/referencement-les-urls

Nettement mieux non ?

Première étape, enlever la date dans l'url.

Pour enlever la date, il suffit d'aller dans l'administration du blog, tout en bas à gauche, il y a une rubrique nomée "about:config". Chercher la ligne "post_url_format", la valeur par défaut est : "{y}/{m}/{d}/{t}", modifiez la à : "{t}". Enregistrez et c'est gagné !

On a maintenant une URL du type : http://www.monblog.com/index.php/post/referencement-:-les-urls

On va maintenant s'occuper d'enlever le "index.php". Pour ça, il faut créer à la racine du blog un fichier .htaccess avec le code suivant :

RewriteCond %{HTTP_HOST} ^monblog.com$
RewriteRule ^(.*) www.monblog.com/index.php$1 [QSA,L,R=301]
RewriteRule ^(preview|pages|post|archive|feed|tag|category|sitemap\.xml)/(.*)$ /index.php/$1/$2 [L]
RewriteRule ^(archive|tags|sitemap\.xml) /index.php/$1 [L]

Et voilà ! On obtient maintenant : http://www.monblog.com/post/referencement-:-les-urls
Il reste à enlever le "/post/" et les deux points.

Pour enlever les deux points rien de plus simple : il suffit de modifier l'URL dans le billet.
Par contre, pour enlever le "/post" je n'ai encore pas trouvé de solution, si quelqu'un en a une, je suis preneur.

Je vous conseil de faire toutes ces modifications avant d'ouvrir votre blog, en effet, vous risquez de perdre tout votre référencement actuel, et vos visiteurs risquent de tomber sur de nombreuses erreurs 404... Vous pouvez toujours vous amuser à faire de la redirection dans le .htaccess, mais souvenez vous : Cool URIs don't change (chose que je n'ai absolument pas respecté).

Optimisation d'un site Plone

Jean-Sébastien Mansart — Tue, 24 Jul 2007 11:12:00 +0200

Un site web Plone est plus lourd et plus lent qu'un site développé (correctement) en PHP/MySQL. C'est un fait. Forcément, il n'y a pas toute la machinerie Zope derrière : gestion des droits, groupes et utilisateurs, moteur de worklows, etc... Un site développé en PHP/MySQL peut ne prendre que quelques lignes de code, alors que le même site fait avec Zope / Plone sera beaucoup plus gros, et de ce fait, gourmand en ressources.
Pour un petit site, la différence n'est pas énorme, par contre, si le site commence à être conséquent, optimiser son code devient crucial.

Pour optimiser un site Plone, on peut identifier trois phases :

Utiliser de bonnes pratiques de développement
Répartir la charge
Mettre en place un système de cache

Utiliser de bonnes pratiques de développement

Le portal_catalog

Lorsque l'on veut accéder à un objet, Zope doit "réveiller" cet objet, malheureusement, "réveiller" un objet est très coûteux. Cela l'est encore plus lorsque l'on veut afficher une liste et que chaque objet de cette liste est "réveillé".

Pour éviter de "réveiller" inutilement les objets, Plone dispose d'un catalogue : le portal_catalog.
Il permet d'indexer les objets (index) et de stocker certains champs des objets (metadata). Pour afficher une liste d'objets avec leur titre et un lien vers l'objet en lui même, plus besoin de "réveiller" tous les objets de la liste.
Les index vont vous servir lors des recherches dans le catalogue, alors que les metadata permettent d'accéder aux données de l'objet sans avoir à le "réveiller". Il est très simple de rajouter des index et des metadata dans le portal_catalog, que ce soit directement depuis la ZMI ou programmatiquement.

Au lieu de :
<a tal:attributes="href python:item.getObject().absolute_url()" tal:content="item.getObject().title_or_id">Mon Objet</a>

Préférez plutôt :
<a tal:attributes="href item/getURL" tal:content="item/Title">Mon objet</a>

Les scripts python

Lorsque vous créez des scripts python, au lieu de passer par la ZMI qui va faire plusieurs vérifications à chaque instructions, stockez les directement sur le File System, dans votre produit. Non seulement vous gagnerez en performance, mais en aussi en productivité. C'est beaucoup plus simple d'éditer un script python depuis son éditeur de texte favoris que depuis un formulaire web.

Une autre méthode est de créer un tool, ou d'utiliser les vues Zope 3 (via Five)

Répartir la charge

De base, nous avons une instance Zope avec sa ZODB (Zope Object Data Base). L'instance Zope reçoit les requêtes HTTP, effectue le rendu de la page et s'occupe de stocker les objets dans la ZODB.

image provenant de la présentation de Pilot Systems

Une installation simple

Une façon d'optimiser très simplement un site Plone est de mettre un serveur Apache en frontal devant l'instance Zope. Cette installation est suffisante pour les petits site à faible trafic. Par contre, il n'y a pas de tolérance de panne, et la montée en charge reste faible. Les performances du site ne sont que très faiblement accrues.

image provenant de la présentation de Pilot Systems

Répartition de charge avec ZEO

ZEO (Zope Enterprise Object), permet de diviser Zope en deux :

Une partie serveur pour stocker les données
Une partie cliente pour effectuer le rendu des pages et recevoir les requêtes HTTP.

image provenant de la présentation de Pilot Systems

L'avantage ici, est que l'on peut créer autant de clients que l'on veut. Le serveur ZEO peut être sur une machine physique différente des autres clients ZEO, et chaque client peut aussi être sur une machine physique différente.
Les clients sont tous relié au serveur ZEO. On peut répondre très facilement à une monté en charge : il suffit de rajouter des clients ZEO.

On peut dédier un client (ou plusieurs) pour l'administration du site, et ainsi améliorer les performances pour l'administration du site, sans dégrader les performances coté "publique".

Mettre en place un système de cache

La première solution est de mettre en place un serveur SQUID qui permet de gérer du cache. Il limite les requêtes vers les clients ZEO en retournant les pages en cache.

En complément de SQUID, Pound permet de répartir la charge entre les différents clients ZEO, (à noter que SQUID peut le faire aussi). Si un des clients ZEO n'est plus accessible, Pound redirige automatiquement les requêtes vers un autre client disponible.

image provenant de la présentation de Pilot Systems

Cette infrastructure est optimum, elle permet d'avoir un site complètement optimisé, avec très peu de requêtes traitées par Zope, le cache se situant en amont.
Si une panne survient sur un des clients ZEO, les autres prennent le relais, cela nous permet de réparer le client défectueux sans que les utilisateurs soient pénalisés.
Si l'audience du site augmente, il suffit de rajouter un ou plusieurs clients ZEO.

L'optimisation d'un site Plone passe par beaucoup d'étape, que ce soit au niveau de l'infrastructure comme du code produit. Heureusement, pour l'infrastructure, on peut commencer juste par avoir un apache en frontal, puis ajouter des clients ZEO et un SQUID si le besoin se fait ressentir.
Il est par contre plus fastidieux de revenir sur du code produit, il faut donc tout de suite adopter de bonnes pratiques de programmation.

Merci à Sylvain Viollon de Pilot Systems pour sa présentation lors des Solutions Linux 2007.