Akamai Technologies présente ses 5 conseils phares pour un responsive web design performant. Le Responsive Web Design (RWD), ou Conception Web adaptative en français, est le sujet phare sur Internet en ce moment. Malgré déjà quelques années d'existence, le RWD n'en est pourtant encore qu'à ses débuts. Les concepteurs sont confrontés à une fragmentation des terminaux, des frameworks de code et des fonctionnalités de navigation qui évoluent en permanence. Par ailleurs, les pages conçues en Responsive Design sont autrement plus complexes que n'importe quelle page standard d'un site mobile dédié. En Responsive Design, la performance doit être étudiée de près pour éviter une dégradation de la vitesse. Tout mobinaute compulsif sait que rien n'est plus frustrant qu'un site lent à charger.

Akamai a réuni cinq conseils fondamentaux pour optimiser la conception Web adaptative d'un site, mais également pour en garantir la performance et l'optimisation. Voici ces 5 conseils

1.    S'appuyer sur une technique de chargement d'image basée sur JavaScript ou CSS pour éviter de télécharger les images cachées. Les sites Web adaptatifs utilisent principalement des règles de style pour masquer leurs images ; ils définissent le style ainsi : « display: none ». Cette technique n'empêche pourtant pas le navigateur de télécharger inutilement certaines images. Comme la plupart des sites adaptatifs affichent nettement moins d'images sur les petits écrans, ce problème explique souvent le poids excessif des pages de sites adaptatifs qui se chargent sur une seule page

2.    Télécharger des images d'une taille adaptée à l'écran utilisé - les « images adaptatives ». Les sites Web adaptatifs affichent généralement la même image quelle que soit la taille de l'écran utilisé (à condition que l'image ne soit pas masquée), mais ils définissent sa taille d'affichage à l'aide d'un percentile pour une adaptation parfaitement fluide sur le terminal utilisé. Une meilleure solution est de créer plusieurs versions de chaque image, de les redimensionner correctement sur le serveur, et de télécharger la version la plus proche des caractéristiques de l'écran à l'aide d'un chargeur d'image plus intelligent. La page s'affiche ainsi plus vite.

3.     Opter pour le chargement conditionnel de JavaScript - et plus précisément des scripts JS tiers. Les sites Web adaptatifs comportent souvent des composants JavaScript qui ne sont effectivement pas utilisés sur un petit écran. C'est notamment le cas des flux Twitter, des cartes de localisation, des agents de tchats live, etc. Bien que plus légers, les scripts impactent néanmoins plus fortement le temps de chargement des pages. Mieux vaut entourer ces scripts d'un petit script online qui vérifie les propriétés du terminal et n'ajoute les scripts à la page qu'en cas d'absolue nécessité. On évite ainsi les ralentissements inutiles et les risques en termes de fiabilité.

4.     Utiliser RESS (REsponsive + Side Server) pour optimiser le site sur les clients connus. Si la conception adaptative est un formidable outil, elle gonfle souvent les volumes de téléchargement jusqu'à l'excès. Certaines formes d'engorgement peuvent être gérées à l'aide de techniques de chargement intelligent, mais d'autres - comme l'excès de HTML et de CSS - sont bien plus difficiles à traiter sur le client. Dès lors, la seule véritable solution consiste à introduire un composant côté serveur qui identifie les clients connus et largement utilisés, afin d'optimiser le HTML pour ces clients uniquement. Les autres clients afficheront le site adaptatif, qui devrait continuer à fonctionner, malgré une légère baisse de performance. Un exemple éloquent consiste à couper les plus grandes parties de code HTML « exclusivement réservées aux grands écrans » lorsque le client est identifié comme étant un smartphone connu. Cela revient souvent à supprimer en même temps les références aux fichiers JavaScript et CSS qui ne seront pas nécessaires.

5.     Introduire les tests de performance à votre processus de gestion de la qualité (QA) ou de compilation. Pour devenir rapide, et le rester, il est nécessaire d'intégrer un test de performance aux processus de test et d'assurance qualité habituels et ce, le plus tôt possible dans le flux. De nombreux outils comme WebPageTest permettent d'ajouter facilement un test de performance pour les pages clés des applications. Il suffit ensuite d'effectuer ces tests à partir de navigateurs redimensionnés suivant les différentes tailles de fenêtre d'affichage et simuler les propriétés de ratio de pixels (« Retina » ou haute densité) sur différents terminaux, en mesurant 20 ou 30 fois la performance d'une page, en prenant comme référence la durée médiane de chargement d'une page, et en notant l'écart-type. Il s'agit ensuite d'introduire la même mesure de performance au processus de compilation ; si la nouvelle durée médiane de chargement d'une page dépasse la référence d'un écart-type, la compilation doit être endommagée.