Communauté Magento francophone

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 :

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('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('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: dégradation élégante, optimisation progressive