Blogue stockvault programmer at the desk with programming languages colorful version181051 1024x616

Tout est une question d’expérience usager. Quand nous développons un site web, le plus gros défi est de faire en sorte que les utilisateurs naviguent à travers les différentes pages du site web. L’idée d’apporter un préchargement de certains contenus lui donnera une rapidité d’exécution dans ses tâches plus complexes afin de ne pas affecter l’expérience de l’utilisateur.

Voici les éléments qu’il est préférable de précharger

1 - Les images

Il vous est sûrement déjà arrivé de tomber sur une image qui se déroulait dans votre écran. Nous appelons ce phénomène, le téléchargement trop long. Il se survient lorsque l’utilisateur à une connexion lente ou quand l’image est trop riche en information. En préchargeant les images, nous arrivons à contourner les deux problèmes possibles avec une seule solution. L’image s’affichera comme voulu et l’utilisateur ne verra pas d’anomalies dans sa vitesse de progression à travers le site.

Un des exemples de nos réalisations se trouve à être le site web d’issa design. Nous préchargeons toutes les grandes images des sections importantes du site web. Quand l’utilisateur navigue à travers les bandes sur les quatre coins de la page d’accueil, la transition entre les pages se fait de façon fluide. L’usager n’a donc pas l’impression d’avoir changé de page, mais quand nous observons l’adresse URL, nous constatons que nous nous trouvons bel et bien sur une autre page.

2 – La typographie

Certaines familles de police peuvent être plus laborieuses à afficher à cause de leur complexité ou simplement parce qu’elles sont trop lourdes. Quand nous préchargeons celles-ci nous évitons d’avoir un effet non voulu de clipping. L’effet créé lorsque la police décide de s’afficher pour remplacer la typographie affichée par défaut dans votre navigateur préféré.

Bon pour les robots de Google

Lorsque le développement du site web est terminé et qu’il est prêt à être mis en ligne, il est important de tester la vitesse de téléchargement. Ce test vous permet de savoir quels fichiers vous devez optimiser et rajouter dans le préchargement du site web. Pour avoir ces résultats nous utilisons les outils « Test my Site » de « Think With Google ». Ils font un excellent portrait de l’accessibilité du site web.

Une page de préchargement

Une page d’accueil qui affiche le niveau de préchargement est une bonne idée pour garantir une expérience sans anomalies à l’utilisateur. Comme pour la plupart des sites web qui utilisent la technique de préchargement, il est important de montrer la progression du téléchargement du site web.

Le fait d’avoir une page de préchargement garanti une meilleure expérience pour l’utilisateur. Il est bien important de choisir quel type de fichier sera préchargé et de ne pas oublier de prioriser les images et la typographie. Toutefois, il faut prendre en compte que près de la moitié des visiteurs quitte la page si elle prend plus de trois secondes à s’afficher. Il faut donc déjouer cet autre problème en préchargeant d’autres contenus durant la navigation du visiteur.

Nicolas Trudel

Intégrateur Web

Sources :

http://www.issadesign.com/

https://developer.yahoo.com/performance/rules.html

https://testmysite.thinkwithgoogle.com/

https://drafts.csswg.org/css-fonts/#font-fetching-requirements