Le design web : Les méthodes modernes de création de sites

Optimiser l'expérience utilisateur

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
L'optimisation de l'expérience est essentiellement centrée sur la facilité et la rapidité de consultation des informations proposées. Il s'agit de réduire le code des CSS et JavaScript.

Transcription

La phase d'optimisation de l'expérience utilisateur ne concerne pas la conception de cette expérience utilisateur. Si vous avez respecté les règles que nous avons évoquées dès le début de cette formation, normalement, votre site est déjà parfaitement optimisé pour l'utilisateur. Mais on peut toujours améliorer les choses, en particulier en réduisant le code qui va être livré et interprété par le navigateur. Ces codes sont de plus en plus copieux et les temps de chargement peuvent être affectés par la lecture de ces codes. Il y a donc nécessité de réduire ces codes, nous allons voir, avec quelques outils, rapidement comment on peut procéder. On peut commencer par réduire les feuilles de style CSS, qui peuvent se révéler très, très longues. Il suffit avec ici cssminifier.com, de saisir dans la case Input CSS le code de votre feuille de style que vous voulez réduire, et vous aurez ici à recopier le résultat réduit. On peut également réduire des Javascripts. Les Javascripts peuvent être des codes qui se révèlent assez longs à interpréter et à charger. Il y a donc un outil ici qui est JS Compress qui permet de la même façon de saisir un code ; on peut le faire par saisie, on peut le faire par Copier, on peut également ici télécharger notre fichier sur le serveur de manière à ce que cela aille plus vite, et puis nous aurons le résultat dans l'onglet Output. Il est également possible d'optimiser les images. Nous avons vu que les images, bien entendu, doivent être préparées et adaptées aux différents écrans, mais parfois, optimiser les images avec des logiciels graphiques peut se révéler un peu long si on le fait une par une, entre guillemets, à la main, avec un logiciel comme Photoshop. Avec des outils comme Smush it, on va pouvoir créer des outils qui vont être extrêmement rapides dans l'optimisation des images et nous faire gagner un temps précieux. Et puis tout ceci peut être optimisé, et en particulier pour tout ce qui va être Javascript, on peut utiliser des systèmes d'automatisation. Donc ici on peut en citer deux : il y a Grunt, et puis il y a également Gulp, qui fait à peu près la même chose. Ce sont des systèmes qui vont automatiser les tâches qui sont des tâches de réduction de codes et des tâches de compilation. En utilisant ces systèmes, vous allez gagner un temps précieux dans l'optimisation de votre code. Alors il n'y a pas que la réduction, il y a également le fait que l'on peut mettre des pages en cache. Ceci, c'est quelque chose qui se règle essentiellement avec des outils côté serveur, en particulier si vous utilisez des CMS. En mettant les pages en cache, vous accélérerez l'affichage de celles-ci dans le navigateur et l'expérience utilisateur s'en trouvera grandement améliorée. Enfin, il y a la possibilité, à partir du moment où vous allez avoir un certain nombre de médias qui vont être des médias lourds à charger, d'héberger ces médias sur ce qu'on appelle des serveurs dédiés, des CDN, Content Delivery Network qui sont des serveurs qui vont, d'une part, être optimisés pour du streaming et qui, d'autre part, vont se trouver au plus proche de l'adresse IP de l'utilisateur final. C'est-à-dire que votre site va être relayé sur des serveurs qui vont être très près de l'utilisateur et donc vont permettre de charger plus vite des contenus riches. Ces axes d'amélioration ne sont pas des remises en cause de la conception de votre site, c'est un affinage, c'est une amélioration, qui va permettre d'avoir un site qui soit encore meilleur et qui va proposer la meilleure expérience informationnelle à vos utilisateurs finaux.

Le design web : Les méthodes modernes de création de sites

Ayez une vue d’ensemble du processus de conception de sites web. Définissez la stratégie de contenu, le développement, la conception, les tests, pour finalement lancer votre site.

Aucun commentaire n´est disponible actuellement

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 !