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('/optimisation/loptimisation_progressive_degradation_elegante/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('/optimisation/loptimisation_progressive_degradation_elegante/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: ,


6 commentaires sur “L’optimisation progressive”

  1. 1. Kocet Sylvain Dit :

    Je suis en mode degradation et c’est vrai que vu de cette manière ca semble plus cohérent…

    J’ai 8 navigateurs installés rien que pour faire une intégration. Pour ie6 j’utilise le plugin de spoon car sur un windows 7, impossible de faire cohabiter plusieurs ie (a quand des vrais standalone – ne rêvons pas)

    Mais à mon avis la question est : a quand un web unifié ?

  2. 2. Optimisation de l’intégration par la technique de lʼamélioration progressive | Agence DnD : Création site e-commerce Magento, développement web Dit :

    [...] Rendez-vous sur le Blog Wikigento pour consulter l’article complet : Optimisation progressive & dégradation élégante [...]

  3. 3. Sylvain Gourvil Dit :

    Présentation intéressante et simple. Merci !
    Il est sur que le CSS3 et HTML5 va complétement bouleverser nos habitudes

  4. 4. Philippe Humeau Dit :

    Tout à fait d’accord avec toi Sylvain, d’autant plus que c’est difficile de savoir à quelle vitesse tout cela va se déployer.
    Techniquement, une grande majorité du parc de browser installés supporte déjà html5/Css3 mais qui va provoquer la
    bascule, quand le changement (et comment) va t’il s’opérer et surtout à quelle vitesse.

    Au niveau de l’hébergement par exemple, on a un hoax récurrent, IPV6. Censé s’imposer depuis 10 ans comme la seule
    solution au problème du manque d’IP V4, le protocole n’a pas encore su s’imposer, et les autorités Internet n’ont pas non
    plus réussis dans cette tache.

    Alors, a quand du HTML5 / CSS3 presque partout ? Quand les grands comme Facebook, Google, Microsoft auront basculé,
    et quand les frameworks type Magento, Drupal, WordPress, Zend et autres auront intégré un output HTML5, mais ca ne
    nous donne pas de date :)

  5. 5. Sylvain Gourvil Dit :

    @Philippe : ton exemple de l’IPV6 résume mon avis. J’ai bien peur que l’on mette un temps incroyable avant de basculer définitivement sur du HTML5. IE6 est encore la et ce depuis 9 ans, même si la guillotine est au montage ;)

    Par contre, dans l’article, optimisations « serveurs » (CDN, compression, …) est opposé à l’intégration progressive mais je pense que cela est plus que complémentaire. Ensuite, s’il faut choisir …

  6. 6. Philippe Humeau Dit :

    ahhh les cycles d’adoption des technos… Tout un roman !

Poster une réponse