Responsive Web Design – une solution qui offre une expérience cohérente sur différentes résolutions d’écran – prend une vitesse importante en tant que méthode standard par laquelle les sites Web sont conçus. Là où il ya quelques années la détection de l’appareil a été couramment utilisé, le pendule a basculé vers Responsive Web Design et les concepteurs l’évaluer pour des raisons qu’il ne fonctionnera pas, au lieu de l’inverse. En effet, Google a même répertorié Responsive Web Design comme sa configuration préférée pour créer des sites Web optimisés pour smartphone.
Raisons de responsive Web Design
La diversité croissante des appareils est certainement un facteur clé dans ce changement et, comme en témoigne un sondage Google, 67 pour cent des utilisateurs affirment qu’ils sont plus susceptibles de faire un achat quand un site Web est mobile convivial. Mais une raison tout aussi importante de passer à Responsive Web Design est la performance du site Web. Examinons trois façons d’améliorer les performances du site Web en utilisant cette méthode :
Améliorer les performances de conception Web réactive
1. Inline le contenu ci-dessus-le-pli, tels que la majoration HTML, images, CSS et Javascript. Avec la taille du site web continue à gonfler et Google recommandant que les sites web mobiles charger en une seconde ou moins, quelque chose doit donner. Les sites Web devraient principalement structurer le HTML pour charger d’abord le contenu critique, au-dessus du pli, puis réduire la quantité de données utilisées par les ressources par des tactiques telles que la minification des ressources et la compression habilitante.
2. Optimiser les images. Les gens veulent des images haute résolution sur leurs sites Web, comme en témoigne le nombre croissant d’écrans retina sur les appareils, mais à quel prix? La taille de l’image a pris de l’ampleur sur les sites Web au cours des deux dernières années, et ajoute de façon significative aux ballonnements du site Web. Passer d’images de différentes tailles à des images de différentes qualités pour économiser la bande passante à l’aide d’outils comme Picturefill et Adaptive Images peut aider, tout comme l’adoption de nouveaux formats d’images, tels que WebP et JPEG XR.
3. Contrôlez le chargement de CSS et JavaScript. Les sites réactifs combinent souvent le CSS de bureau et mobile et JavaScript en un seul ensemble de fichiers, mais cela peut avoir un impact sur les performances en fournissant du code inutile à la largeur qui est visualisée. Au lieu de cela, branchez la charge en utilisant JavaScript pour déterminer la largeur de la page qui est chargée, puis demandez des styles spécifiques et JavaScript qui sont spécifiques à cette largeur.
Surveillance des performances Web
Avant de commencer les méthodes d’optimisation ci-dessus, il est important d’établir d’abord une ligne de base de performance, et de surveiller systématiquement les performances de votre site Web tout au long de déterminer quels facteurs sont encore en cause les temps de charge. En prenant un point de vue mobile et performant à l’aide de Responsive Web Design, les sites Web peuvent maximiser leurs performances et l’expérience utilisateur sur tous les appareils.
