Découvrir le design responsive

Optimiser les performances du site

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Optimisez les performances du site pour tenir compte de la bande passante parfois limitée en connectivité mobile.

Transcription

Lors de l'élaboration de Design Responsive, les concepteurs sont souvent tellement préoccupés par la conception visuelle et puis les fonctionnalités du site qu'ils ont à réaliser, qu'ils vont négliger les aspects les plus critiques de la construction de ce site destiné à plusieurs périphériques, et c'est essentiellement la performance. Lors de la conception de sites pour des ordinateurs, nous avons été habitués à créer des sites qui sont conçus pour des connexions relativement cohérentes avec une large bande passante. Ce n'est pas du tout le cas pour les appareils mobiles. On doit faire face à un ensemble de problèmes de performance qui vont être totalement différents en fonction du type de connexion. Et puis il n'y a pas que le type de connexion. A partir du moment où notre utilisateur va avoir dans les mains un périphérique mobile, par nature, il va être en déplacement. Il peut être dans un ascenseur, et même s'il dispose d'une connexion à large bande, La performance du site que nous réalisons est donc très importante en terme de rapidité de connexion. Pour cela, il va falloir essentiellement s'attacher à produire un code qui soit léger. Nous allons utiliser des éléments qui respectent les standards du W3C au format maintenant HTML5. Nous allons supprimer tous les balisages exotiques ou redondants. Nous allons également maintenir des scripts et en particulier des scripts externes qui soit légers et qui soit très efficients. Et puis surtout, il va falloir réduire les requêtes HTTP. Qu'est ce que sont les requêtes HTTP ? À partir du moment où, sur un périphérique, on a besoin de charger un script, une feuille de style, des images, bref des éléments dont le site a besoin pour fonctionner, il va falloir aller chercher ces éléments sur le serveur et puis les rapatrier vers le navigateur. Il s'agit de requêtes serveur, de requêtes HTTP. Nous allons donc devoir minimiser le nombre de requêtes HTTP. Comment allons-nous faire pour réduire ce nombre de requêtes HTTP? Et bien par exemple, si nous avons plusieurs feuilles de style CSS, nous allons pouvoir combiner l'ensemble de ces feuilles de style dans une seule en utilisant une requête @media. On peut également travailler avec des scripts qui sont des scripts qui vont concaténer les différents éléments. Nous pouvons travailler par exemple avec Quick Concat-Enhance JavaScript. Et vous allez trouver ce script sur GitHub. Vous allez pouvoir le télécharger et également consulter toute la documentation sur son fonctionnement. Il s'agit d'un script qui va concaténer tous les éléments de manière à réduire leur taille, et donc à améliorer la rapidité avec laquelle ils vont être servis. Et puis, on peut minimiser les requêtes HTTP, mais on peut également les optimiser. Par exemple en utilisant pour les images à vocation décorative la balise background-image au lieu de la balise img. Nous allons utiliser au maximum les requêtes @media, et puis les fonctions CSS3, et puis également nous allons utiliser les sprites. Les sprites sont en fait des collections d'images qui sont concaténées dans un même fichier, et que l'on va pouvoir afficher, sachant qu'il n'y aura un chargement que d'une seule image, qui ensuite pourra présenter les différentes icônes dont on aura besoin. On va également optimiser les ressources externes, notamment en ce qui concerne les JavaScript. Vous n'avez pas toujours besoin de la totalité de la bibliothèque jQuery qui est un véritable couteau suisse, mais vous pouvez extraire directement les fonctionnalités JavaScript dont vous avez besoin, ce qui réduira les requêtes HTTP, et qui d'autre part permettra de charger le code de façon beaucoup plus rapide. Et puis enfin, toujours au niveau de l'optimisation des ressources externes, si par exemple on utilise certaines bibliothèques JavaScript comme Lettering, qui va nous permettre d'affiner notre typographie, et bien cette bibliothèque peut être tout à fait utile sur des écrans d'ordinateur mais ne pas avoir de fonction réelle sur les téléphones portables, auquel cas nous la chargerons uniquement en fonction du contexte pour lequel elle doit s'appliquer. Attachez-vous donc à optimiser vos ressources de façon à ce que votre site Responsive, non seulement fonctionne correctement sur les appareils mobiles, mais également performe sur ces mêmes appareils. il peut être dans il peut y avoir en fonction de son déplacement des affaiblissements de la bande passante.

Découvrir le design responsive

Abordez les principes du design responsive. Comprenez la problématique des écrans haute densité, analysez les grilles fluides, explorez les outils de prototypage, etc.

Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :6 sept. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !